Reposition mdx footnotes to be above the footer elements in blog post…

…s (#3222)

## Description

Fixes #3221 

Before/after:
<img width="2672" alt="image"
src="https://github.com/user-attachments/assets/c97c8d83-ad21-47b1-bd7c-23360d2b2fca">


## Checklist
- [x] I have read and understood the [WATcloud
Guidelines](https://cloud.watonomous.ca/docs/community-docs/watcloud/guidelines)
- [x] I have performed a self-review of my code

components/blog-post.tsx

@@ -6,14 +6,13 @@ import {
     PopoverTrigger,
 } from "@/components/ui/popover";
 import { userProfiles, websiteConfig } from '@/lib/data';
-import { cn, dayjsTz } from '@/lib/utils';
+import { dayjsTz } from '@/lib/utils';
 import { GithubIcon, LinkIcon, LinkedinIcon, MailIcon, XIcon } from 'lucide-react';
 import { useRouter } from 'next/router';
 import { Link, useConfig } from "nextra-theme-docs";
 import React from 'react';
 import { SubscribeDialog } from './blog';
 import Picture from './picture';
-import { Separator } from './ui/separator';
 
 // Reference for styling: https://github.com/vercel/turbo/blob/22585c9dcc23eb010ab01f177394358af03210d7/docs/pages/blog/turbo-1-10-0.mdx
 
@@ -170,9 +169,8 @@ export function BlogPostHeader() {
 
 export function BlogPostFooter() {
     return <>
-        <Separator className="my-8" />
         <SubscribeDialog />
-        <Separator className="my-8" />
+        <div className="mt-16"/>
         <CommentSection />
     </>
 }

components/blog.tsx

@@ -168,7 +168,7 @@ export function SubscribeDialog() {
     }
 
     return (
-        <div className="py-4 rounded-lg">
+        <div className="p-4 ring-1 ring-ring rounded-md">
             <h2 className="text-lg font-semibold">{"Subscribe to WATcloud's blog"}</h2>
             <p className="text-sm mt-1">{"Get the latest posts delivered right to your inbox. We won't spam you!"}</p>
             <Form {...form}>

components/giscus-comments.tsx

@@ -1,7 +1,6 @@
 import Giscus from "@giscus/react";
 import websiteConfig from "@/build/fixtures/website-config.json";
 import { useTheme } from "nextra-theme-docs";
-import { Separator } from "./ui/separator";
 
 export default function CommentSection() {
   const { theme } = useTheme();
@@ -18,7 +17,7 @@ export default function CommentSection() {
   const category = websiteConfig.category;
 
   return (
-    <>
+    <div>
       {repo && repo_id && category && category_id ? (
         <Giscus
           repo={repo as `${string}/${string}`}
@@ -33,6 +32,6 @@ export default function CommentSection() {
           theme={giscusTheme}
         />
       ) : null}
-    </>
+    </div>
   );
 }

next.config.js

@@ -22,7 +22,7 @@ module.exports = {
       'app',
       'components',
       'lib',
-      'theme.config.jsx',
+      'theme.config.tsx',
       "tailwind.config.js",
       "next.config.js",
       "postcss.config.js",
@@ -33,7 +33,7 @@ module.exports = {
 // Add Nextra config
 const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
-  themeConfig: './theme.config.jsx',
+  themeConfig: './theme.config.tsx',
   latex: true, // LaTeX support: https://nextra.site/docs/guide/advanced/latex
 });
 

pages/blog.mdx

@@ -3,5 +3,4 @@ import { Separator } from "@/components/ui/separator";
 
 <BlogHeader />
 <BlogIndex />
-<Separator className="my-8" />
 <SubscribeDialog />

pages/blog/what-is-watcloud.mdx

@@ -16,10 +16,6 @@ notify_subscribers: true
 hidden: false
 ---
 
-import { BlogPostHeader, BlogPostFooter } from '@/components/blog-post'
-
-<BlogPostHeader />
-
 WATcloud's mission is to make computing resources available to everyone in an easy and fair way.
 Over the past four years, we have continuously iterated on both the hardware and software that comprise our cluster.
 On the hardware side, WATcloud consists of servers, switches, IP-KVMs[^ip-kvm], and other peripherals that form our compute cluster.
@@ -52,5 +48,3 @@ This blog post serves as a preview for what's to come. If you'd like to stay up-
 please subscribe to our newsletter below.
 
 Do you have a suggestion for a blog post topic? Please let us know below in the comment section or reach out to us on [Discord](https://discord.gg/hEX5Q4KDYN).
-
-<BlogPostFooter />

theme.config.jsx → theme.config.tsx

@@ -2,6 +2,8 @@ import { DiscordIcon } from 'nextra/icons'
 import { Bot, Heart, Code2 } from "lucide-react"
 import websiteConfig from '@/build/fixtures/website-config.json'
 import { Link } from "nextra-theme-docs"
+import { BlogPostHeader, BlogPostFooter } from '@/components/blog-post'
+import { useRouter } from 'next/router'
 
 const logo = (
   // This logo is designed in Sketch, exported as SVG, and then manually adjusted based on
@@ -115,6 +117,21 @@ const themeConfig = {
   },
   toc: {
     backToTop: true,
+  },
+  main: function Main({ children }: { children: React.ReactNode }) {
+    const router = useRouter();
+    const isBlogPost = router.pathname.startsWith("/blog/");
+
+    const header = isBlogPost && <BlogPostHeader />;
+    const footer = isBlogPost && <><BlogPostFooter /><div className="mt-16"/></>;
+
+    return (
+      <>
+        {header}
+        {children}
+        {footer}
+      </>
+    );
   }
 }