From da4d9d569cbd17f4600a49e28b88e61ca911c3a4 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Sun, 22 Dec 2024 23:22:05 -0500
Subject: [PATCH] Update examples

---
 src/content/docs/components.mdx | 67 ------------------------
 src/content/docs/syntax.mdx     | 92 +++++++++++++++++++++++++++++++--
 2 files changed, 89 insertions(+), 70 deletions(-)

diff --git a/src/content/docs/components.mdx b/src/content/docs/components.mdx
index 3966e9f..2b73887 100755
--- a/src/content/docs/components.mdx
+++ b/src/content/docs/components.mdx
@@ -3,7 +3,6 @@ Type: Document
 Title: Components
 ---
 
-import { Prism } from '@astrojs/prism';
 import { Zorn } from "@minpluto/zorn";
 import Aside from '../../components/Aside.astro'
 
@@ -20,72 +19,6 @@ It's the blockquote below.
 <Aside Type="Dangerous" Message="This is an aside component in ButterflyVu."/>
 <Aside Type="Successful" Message="This is an aside component in ButterflyVu."/>
 
-## Prism
-
-<Prism lang="jsx" code={
-    `
----
-// Settings
-import { SiteSettings } from '@config'
-import {version} from '../../package.json'
-
-// Properties
-const { frontmatter } = Astro.props
-
-// Components
-import Head from '@components/global/Head.astro'
-import Header from '@components/global/Header.astro'
-import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro";
-
-// Styles
-import "@styles/index.scss";
-import "@styles/splash.scss";
-import "@styles/feelback.css";
----
-
-<Head/>
-<Header/>
-<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>© {SiteSettings.OrgName}. All right reserved.</p>
-        </div>
-        <div class="footer-end">
-            {SiteSettings.WhiteLabel ?
-                <p>Built with <a href="#">ButterflyVu</a></p>
-                :
-                null
-            }
-            {SiteSettings.FooterVersion ?
-                <p style="opacity: 0.5;">v{version}</p>
-                :
-                null
-            }
-        </div>
-    </div>
-</div>
-    `
-} />
-
-This is the source code to the splash template layout.
-
-
 ## 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>
diff --git a/src/content/docs/syntax.mdx b/src/content/docs/syntax.mdx
index 27c47f7..67c69b9 100755
--- a/src/content/docs/syntax.mdx
+++ b/src/content/docs/syntax.mdx
@@ -9,7 +9,96 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 > This is a blocknote.
 
+Here's a list:
+ - Item
+ - Block
+ - Image
+ - Text
+ - [Link](#)
+ - Aside
+
+## Codeblock
+
+```jsx
+
+---
+// Settings
+import { SiteSettings } from '@config'
+import {version} from '../../package.json'
+
+// Properties
+const { frontmatter } = Astro.props
+
+// Components
+import Head from '@components/global/Head.astro'
+import Header from '@components/global/Header.astro'
+import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro";
+
+// Styles
+import "@styles/index.scss";
+import "@styles/splash.scss";
+import "@styles/feelback.css";
+---
+
+<Head/>
+<Header/>
+<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>© {SiteSettings.OrgName}. All right reserved.</p>
+        </div>
+        <div class="footer-end">
+            {SiteSettings.WhiteLabel ?
+                <p>Built with <a href="#">ButterflyVu</a></p>
+                :
+                null
+            }
+            {SiteSettings.FooterVersion ?
+                <p style="opacity: 0.5;">v{version}</p>
+                :
+                null
+            }
+        </div>
+    </div>
+</div>
+```
+
+This is the source code to the splash template layout.
+
 ## Images
+
+![Image Alt Text](https://md.sudovanilla.org/images/pexels-triemli-28838154.jpg)
+
+{/* <div style="display: flex; gap: 32px; "> */}
+<div style="display: grid; grid-template-columns: 50% 50%; gap: 32px; width: calc(100% - 32px);">
+{/* Width added because of the "gap" parameter */}
+
+![Image Alt Text](https://md.sudovanilla.org/images/pexels-asphotograpy-94842.jpg)
+
+![Image Alt Text](https://md.sudovanilla.org/images/pexels-anete-lusina-4792746.jpg)
+
+</div>
+
+The two images next to each other are written into a `<div>` with a `style` applied to make them work side by side. 
+
+## Table
+
 | Name            | Arch   | Image                                                   |
 |-----------------|--------|---------------------------------------------------------|
 | 4Get            | ARM64  | ark.sudovanilla.org/korbs/4get:arm64                    |
@@ -24,7 +113,4 @@ Copied from https://ark.sudovanilla.org/Korbs/docker-build-automation.
 
 Pharetra magna ac placerat vestibulum lectus mauris. Enim lobortis scelerisque fermentum dui. Enim facilisis gravida neque convallis. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Sit amet justo donec enim diam vulputate ut pharetra sit. Fusce ut placerat orci nulla pellentesque dignissim. Lectus vestibulum mattis ullamcorper velit. Pellentesque elit eget gravida cum sociis natoque penatibus. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Interdum varius sit amet mattis vulputate. Egestas integer eget aliquet nibh.
 
-
-<script src="https://tr.sudovanilla.org/a/4.js" id="asciicast-4" async="true"></script>
-
 A lacus vestibulum sed arcu non odio euismod lacinia at. Mauris augue neque gravida in. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Pharetra massa massa ultricies mi quis hendrerit. Habitant morbi tristique senectus et netus et malesuada fames ac. Placerat vestibulum lectus mauris ultrices. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim. Volutpat lacus laoreet non curabitur gravida arcu ac. Nibh venenatis cras sed felis eget velit aliquet sagittis. Dui faucibus in ornare quam viverra orci sagittis. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Sit amet venenatis urna cursus eget nunc. Ut venenatis tellus in metus vulputate.
\ No newline at end of file