feat: enhance footer and MDX components with fluid layout and typography improvements

- Updated `Footer` component to support a fluid layout option, allowing it to use the parent column width.
- Refactored `MDXProseWrapper` and `MDXProseSheetWrapper` to apply a custom font family for better typography.
- Removed the deprecated `TinyAnalytics` component and adjusted styles accordingly.
- Improved global CSS for prose font variables and Tinylytics icons.

Author: RPDeshaies

src/components/client/MDX/MDX.tsx

@@ -36,10 +36,24 @@ w-full max-w-full
 `;
 
 export function MDXProseWrapper(props: { children: React.ReactNode }) {
-  return <div className={proseClassName}>{props.children}</div>;
+  return (
+    <div
+      className={proseClassName}
+      style={{ fontFamily: "var(--prose-body-font-family)" }}
+    >
+      {props.children}
+    </div>
+  );
 }
 export function MDXProseSheetWrapper(props: { children: React.ReactNode }) {
-  return <div className={proseClassName}>{props.children}</div>;
+  return (
+    <div
+      className={proseClassName}
+      style={{ fontFamily: "var(--prose-body-font-family)" }}
+    >
+      {props.children}
+    </div>
+  );
 }
 
 export function Fields(props: { children: React.ReactNode }) {

src/components/server/Footer/Footer.tsx

@@ -12,6 +12,7 @@ export function Footer(props: {
   theme?: ThemeType;
   size?: UI.ContainerProps["size"];
   maxWidth?: UI.ContainerProps["maxWidth"];
+  fluid?: boolean; // when true, use parent column width instead of centered container
 }) {
   const [themeColorScheme, setThemeColorScheme] =
     useState<ThemeColorSchemeType>("system");
@@ -111,19 +112,54 @@ export function Footer(props: {
     }
   }
 
-  return (
-    <Theme {...props.theme} hasBackground={false} className="min-h-0">
+  const Wrapper = ({ children }: { children: any }) => {
+    if (props.fluid) {
+      return <div className="px-6 md:px-9">{children}</div>;
+    }
+    return (
       <UI.Container
-        px={{
-          initial: "6",
-          md: "9",
-        }}
+        px={{ initial: "6", md: "9" }}
         size={props.size || "4"}
         maxWidth={props.maxWidth || undefined}
       >
+        {children}
+      </UI.Container>
+    );
+  };
+
+  return (
+    <Theme
+      {...props.theme}
+      hasBackground={false}
+      className="min-h-0"
+    >
+      <Wrapper>
         <div className="my-[10rem]">
           <MDXDivider />
         </div>
+        {/* Tinylytics centered at top of footer */}
+        <div
+          className="mb-6 flex w-full justify-center px-4 md:px-0"
+          style={{ fontFamily: "var(--default-font-family)" }}
+        >
+          <div
+            aria-label="Page analytics and like"
+            className="inline-flex items-center gap-2 rounded-full border border-black/10 dark:border-white/10 bg-white/80 dark:bg-neutral-900/80 backdrop-blur px-3.5 py-2 shadow-lg"
+          >
+            <span
+              className="views-chip inline-flex items-center rounded-full border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/10 px-3 py-1.5 text-xs leading-none text-neutral-800 dark:text-neutral-200"
+            >
+              <span className="tinylytics_hits tabular-nums">–</span>
+            </span>
+            <button
+              className="tinylytics_kudos tabular-nums cursor-pointer relative inline-flex items-center rounded-full bg-gradient-to-r from-rose-500 to-orange-500 px-3 py-1.5 text-white text-xs leading-none font-medium shadow hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-neutral-900"
+              type="button"
+              aria-label="Like this page"
+            >
+              -
+            </button>
+          </div>
+        </div>
         <div className="flex items-start justify-between gap-9">
           {Object.entries(links).map(([category, links]) => (
             <div className="flex flex-col items-start gap-2" key={category}>
@@ -137,12 +173,13 @@ export function Footer(props: {
           ))}
         </div>
 
-        <div className="my-[5rem] flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2">
+        <div className="my-[5rem] flex flex-col items-center justify-center gap-3 text-center md:flex-row md:items-center md:justify-between md:gap-2 md:text-left">
+          <div className="flex flex-wrap items-center justify-center gap-2">
             <a href="https://www.netlify.com" target="_blank">
               <img
                 src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg"
                 alt="Deploys by Netlify"
+                className="h-6 w-auto"
               />
             </a>
             <Text>
@@ -152,9 +189,11 @@ export function Footer(props: {
               </Link>
             </Text>
           </div>
-          <div>{renderThemeToggleButton()}</div>
+          <div className="flex justify-center">{renderThemeToggleButton()}</div>
         </div>
-      </UI.Container>
+
+        
+      </Wrapper>
     </Theme>
   );
 

src/components/server/Header/Header.tsx

@@ -34,9 +34,6 @@ import { wait } from "../../../domains/utils/wait";
 import { getSurfaceStyle } from "../../client/Surface/getSurfaceStyle";
 import { NameLogo } from "./Logo";
 
-const fontFamily =
-  "-apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue', 'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
-
 export function Header(props: { theme: ThemeType; pathname: string }) {
   const [open, setOpen] = useState(false);
 
@@ -191,7 +188,6 @@ export function Header(props: { theme: ThemeType; pathname: string }) {
         className="bg-transparent hover:bg-(--accent-3) dark:hover:bg-(--accent-6)"
         color="gray"
         highContrast
-        style={{ fontFamily }}
       >
         {params.icon}
       </Button>
@@ -202,7 +198,6 @@ export function Header(props: { theme: ThemeType; pathname: string }) {
         className="bg-transparent hover:bg-(--accent-3) dark:hover:bg-(--accent-6)"
         color="gray"
         highContrast
-        style={{ fontFamily }}
       >
         {params.label}
       </Button>

src/components/server/TinyAnalytics/TinyAnalytics.astro

@@ -12,7 +12,6 @@ import { Colors } from "../domains/colors/colors";
 import { DLAstro } from "../domains/dl/DLAstro";
 import { getTheme, type ThemeType } from "../domains/utils/getTheme";
 import PostHog from "../components/server/PostHog/PostHog.astro";
-import TinyAnalytics from "../components/server/TinyAnalytics/TinyAnalytics.astro";
 import "../styles/global.css";
 import { UI } from "../components/ui/ui";
 import { AppUrl } from "../domains/app-url/AppUrl";
@@ -223,30 +222,13 @@ const ogImageUrl = AppUrl.ogImage({
       </UI.Container>
 
       <PostHog />
-      <TinyAnalytics />
     </body>
 
-    <style
-      is:global
-      define:vars={{
-        headingFont,
-        bodyFont,
-      }}
-    >
+    <style is:global define:vars={{ headingFont, bodyFont }}>
+      /* Prose-only custom variables. Do not override Radix font variables. */
       .radix-themes {
-        /* FONTS  */
-        /* Your custom heading font */
-        --heading-font-family: var(--headingFont);
-        /* Your custom default font */
-        --default-font-family: var(--bodyFont);
-        /* Your custom font for <Code> components */
-        --code-font-family: var(--bodyFont);
-        /* Your custom font for <Strong> components */
-        --strong-font-family: var(--bodyFont);
-        /* Your custom font for <Em> components */
-        --em-font-family: var(--bodyFont);
-        /* Your custom font for <Quote> components */
-        --quote-font-family: var(--bodyFont);
+        --prose-body-font-family: var(--bodyFont);
+        --prose-heading-font-family: var(--headingFont);
 
         /* CURSORS */
         --cursor-button: pointer;

src/layouts/Layout.astro

@@ -139,7 +139,7 @@ export function ResourceRoute(props: {
                 </div>
               </div>
             </div>
-            <div className="flex flex-col min-w-0">
+            <div className="flex flex-col min-w-0 relative">
               <div className="block w-full">
                 <div className="flex flex-col">
                   <div className="mb-6">{renderPatreonBanner()}</div>
@@ -161,24 +161,24 @@ export function ResourceRoute(props: {
                     color="gray"
                   />
                   <div className="mb-6 flex flex-col gap-2 sm:flex-row">
-                    <UI.Button
+                  <UI.Button
                       variant="soft"
                       color="gray"
-                      size="1"
+                      size="3"
                       radius="full"
                       onClick={handleCopyMarkdown}
-                      className="flex items-center gap-2"
+                      className="flex w-full items-center justify-center gap-2 sm:w-auto"
                     >
                       <Copy size={"1em"} />
                       Copy as Markdown
                     </UI.Button>
-                    <UI.Button
+                  <UI.Button
                       variant="soft"
                       color="gray"
-                      size="1"
+                      size="3"
                       radius="full"
                       onClick={handleDownloadMarkdown}
-                      className="flex items-center gap-2"
+                      className="flex w-full items-center justify-center gap-2 sm:w-auto"
                     >
                       <DownloadCloudIcon size={"1em"} />
                       Download as Markdown
@@ -190,14 +190,14 @@ export function ResourceRoute(props: {
                       })}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="flex items-center gap-2 no-underline"
+                      className="flex w-full items-center gap-2 no-underline sm:w-auto"
                     >
                       <UI.Button
                         variant="soft"
                         color="gray"
-                        size="1"
+                        size="3"
                         radius="full"
-                        className="flex items-center gap-2"
+                        className="flex w-full items-center justify-center gap-2 sm:w-auto"
                       >
                         <GitHubLogoIcon width={"1.2em"} height={"1.2em"} />
                         Edit on GitHub
@@ -218,7 +218,7 @@ export function ResourceRoute(props: {
                 {renderPreviousAndNextButtons()}
                 {renderEditButton()}
               </div>
-              <Footer ogImageUrl={ogImageUrl} />
+              <Footer ogImageUrl={ogImageUrl} fluid />
             </div>
           </div>
         </div>
@@ -281,7 +281,7 @@ export function ResourceRoute(props: {
 
   function renderPatreonBanner() {
     return (
-      <UI.Card size="2" variant="ghost">
+      <UI.Card size="2" variant="ghost" style={{ fontFamily: "var(--default-font-family)" }}>
         <div className="flex flex-col items-center justify-between gap-4 p-4 sm:flex-row">
           <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-center">
             <div className="relative">
@@ -456,7 +456,11 @@ export function ResourceRoute(props: {
 
   function renderSidebar(p: { withImage?: boolean }) {
     return (
-      <UI.Card variant="surface" className="flex flex-col gap-4">
+      <UI.Card
+        variant="surface"
+        className="flex flex-col gap-4"
+        style={{ fontFamily: "var(--default-font-family)" }}
+      >
         <div className="flex flex-col gap-5">
           {props.image && p.withImage && (
             <div className="">