Merge pull request #202 from tomheaton/path-aliases-new

website: Add path aliases + some fixes

jsconfig.json

@@ -0,0 +1,8 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./",
+        "paths": {
+            "@/*": ["src/*"]
+        }
+    }
+}

package-lock.json

@@ -8,7 +8,6 @@
             "name": "udlbook-website",
             "version": "0.1.0",
             "dependencies": {
-                "@fortawesome/fontawesome-svg-core": "^6.5.2",
                 "react": "^18.3.1",
                 "react-dom": "^18.3.1",
                 "react-icons": "^5.2.1",
@@ -470,27 +469,6 @@
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
         },
-        "node_modules/@fortawesome/fontawesome-common-types": {
-            "version": "6.5.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
-            "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
-            "hasInstallScript": true,
-            "engines": {
-                "node": ">=6"
-            }
-        },
-        "node_modules/@fortawesome/fontawesome-svg-core": {
-            "version": "6.5.2",
-            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
-            "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
-            "hasInstallScript": true,
-            "dependencies": {
-                "@fortawesome/fontawesome-common-types": "6.5.2"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.14",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",

package.json

@@ -14,7 +14,6 @@
         "format": "prettier --write ."
     },
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.2.1",

src/App.jsx

@@ -1,11 +1,11 @@
+import Index from "@/pages";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
-import Home from "./pages";
 
 export default function App() {
     return (
         <Router>
             <Routes>
-                <Route exact path="/udlbook/" element={<Home />} />
+                <Route exact path="/udlbook" element={<Index />} />
             </Routes>
         </Router>
     );

src/components/ButtonElement.jsx

@@ -1,23 +0,0 @@
-import { Link } from "react-scroll";
-import styled from "styled-components";
-
-export const Button = styled(Link)`
-    border-radius: 50px;
-    background: ${({ primary }) => (primary ? "#01BF71" : "#010606")};
-    white-space: nowrap;
-    padding: ${({ big }) => (big ? "14px 48px" : "12px 30px")};
-    color: ${({ dark }) => (dark ? "#010106" : "#fff")};
-    font-size: $ ${({ fontBig }) => (fontBig ? "20px" : "16px")};
-    outline: none;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.2s ease-in-out;
-
-    &:hover {
-        transition: all 0.2s ease-in-out;
-        background: ${({ primary }) => (primary ? "#fff" : "#01BF71")};
-    }
-`;

src/components/Footer/index.jsx

@@ -1,6 +1,3 @@
-import { FaLinkedin } from "react-icons/fa";
-import { FaSquareXTwitter } from "react-icons/fa6";
-import { animateScroll as scroll } from "react-scroll";
 import {
     FooterContainer,
     FooterWrap,
@@ -10,7 +7,10 @@ import {
     SocialMedia,
     SocialMediaWrap,
     WebsiteRights,
-} from "./FooterElements";
+} from "@/components/Footer/FooterElements";
+import { FaLinkedin } from "react-icons/fa";
+import { FaSquareXTwitter } from "react-icons/fa6";
+import { animateScroll as scroll } from "react-scroll";
 
 const images = [
     "https://freepik.com/free-vector/hand-coding-concept-illustration_21864184.htm#query=coding&position=17&from_view=search&track=sph&uuid=5896d847-38e4-4cb9-8fe1-103041c7c933",
@@ -43,7 +43,7 @@ export default function Footer() {
                 <FooterWrap>
                     <SocialMedia>
                         <SocialMediaWrap>
-                            <SocialLogo to="/udlbook/" onClick={toggleHome}>
+                            <SocialLogo to="/udlbook" onClick={toggleHome}>
                                 Understanding Deep Learning
                             </SocialLogo>
                             <WebsiteRights>

src/components/HeroSection/HeroElements.jsx

@@ -61,12 +61,16 @@ export const HeroBtnWrapper = styled.div`
 
 export const HeroRow = styled.div`
     display: grid;
-    grid-auto-columns: minmax(auto, 1fr);
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
     align-items: top;
-    grid-template-areas:  'col1 col2' };
+    grid-template-areas: "col1 col2";
 
-    @media screen and (max-width: 768px){
+    @media screen and (max-width: 768px) {
-        grid-template-areas: 'col2' 'col1';
+        grid-template-columns: 1fr;
+        grid-template-areas:
+            "col1"
+            "col2";
     }
 `;
 
@@ -74,7 +78,6 @@ export const HeroNewsItem = styled.div`
     margin-left: 4px;
     color: #000000;
     font-size: 16px;
-    /* line-height: 16px; */
     margin-bottom: 16px;
     display: flex;
     justify-content: start;
@@ -111,12 +114,16 @@ export const HeroColumn1 = styled.div`
     margin-left: 12px;
     margin-top: 60px;
     padding: 10px 15px;
-    padding: 0 15px;
     grid-area: col1;
-    align-items: left;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
+    @media screen and (max-width: 768px) {
+        margin-left: 0;
+        margin-top: 20px;
+        padding: 0;
+    }
 `;
 
 export const HeroColumn2 = styled.div`
@@ -126,6 +133,10 @@ export const HeroColumn2 = styled.div`
     display: flex;
     align-items: center;
     flex-direction: column;
+
+    @media screen and (max-width: 768px) {
+        padding: 0;
+    }
 `;
 
 export const TextWrapper = styled.div`

src/components/HeroSection/index.jsx

@@ -1,4 +1,3 @@
-import img from "../../images/F23.prince.learning.turquoise.jpg";
 import {
     HeroCitationBlock,
     HeroCitationTitle,
@@ -18,7 +17,8 @@ import {
     HeroRow,
     Img,
     UDLLink,
-} from "./HeroElements";
+} from "@/components/HeroSection/HeroElements";
+import img from "@/images/F23.prince.learning.turquoise.jpg";
 
 export default function HeroSection() {
     const citation = `

src/components/Instructors/index.jsx

@@ -1,4 +1,3 @@
-import img from "../../images/instructor.svg";
 import {
     Column1,
     Column2,
@@ -14,7 +13,8 @@ import {
     Subtitle,
     TextWrapper,
     TopLine,
-} from "./InstructorsElements";
+} from "@/components/Instructors/InstructorsElements";
+import img from "@/images/instructor.svg";
 
 const fullSlides = [
     {

src/components/Media/index.jsx

@@ -1,4 +1,3 @@
-import img from "../../images/media.svg";
 import {
     Column1,
     Column2,
@@ -15,7 +14,8 @@ import {
     TextWrapper,
     TopLine,
     VideoFrame,
-} from "./MediaElements";
+} from "@/components/Media/MediaElements";
+import img from "@/images/media.svg";
 
 const interviews = [
     {

src/components/More/index.jsx

@@ -1,4 +1,3 @@
-import img from "../../images/more.svg";
 import {
     Column1,
     Column2,
@@ -16,7 +15,8 @@ import {
     Subtitle,
     TextWrapper,
     TopLine,
-} from "./MoreElements";
+} from "@/components/More/MoreElements";
+import img from "@/images/more.svg";
 
 const book = [
     {

src/components/Navbar/index.jsx

@@ -1,7 +1,3 @@
-import { useEffect, useState } from "react";
-import { FaBars } from "react-icons/fa";
-import { IconContext } from "react-icons/lib";
-import { animateScroll as scroll } from "react-scroll";
 import {
     MobileIcon,
     Nav,
@@ -10,9 +6,13 @@ import {
     NavLinks,
     NavLogo,
     NavMenu,
-} from "./NavbarElements";
+} from "@/components/NavBar/NavbarElements";
+import { useEffect, useState } from "react";
+import { FaBars } from "react-icons/fa";
+import { IconContext } from "react-icons/lib";
+import { animateScroll as scroll } from "react-scroll";
 
-export default function NavBar({ toggle }) {
+export default function Navbar({ toggle }) {
     const [scrollNav, setScrollNav] = useState(false);
 
     useEffect(() => {

src/components/Notebooks/index.jsx

@@ -1,4 +1,3 @@
-import img from "../../images/coding.svg";
 import {
     Column1,
     Column2,
@@ -12,7 +11,8 @@ import {
     Subtitle,
     TextWrapper,
     TopLine,
-} from "./NotebookElements";
+} from "@/components/Notebooks/NotebookElements";
+import img from "@/images/coding.svg";
 
 const notebooks = [
     {

src/components/ScrollToTop.jsx

@@ -1,12 +0,0 @@
-import { useEffect } from "react";
-import { useLocation } from "react-router-dom";
-
-export default function ScrollToTop() {
-    const { pathname } = useLocation();
-
-    useEffect(() => {
-        window.scrollTo(0, 0, { behavior: "smooth" });
-    }, [pathname]);
-
-    return null;
-}

src/components/Sidebar/index.jsx

@@ -5,7 +5,7 @@ import {
     SidebarLink,
     SidebarMenu,
     SidebarWrapper,
-} from "./SidebarElements";
+} from "@/components/Sidebar/SidebarElements";
 
 export default function Sidebar({ isOpen, toggle }) {
     return (

src/index.jsx

@@ -1,7 +1,7 @@
+import App from "@/App";
+import "@/styles/globals.css";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./styles/globals.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>

src/pages/index.jsx

@@ -1,14 +1,14 @@
+import Footer from "@/components/Footer";
+import HeroSection from "@/components/HeroSection";
+import InstructorsSection from "@/components/Instructors";
+import MediaSection from "@/components/Media";
+import MoreSection from "@/components/More";
+import Navbar from "@/components/Navbar";
+import NotebookSection from "@/components/Notebooks";
+import Sidebar from "@/components/Sidebar";
 import { useState } from "react";
-import Footer from "../components/Footer";
-import HeroSection from "../components/HeroSection";
-import InstructorsSection from "../components/Instructors";
-import MediaSection from "../components/Media";
-import MoreSection from "../components/More";
-import Navbar from "../components/NavBar";
-import NotebookSection from "../components/Notebooks";
-import Sidebar from "../components/Sidebar";
 
-export default function Home() {
+export default function Index() {
     const [isOpen, setIsOpen] = useState(false);
 
     const toggle = () => {

src/pages/signin.jsx

@@ -1,11 +0,0 @@
-import ScrollToTop from "../components/ScrollToTop";
-import SignIn from "../components/SignIn";
-
-export default function SigninPage() {
-    return (
-        <>
-            <ScrollToTop />
-            <SignIn />
-        </>
-    );
-}

vite.config.js

@@ -1,9 +1,15 @@
 import react from "@vitejs/plugin-react-swc";
+import path from "node:path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [react()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
     server: {
         port: 3000,
     },