update

astro.config.mjs

@@ -1,4 +1,5 @@
 import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
 
 // Environment Variables
 import {
@@ -24,7 +25,7 @@ export default defineConfig({
     integrations: [
         mdx(),
         partytown(),
-        react(),
+        vue(),
         // Disable Keystatic in production
         // https://keystatic.com/docs/recipes/astro-disable-admin-ui-in-production
         ...(process.env.SKIP_KEYSTATIC ? [] : [keystatic()])

config.json

@@ -5,8 +5,8 @@
             "link": "/syntax/"
         },
         {
-            "text": "Link",
+            "text": "Components",
-            "link": "#"
+            "link": "/components/"
         },
         {
             "text": "Link",
@@ -22,8 +22,8 @@
             "link": "syntax/"
         },
         {
-            "text": "Document Title",
+            "text": "Components",
-            "link": "#"
+            "link": "/components/"
         },
         {
             "text": "Document Title",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "butterflyvu",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "license": "GPL-3.0-only",
   "author": {
     "name": "SudoVanilla"
@@ -28,29 +28,29 @@
     "preview": "astro preview",
     "docker:start": "docker compose up -d",
     "docker:stop": "docker compose down",
-    "docker:build": "docker build --platform linux/arm64 -t ark.sudovanilla.org/korbs/butterlyvu:arm64 .",
+    "docker:build": "docker build --platform linux/amd64 -t ark.sudovanilla.org/korbs/butterlyvu:amd64 .",
-    "docker:push": "docker push ark.sudovanilla.org/korbs/butterlyvu:arm64"
+    "docker:push": "docker push ark.sudovanilla.org/korbs/butterlyvu:amd64"
   },
   "dependencies": {
     "@aptabase/react": "^0.3.4",
     "@aptabase/web": "^0.4.3",
-    "@astrojs/mdx": "^3.1.4",
+    "@astrojs/mdx": "^3.1.6",
     "@astrojs/node": "^8.3.3",
-    "@astrojs/partytown": "^2.1.1",
+    "@astrojs/partytown": "^2.1.2",
     "@astrojs/prism": "^3.1.0",
-    "@astrojs/react": "^3.6.2",
+    "@astrojs/vue": "^4.5.1",
     "@keystatic/astro": "^5.0.0",
-    "@keystatic/core": "^0.5.32",
+    "@keystatic/core": "^0.5.35",
-    "astro": "4.14.5",
+    "@minpluto/zorn": "^0.4.51",
+    "astro": "4.15.7",
     "astro-analytics": "^2.7.0",
-    "astro-breadcrumbs": "^3.0.1",
+    "astro-breadcrumbs": "^3.1.0",
     "astro-feelback": "^0.3.4",
     "astro-seo": "^0.8.4",
     "dayjs": "^1.11.13",
-    "iconoir-react": "^7.8.0",
     "markdoc": "^0.1.3"
   },
   "devDependencies": {
-    "sass": "^1.77.8"
+    "sass": "^1.79.1"
   }
 }

src/content/docs/components.mdx

@@ -0,0 +1,67 @@
+---
+title: Components
+---
+
+import {Zorn} from '@minpluto/zorn'
+import { Prism } from '@astrojs/prism';
+
+Documentation template for the Astro Web Framework.
+
+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.
+
+## Prism
+
+<Prism lang="jsx" code={
+    `
+<div class="page">
+    <div class="content">
+        <div class="splash">
+            <div class="splash-content">
+                <h1>{frontmatter.Title}</h1>
+                <p>{frontmatter.Description}</p>
+                <div class="splash-action">
+                    <a href={frontmatter.PrimaryLink} class="button">{frontmatter.PrimaryText}</a>
+                    <a href={frontmatter.SecondaryLink} class="button-secondary">{frontmatter.SecondaryText}</a>
+                </div>
+            </div>
+            <img src={frontmatter.Banner}/>
+        </div>
+        <div class="document">
+            <slot/>
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footer-start">
+            <p>© {ORG_NAME}. All right reserved.</p>
+        </div>
+        <div class="footer-end">
+            {WHITELABEL ?
+                <p>Built with <a href="#">ButterflyVu</a></p>
+                :
+                null
+            }
+        </div>
+    </div>
+</div>
+    `
+} />
+
+
+```jsx
+
+```
+
+## Zorn Player
+<Zorn
+    Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
+    Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
+    Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
+/>
+
+A custom video player tailored for MinPluto. 
+
+## Video Player
+
+<video controls src="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm" poster="https://md.sudovanilla.org/images/eay-p-v.jpg"></video>
+
+The source of both videos above are on a network with limited upload speed, the buffer rate is high.

src/layouts/Document.astro

@@ -20,6 +20,7 @@ import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro"
 // Styles
 import "@styles/index.scss";
 import "@styles/feelback.css";
+import "@styles/prism.css"
 ---
 
 <Head/>

src/styles/index.scss

@@ -90,7 +90,7 @@ header {
         }
         .document {
             height: max-content;
-            img {
+            img, video {
                 width: 100%;
                 border-radius: 6px;
             }

src/styles/prism.css

@@ -0,0 +1,275 @@
+pre[class*="language-"],
+code[class*="language-"] {
+	color: #d4d4d4;
+	font-size: 12px;
+	text-shadow: none;
+	font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::selection,
+code[class*="language-"]::selection,
+pre[class*="language-"] *::selection,
+code[class*="language-"] *::selection {
+	text-shadow: none;
+	background: #264F78;
+}
+
+@media print {
+	pre[class*="language-"],
+	code[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+pre[class*="language-"] {
+	padding: 0px 12px;
+	margin: .5em 0;
+	overflow: auto;
+	background: #1e1e1e;
+}
+
+:not(pre) > code[class*="language-"] {
+	padding: .1em .3em;
+	border-radius: .3em;
+	color: #db4c69;
+	background: #1e1e1e;
+}
+/*********************************************************
+* Tokens
+*/
+.namespace {
+	opacity: .7;
+}
+
+.token.doctype .token.doctype-tag {
+	color: #569CD6;
+}
+
+.token.doctype .token.name {
+	color: #9cdcfe;
+}
+
+.token.comment,
+.token.prolog {
+	color: #6a9955;
+}
+
+.token.punctuation,
+.language-html .language-css .token.punctuation,
+.language-html .language-javascript .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.inserted,
+.token.unit {
+	color: #b5cea8;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.deleted {
+	color: #ce9178;
+}
+
+.language-css .token.string.url {
+	text-decoration: underline;
+}
+
+.token.operator,
+.token.entity {
+	color: #d4d4d4;
+}
+
+.token.operator.arrow {
+	color: #569CD6;
+}
+
+.token.atrule {
+	color: #ce9178;
+}
+
+.token.atrule .token.rule {
+	color: #c586c0;
+}
+
+.token.atrule .token.url {
+	color: #9cdcfe;
+}
+
+.token.atrule .token.url .token.function {
+	color: #dcdcaa;
+}
+
+.token.atrule .token.url .token.punctuation {
+	color: #d4d4d4;
+}
+
+.token.keyword {
+	color: #569CD6;
+}
+
+.token.keyword.module,
+.token.keyword.control-flow {
+	color: #c586c0;
+}
+
+.token.function,
+.token.function .token.maybe-class-name {
+	color: #dcdcaa;
+}
+
+.token.regex {
+	color: #d16969;
+}
+
+.token.important {
+	color: #569cd6;
+}
+
+.token.italic {
+	font-style: italic;
+}
+
+.token.constant {
+	color: #9cdcfe;
+}
+
+.token.class-name,
+.token.maybe-class-name {
+	color: #4ec9b0;
+}
+
+.token.console {
+	color: #9cdcfe;
+}
+
+.token.parameter {
+	color: #9cdcfe;
+}
+
+.token.interpolation {
+	color: #9cdcfe;
+}
+
+.token.punctuation.interpolation-punctuation {
+	color: #569cd6;
+}
+
+.token.boolean {
+	color: #569cd6;
+}
+
+.token.property,
+.token.variable,
+.token.imports .token.maybe-class-name,
+.token.exports .token.maybe-class-name {
+	color: #9cdcfe;
+}
+
+.token.selector {
+	color: #d7ba7d;
+}
+
+.token.escape {
+	color: #d7ba7d;
+}
+
+.token.tag {
+	color: #569cd6;
+}
+
+.token.tag .token.punctuation {
+	color: #808080;
+}
+
+.token.cdata {
+	color: #808080;
+}
+
+.token.attr-name {
+	color: #9cdcfe;
+}
+
+.token.attr-value,
+.token.attr-value .token.punctuation {
+	color: #ce9178;
+}
+
+.token.attr-value .token.punctuation.attr-equals {
+	color: #d4d4d4;
+}
+
+.token.entity {
+	color: #569cd6;
+}
+
+.token.namespace {
+	color: #4ec9b0;
+}
+/*********************************************************
+* Language Specific
+*/
+
+pre[class*="language-javascript"],
+code[class*="language-javascript"],
+pre[class*="language-jsx"],
+code[class*="language-jsx"],
+pre[class*="language-typescript"],
+code[class*="language-typescript"],
+pre[class*="language-tsx"],
+code[class*="language-tsx"] {
+	color: #9cdcfe;
+}
+
+pre[class*="language-css"],
+code[class*="language-css"] {
+	color: #ce9178;
+}
+
+pre[class*="language-html"],
+code[class*="language-html"] {
+	color: #d4d4d4;
+}
+
+.language-regex .token.anchor {
+	color: #dcdcaa;
+}
+
+.language-html .token.punctuation {
+	color: #808080;
+}
+/*********************************************************
+* Line highlighting
+*/
+pre[class*="language-"] > code[class*="language-"] {
+	position: relative;
+	z-index: 1;
+}
+
+.line-highlight.line-highlight {
+	background: #f7ebc6;
+	box-shadow: inset 5px 0 0 #f7d87c;
+	z-index: 0;
+}