♻️ Chore: Docs

www/docs/astro.config.mjs

@@ -1,37 +1,81 @@
-import { defineConfig } from 'astro/config'
-import starlight from '@astrojs/starlight'
+import { defineConfig } from "astro/config";
+import starlight from "@astrojs/starlight";
 
 // https://astro.build/config
+
+const site = "https://docs.astro-studiocms.xyz/";
+
 export default defineConfig({
+  site,
   integrations: [
     starlight({
-      title: 'My Docs',
+      title: "Astro StudioCMS",
+      description:
+        "A dedicated CMS for Astro Studio. Built from the ground up by the Astro community.",
+      favicon: "/logo-dark.svg",
+      logo: {
+        dark: "../assets/logo-light.svg",
+        light: "../assets/logo-dark.svg",
+      },
       social: {
-        github: 'https://github.com/withastro/starlight',
+        github: "https://github.com/astrolicious/studiocms",
+      },
+      customCss: [
+        // Relative path to your custom CSS file
+        "./src/styles/custom.css",
+      ],
+      editLink: {
+        baseUrl: "https://github.com/astrolicious/studiocms/tree/main/www/docs",
       },
       head: [
         {
-          tag: 'script',
+          tag: "script",
           attrs: {
-            src: 'https://analytics.astro-studiocms.xyz/script.js',
-            'data-website-id': 'd9823e76-3219-4f86-9a09-0cb763ebfd19',
+            src: "https://analytics.astro-studiocms.xyz/script.js",
+            "data-website-id": "d9823e76-3219-4f86-9a09-0cb763ebfd19",
             defer: true,
           },
         },
+        {
+          tag: "meta",
+          attrs: {
+            property: "og:image",
+            content: site + "og.png?v=1",
+          },
+        },
+        {
+          tag: "meta",
+          attrs: {
+            property: "twitter:image",
+            content: site + "og.png?v=1",
+          },
+        },
       ],
       sidebar: [
         {
-          label: 'Guides',
+          label: "Start Here",
           items: [
-            // Each item here is one entry in the navigation menu.
-            { label: 'Example Guide', link: '/guides/example/' },
+            {
+              label: "Getting Started with Astro StudioCMS",
+              link: "/start-here/getting-started",
+            },
+            {
+              label: "Environment Variables",
+              link: "/start-here/environment-variables",
+            },
+            {
+              label: "Why Astro StudioCMS?",
+              link: "/start-here/why-studiocms",
+            },
+            { label: "Gallery", link: "/start-here/gallery" },
           ],
         },
         {
-          label: 'Reference',
-          autogenerate: { directory: 'reference' },
+          label: "Reference",
+          autogenerate: { directory: "reference" },
         },
       ],
+      lastUpdated: true,
     }),
   ],
-})
+});

www/docs/package.json

@@ -10,10 +10,11 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.22.0",
-    "astro": "^4.3.5",
-    "sharp": "^0.33.0",
-    "@astrojs/check": "^0.5.10",
-    "typescript": "^5.4.3"
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/starlight": "^0.22.3",
+    "@shoelace-style/shoelace": "^2.15.0",
+    "astro": "^4.8.4",
+    "sharp": "^0.33.3",
+    "typescript": "^5.4.5"
   }
 }

www/docs/src/assets/index.ts

@@ -0,0 +1,35 @@
+import LoginPageDark from "./LoginPageDark.png";
+import LoginPageLight from "./LoginPageLight.png";
+import CreateNewPageDark from "./CreateNewPageDark.png";
+import CreateNewPageLight1 from "./CreateNewPageLight-1.png";
+import CreateNewPageLight2 from "./CreateNewPageLight-2.png";
+import DashboardDark from "./DashboardDark.png";
+import DashboardLight from "./DashboardLight.png";
+import EditPageDark1 from "./EditPageDark-1.png";
+import EditPageDark2 from "./EditPageDark-2.png";
+import EditPageLight1 from "./EditPageLight-1.png";
+import EditPageLight2 from "./EditPageLight-2.png";
+import SiteAdminsDark from "./SiteAdminsDark.png";
+import SiteConfigDark from "./SiteConfigDark.png";
+import UserProfileDark from "./UserProfileDark.png";
+import UserProfileLight from "./UserProfileLight.png";
+
+const galleryImages = [
+  { imageMetadata:LoginPageDark, alt: "Login Page Dark" },
+  { imageMetadata:LoginPageLight, alt: "Login Page Light" },
+  { imageMetadata:CreateNewPageDark, alt: "Create New Page Dark" },
+  { imageMetadata:CreateNewPageLight1, alt: "Create New Page Light 1" },
+  { imageMetadata:CreateNewPageLight2, alt: "Create New Page Light 2" },
+  { imageMetadata:DashboardDark, alt: "Dashboard Dark" },
+  { imageMetadata:DashboardLight, alt: "Dashboard Light" },
+  { imageMetadata:EditPageDark1, alt: "Edit Page Dark 1" },
+  { imageMetadata:EditPageDark2, alt: "Edit Page Dark 2" },
+  { imageMetadata:EditPageLight1, alt: "Edit Page Light 1" },
+  { imageMetadata:EditPageLight2, alt: "Edit Page Light 2" },
+  { imageMetadata:SiteAdminsDark, alt: "Site Admins Dark" },
+  { imageMetadata:SiteConfigDark, alt: "Site Config Dark" },
+  { imageMetadata:UserProfileDark, alt: "User Profile Dark" },
+  { imageMetadata:UserProfileLight, alt: "User Profile Light" },
+];
+
+export default galleryImages;

www/docs/src/components/Gallery.astro

@@ -0,0 +1,117 @@
+---
+//TODO: Make this component reusable
+import { Image } from "astro:assets";
+
+import galleryImages from "../assets/index.ts"
+const galleryImagesMinusFirst = galleryImages.slice(1)
+---
+
+<sl-carousel class="carousel-thumbnails" navigation loop>
+  {
+    galleryImages.map((image, index) => (
+      <sl-carousel-item id={index}>
+        <Image
+          src={image.imageMetadata}
+          alt={image.alt}
+          width="1280"
+          height="1900"
+        />
+      </sl-carousel-item>
+    ))
+  }
+</sl-carousel>
+
+<div class="thumbnails">
+  <div class="thumbnails__scroller">
+    <Image 
+      src={galleryImages[0].imageMetadata}
+      alt={galleryImages[0].alt + ' ' + 'thumbnail'}
+      width="64"
+      height="64"
+      class="thumbnails__image active"
+    />
+    {
+      galleryImagesMinusFirst.map((image) => (
+        <Image
+          class="thumbnails__image"
+          src={image.imageMetadata}
+          alt={image.alt + ' ' + 'thumbnail'}
+          width="64"
+          height="64"
+        />
+      ))
+    }
+  </div>
+</div>
+
+<script>
+  import type { SlCarousel } from '@shoelace-style/shoelace';
+  import '@shoelace-style/shoelace/dist/components/carousel/carousel.js';
+
+  const carousel = document.querySelector('.carousel-thumbnails') as SlCarousel;
+  const scroller = document.querySelector('.thumbnails__scroller') as HTMLElement;
+  const thumbnails = document.querySelectorAll('.thumbnails__image') as NodeListOf<HTMLElement>;
+
+  scroller?.addEventListener('click', e => {
+    const target = e.target as HTMLElement;
+
+    if (target?.matches('.thumbnails__image')) {
+      const index = [...thumbnails].indexOf(target);
+      carousel.goToSlide(index);
+    }
+  });
+
+  carousel?.addEventListener('sl-slide-change', e => {
+    const slideIndex = e.detail.index;
+
+    [...thumbnails].forEach((thumb, i) => {
+      thumb.classList.toggle('active', i === slideIndex);
+      if (i === slideIndex) {
+        thumb.scrollIntoView({
+          block: 'nearest'
+        });
+      }
+    });
+  });
+</script>
+
+<style>
+  .carousel-thumbnails {
+    --slide-aspect-ratio: 3 / 2;
+  }
+
+  .thumbnails {
+    display: flex;
+    justify-content: center;
+  }
+
+  .thumbnails__scroller {
+    display: flex;
+    /* gap: var(--sl-spacing-small); */
+    gap: 1rem;
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-padding: var(--sl-spacing-small);
+  }
+
+  .thumbnails__scroller::-webkit-scrollbar {
+    display: none;
+  }
+
+  .thumbnails__image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+
+    opacity: 0.3;
+    will-change: opacity;
+    transition: 250ms opacity;
+
+    cursor: pointer;
+  }
+
+  .thumbnails__image.active {
+    opacity: 1;
+  }
+</style>

www/docs/src/components/PackageManagerTabs.astro

@@ -0,0 +1,15 @@
+---
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+---
+
+<Tabs syncKey="packageManagers">
+	<TabItem label="npm" icon="seti:npm">
+		<slot name="npm" />
+	</TabItem>
+	<TabItem label="pnpm" icon="pnpm">
+		<slot name="pnpm" />
+	</TabItem>
+	<TabItem label="Yarn" icon="seti:yarn">
+		<slot name="yarn" />
+	</TabItem>
+</Tabs>