Remove

Dockerfile

@@ -10,4 +10,4 @@ COPY . .
 
 # Run
 EXPOSE 2014
-CMD npm run build && npm start
+CMD npm run build && npm run preview

README.md

@@ -1,10 +1,14 @@
-<div style="background: #f1e05a; color: black; padding: 12px 24px; border-radius: 6px;">
-⚠ This project is new and is under active development. Do not use this in production. Visual designs, logos, assets, and etc are not final. ⚠
+<div align="center">
+
+<img width="128px" src="https://md.sudovanilla.org/images/logos/butterflyvu/ButterflyVu%20-%20Original.svg"/>
+
 </div>
 
+<br/>
+
 # <center>ButterflyVu</center>
 
-<center>ButterflyVu is a new documentation template built on the Astro Web Framework.</center>
+<center>ButterflyVu is a documentation template built on the Astro Web Framework.</center>
 
 ## Running
 > `bun` will be used over `npm` in instructions.
@@ -13,7 +17,7 @@
  - Bun <span style="font-size: 8px; opacity: 0.5">1</span> <span style="font-size: 8px; opacity: 0.5">2</span>
 
 <p style="font-size: 10px; opacity: 0.5">1. SudoVanilla recommends using the Bun package manager for Astro projects.</p>
-<p style="font-size: 10px; opacity: 0.5">2. If you plan to use Bun, NodeJS is not required to be installed, which is why it's not listed as a requirement. (Tested)</p>
+<p style="font-size: 10px; opacity: 0.5">2. If you plan to use Bun, NodeJS is not required to be installed, which is why it's not listed as a requirement. If you use i18n in Astro, then NodeJS will be required. (Tested)</p>
 
 ### Clone Repository
 Start by cloning the repository to somewhere on your device using the `git` command:
@@ -68,6 +72,24 @@ services:
     volumes:
       - ./dists/:/usr/share/nginx/html/
 ```
+
+## Overriding Components
+
+Since ButterflyVu is written in Astro and the site is built during each startup in Docker, overriding the components is easy. Now for, overriding the header will be shown, it's pretty much the same basics for other components.
+
+> This also works for any other part of ButterflyVu, such as for the layouts and styles. This will be expanded on once the ButterflyVu documentations are written on it's own site, ironic that it hasn't been built yet, right?
+
+### Header
+
+In the `docker-compose.yml` file, add a path to the `volumes` section to your custom header:
+```yml
+  - ./components/Header.astro:/app/src/components/global/Header.astro
+```
+
+The file must be an `.astro` file, anything else like `.jsx` will not work. 
+
+If you already have the custom header written and it's ready for showtime, just run the Docker image again and the new header will be built with the site.
+
 ___
 
 <center>A <a href="https://sudovanilla.org/">SudoVanilla</a> Project</center>

TODO.md

@@ -1,5 +1,5 @@
  - [ ] Build Components:
-   - [ ] Asides
+   - [x] Asides
    - [ ] Badges
    - [ ] Buttons
    - [ ] Cards
@@ -12,7 +12,7 @@
    - [ ] Image Comparer
    - [ ] Link Cards
    - [ ] Menu
-   - [ ] Search
+   - [x] Search
    - [ ] Steps
    - [ ] Tabs
  - [ ] Sidebar
@@ -43,29 +43,5 @@
  - [x] Docker, test with:
     - [x] Dockge
     - [x] Dokemon
- - [ ] Create automations for:
-    - [ ] Drone.io
-    - [ ] Gitea/Forgejo
-    - [ ] GitHub
-    - [ ] GitLab
-    - [ ] Jenkins
-    - [ ] Woodpecker*
- - [ ] Test Deployment Options for:
-    - [ ] Cloudflare Pages
-    - [ ] Codeberg Pages
-    - [ ] Deta Space
-    - [ ] Fly.io
-    - [ ] GitHub Pages
-    - [ ] GitLab Pages
-    - [ ] Heroku
-    - [ ] Kinsta
-    - [ ] Netlify
-    - [ ] Render
-    - [ ] Stormkit
-    - [ ] Surge
-    - [ ] Vercel
-    - [ ] YounoHost
-    - [ ] Zeabur
-    - [ ] Zerops
 
 > * Subject to change

bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+registry = "https://js.registry.sudovanilla.org"

config.json

@@ -36,7 +36,7 @@
         },
         {
             "text": "Syntax",
-            "link": "syntax/"
+            "link": "/syntax/"
         },
         {
             "text": "Components",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "butterflyvu",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "license": "GPL-3.0-only",
   "author": {
     "name": "SudoVanilla"
@@ -31,18 +31,18 @@
     "docker:push": "buildah push oci.registry.sudovanilla.org/butterflyvu"
   },
   "dependencies": {
-    "@astrojs/mdx": "4.0.0-beta.5",
-    "@astrojs/prism": "3.2.0-beta.0",
-    "@minpluto/zorn": "^0.4.73",
-    "astro": "5.0.0-beta.12",
+    "@astrojs/mdx": "4.0.2",
+    "@astrojs/prism": "3.2.0",
+    "@minpluto/zorn": "^0.4.82",
+    "astro": "5.0.5",
     "astro-analytics": "^2.7.0",
     "astro-bun-adapter": "^1.0.2",
     "astro-feelback": "^0.3.4",
-    "astro-pagefind": "^1.6.0",
+    "astro-pagefind": "^1.7.0",
     "astro-seo": "^0.8.4",
     "markdoc": "^0.1.3"
   },
   "devDependencies": {
-    "sass": "^1.81.0"
+    "sass": "^1.82.0"
   }
 }

src/components/Aside.astro

@@ -0,0 +1,30 @@
+---
+// Properties
+const {
+    Type,
+    Message
+} = Astro.props
+
+// Icons
+var Note = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="" stroke-width="1.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 10.75C12.4142 10.75 12.75 11.0858 12.75 11.5V16.5C12.75 16.9142 12.4142 17.25 12 17.25C11.5858 17.25 11.25 16.9142 11.25 16.5V11.5C11.25 11.0858 11.5858 10.75 12 10.75ZM12.5675 8.00075C12.8446 7.69287 12.8196 7.21865 12.5117 6.94156C12.2038 6.66446 11.7296 6.68942 11.4525 6.99731L11.4425 7.00842C11.1654 7.3163 11.1904 7.79052 11.4983 8.06761C11.8062 8.34471 12.2804 8.31975 12.5575 8.01186L12.5675 8.00075Z" fill="#000000"></path></svg>'
+var Warning = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="" stroke-width="1.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.61617 3.6419C10.6736 1.80296 13.3268 1.80296 14.3841 3.6419L22.4271 17.6296C23.4813 19.463 22.1579 21.7504 20.0431 21.7504H3.95721C1.84242 21.7504 0.519055 19.463 1.57322 17.6296L9.61617 3.6419ZM12 8.25C12.4142 8.25 12.75 8.58579 12.75 9V13C12.75 13.4142 12.4142 13.75 12 13.75C11.5858 13.75 11.25 13.4142 11.25 13V9C11.25 8.58579 11.5858 8.25 12 8.25ZM12.5675 17.5008C12.8446 17.1929 12.8196 16.7187 12.5117 16.4416C12.2038 16.1645 11.7296 16.1894 11.4525 16.4973L11.4425 16.5084C11.1654 16.8163 11.1904 17.2905 11.4983 17.5676C11.8062 17.8447 12.2804 17.8197 12.5575 17.5119L12.5675 17.5008Z" fill="#000000"></path></svg>'
+var Dangerous = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="" stroke-width="1.5"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM9.70164 8.64124C9.40875 8.34835 8.93388 8.34835 8.64098 8.64124C8.34809 8.93414 8.34809 9.40901 8.64098 9.7019L10.9391 12L8.64098 14.2981C8.34809 14.591 8.34809 15.0659 8.64098 15.3588C8.93388 15.6517 9.40875 15.6517 9.70164 15.3588L11.9997 13.0607L14.2978 15.3588C14.5907 15.6517 15.0656 15.6517 15.3585 15.3588C15.6514 15.0659 15.6514 14.591 15.3585 14.2981L13.0604 12L15.3585 9.7019C15.6514 9.40901 15.6514 8.93414 15.3585 8.64124C15.0656 8.34835 14.5907 8.34835 14.2978 8.64124L11.9997 10.9393L9.70164 8.64124Z" fill="#000000"></path></svg>'
+var Successful = '<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color=""><path d="M7 12.5L10 15.5L17 8.5" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>'
+---
+
+<div id={"aside-" + Type} class="aside">
+    { 
+        ()=> {
+                 if (Type === "Note") {
+            return <h2><Fragment set:html={Note}></Fragment> Note</h2>
+          } else if (Type === "Warning") {
+            return <h2><Fragment set:html={Warning}></Fragment> Warning</h2>
+          }else if (Type === "Dangerous") {
+            return <h2><Fragment set:html={Dangerous}></Fragment> Dangerous</h2>
+          }else if (Type === "Successful") {
+            return <h2><Fragment set:html={Successful}></Fragment> Successful</h2>
+          }
+        }
+    }
+    <p>{Message}</p>
+</div>

src/components/Sidebar.astro

@@ -7,4 +7,9 @@ import { SiteSettings, SidebarItems } from '@config'
     {SidebarItems.map((item) => (
         item.heading ? <h2>{item.heading}</h2> : <a href={SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + item.link}>{item.text}</a>
     ))}
-</div>
+</div>
+
+<script is:inline define:vars={{SiteSettings}}>
+var CurrentURLPath = window.location.pathname
+document.querySelector('.sidebar > a[href="' + SiteSettings.SiteProtocol + '://' + SiteSettings.SiteDomain + SiteSettings.SiteBase + CurrentURLPath + '"]').style.background = '#323232' 
+</script>

src/components/global/Footer.astro

@@ -0,0 +1,23 @@
+---
+// Settings
+import { SiteSettings, FeelbackConfig } from '@config'
+import {version} from '../../../package.json'
+---
+
+<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>

src/content/docs/components.mdx

@@ -5,11 +5,21 @@ Title: Components
 
 import { Prism } from '@astrojs/prism';
 import { Zorn } from "@minpluto/zorn";
+import Aside from '../../components/Aside.astro'
 
 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.
 
+## Aside
+
+It's the blockquote below.
+
+<Aside Type="Note" Message="This is an aside component in ButterflyVu."/>
+<Aside Type="Warning" Message="This is an aside component in ButterflyVu."/>
+<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={

src/layouts/Document.astro

@@ -1,7 +1,6 @@
 ---
 // Settings
-import { SiteSettings, FeelbackConfig } from '@config'
-import {version} from '../../package.json'
+import { FeelbackConfig } from '@config'
 
 // Properties
 const { frontmatter, Title, Feedback, Feelback } = Astro.props
@@ -9,6 +8,7 @@ const { frontmatter, Title, Feedback, Feelback } = Astro.props
 // Components
 import Head from '@components/global/Head.astro'
 import Header from '@components/global/Header.astro'
+import Footer from '@components/global/Footer.astro'
 import Sidebar from '@components/Sidebar.astro'
 import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro"
 import {Zorn} from "@minpluto/zorn"
@@ -41,25 +41,9 @@ import "@styles/prism.css"
             }
         </div>
     </article>
-
+    <Footer/>    
+    <!-- Zorn is broken if a player is not already set -->
     <Zorn is:raw PlayerName="zorn_null" Poster="#" Video="#"/>
-    <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>
 
 <!-- Zorn is broken if a player is not already set -->

src/layouts/Splash.astro

@@ -1,14 +1,11 @@
 ---
-// 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 Footer from '@components/global/Footer.astro'
 import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro";
 
 // Styles
@@ -26,8 +23,8 @@ import "@styles/feelback.css";
                 <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>
+                    {frontmatter.PrimaryText ? <a href={frontmatter.PrimaryLink} class="button">{frontmatter.PrimaryText}</a> : null}
+                    {frontmatter.SecondaryText ? <a href={frontmatter.SecondaryLink} class="button-secondary">{frontmatter.SecondaryText}</a> : null}
                 </div>
             </div>
             <img src={frontmatter.Banner}/>
@@ -36,22 +33,6 @@ import "@styles/feelback.css";
             <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>
+    <Footer/>
 </div>
 </html>

src/pages/404.mdx

@@ -0,0 +1,6 @@
+---
+layout: "@layouts/Splash.astro"
+Title: "Error 404 - Page not found"
+SecondaryText: "Go Back Home"
+SecondaryLink: "/"
+---

src/styles/index.scss

@@ -1,3 +1,10 @@
+:root {
+    --aside-note: #a698ff;
+    --aside-warning: #ffff7a;
+    --aside-dangerous: #e16262;
+    --aside-successful: #4ce14c;
+}
+
 body {
     max-width: 1200px;
     margin: auto;
@@ -99,7 +106,7 @@ header {
                 color: white;
                 border: 1px #2d2d2d solid;
                 border-radius: 6px;
-                padding: 12px 16px;
+                padding: 8px 12px;
                 font-size: 14px;
 
                 &:focus {
@@ -188,12 +195,23 @@ header {
             min-width: 250px;
             display: flex;
             flex-direction: column;
-            gap: 12px;
+            gap: 6px;
+
+            h2 {
+                margin: 12px 0px 12px 12px;
+            }
 
             a {
                 text-decoration: none;
                 font-size: 14px;
-                color: #898989;
+                background: transparent;
+                color: white;
+                border-radius: 6px;
+                padding: 12px;
+                border: 1px transparent solid;
+                &:hover {
+                    border-color: #323232;
+                }
             }
         }
 
@@ -226,6 +244,43 @@ header {
         }
     }
 
+    .aside {
+        border-left: 6px transparent solid;
+        padding-left: 24px;
+        padding-top: 12px;
+        padding-bottom: 12px;
+        &#aside-Note {
+            color: var(--aside-note);
+            border-color: var(--aside-note);
+            svg {stroke: var(--aside-note);}
+        }
+        &#aside-Warning {
+            color: var(--aside-warning);
+            border-color: var(--aside-warning);
+            svg {stroke: var(--aside-warning);}
+        }
+        &#aside-Dangerous {
+            color: var(--aside-dangerous);
+            border-color: var(--aside-dangerous);
+            svg {stroke: var(--aside-dangerous);}
+        }
+        &#aside-Successful {
+            color: var(--aside-successful);
+            border-color: var(--aside-successful);
+            svg {stroke: var(--aside-successful);}
+        }
+        h2 {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 24px;
+            padding-bottom: 6px;
+        }
+        * {
+            margin: 0px;
+        }
+    }
+
     .footer {
         position: absolute;
         padding-bottom: 24px;