Website#

Posts#

Markdown#

Code Blocks#

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>
    .custom-md 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#

1. Add game to /src/games/
2. 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!

1. 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
}

2. 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
}

3. 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
}

4. Add the translation within the ‘en.ts’ file

   • You can do this with all the translations if you’d like… I’m lazy

5. Add to i18nKey.ts

6. Create an astro file within src\pages\

   • src\pages\test.astro

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

6. Create a markdown file within src\content\addhere
   • src\content\addhere\addhere.md
7. 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

NOTE

Highlights information that users should take into account, even when skimming.

TIP

Optional information to help a user be more successful.

IMPORTANT

Crucial information necessary for users to succeed.

WARNING

Critical content demanding immediate user attention due to potential risks.

CAUTION

Negative potential consequences of an action.

:::note
Highlights information that users should take into account, even when skimming.
:::

:::tip
Optional information to help a user be more successful.
:::

The title of the admonition can be customized.

MY CUSTOM TITLE

This is a note with a custom title.

:::note[MY CUSTOM TITLE]
This is a note with a custom title.
:::

TIP

The GitHub syntax is also supported.

> [!NOTE]
> The GitHub syntax is also supported.

> [!TIP]
> The GitHub syntax is also supported.