Implements design sharing with docs section

astro.config.mjs

@@ -3,6 +3,7 @@ import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
 import compressor from "astro-compressor";
 import starlight from "@astrojs/starlight";
+import { fileURLToPath } from 'node:url';
 
 // https://astro.build/config
 export default defineConfig({
@@ -67,6 +68,7 @@ export default defineConfig({
       components: {
         SiteTitle: "./src/components/ui/starlight/SiteTitle.astro",
         Head: "./src/components/ui/starlight/Head.astro",
+        Page: "./src/components/ui/starlight/Page.astro",
       },
       head: [
         {
@@ -100,5 +102,15 @@ export default defineConfig({
     server: {
       watch: { usePolling: true },
     },
+    resolve: {
+      alias: [
+        {
+          find: /^.*\/Page\.astro$/,
+          replacement: fileURLToPath(
+            new URL('./src/components/ui/starlight/Page.astro', import.meta.url)
+          ),
+        },
+      ],
+    },
   },
 });

package.json

@@ -15,9 +15,8 @@
     "@astrojs/starlight": "^0.24.1",
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
-    "astro": "^4.10.1",
+    "astro": "^4.10.3",
     "astro-compressor": "^0.4.1",
-    "@astrojs/vercel": "^7.6.0",
     "globby": "^14.0.1",
     "gsap": "^3.12.5",
     "html-minifier-terser": "^7.2.0",

src/components/sections/Navbar.astro

@@ -137,6 +137,9 @@ import BrandLogo from "@components/BrandLogo.astro";
         .querySelector("html")
         .classList.add(this.getOriginalAppearance());
 
+      // proxy for starlight
+      document.documentElement.dataset.theme = theme;
+
       setTimeout(() => {
         $resetStylesEl.remove();
       });

src/components/ui/starlight/Page.astro

@@ -0,0 +1,83 @@
+---
+
+// Built-in CSS styles.
+import '../../../../node_modules/@astrojs/starlight/style/props.css';
+import '../../../styles/starlight/reset.css';
+import '../../../../node_modules/@astrojs/starlight/style/shiki.css';
+import '../../../../node_modules/@astrojs/starlight/style/util.css';
+
+import MainLayout from "@/layouts/MainLayout.astro";
+import ContentPanel from "@astrojs/starlight/components/ContentPanel.astro";
+import DraftContentNotice from "@astrojs/starlight/components/DraftContentNotice.astro";
+import FallbackContentNotice from "@astrojs/starlight/components/FallbackContentNotice.astro";
+import Footer from "@astrojs/starlight/components/Footer.astro";
+import MarkdownContent from '@astrojs/starlight/components/MarkdownContent.astro';
+import PageTitle from "@astrojs/starlight/components/PageTitle.astro";
+
+
+// Remark component CSS (needs to override `MarkdownContent.astro`)
+import '../../../../node_modules/@astrojs/starlight/style/asides.css';
+
+// Important that this is the last import so it can override built-in styles.
+import 'virtual:starlight/user-css';
+
+import Hero from "@astrojs/starlight/components/Hero.astro";
+import Banner from "@astrojs/starlight/components/Banner.astro";
+import PageSidebar from "@astrojs/starlight/components/PageSidebar.astro";
+import TwoColumnContent from "@astrojs/starlight/components/TwoColumnContent.astro";
+import MobileMenuToggle from "@astrojs/starlight/components/MobileMenuToggle.astro";
+
+// disables page-sidebar (the right-side one)
+Astro.props.toc = false;
+
+const pagefindEnabled =
+  Astro.props.entry.slug !== '404' &&
+  !Astro.props.entry.slug.endsWith('/404') &&
+  Astro.props.entry.data.pagefind !== false;
+---
+{/* NOTE: Do not use any "id" attribute since it hangs up the application (keeps websocket connection open) */}
+
+<MainLayout>
+
+
+  <div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
+    <TwoColumnContent {...Astro.props }>
+      <!--<PageSidebar slot="right-sidebar" {...Astro.props} />-->
+      <main
+        data-pagefind-body={pagefindEnabled}
+        lang={Astro.props.entryMeta.lang}
+        dir={Astro.props.entryMeta.dir}
+      >
+        {/* TODO: Revisit how this logic flows. */}
+        <Banner {...Astro.props} />
+        {
+          Astro.props.entry.data.hero ? (
+            <ContentPanel {...Astro.props}>
+              <Hero {...Astro.props} />
+              <MarkdownContent {...Astro.props}>
+                <slot />
+              </MarkdownContent>
+              <Footer {...Astro.props} />
+            </ContentPanel>
+          ) : (
+            <>
+              <ContentPanel {...Astro.props}>
+                <PageTitle {...Astro.props} />
+                {Astro.props.entry.data.draft && <DraftContentNotice {...Astro.props} />}
+                {Astro.props.isFallback && <FallbackContentNotice {...Astro.props} />}
+              </ContentPanel>
+              <ContentPanel {...Astro.props}>
+                <MarkdownContent {...Astro.props}>
+                  <slot />
+                </MarkdownContent>
+                <Footer {...Astro.props} />
+              </ContentPanel>
+            </>
+          )
+        }
+      </main>
+    </TwoColumnContent>
+  </div>
+
+</MainLayout>
+

src/layouts/MainLayout.astro

@@ -21,7 +21,11 @@ interface Props {
 This is the main structure for the page.
 We set the language of the page to English and add classes for scrollbar and scroll behavior.
 -->
-<html lang={lang} class="scrollbar-hide lenis lenis-smooth scroll-pt-16">
+<html
+  lang={lang}
+  class="scrollbar-hide lenis lenis-smooth scroll-pt-16"
+  data-theme="dark"
+>
   <head>
     <!-- Adding metadata to the HTML document -->
     <Meta meta={meta} structuredData={structuredData} />
@@ -35,8 +39,12 @@ We set the language of the page to English and add classes for scrollbar and scr
           window.matchMedia("(prefers-color-scheme: dark)").matches)
       ) {
         document.documentElement.classList.add("dark");
+        // proxy for starlight
+        document.documentElement.dataset.theme = 'dark';
       } else {
         document.documentElement.classList.remove("dark");
+        // proxy for starlight
+        document.documentElement.dataset.theme = 'light';
       }
     </script>
     <script is:inline src="/scripts/vendor/lenis/lenis.js"></script>

src/styles/starlight.css

@@ -34,8 +34,8 @@
 }
 
 header {
-    backdrop-filter: blur(12px) !important;
-    background-color: var(--backdrop-color) !important;
+    /*backdrop-filter: blur(12px) !important;
+    background-color: var(--backdrop-color) !important;*/
 }
 
 select {
@@ -102,3 +102,98 @@ article.card {
     top: 13px;
     width: 0.875rem;
 }
+
+/* TODO: move to sth else later */
+html:not([data-has-toc]) {
+    --sl-mobile-toc-height: 0rem;
+}
+html:not([data-has-sidebar]) {
+    --sl-content-width: 67.5rem;
+}
+/* Add scroll padding to ensure anchor headings aren't obscured by nav */
+html {
+    /* Additional padding is needed to account for the mobile TOC */
+    scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height));
+}
+main {
+    padding-bottom: 3vh;
+}
+@media (min-width: 50em) {
+    [data-has-sidebar] {
+        --sl-content-inline-start: var(--sl-sidebar-width);
+    }
+}
+@media (min-width: 72em) {
+    html {
+        scroll-padding-top: calc(1.5rem + var(--sl-nav-height));
+    }
+}
+
+.page {
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.header {
+    z-index: var(--sl-z-index-navbar);
+    position: fixed;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    width: 100%;
+    height: var(--sl-nav-height);
+    border-bottom: 1px solid var(--sl-color-hairline-shade);
+    padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+    padding-inline-end: var(--sl-nav-pad-x);
+    background-color: var(--sl-color-bg-nav);
+}
+
+:global([data-has-sidebar]) .header {
+    padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));
+}
+
+.sidebar-pane {
+    visibility: var(--sl-sidebar-visibility, hidden);
+    position: fixed;
+    z-index: var(--sl-z-index-menu);
+    inset-block: var(--sl-nav-height) 0;
+    inset-inline-start: 0;
+    width: 100%;
+    background-color: var(--sl-color-black);
+    overflow-y: auto;
+}
+
+:global([aria-expanded='true']) ~ .sidebar-pane {
+    --sl-sidebar-visibility: visible;
+}
+
+.sidebar-content {
+    height: 100%;
+    min-height: max-content;
+    padding: 1rem var(--sl-sidebar-pad-x) 0;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+@media (min-width: 50rem) {
+    .sidebar-content::after {
+        content: '';
+        padding-bottom: 1px;
+    }
+}
+
+.main-frame {
+    padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+    padding-inline-start: var(--sl-content-inline-start);
+}
+
+@media (min-width: 50rem) {
+    :global([data-has-sidebar]) .header {
+        padding-inline-end: var(--sl-nav-pad-x);
+    }
+    .sidebar-pane {
+        --sl-sidebar-visibility: visible;
+        width: var(--sl-sidebar-width);
+        background-color: var(--sl-color-bg-sidebar);
+        border-inline-end: 1px solid var(--sl-color-hairline-shade);
+    }
+}

src/styles/starlight/reset.css

@@ -0,0 +1,12 @@
+html {
+    color-scheme: dark;
+}
+
+html[data-theme='light'] {
+    color-scheme: light;
+}
+
+body {
+    color: var(--sl-color-text);
+    background-color: var(--sl-color-bg);
+}