Add the ability to add content below the header on main pages

Author: davepagurek

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -173,7 +173,7 @@ export const ReferenceDirectoryWithFilter = ({
   return (
     <div>
       <div class="h-0 overflow-visible">
-        <div class="content-grid-simple relative -top-[75px] h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg ">
+        <div class="content-grid-simple absolute -top-0 -left-0 -right-0 h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg ">
           <div class="text-body col-span-2 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
             <input
               type="text"

src/content/pages/en/reference.mdx

@@ -0,0 +1,12 @@
+---
+slug: reference
+title: Reference
+---
+
+
+{/* Most pages don't need this, but the reference page has a Filter thing that
+sticks out 75px from the header. This is a little hack to push everything down
+by that much so nothing gets cut off. */}
+<div class="h-[75px]" />
+
+Looking for p5.sound? Go to the <a href="https://archive.p5js.org/reference/#/libraries/p5.sound">p5.sound reference!</a>

src/layouts/BaseLayout.astro

@@ -9,6 +9,7 @@ import { getCurrentLocale, getUiTranslator } from "@i18n/utils";
 import { capitalize, getTopicInfo, type PageTopic } from "../pages/_utils";
 import "@styles/base.scss";
 import type { CollectionEntry } from "astro:content";
+import { getCollectionInLocaleWithFallbacks } from "@pages/_utils";
 
 interface Props {
   title: string;
@@ -33,7 +34,18 @@ const {
   mainContentParentClass = "mx-5 md:mx-lg mt-md",
   homepageConfig,
 } = Astro.props;
+
 const currentLocale = getCurrentLocale(Astro.url.pathname);
+
+const slug = title.toLowerCase().split(/\s+/).join('-');
+const pages = await getCollectionInLocaleWithFallbacks("pages", currentLocale);
+const headerPage = pages.find((page) => page.slug === slug);
+let HeaderContent: any = undefined;
+if (headerPage) {
+  const { Content } = await headerPage.render();
+  HeaderContent = Content;
+}
+
 const t = await getUiTranslator(currentLocale);
 const localizedTitle = t(title);
 const localizedSubtitle = subtitle
@@ -97,7 +109,14 @@ const headerTopic = topic
           )
         }
       </header>
-      <main id="main-content">
+      <main id="main-content" class="relative">
+        {HeaderContent && (
+          <div class="px-5 md:px-lg pt-sm pb-lg">
+            <div class="rendered-markdown">
+              <HeaderContent />
+            </div>
+          </div>
+        )}
         <div class={mainContentParentClass}>
           <slot />
         </div>