♻️ 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/components/Gallery.astro

@@ -0,0 +1,113 @@
+---
+//TODO: Make this component reusable
+import { Image } from "astro:assets";
+import DarkLogin from "../assets/login-1.png";
+import LightLogin from "../assets/login-2.png";
+---
+
+<sl-carousel class="carousel-thumbnails" navigation loop>
+  <sl-carousel-item>
+    <Image
+      alt="Login screen dark theme"
+      src={DarkLogin}
+      height="1900"
+    />
+  </sl-carousel-item>
+  <sl-carousel-item>
+    <Image
+      alt="Login screen light theme"
+      src={LightLogin}
+      height="1900"
+    />
+  </sl-carousel-item>
+</sl-carousel>
+
+<div class="thumbnails">
+  <div class="thumbnails__scroller">
+    <Image
+      alt="Thumbnail of Login screen dark theme"
+      class="thumbnails__image active"
+      src={DarkLogin}
+      width={64}
+      height={64}
+    />
+    <Image
+      alt="Login screen light theme"
+      class="thumbnails__image active"
+      src={LightLogin}
+      width={64}
+      height={64}
+    />
+  </div>
+</div>
+
+<script>
+  import type { SlCarousel} from '@shoelace-style/shoelace';
+  import "@shoelace-style/shoelace"
+
+  const carousel = document.querySelector('.carousel-thumbnails') as SlCarousel;
+  const scroller = document.querySelector('.thumbnails__scroller');
+  const thumbnails = document.querySelectorAll('.thumbnails__image');
+
+  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);
+    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>

www/docs/src/content/docs/index.mdx

@@ -1,36 +1,18 @@
 ---
-title: Welcome to Starlight
-description: Get started building your docs site with Starlight.
+title: Welcome to Astro StudioCMS
+description: Get started building with it.
 template: splash
 hero:
-  tagline: Congrats on setting up a new Starlight project!
+  tagline: A dedicated CMS for Astro Studio. Built from the ground up by the Astro community.
   image:
-    file: ../../assets/houston.webp
+    file: ../../../../assets/studioCMS.png
+    alt: Astro StudioCMS
   actions:
-    - text: Example Guide
-      link: /guides/example/
+    - text: Get started
+      link: /start-here/getting-started
       icon: right-arrow
       variant: primary
-    - text: Read the Starlight docs
-      link: https://starlight.astro.build
-      icon: external
+    - text: GitHub repository
+      link: https://github.com/astrolicious/studiocms
+      icon: github
 ---
-
-import { Card, CardGrid } from '@astrojs/starlight/components'
-
-## Next steps
-
-<CardGrid stagger>
-  <Card title='Update content' icon='pencil'>
-    Edit `src/content/docs/index.mdx` to see this page change.
-  </Card>
-  <Card title='Add new content' icon='add-document'>
-    Add Markdown or MDX files to `src/content/docs` to create new pages.
-  </Card>
-  <Card title='Configure your site' icon='setting'>
-    Edit your `sidebar` and other config in `astro.config.mjs`.
-  </Card>
-  <Card title='Read the docs' icon='open-book'>
-    Learn more in [the Starlight Docs](https://starlight.astro.build/).
-  </Card>
-</CardGrid>

www/docs/src/content/docs/reference/content-renderer.md

@@ -0,0 +1,28 @@
+---
+title: contentRenderer
+description: A reference page for contentRenderer
+---
+
+`contentRenderer` is a string value that is used to determine how content should be rendered in the `Astro-Studio-CMS`. This is used to setup your content data. The default value is `marked` but you can also use `markdoc`.
+
+## Usage
+
+```js title="astro.config.mjs"  {14}
+import { defineConfig } from "astro/config";
+import astroStudioCMS from "@astrolicious/studiocms";
+import db from '@astrojs/db';
+import node from "@astrojs/node";
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://example.com',
+  output: "server",
+  adapter: node({ mode: 'standalone' }),
+  integrations: [
+          db(),
+          astroStudioCMS({
+              contentRenderer: 'marked',
+          })
+  ],
+});
+```