update

TODO.md

@@ -4,7 +4,7 @@
    - [ ] Buttons
    - [ ] Cards
    - [ ] Carousel
-   - [ ] Code
+   - [x] Code
    - [ ] Dialog
    - [ ] File Tree*
    - [ ] Gallery
@@ -38,14 +38,9 @@
          - [x] Tianji
          - [x] Umami
     - [x] Feedback:
-         - [x] Feelback
+         - [x] Feelback*
-    - [ ] CMS for:
-         - [x] Keystatic
-         - [ ] KeystoneJS*
-         - [ ] Payload*
-         - [ ] Wordpress*
  - [ ] Provide Docker Image for AMD64 and ARM64
- - [ ] Docker, test with:
+ - [x] Docker, test with:
     - [x] Dockge
     - [x] Dokemon
  - [ ] Create automations for:

astro.config.mjs

@@ -12,7 +12,6 @@ import {
 import bun from 'astro-bun-adapter';
 
 // Integrations
-import keystatic from '@keystatic/astro';
 import mdx from '@astrojs/mdx';
 
 export default defineConfig({
@@ -22,13 +21,10 @@ export default defineConfig({
     // Integrations
     integrations: [
         mdx(),
-        vue(),
+        vue()
-        // Disable Keystatic in production
-        // https://keystatic.com/docs/recipes/astro-disable-admin-ui-in-production
-        ...(process.env.SKIP_KEYSTATIC ? [] : [keystatic()])
     ],
     // Server Output
-    output: "hybrid",
+    output: "server",
     prefetch: true,
     adapter: bun(),
     server: {

keystatic.config.ts

@@ -1,48 +0,0 @@
-// Environment Variables
-const CMS_DASHBOARD_LOGO_DARK = import.meta.env.CMS_DASHBOARD_LOGO_DARK;
-const CMS_DASHBOARD_LOGO_LIGHT = import.meta.env.CMS_DASHBOARD_LOGO_LIGHT;
-
-// Components
-import { Link } from '@iconoir/vue';
-import { config, fields, collection } from '@keystatic/core';
-import { block, inline, wrapper } from '@keystatic/core/content-components'
-
-export default config({
-  // https://keystatic.com/docs/user-interface
-  ui: {
-    brand: {
-      name: 'ButterflyVu',
-    },
-    mark: ({ colorScheme }) => {
-      let path = colorScheme === 'dark'
-        ? CMS_DASHBOARD_LOGO_DARK // For Dark Theme
-        : CMS_DASHBOARD_LOGO_LIGHT; // For Light Theme
-    },
-    navigation: {
-      'Documents': ['docs']
-    },
-  },
-  // https://keystatic.com/docs/local-mode
-  storage: {
-    kind: 'local',
-  },
-  // https://keystatic.com/docs/collections
-  collections: {
-    docs: collection({
-      label: 'Documents',
-      slugField: 'title',
-      path: 'src/content/docs/*',
-      format: { contentField: 'content' },
-      entryLayout: 'content',
-      schema: {
-        title: fields.slug({ name: { label: 'Title' } }),
-        content: fields.mdx({
-          label: 'Content',
-          formatting: true,
-          dividers: true,
-          links: true,
-        }),
-      },
-    }),
-  },
-});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "butterflyvu",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "GPL-3.0-only",
   "author": {
     "name": "SudoVanilla"
@@ -32,21 +32,19 @@
     "docker:push": "docker push ark.sudovanilla.org/korbs/butterlyvu:amd64"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.6",
+    "@astrojs/mdx": "4.0.0-beta.2",
-    "@astrojs/prism": "^3.1.0",
+    "@astrojs/prism": "3.0.0-beta.0",
-    "@astrojs/vue": "^4.5.1",
+    "@astrojs/vue": "5.0.0-beta.0",
-    "@keystatic/astro": "^5.0.0",
-    "@keystatic/core": "^0.5.35",
     "@minpluto/zorn": "^0.4.51",
-    "astro": "4.15.7",
+    "astro": "5.0.0-beta.5",
     "astro-analytics": "^2.7.0",
-    "astro-breadcrumbs": "^3.1.0",
+    "astro-breadcrumbs": "^3.2.0",
     "astro-bun-adapter": "^1.0.2",
     "astro-feelback": "^0.3.4",
     "astro-seo": "^0.8.4",
     "markdoc": "^0.1.3"
   },
   "devDependencies": {
-    "sass": "^1.79.1"
+    "sass": "^1.80.4"
   }
 }

src/content/docs/components.mdx

@@ -1,5 +1,6 @@
 ---
-title: Components
+Type: Document
+Title: Components
 ---
 
 import {Zorn} from '@minpluto/zorn'

src/content/docs/demo.mdx

@@ -1,5 +1,6 @@
 ---
-title: Demo
+Type: Document
+Title: Demo
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi morbi tempus iaculis urna id volutpat. Diam phasellus vestibulum lorem sed risus ultricies tristique nulla. A cras semper auctor neque vitae tempus quam. Tempus quam pellentesque nec nam aliquam. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Quis commodo odio aenean sed adipiscing diam. Pharetra et ultrices neque ornare aenean euismod elementum. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh.

src/content/docs/syntax.mdx

@@ -1,5 +1,11 @@
 ---
-title: Welcome
+Type: Document
+Title: Welcome
+Banner: "/splash-logo.webp"
+PrimaryText: "Primary"
+SecondaryText: "Secondary"
+PrimaryLink: "#"
+SecondaryLink: "#"
 ---
 
 Documentation template for the Astro Web Framework.

src/layouts/Document.astro

@@ -9,7 +9,7 @@ import {
 } from '@utils/GetConfig'
 
 // Properties
-const { Title, Feedback, Feelback } = Astro.props
+const { frontmatter, Title, Feedback, Feelback } = Astro.props
 
 // Components
 import Head from '@components/global/Head.astro'
@@ -29,7 +29,7 @@ import "@styles/prism.css"
     <div class="content">
         <Sidebar/>
         <div class="document">
-            <h1>{Title}</h1>
+            <h1>{frontmatter.Title}</h1>
             <slot/>
             <!-- <hr/>
             <p>Last Updated: null</p> -->

src/pages/[slug].astro

@@ -1,4 +1,6 @@
 ---
+// Layout
+import Splash from '@layouts/Splash.astro';
 import Document from '@layouts/Document.astro';
 
 // Get Content
@@ -11,6 +13,13 @@ const document = await getEntry('docs', slug);
 if (!document) throw new Error("No post found for this slug");
 const { Content } = await document.render();
 
+// Set Layout
+if (document.data.Type === "Splash") {
+  var LayoutType = "Splash"
+} else if (document.data.Type === "Document") {
+  var LayoutType = "Document"
+}
+
 // Generate static pages
 export async function getStaticPaths() {
   const documents = await getCollection('docs');
@@ -18,7 +27,27 @@ export async function getStaticPaths() {
 }
 export const prerender = true;
 ---
-
+{ 
-<Document Title={document.data.title} frontmatter={document.data}>
+  ()=> {
-    <Content />
+    if (LayoutType === "Splash") {
+      return <Splash
+              Title={document.data.title}
+              frontmatter={document.data}
+              Banner={document.data.Banner}
+              PrimaryText={document.data.PrimaryText}
+              SecondaryText={document.data.SecondaryText}
+              PrimaryLink={document.data.PrimaryLink}
+              SecondaryLink={document.data.SecondaryLink}
+      ><Content />
+      </Splash>
+    } else if (LayoutType === "Document") {
+      return <Document
+              Title={document.data.title}
+              frontmatter={document.data}
+      ><Content />
       </Document>
+    }
+  }
+}
+
+<style is:global>.content {flex-direction: column !important;}</style>  

src/pages/index.astro

@@ -0,0 +1,5 @@
+---
+import Home from '../content/docs/home.mdx'
+---
+<Home/>
+<style is:global>.content {flex-direction: column !important;}</style>  

src/styles/splash.scss

@@ -1,7 +1,3 @@
-.content {
-    flex-direction: column !important;
-}
-
 .splash {
     position: relative;
     display: flex;

src/utils/GetConfig.js

@@ -10,8 +10,6 @@ export var SIDEBAR_SIZE = import.meta.env.SIDEBAR_SIZE;
 export var SIDEBAR_ICONS = import.meta.env.SIDEBAR_ICONS;
 export var THEME_TOGGLE_ENABLED = import.meta.env.THEME_TOGGLE_ENABLED;
 export var THEME_TOGGLE_STYLE = import.meta.env.THEME_TOGGLE_STYLE;
-export var CMS_DASHBOARD_LOGO_DARK = import.meta.env.CMS_DASHBOARD_LOGO_DARK;
-export var CMS_DASHBOARD_LOGO_LIGHT = import.meta.env.CMS_DASHBOARD_LOGO_LIGHT;
 export var WHITELABEL = import.meta.env.WHITELABEL;
 export var FOOTER_VERSION = import.meta.env.FOOTER_VERSION;
 export var REVERT_LAYOUT = import.meta.env.REVERT_LAYOUT;