Website
Posts
Attribute | Format | Description |
---|---|---|
title | string | The title of the post. |
published | yyyy/mm/dd | The date the post was published. |
description | boolean | A short description of the post. Displayed on index page. |
image | path | The cover image path of the post. 1. Start with http:// or https:// : Use web image2. Start with / : For image in public dir3. With none of the prefixes: Relative to the markdown file |
hideimage | boolean | Whether to hide the cover image on the post page (defaults to false) |
tags | string[] | The tags of the post. |
category | string | The category of the post. |
draft | boolean | If this post is still a draft, which won’t be displayed. |
Markdown
Code Blocks
Attribute | Options | Description |
---|---|---|
title= | string | The name of the script. You can include the extension or not |
{ } | int-int | The area to highlight |
ins={ } | int-int | The area to highlight as inserted, similar to git diffs |
del={ } | int-int | The area to highlight as deleted, similar to git diffs |
frame= | auto none code terminal | The frame styling |
showLineNumbers | bool | Whether or not to show the line numbers. You don’t need to add equals or the boolean as it defaults to false. So you can just add showLineNumbers |
startLineNumber= | int | The number in which the code snippets start at |
This is an example of diff ins
and del
, with the framing being set to code
private void Test(){ // I removed these sprites[0].render(); sprites[1].render(); sprites[2].render(); sprites[3].render(); sprites[4].render(); // And added this instead foreach(sprite in sprites) { sprite.render(); }}
This is an example of highlighting { }
, with the framing being set to terminal
, and with showLineNumbers
and startLineNumber=
set to 5
5private void Example()6{7 // Highlight these8 sprite.render();9}
Tables
Add the following script to the top of the post
<style> .custom-md img { display: block; margin-left: auto; margin-right: auto; } table th { width: 1000px; }</style>
Video
- Keep aspect
- add to tag
class="keepaspect"
- add to tag
- Adding Google Drive video
- Replace
FILEID
with the video’s id
- Replace
<iframe src="https://drive.google.com/file/d/FILEID/preview" class="keepaspect" allow="autoplay"></iframe>
Images
Add the following at the top
<style> .custom-md img { mask-image: url("/masks/paintmask-1.png"); mask-size: 100%; }</style>
Or if you want a single image
<paintmask> content goes here</paintmask>
Unity WebGL Embed
- Add game to
/src/games/
- Rename
index.html
toindex.astro
<iframe class="keepaspect" id="online-game-frame" type="text/html" src="/src/games/gamename/index.astro" scrolling="no"></iframe>
Creating a New Page
// TODO. Automate this!
- Add to LinkPreset in
src\config.ts
20export const navBarConfig: NavBarConfig = {21 links: [22 LinkPreset.Home,23 LinkPreset.Archive,24 LinkPreset.About,25 LinkPreset.AddHere,26 ],27}
- Add to LinkPreset in
src\types\config.ts
14export enum LinkPreset {15 Home = 0,16 Archive = 1,17 About = 2,18 AddHere = 3,19}
- Add to LinkPresets in
src\constants\link-presets.ts
5export const LinkPresets: { [key in LinkPreset]: NavBarLink } = {6 [LinkPreset.Home]: {7 name: i18n(I18nKey.home),8 url: '/',9 },10 [LinkPreset.About]: {11 name: i18n(I18nKey.about),12 url: '/about',13 },14 [LinkPreset.Archive]: {15 name: i18n(I18nKey.archive),16 url: '/archive',17 },18 [LinkPreset.Test]: {19 name: i18n(I18nKey.test),20 url: '/test',21 },22 [LinkPreset.AddHere]: {23 name: i18n(I18nKey.AddHere),24 url: '/addhere',25 },26}
Add the translation within the ‘en.ts’ file
- You can do this with all the translations if you’d like… I’m lazy
Add to
i18nKey.ts
Create an astro file within
src\pages\
src\pages\test.astro
Paste the following code into it. Making sure to change the names
1---2import MainGridLayout from "../layouts/MainGridLayout.astro";3
4import { getEntry } from 'astro:content'5import {i18n} from "../i18n/translation";6import I18nKey from "../i18n/i18nKey";7import Markdown from "@components/misc/Markdown.astro";8
9const test = await getEntry('addhere', 'addhere')10
11const { Content } = await test.render()12---13
14<MainGridLayout title={i18n(I18nKey.addhere)}>15 <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">16 <div class="card-base z-10 px-9 py-6 relative w-full ">17 <Markdown class="mt-2">18 <Content />19 </Markdown>20 </div>21 </div>22</MainGridLayout>
- Create a markdown file within
src\content\addhere
src\content\addhere\addhere.md
- You’re done!!!
- Hopefully you remember you have this here as a reference!
GitHub repository cards
You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.
Create a GitHub repository card with the code ::github{repo="<owner>/<repo>"}
.
::github{repo="saicaca/fuwari"}
Admonitions
Following types of admonitions are supported: note
tip
important
warning
caution
NOTEHighlights information that users should take into account, even when skimming.
TIPOptional information to help a user be more successful.
IMPORTANTCrucial information necessary for users to succeed.
WARNINGCritical content demanding immediate user attention due to potential risks.
CAUTIONNegative potential consequences of an action.
:::noteHighlights information that users should take into account, even when skimming.:::
:::tipOptional information to help a user be more successful.:::
The title of the admonition can be customized.
MY CUSTOM TITLEThis is a note with a custom title.
:::note[MY CUSTOM TITLE]This is a note with a custom title.:::
TIPThe GitHub syntax is also supported.
> [!NOTE]> The GitHub syntax is also supported.
> [!TIP]> The GitHub syntax is also supported.