Korbs/butterflyvu
Korbs/butterflyvu
1
Fork 0
Code Issues Pull requests Activity

Update examples

Browse source
This commit is contained in:
Korbs 2024-12-22 23:22:05 -05:00
parent 44a5263d92
commit da4d9d569c
Signed by: Korbs
SSH key fingerprint: SHA256:Q0b0KraMldpAO9oKa+w+gcsXsOTykQ4UkAKn0ByGn5U
2 changed files with 89 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/content/docs/components.mdx
View file

@ -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>

92
src/content/docs/syntax.mdx
View file

@ -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.