Add footer to showcase and blog pages (#2042)

Author: danhollick

src/app/blog/[slug]/page.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { NewsletterForm } from "@/components/newsletter-form";
 import GridContainer from "@/components/grid-container";
 import type { Metadata } from "next/types";
+import { FooterSitemap, FooterMeta } from "@/components/footer";
 
 type Props = {
   params: Promise<{
@@ -97,7 +98,7 @@ export default async function DocPage(props: Props) {
           </div>
         </div>
 
-        <div className="mb-46 max-xl:mx-auto max-xl:mt-16 max-xl:w-full max-xl:max-w-(--breakpoint-md)">
+        <div className="max-xl:mx-auto max-xl:mt-16 max-xl:w-full max-xl:max-w-(--breakpoint-md)">
           <GridContainer className="px-4 py-2 lg:px-2">
             <article className="prose prose-blog max-w-(--breakpoint-md)">
               <post.Component />
@@ -116,6 +117,10 @@ export default async function DocPage(props: Props) {
               </div>
             </section>
           </GridContainer>
+          <GridContainer className="mt-46">
+            <FooterSitemap className="*:first:border-l-0 *:last:border-r-0" />
+          </GridContainer>
+          <FooterMeta className="px-4 md:px-6 lg:px-8" />
         </div>
       </div>
     </>

src/app/blog/page.tsx

@@ -5,6 +5,7 @@ import type { Metadata } from "next";
 import Link from "next/link";
 import { Fragment } from "react";
 import { formatDate, getBlogPostBySlug, getBlogPostSlugs, nonNullable } from "./api";
+import { FooterSitemap, FooterMeta } from "@/components/footer";
 
 export const metadata: Metadata = {
   title: "Blog",
@@ -80,6 +81,10 @@ export default async function Blog() {
           </Fragment>
         ))}
       </div>
+      <GridContainer>
+        <FooterSitemap className="*:first:border-l-0 *:last:border-r-0" />
+      </GridContainer>
+      <FooterMeta className="px-4 md:px-6 lg:px-8" />
     </div>
   );
 }

src/app/showcase/page.tsx

@@ -1,3 +1,4 @@
+import { FooterSitemap, FooterMeta } from "@/components/footer";
 import GridContainer from "@/components/grid-container";
 import ShowcaseThumbnail from "@/components/showcase-thumbnail";
 import type { Metadata } from "next";
@@ -41,6 +42,10 @@ export default async function Showcase() {
           <ShowcaseThumbnail key={showcase.name} showcase={showcase} priority={siteIndex < 8} />
         ))}
       </div>
+      <GridContainer>
+        <FooterSitemap className="*:first:border-l-0 *:last:border-r-0" />
+      </GridContainer>
+      <FooterMeta className="px-4 md:px-6 lg:px-8" />
     </div>
   );
 }

src/components/showcase-thumbnail.tsx

@@ -67,7 +67,7 @@ export default function ShowcaseThumbnail({ showcase, priority = false }: { show
 
   return (
     <div
-      className="group dark:border-bg-white/10 relative border-x border-gray-950/5 transition-colors hover:bg-gray-950/5 max-sm:border-0 sm:max-lg:nth-[2n]:border-r-0 sm:max-lg:nth-[2n+1]:border-l-0 lg:max-xl:nth-[3n]:border-r-0 lg:max-xl:nth-[3n+1]:border-l-0 xl:nth-[4n]:border-r-0 xl:nth-[4n+1]:border-l-0"
+      className="group dark:border-bg-white/10 relative isolate border-x border-gray-950/5 transition-colors hover:bg-gray-950/5 max-sm:border-0 sm:max-lg:nth-[2n]:border-r-0 sm:max-lg:nth-[2n+1]:border-l-0 lg:max-xl:nth-[3n]:border-r-0 lg:max-xl:nth-[3n+1]:border-l-0 xl:nth-[4n]:border-r-0 xl:nth-[4n+1]:border-l-0 dark:border-white/10 dark:hover:bg-white/2.5"
       onMouseEnter={() => {
         if (state.current === "idle") {
           state.current = "playing";