chore: Add lazy loading for images in layout components

amkayondo · amkayondo · commit 9a9f4e61609a · 2024-05-21T00:21:48.000+03:00
This commit adds the `Head` component from the `next/head` package to the layout components in the `2023` and `2024` apps. The `Head` component is used to add a `link` tag that preconnects to the Google Fonts API, improving the performance of font loading. Additionally, the commit updates the `next.config.js` file to fix a bug related to rewrites for the `/2024` route. The missing rewrites were causing incorrect redirection, and this commit adds the necessary rewrites to ensure proper redirection. Fixes #129
diff --git a/apps/2023/app/layout.tsx b/apps/2023/app/layout.tsx
@@ -3,6 +3,7 @@ import Navbar from "@repo/ui/components/shared/2023/layout/navbar";
 import "@repo/ui/globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import Head from "next/head";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -18,34 +19,20 @@ export default function RootLayout({
 }): JSX.Element {
   return (
     <html lang="en">
-      {/* <!-- Google tag (gtag.js) --> */}
-      <script
-        async
-        src="https://www.googletagmanager.com/gtag/js?id=G-TKTWYJW41C"
-      ></script>
-      <script>
-        {`
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
+      <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          // crossOrigin={true}
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+          rel="stylesheet"
+        ></link>
+      </Head>
 
-          gtag('config', 'G-TKTWYJW41C');
-          `}
-      </script>
-      <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link
-        rel="preconnect"
-        href="https://fonts.gstatic.com"
-        // crossOrigin={true}
-      />
-      <link
-        href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-        rel="stylesheet"
-      ></link>
-
-      <body
-        className={`flex min-h-screen flex-col justify-between`}
-      >
+      <body className={`flex min-h-screen flex-col justify-between`}>
         <Navbar />
         {children}
         <Footer />
diff --git a/apps/2024/app/layout.tsx b/apps/2024/app/layout.tsx
@@ -1,8 +1,9 @@
 import "@repo/ui/globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import Navbar from '@repo/ui/components/shared/2024/layout/Navbar'
+import Navbar from "@repo/ui/components/shared/2024/layout/Navbar";
 import Footer from "@repo/ui/components/shared/2023/layout/footer";
+import Head from "next/head";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,34 +20,34 @@ export default function RootLayout({
 }): JSX.Element {
   return (
     <html lang="en">
-      <script
-        async
-        src="https://www.googletagmanager.com/gtag/js?id=G-TKTWYJW41C"
-      ></script>
-      <script>
-        {`
+      <Head>
+        <script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=G-TKTWYJW41C"
+        ></script>
+        <script>
+          {`
           window.dataLayer = window.dataLayer || [];
           function gtag(){dataLayer.push(arguments);}
           gtag('js', new Date());
 
           gtag('config', 'G-TKTWYJW41C');
           `}
-      </script>
+        </script>
 
-      <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link
-        rel="preconnect"
-        href="https://fonts.gstatic.com"
-        // crossOrigin="true"
-      />
-      <link
-        href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-        rel="stylesheet"
-      ></link>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          rel="preconnect"
+          href="https://fonts.gstatic.com"
+          // crossOrigin="true"
+        />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+          rel="stylesheet"
+        ></link>
+      </Head>
 
-      <body
-        className={`flex min-h-screen flex-col justify-between`}
-      >
+      <body className={`flex min-h-screen flex-col justify-between`}>
         <Navbar />
         {children}
         <Footer />
diff --git a/apps/2024/next.config.js b/apps/2024/next.config.js
@@ -8,29 +8,29 @@ module.exports = {
     ignoreBuildErrors: true,
   },
   // fix the rewrites bug
-  async rewrites() {
+async rewrites() {
     return [
       {
         source: "/2023/:path*",
-        destination: `${process.env.NODE_ENV
+        destination: `${(process.env.NODE_ENV || "development")
           === "development" ? "http://localhost:3002" : "https://ug.pycon.org"
         }/:path*`,
       },
       {
         source: "/2023",
-        destination: `${process.env.NODE_ENV
+        destination: `${(process.env.NODE_ENV || "development")
           === "development" ? "http://localhost:3002" : "https://ug.pycon.org"
         }/:path*`,
       },
       {
         source: "/2024/:path*",
-        destination: `${process.env.NODE_ENV
+        destination: `${(process.env.NODE_ENV || "development")
           === "development" ? "http://localhost:3001" : "https://ug.pycon.org"
         }/:path*`,
       },
       {
         source: "/:path*",
-        destination: `${process.env.NODE_ENV
+        destination: `${(process.env.NODE_ENV || "development")
           === "development" ? "http://localhost:3001" : "https://ug.pycon.org"
         }/:path*`,
       },
diff --git a/packages/ui/src/components/shared/2023/layout/footer.tsx b/packages/ui/src/components/shared/2023/layout/footer.tsx
@@ -54,8 +54,8 @@ export default function Footer() {
                 Health and Safety Guidelines
               </Link>
             </p>
-            <p className="mb-4">
-              Our PyCon Uganda Editions:
+            <div>
+              <p className="mb-4">Our PyCon Uganda Editions:</p>
               <ul className="list-disc ml-6 space-y-2 mt-2">
                 <li className="text-sm text-blue-400 underline">
                   <Link href="/2024">PyCon Uganda 2024</Link>
@@ -64,7 +64,7 @@ export default function Footer() {
                   <Link href="/2023">PyCon Uganda 2023</Link>
                 </li>
               </ul>
-            </p>
+            </div>
           </div>
           <div className="my-10">
             <h6 className="mb-4 flex justify-center font-semibold uppercase md:justify-start">
