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 image 2. Start with `/`: For image in `public` dir 3. 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

5
private void Example()
6
{
7
  // Highlight these
8
    sprite.render();
9
}

Tables#

Add the following script to the top of the post

<style>
    img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    table th {
        width: 1000px;
    }
</style>

Video#

Keep aspect
- add to tag class="keepaspect"
Adding Google Drive video
- Replace FILEID with the video’s id

<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 to index.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

20
export 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

14
export enum LinkPreset {
15
  Home = 0,
16
  Archive = 1,
17
  About = 2,
18
  AddHere = 3,
19
}

Add to LinkPresets in src\constants\link-presets.ts

5
export 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
---
2
import MainGridLayout from "../layouts/MainGridLayout.astro";
3

4
import { getEntry } from 'astro:content'
5
import {i18n} from "../i18n/translation";
6
import I18nKey from "../i18n/i18nKey";
7
import Markdown from "@components/misc/Markdown.astro";
8

9
const test = await getEntry('addhere', 'addhere')
10

11
const { 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!