feat: wrap some pages in index first

fix: missing fonts
feat: update plachta
2024-12-04 16:43:45 +00:00 · 2022-07-25 01:26:04 +07:00 · 2022-07-25 01:23:03 +07:00 · 2022-07-25 00:43:02 +07:00 · 2022-07-25 00:38:04 +07:00 · 2022-07-25 00:21:53 +07:00
68 changed files with 2816 additions and 2295 deletions
--- a/27
+++ b/27
@ -1,24 +1,15 @@
-FROM node:14
-
+FROM node:16-alpine
 # install dependencies
 WORKDIR /app
-COPY package.json package-lock.json ./
-RUN yarn install
-
-# Copy all local files into the image.
+RUN npm install -g pnpm
 COPY . .
-
-RUN yarn build
-
-###
-# Only copy over the Node pieces we need
-# ~> Saves 35MB
-###
-FROM node:14-slim
-
+RUN pnpm install 
+RUN pnpm build
+FROM node:16-alpine
 WORKDIR /app
-COPY --from=0 /app .
-COPY . .
+COPY --from=0 /app/build /app
+COPY --from=0 /app/package.json /app
+COPY --from=0 /app/node_modules /app/node_modules

 EXPOSE 3000
-CMD ["node", "./build"]
+CMD ["node","./index.js"]
--- a/package.json
+++ b/package.json
@ -2,33 +2,34 @@
  "name": "~TODO~",
  "version": "0.0.1",
  "scripts": {
-    "dev": "svelte-kit dev",
-    "build": "svelte-kit build",
-    "preview": "svelte-kit preview",
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
    "lint": "prettier --check . && eslint --ignore-path .gitignore .",
    "format": "prettier --write ."
  },
  "devDependencies": {
-    "@sveltejs/kit": "^1.0.0-next.95",
-    "@typescript-eslint/eslint-plugin": "^4.19.0",
-    "@typescript-eslint/parser": "^4.19.0",
-    "eslint": "^7.22.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-plugin-svelte3": "^3.2.0",
+    "@sveltejs/kit": "^1.0.0-next.392",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^3.4.1",
    "prettier": "~2.2.1",
-    "prettier-plugin-svelte": "^2.2.0",
-    "svelte": "^3.29.0",
-    "svelte-preprocess": "^4.0.0",
-    "tslib": "^2.0.0",
-    "typescript": "^4.0.0",
-    "vite": "^2.2.3"
+    "prettier-plugin-svelte": "^2.7.0",
+    "svelte": "^3.49.0",
+    "svelte-preprocess": "^4.10.7",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4",
+    "vite": "^3.0.2"
  },
  "type": "module",
  "dependencies": {
-    "@damillora/shian": "^3",
-    "@sveltejs/adapter-node": "^1.0.0-next.17",
-    "dayjs": "^1.10.4",
-    "howler": "^2.2.1",
-    "sass": "^1.35.2"
+    "@damillora/plachta": "^1.8.2",
+    "@damillora/shian": "^3.3.1",
+    "@sveltejs/adapter-node": "^1.0.0-next.83",
+    "dayjs": "^1.11.4",
+    "howler": "^2.2.3",
+    "sass": "^1.54.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app.html
+++ b/src/app.html
@ -1,32 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link
-			rel="prefetch"
-			href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap"
-		/>
-		<link
-			rel="prefetch"
-			href="https://fonts.googleapis.com/css?family=M+PLUS+1p:300,400,500&display=swap"
-		/>
-		<link rel="prefetch" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-		<link
-			rel="stylesheet"
-			href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500&display=swap"
-		/>
-		<link
-			rel="stylesheet"
-			href="https://fonts.googleapis.com/css?family=M+PLUS+1p:300,400,500&display=swap"
-		/>
-		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
-		<script async defer data-domain="nanao.moe" src="https://stats.nanao.moe/js/plausible.js"></script>

-		%svelte.head%
-	</head>
-	<body>
-		<div id="svelte">%svelte.body%</div>
-	</body>
-</html>
+<head>
+	<meta charset="utf-8" />
+	<link rel="icon" href="/favicon.png" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+	<script async defer data-domain="nanao.moe" src="https://stats.nanao.moe/js/plausible.js"></script>
+
+	%sveltekit.head%
+</head>
+
+<body>
+	<div>%sveltekit.body%</div>
+</body>
+
+</html>
--- a/src/lib/components/CopyArea.svelte
+++ b/src/lib/components/CopyArea.svelte
@ -10,3 +10,17 @@
 </script>

 <input type="text" class="copyarea" on:click={copy} bind:value={value} bind:this={copyarea} readonly/>
+
+<style lang="scss">
+    @import "@damillora/plachta/styles/global";
+
+    .copyarea {
+        background-color: var(--background-color);
+        cursor: pointer;
+        height: 100%;
+        width: 100%;
+        &:focus {
+            outline: none;
+        }
+    }
+</style>
--- a/src/lib/components/DarkModeButton.svelte
+++ b/src/lib/components/DarkModeButton.svelte
@ -1,21 +0,0 @@
-<script>
-    let icon = "brightness_low";
-    let text = "Dark Mode";
-
-    function toggleMode() {
-        if(window.document.body.getAttribute("data-theme") != "dark") {
-            window.document.body.setAttribute("data-theme","dark");
-            icon = "brightness_high";
-            text = "Light Mode"
-        } else {
-            window.document.body.setAttribute("data-theme","light");
-            icon = "brightness_low";
-            text = "Dark Mode"
-        }
-    }
-</script>
-
-<div class="menu__item menu--dark-mode" on:click={toggleMode}>
-    <i class="menu__icon material-icons md-24">{icon}</i>
-    <p class="menu__text">{text}</p>
-</div>
--- a/src/lib/components/FloatingYuriko.svelte
+++ b/src/lib/components/FloatingYuriko.svelte
@ -1,14 +1,47 @@
 <script>
-    import { Howl } from "howler";
-    function yurikoSound() {
-        var sound = new Howl({
-            src: "/yuriko.ogg",
-            volume: 0.3
-        });
-        sound.play();
-    }
+	import { Howl } from 'howler';
+	function yurikoSound() {
+		var sound = new Howl({
+			src: '/yuriko.ogg',
+			volume: 0.3
+		});
+		sound.play();
+	}
 </script>

 <div class="floating-yuriko hvr-float" on:click={yurikoSound}>
-    <img src="/yuriko-smol.png" alt="Yuriko" />
+	<img src="/yuriko-smol.png" alt="Yuriko" />
 </div>
+
+<style lang="scss">
+	.floating-yuriko {
+		position: fixed;
+		right: 1rem;
+		bottom: 1rem;
+		margin-bottom: 0px;
+		cursor: pointer;
+		&__image {
+			height: 20vh;
+		}
+	}
+
+	.hvr-float {
+		display: inline-block;
+		vertical-align: middle;
+		-webkit-transform: perspective(1px) translateZ(0);
+		transform: perspective(1px) translateZ(0);
+		box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+		-webkit-transition-duration: 0.3s;
+		transition-duration: 0.3s;
+		-webkit-transition-property: transform;
+		transition-property: transform;
+		-webkit-transition-timing-function: ease-out;
+		transition-timing-function: ease-out;
+	}
+	.hvr-float:hover,
+	.hvr-float:focus,
+	.hvr-float:active {
+		-webkit-transform: translateY(-8px);
+		transform: translateY(-8px);
+	}
+</style>
--- a/src/lib/components/GalleryImage.svelte
+++ b/src/lib/components/GalleryImage.svelte
@ -1,20 +0,0 @@
-<script>
-	export let src;
-	export let alt;
-
-	let shown;
-
-	function open() {
-		if (shown) {
-			window.open(src, '_blank');
-		}
-	}
-</script>
-
-<div class="gallery__image">
-	<img {src} {alt} on:click={() => (shown = !shown)} />
-	<div class:gallery__popup={true} class:gallery__popup--hidden={!shown}>
-		<img class="gallery__popup-image" {src} {alt} on:click={open} draggable="false" />
-		<div class="gallery__exit" on:click={() => (shown = !shown)}>x</div>
-	</div>
-</div>
--- a/src/lib/components/GameListItem.svelte
+++ b/src/lib/components/GameListItem.svelte
@ -1,15 +1,79 @@
 <script>
-    import CopyArea from "$lib/components/CopyArea.svelte";
+	import Card from '@damillora/plachta/components/Card/Card.svelte';
+	import CardContent from '@damillora/plachta/components/Card/CardContent.svelte';
+	import CardTitle from '@damillora/plachta/components/Card/CardTitle.svelte';
+	import CopyArea from '$lib/components/CopyArea.svelte';

-    export let name, link, gameid, playername;
+	export let name, link, gameid, playername;
 </script>

-<div class="game-item">
-    <div class="game-item__title">
-        <p class="game-item__caption"><a href={link}>{name}</a></p>
-    </div>
-    <div class="game-item__content">
-        <p class="game-item__text"><span class="game-item__icon material-icons">person</span><CopyArea value={playername} /></p>
-        <p class="game-item__text"><span class="game-item__icon material-icons">code</span><CopyArea value={gameid} /></p>
-    </div>
-</div>
+<Card>
+	<div class="game-card">
+		<CardContent>
+			<CardTitle>
+				<a href={link}>{name}</a>
+			</CardTitle>
+		</CardContent>
+		<div class="game-card__info">
+			<div class="game-card__id game-card__id--top">
+				<span class="game-card__icon material-icons">person</span><CopyArea value={playername} />
+			</div>
+			<div class="game-card__id game-card__id--bottom">
+				<span class="game-card__icon material-icons">code</span><CopyArea value={gameid} />
+			</div>
+		</div>
+	</div>
+</Card>
+
+<style lang="scss">
+	@import '@damillora/plachta/styles/global';
+
+	.game-card {
+		width: 100%;
+		display: grid;
+		grid-template-rows: 1fr 150px;
+		grid-template-columns: 1fr;
+
+		@include screen(md) {
+			grid-template-rows: 1fr;
+			grid-template-columns: 6fr 300px;
+		}
+
+		&__info {
+			border-radius: 0px 0px 20px 20px;
+		}
+		&__id {
+			height: 50%;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			min-height: 4rem;
+			padding-left: 0.5rem;
+			cursor: pointer;
+			@include transition;
+
+			&:hover {
+				background-color: var(--highlight-bg-color);
+			}
+
+			&--top {
+				border-radius: 0px;
+
+				@include screen(md) {
+					border-radius: 0px 20px 0px 0px;
+				}
+			}
+			&--bottom {
+				border-radius: 0px 0px 20px 20px;
+
+				@include screen(md) {
+					border-radius: 0px 0px 20px 0px;
+				}
+			}
+		}
+
+		&__icon {
+			margin-right: 0.5rem;
+		}
+	}
+</style>
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@ -1,62 +0,0 @@
-<script>
-    import NavItem from "./NavItem.svelte";
-    import NavSeparator from "./NavSeparator.svelte";
-    import DarkModeButton from "$lib/components/DarkModeButton.svelte";
-    import { isYurikoBirthday } from "$lib/yuriko-birthday.js";
-
-    let menu_shown = false;
-    let detached = false;
-    let scrollY = 0;
-    function handleScroll(e) {
-        detached = scrollY > 64;
-    }
-</script>
-
-<svelte:window on:scroll={handleScroll} bind:scrollY />
-
-<div>
-    <div class:site-header={true} class:enabled={menu_shown} class:detached>
-        <div class:site-header__background={true} class:site-header__background--enabled={menu_shown} class:background-nanaomoe={true} class:background-nanaomoe--yuriko={isYurikoBirthday()} />
-        <div class="site-header__inner">
-            <header class="header">
-                <div class="header__top">
-                    <a
-                        class="header__title"
-                        href="/"
-                    >
-                        Damillora
-                        </a>
-                    <div
-                        class="header__nav-button"
-                        on:click={() => (menu_shown = !menu_shown)}
-                    >
-                        <span class="header__icon material-icons" alt="menu"
-                            >menu</span
-                        >
-                        <p class="header__nav-button-text">Menu</p>
-                    </div>
-                </div>
-                <div
-                    class:menu={true}
-                    class:enabled={menu_shown}
-                >
-                    <NavItem link="/about" icon="person" text="About" />
-                    <NavItem link="/projects" icon="work" text="Projects" />
-                    <NavItem
-                        link="/games"
-                        icon="videogame_asset"
-                        text="Game Profile"
-                    />
-                    <NavItem link="/links" icon="share" text="Links" />
-                    <NavItem link="/contact" icon="contacts" text="Contact" />
-                    <NavItem
-                        link="//blog.nanao.moe"
-                        icon="rss_feed"
-                        text="Blog"
-                    />
-                    <DarkModeButton />
-                </div>
-            </header>
-        </div>
-    </div>
-</div>
--- a/src/lib/components/MediaItem.svelte
+++ b/src/lib/components/MediaItem.svelte
@ -1,14 +1,20 @@
 <script>
-    export let title, link;
+	import Card from '@damillora/plachta/components/Card/Card.svelte';
+	import CardContent from '@damillora/plachta/components/Card/CardContent.svelte';
+	import CardTitle from '@damillora/plachta/components/Card/CardTitle.svelte';
+	import CardDescription from '@damillora/plachta/components/Card/CardDescription.svelte';
+	export let title, link, description;
 </script>

-<div class="media-item">
-    <div class="media-item__title">
-        <p class="media-item__caption"><a href={link}>{title}</a></p>
-    </div>
-    <div class="media-item__content">
-        <p class="media-item__text">
-            <slot />
-        </p>
-    </div>
-</div>
+<Card>
+	<CardContent>
+		<CardTitle>
+			<a href={link}>
+				{title}
+			</a>
+		</CardTitle>
+		<CardDescription>
+			{description}
+		</CardDescription>
+	</CardContent>
+</Card>
--- a/src/lib/components/NavItem.svelte
+++ b/src/lib/components/NavItem.svelte
@ -1,10 +0,0 @@
-<script>
-    export let link, text, icon;
-</script>
-
-<div class="menu__item">
-    <a class="menu__link" href={link}>
-        <i class="menu__icon material-icons md-24">{icon}</i>
-        <p class="menu__text">{text}</p>
-    </a>
-</div>
--- a/src/lib/components/NavSeparator.svelte
+++ b/src/lib/components/NavSeparator.svelte
@ -1,3 +0,0 @@
-
-<div class="menu__separator">
-</div>
--- a/src/lib/components/PageHeader.svelte
+++ b/src/lib/components/PageHeader.svelte
@ -1,14 +0,0 @@
-<script>
-    import { isYurikoBirthday } from "$lib/yuriko-birthday.js";
-</script>
-
-<div class="page-header">
-    <div class:page-header__background={true} class:background-nanaomoe={true} class:background-nanaomoe--yuriko={isYurikoBirthday()} >
-        <div class="page-header__overlay" />
-    </div>
-    <div class="page-header__contents">
-        <div class="container mx-auto main">
-            <slot />
-        </div>
-    </div>
-</div>
--- a/src/lib/components/ProjectItem.svelte
+++ b/src/lib/components/ProjectItem.svelte
@ -1,17 +1,12 @@
 <script>
-    export let codename, name, description;
+	import PostCard from '@damillora/plachta/components/PostCard/PostCard.svelte';
+	export let codename, name, description;
 </script>

-<div class="project-item">
-    <div class="project-item__image">
-        <img src={"/images/projects/" + codename + "/1.png"} alt={name} />
-    </div>
-    <div class="project-item__text">
-        <div class="project-item__title">
-            <h1><a href={"/projects/" + codename}>{name}</a></h1>
-        </div>
-        <div class="project-item__content">
-            <p>{description}</p>
-        </div>
-    </div>
-</div>
+<PostCard
+	title={name}
+	url={`/projects/${codename}`}
+	excerpt={description}
+	feature_image={`/images/projects/${codename}/1.jpg`}
+    readMore={false}
+/>
--- a/src/routes/[link].js
+++ b/src/routes/[link].js
@ -2,7 +2,7 @@ var linksCache = {}

 const shortenerBase = process.env.SHORTENER_BASE || 'https://link.nanao.moe';

-export async function get({ params }) {
+export async function GET({ params }) {
        var path = params.link;
        if (linksCache[path]) {
                if (linksCache[path] != 'none') {
--- a/src/routes/__error.svelte
+++ b/src/routes/__error.svelte
@ -10,7 +10,7 @@
 </script>

 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';

 	export let status;
 	export let error;
@ -20,17 +20,14 @@
 	<title>{status}</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">{status}</h1>
-		<p class="page-header__text">{error.message}</p>
-	</PageHeader>
-	<main class="container main">
-		{#if error.stack}
-			<pre>{error.stack}</pre>
-		{/if}
-	</main>
-</div>
+<Container>
+	<h1>{status}</h1>
+	<p>{error.message}</p>
+
+	{#if error.stack}
+		<pre>{error.stack}</pre>
+	{/if}
+</Container>

 <style>
 </style>
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -1,18 +1,48 @@
 <script>
-	import Header from '$lib/components/Header.svelte';
+	import { navigating } from '$app/stores';
+	import Base from '@damillora/plachta/components/Base/Base.svelte';
+	import Header from '@damillora/plachta/components/Header/Header.svelte';
+	import Hero from '@damillora/plachta/components/Hero/Hero.svelte';
+	import NavMenu from '@damillora/plachta/components/Nav/NavMenu.svelte';
+	import NavDarkMode from '@damillora/plachta/components/Nav/NavDarkMode.svelte';
+	import Footer from '@damillora/plachta/components/Footer/Footer.svelte';
+	import NavigationLoading from '@damillora/plachta/components/NavigationLoading/NavigationLoading.svelte';
 	import FloatingYuriko from '$lib/components/FloatingYuriko.svelte';
 	import { isYurikoBirthday } from '$lib/yuriko-birthday.js';
+	let loading = true;
+	navigating.subscribe((x) => (loading = x != null));
 </script>

-<Header />
-<main>
+<Base>
+	<Header>
+		<svelte:fragment slot="title">
+			<a href="/"> <strong>Damillora</strong></a>
+		</svelte:fragment>
+		<svelte:fragment slot="nav">
+			<NavMenu label="About" url="/about" />
+			<NavMenu label="Projects" url="/projects" />
+			<NavMenu label="Game Profile" url="/games" />
+			<NavMenu label="Links" url="/links" />
+			<NavMenu label="Contact" url="/contact" />
+			<NavMenu label="Blog" url="/blog" />
+			<NavDarkMode />
+		</svelte:fragment>
+	</Header>
+
+	<Hero background="/images/bg/283-yuika/bg-xl.jpg" />
+
 	<slot />
-</main>
+
+	<Footer>
+		<p>Copyright (c) 2021 Damillora</p>
+	</Footer>
+</Base>
+
 {#if isYurikoBirthday()}
 	<FloatingYuriko />
 {/if}

+<NavigationLoading {loading} />
+
 <style lang="scss" global>
-	@import '@damillora/shian/dist/app.css';
-	@import '../sass/background';
 </style>
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@ -1,17 +1,15 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
-	import GalleryImage from '$lib/components/GalleryImage.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Index from '@damillora/plachta/components/PageTypes/Index.svelte';
 </script>

 <svelte:head>
 	<title>Damillora: About</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
+<Container>
+	<Index>
 		<h1 class="page-header__heading">About Damillora</h1>
-	</PageHeader>
-	<main class="container main">
 		<p>
 			Hello! My name is Damillora. I'm an indie Virtual YouTuber with a focus on technology, games,
 			and music exploration!
@ -103,8 +101,8 @@
 		<p>My public key is accessible <a href="/damillora.asc">here</a>.</p>
 		<h2>Producer Meishi</h2>
 		<div class="gallery">
-			<GalleryImage src="/images/meishi/front-shianv2.png" alt="Meishi front" />
-			<GalleryImage src="/images/meishi/back-shianv2.png" alt="Meishi back" />
+			<img src="/images/meishi/front-shianv2.png" alt="Meishi front" />
+			<img src="/images/meishi/back-shianv2.png" alt="Meishi back" />
 		</div>
-	</main>
-</div>
+	</Index>
+</Container>
--- a/src/routes/ask-form.js
+++ b/src/routes/ask-form.js
@ -3,7 +3,7 @@
 // Public webhook URL for forms.
 let webhookUrl = "https://n8n.nanao.moe/webhook/fd943cbe-fd27-47f8-98ec-01c14b5104fe";

-export async function post({ body }) {
+export async function POST({ body }) {
    if (!body.message) {
        return {
            status: 400,
--- a/src/routes/contact.svelte
+++ b/src/routes/contact.svelte
@ -1,16 +1,16 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Hero from '@damillora/plachta/components/Hero/Hero.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Index from '@damillora/plachta/components/PageTypes/Index.svelte';
 </script>

 <svelte:head>
 	<title>Damillora: Contact</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Contact</h1>
-	</PageHeader>
-	<main class="container mx-auto main">
+<Container>
+	<Index>
+		<h1>Contact</h1>
 		<p>You can contact me via various channels.</p>
 		<h2>Email: damillora(at)damillora.com</h2>
 		<p>
@ -22,5 +22,5 @@
 			If you're a VTuber and want to collaborate, please send me a Direct Message my way via
 			Twitter! I will gladly help set up the things needed.
 		</p>
-	</main>
-</div>
+	</Index>
+</Container>
--- a/src/routes/debut.svelte
+++ b/src/routes/debut.svelte
@ -1,58 +0,0 @@
-<script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
-
-	let message = '';
-	let errors = '';
-	const submitMessage = async () => {
-		errors = '';
-		const endpoint = '/ask-form';
-		const response = await fetch(endpoint, {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json'
-			},
-			body: JSON.stringify({
-				message: message
-			})
-		});
-		const data = await response.json();
-		if (response.status === 400) {
-			errors = data.error;
-		} else {
-			errors = 'Success!';
-		}
-	};
-</script>
-
-<svelte:head>
-	<title>Damillora</title>
-</svelte:head>
-
-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Debut Stream!</h1>
-	</PageHeader>
-	<main class="container main">
-		<h1>The debut has already concluded. Thanks to everyone who tuned in the stream!</h1>
-		<p>This page contains information about my debut stream as a Virtual YouTuber.</p>
-		<h2>When will it happen?</h2>
-		<p>The debut stream is set to be on <strong>June 19th, 2021</strong>.</p>
-		<h2>Watch my debut</h2>
-		<p>
-			My debut stream will be in this link: <a href="https://www.youtube.com/watch?v=PSTM2_tAywg"
-				>[Debut Stream] Connection Established #1</a
-			>
-		</p>
-		<h2>Send me a message for my debut!</h2>
-		<p>
-			All submissions are <strong>anonymous</strong>. Seriously,
-			<a href="/projects/rinze">check it for yourself, it's open source</a>.
-		</p>
-		<p>The messages you send will be read during my debut stream.</p>
-		<form on:submit|preventDefault={submitMessage}>
-			<textarea class="input" bind:value={message} rows="5" />
-			<p>{errors}</p>
-			<button class="button" type="submit">Send</button>
-		</form>
-	</main>
-</div>
--- a/src/routes/games/aaside.svelte
+++ b/src/routes/games/aaside.svelte
@ -1,24 +1,32 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader imageType="cue-mei2">
-        <h1 class="page-header__heading">Game Profile: ARGONAVIS from BanG Dream! AAside</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://aaside.bushimo.jp">Game Website</a></p>
-    </PageHeader>
-    <main class="container main">
-        <h2>My Review</h2>
-        <blockquote>
-            My take on it? Give it some time. AAside is actually quite
-            aesthetically polished, it has stand-out features, and the rhythm
-            gameplay is okay. However, there are definitely valid concerns and
-            missing features that I understand can be a game-breaker for some.
-        </blockquote>
-        <p><a href="https://blog.nanao.moe/game-reviews/argonavis-from-bang-dream-aaside/">Read more</a></p>
-    </main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: ARGONAVIS from BanG Dream! AAside</h1>
+			<p><a href="https://aaside.bushimo.jp">Game Website</a></p>
+		</PageHeader>
+
+		<PostMain comments={false}>
+			<h2>My Review</h2>
+			<blockquote>
+				My take on it? Give it some time. AAside is actually quite aesthetically polished, it has
+				stand-out features, and the rhythm gameplay is okay. However, there are definitely valid
+				concerns and missing features that I understand can be a game-breaker for some.
+			</blockquote>
+			<p>
+				<a href="https://blog.nanao.moe/game-reviews/argonavis-from-bang-dream-aaside/">Read more</a
+				>
+			</p>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/games/alchemystars.svelte
+++ b/src/routes/games/alchemystars.svelte
@ -1,16 +1,21 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

-a<svelte:head>
+<svelte:head>
 	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Game Profile: Alchemy Stars</h1>
-		<p class="page-header__text">
-			<a class="post-header__social" href="https://www.alchemystars.com/">Game Website</a>
-		</p>
-	</PageHeader>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Alchemy Stars</h1>
+			<p>
+				<a href="https://www.alchemystars.com/">Game Website</a>
+			</p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/arcaea.svelte
+++ b/src/routes/games/arcaea.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Arcaea</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://arcaea.lowiro.com">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Arcaea</h1>
+			<p><a class="post-header__social" href="https://arcaea.lowiro.com">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/arknights.svelte
+++ b/src/routes/games/arknights.svelte
@ -1,27 +1,30 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Arknights</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://www.arknights.global">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main">
-        <h2>My Review</h2>
-        <blockquote>
-            The strength of this game is in its complexities, getting you
-            invested into the game. If you like tower defenses and also like to
-            think about tactics and strategies, this game is for you.
-        </blockquote>
-        <p>
-            <a href="https://blog.nanao.moe/game-reviews/arknights/"
-                >Read more</a
-            >
-        </p>
-    </main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Arknights</h1>
+			<p><a href="https://www.arknights.global">Game Website</a></p>
+		</PageHeader>
+		<PostMain comments={false}>
+			<h2>My Review</h2>
+			<blockquote>
+				The strength of this game is in its complexities, getting you invested into the game. If you
+				like tower defenses and also like to think about tactics and strategies, this game is for
+				you.
+			</blockquote>
+			<p>
+				<a href="https://blog.nanao.moe/game-reviews/arknights/">Read more</a>
+			</p>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/games/arterygear.svelte
+++ b/src/routes/games/arterygear.svelte
@ -0,0 +1,19 @@
+<script>
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
+</script>
+
+<svelte:head>
+	<title>Damillora: Game Profile</title>
+</svelte:head>
+
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Artery Gear Fusion (EN)</h1>
+			<p><a href="arterygear.biligames.com/">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/azurlane.svelte
+++ b/src/routes/games/azurlane.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Azur Lane (EN)</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://azurlane.yo-star.com">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Azur Lane (EN)</h1>
+			<p><a href="https://azurlane.yo-star.com">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/bandori.svelte
+++ b/src/routes/games/bandori.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: BanG Dream! Girls Band Party (JP)</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://bang-dream.bushimo.jp/">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: BanG Dream! Girls Band Party (JP)</h1>
+			<p><a href="https://bang-dream.bushimo.jp/">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/bluearchive.svelte
+++ b/src/routes/games/bluearchive.svelte
@ -1,32 +1,34 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Blue Archive</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://bluearchive.jp/">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main">
-        <h2>My Review</h2>
-        <blockquote>
-            In conclusion, Blue Archive is one of those games that I would
-            actually play daily. While the gameplay is all familiar, it doesn't
-            screw it up either. I also have grown attached to the students cast,
-            and it is a reason for me to continue playing. However, its series
-            of early problems and maintenances does hurt it a little.
-            Personally, I really don't find much problems playing the game, but
-            your mileage might vary, and if you find its early problems too
-            much, please wait a little longer.
-        </blockquote>
-        <p>
-            <a href="https://blog.nanao.moe/game-reviews/blue-archive/"
-                >Read more</a
-            >
-        </p>
-    </main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Blue Archive</h1>
+			<p><a href="https://bluearchive.jp/">Game Website</a></p>
+		</PageHeader>
+
+		<PostMain comments={false}>
+			<h2>My Review</h2>
+			<blockquote>
+				In conclusion, Blue Archive is one of those games that I would actually play daily. While
+				the gameplay is all familiar, it doesn't screw it up either. I also have grown attached to
+				the students cast, and it is a reason for me to continue playing. However, its series of
+				early problems and maintenances does hurt it a little. Personally, I really don't find much
+				problems playing the game, but your mileage might vary, and if you find its early problems
+				too much, please wait a little longer.
+			</blockquote>
+			<p>
+				<a href="https://blog.nanao.moe/game-reviews/blue-archive/">Read more</a>
+			</p>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/games/counterside.svelte
+++ b/src/routes/games/counterside.svelte
@ -1,25 +1,31 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
 	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Game Profile: Counter:Side</h1>
-		<p class="page-header__text">
-			<a class="post-header__social" href="https://counterside.zlongame.com/">Game Website</a>
-		</p>
-	</PageHeader>
-	<main class="container mx-auto main">
-		<h2>My Review</h2>
-		<blockquote>
-			In conclusion, Counter:Side is a pretty fun game to play, if that's your thing. This is not in
-			a genre that I usually play nor it's something that I feel emotionally invested in, but I
-			think it's worth a try.
-		</blockquote>
-		<p><a href="//blog.nanao.moe/game-reviews/counter-side/">Read more</a></p>
-	</main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Counter:Side</h1>
+			<p>
+				<a href="https://counterside.zlongame.com/">Game Website</a>
+			</p>
+		</PageHeader>
+
+		<PostMain comments={false}>
+			<h2>My Review</h2>
+			<blockquote>
+				In conclusion, Counter:Side is a pretty fun game to play, if that's your thing. This is not
+				in a genre that I usually play nor it's something that I feel emotionally invested in, but I
+				think it's worth a try.
+			</blockquote>
+			<p><a href="//blog.nanao.moe/game-reviews/counter-side/">Read more</a></p>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/games/cue.svelte
+++ b/src/routes/games/cue.svelte
@ -1,46 +1,45 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: CUE!</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://www.cue-liber.jp/">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main">
-        <h2>My Review</h2>
-        <h3>One Year of CUE!</h3>
-        <blockquote>
-            Overall, since the game was released, CUE! has improved a lot, with
-            some areas receiving a welcome UX improvement, convenience features
-            that make CUE!'s idle aspect not feel like wasting time, and an
-            entirely new mode for those who want something that feels more like
-            actual gameplay. Here's to hoping that CUE! will continue to improve
-            and move forward.
-            <br /><br />
-            For those who haven't played CUE! yet, there's no better time than now!
-            It's one of the games that will take just a little bit of your time.
-            It also requires no significant time investments for those who doesn't
-            play to rank in events or Compe, so adding CUE! to your daily tasks list
-            doesn't hurt. As with my first review, I recommend to try it out, you
-            will appreciate it.
-        </blockquote>
-        <p>
-            <a href="https://blog.nanao.moe/game-reviews/one-year-of-cue/"
-                >Read more</a
-            >
-        </p>
-        <h3>Original Release Date Review</h3>
-        <blockquote>
-            Despite the similarities and the amount of grinding, CUE! manages to
-            stand out for me. I recommend to try it sometimes, and get to the
-            point where you can change casts in the anime. You will appreciate
-            it.
-        </blockquote>
-        <p><a href="https://blog.nanao.moe/game-reviews/cue/">Read more</a></p>
-    </main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: CUE!</h1>
+			<p><a href="https://www.cue-liber.jp/">Game Website</a></p>
+		</PageHeader>
+
+		<PostMain comments={false}>
+			<h2>My Review</h2>
+			<h3>One Year of CUE!</h3>
+			<blockquote>
+				Overall, since the game was released, CUE! has improved a lot, with some areas receiving a
+				welcome UX improvement, convenience features that make CUE!'s idle aspect not feel like
+				wasting time, and an entirely new mode for those who want something that feels more like
+				actual gameplay. Here's to hoping that CUE! will continue to improve and move forward.
+				<br /><br />
+				For those who haven't played CUE! yet, there's no better time than now! It's one of the games
+				that will take just a little bit of your time. It also requires no significant time investments
+				for those who doesn't play to rank in events or Compe, so adding CUE! to your daily tasks list
+				doesn't hurt. As with my first review, I recommend to try it out, you will appreciate it.
+			</blockquote>
+			<p>
+				<a href="https://blog.nanao.moe/game-reviews/one-year-of-cue/">Read more</a>
+			</p>
+			<h3>Original Release Date Review</h3>
+			<blockquote>
+				Despite the similarities and the amount of grinding, CUE! manages to stand out for me. I
+				recommend to try it sometimes, and get to the point where you can change casts in the anime.
+				You will appreciate it.
+			</blockquote>
+			<p><a href="https://blog.nanao.moe/game-reviews/cue/">Read more</a></p>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/games/fgo.svelte
+++ b/src/routes/games/fgo.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Fate/Grand Order (JP)</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://www.fate-go.jp">Game Website</a></p>
-    </PageHeader>
-    <main class="container main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Fate/Grand Order (JP)</h1>
+			<p><a href="https://www.fate-go.jp">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/genshin.svelte
+++ b/src/routes/games/genshin.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Genshin Impact</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://genshin.mihoyo.com">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Genshin Impact</h1>
+			<p><a href="https://genshin.hoyoverse.com">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/honkai.svelte
+++ b/src/routes/games/honkai.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Honkai Impact 3rd</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://honkaiimpact3.mihoyo.com">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Honkai Impact 3rd</h1>
+			<p><a href="https://honkaiimpact3.hoyoverse.com">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/idoly.svelte
+++ b/src/routes/games/idoly.svelte
@ -1,21 +1,30 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
 	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Game Profile: IDOLY PRIDE</h1>
-		<p class="page-header__text">
-			<a class="post-header__social" href="https://idolypride.jp/game/">Game Website</a>
-		</p>
-	</PageHeader>
-	<!-- <main class="container mx-auto main">
-        <h2>My Review</h2>
-        <blockquote />
-        <p><a href="/">Read more</a></p>
-    </main> -->
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: IDOLY PRIDE</h1>
+			<p>
+				<a href="https://idolypride.jp/game/">Game Website</a>
+			</p>
+		</PageHeader>
+
+		<PostMain comments={false}>
+			<h2>My Review</h2>
+			<blockquote>
+				In conclusion, IDOLY PRIDE is the go-to side game when you are starting in the morning or
+				late night when you are finished with just about everything that day.
+			</blockquote>
+			<p><a href="https://blog.nanao.moe/game-reviews/idoly-pride">Read more</a></p>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/games/index.svelte
+++ b/src/routes/games/index.svelte
@ -1,18 +1,18 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
 	import GameListItem from '$lib/components/GameListItem.svelte';
+	import Index from '@damillora/plachta/components/PageTypes/Index.svelte';
 </script>

 <svelte:head>
 	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Game Profile</h1>
-	</PageHeader>
-	<main class="container mx-auto main">
-		<p class="page-header__text">
+<Container>
+	<Index>
+		<h1>Game Profile</h1>
+
+		<p>
 			This page lists various IDs from games that I play or try out, in varying states of activity.
 		</p>
 		<p>My most frequently played genre is rhythm games, but sometimes I try other genres too</p>
@ -45,6 +45,12 @@
 				playername="Damillora"
 				gameid="Damillora#0835"
 			/>
+			<GameListItem
+				name="Artery Gear: Fusion (EN)"
+				link="/games/arterygear"
+				playername="Damilora"
+				gameid="030454085"
+			/>
 			<GameListItem
 				name="Azur Lane (EN)"
 				link="/games/azurlane"
@ -174,13 +180,13 @@
 				gameid="y2medy4d"
 			/>
 			<!--
-            <GameListItem
-              name=""
-              link=""
-              playername=""
-              gameid=""
-              />
-            -->
+		<GameListItem
+		  name=""
+		  link=""
+		  playername=""
+		  gameid=""
+		  />
+		-->
 		</div>
-	</main>
-</div>
+	</Index>
+</Container>
--- a/src/routes/games/llsif.svelte
+++ b/src/routes/games/llsif.svelte
@ -1,17 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">
-            Game Profile: Love Live! School Idol Festival (JP)
-        </h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://lovelive-sif.bushimo.jp/">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Love Live! School Idol Festival (JP)</h1>
+			<p><a href="https://lovelive-sif.bushimo.jp/">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/llsifas.svelte
+++ b/src/routes/games/llsifas.svelte
@ -1,17 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">
-            Game Profile: Love Live! School idol festival ALL STARS
-        </h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://lovelive-as.bushimo.jp/">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Love Live! School idol festival ALL STARS</h1>
+			<p><a href="https://lovelive-as.bushimo.jp/">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/maimai.svelte
+++ b/src/routes/games/maimai.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: maimai DX</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://maimai.sega.com/">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: maimai DX</h1>
+			<p><a href="https://maimai.sega.com/">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/mirishita.svelte
+++ b/src/routes/games/mirishita.svelte
@ -1,21 +1,21 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">
-            Game Profile: The iDOLM@STER Million Live: Theater Days
-        </h1>
-        <p class="page-header__text">
-            <a href="https://millionlive.idolmaster.jp/theaterdays/"
-                >Game Website</a
-            >
-        </p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: The iDOLM@STER Million Live: Theater Days</h1>
+			<p>
+				<a href="https://millionlive.idolmaster.jp/theaterdays/">Game Website </a>
+			</p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/nogikoi.svelte
+++ b/src/routes/games/nogikoi.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Nogikoi</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://nogikoi.jp">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Nogikoi</h1>
+			<p><a href="https://nogikoi.jp">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/poplinks.svelte
+++ b/src/routes/games/poplinks.svelte
@ -1,31 +1,33 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: THE iDOLM@STER POPLINKS</h1>
-        <p class="page-header__text">
-            <a href="https://poplinks.idolmaster-official.jp/">Game Website</a>
-        </p>
-    </PageHeader>
-    <main class="container mx-auto main">
-        <h2>My Review</h2>
-        <blockquote>
-            Overall, POPLINKS is an exciting game where you can see all five
-            branches of THE iDOLM@STER together in the first game ever to do so,
-            where you can play either casually or competitively, and fully
-            immerse yourself in your favorite idols. It is quite something.
-        </blockquote>
-        <p>
-            <a
-                href="https://blog.nanao.moe/game-reviews/the-idolmaster-poplinks/"
-                >Read more</a
-            >
-        </p>
-    </main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: THE iDOLM@STER POPLINKS</h1>
+			<p>
+				<a href="https://poplinks.idolmaster-official.jp/">Game Website</a>
+			</p>
+		</PageHeader>
+
+		<PostMain comments={false}>
+			<h2>My Review</h2>
+			<blockquote>
+				Overall, POPLINKS is an exciting game where you can see all five branches of THE iDOLM@STER
+				together in the first game ever to do so, where you can play either casually or
+				competitively, and fully immerse yourself in your favorite idols. It is quite something.
+			</blockquote>
+			<p>
+				<a href="https://blog.nanao.moe/game-reviews/the-idolmaster-poplinks/">Read more</a>
+			</p>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/games/puroseka.svelte
+++ b/src/routes/games/puroseka.svelte
@ -1,29 +1,31 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Project SEKAI COLORFUL STAGE!</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://pjsekai.sega.jp/">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main">
-        <h2>My Review</h2>
-        <blockquote>
-            Overall, I've gotten what I wanted to see in a mobile rhythm game.
-            Virtual Lives are also very interesting with many possibilities that
-            can happen. The other aspects are cherry on top, and they're also
-            not bad too. Project SEKAI is great.
-        </blockquote>
-        <p>
-            <a
-                href="https://blog.nanao.moe/game-reviews/project-sekai-colorful-stage/"
-                >Read more</a
-            >
-        </p>
-    </main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Project SEKAI COLORFUL STAGE!</h1>
+			<p><a href="https://pjsekai.sega.jp/">Game Website</a></p>
+		</PageHeader>
+
+		<PostMain comments={false}>
+			<h2>My Review</h2>
+			<blockquote>
+				Overall, I've gotten what I wanted to see in a mobile rhythm game. Virtual Lives are also
+				very interesting with many possibilities that can happen. The other aspects are cherry on
+				top, and they're also not bad too. Project SEKAI is great.
+			</blockquote>
+			<p>
+				<a href="https://blog.nanao.moe/game-reviews/project-sekai-colorful-stage/">Read more</a>
+			</p>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/games/saisuta.svelte
+++ b/src/routes/games/saisuta.svelte
@ -1,22 +1,21 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
 	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Game Profile: THE iDOLM@STER SideM GROWING STARS</h1>
-		<p class="page-header__text">
-			<a class="post-header__social" href="https://sidem-gs.idolmaster-official.jp/">Game Website</a
-			>
-		</p>
-	</PageHeader>
-	<main class="container mx-auto main">
-		<!-- <h2>My Review</h2>
-        <blockquote />
-        <p><a href="/">Read more</a></p> -->
-	</main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: THE iDOLM@STER SideM GROWING STARS</h1>
+			<p>
+				<a href="https://sidem-gs.idolmaster-official.jp/">Game Website</a>
+			</p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/sdvx.svelte
+++ b/src/routes/games/sdvx.svelte
@ -1,19 +1,21 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: SOUND VOLTEX VIVID WAVE</h1>
-        <p class="page-header__text">
-            <a href="https://p.eagate.573.jp/game/sdvx/v/p/index.html"
-                >Game Website</a
-            >
-        </p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: SOUND VOLTEX VIVID WAVE</h1>
+			<p>
+				<a href="https://p.eagate.573.jp/game/sdvx/v/p/index.html">Game Website</a>
+			</p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/shadowverse.svelte
+++ b/src/routes/games/shadowverse.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Shadowverse</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://shadowverse.com/">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Shadowverse</h1>
+			<p><a href="https://shadowverse.com/">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/shinymas.svelte
+++ b/src/routes/games/shinymas.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: THE IDOLM@STER: Shiny Colors</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://shinycolors.idolmaster.jp">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: THE IDOLM@STER: Shiny Colors</h1>
+			<p><a href="https://shinycolors.idolmaster.jp">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/starira.svelte
+++ b/src/routes/games/starira.svelte
@ -1,17 +1,21 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Revue Starlight Re LIVE (EN)</h1>
-        <p class="page-header__text">
-            <a href="https://www.en.revuestarlight-relive.com/">Game Website</a>
-        </p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Revue Starlight Re LIVE (EN)</h1>
+			<p>
+				<a href="https://www.en.revuestarlight-relive.com/">Game Website</a>
+			</p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/t7s.svelte
+++ b/src/routes/games/t7s.svelte
@ -1,15 +1,19 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: Tokyo 7th Sisters</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://t7s.jp">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main" />
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile: Tokyo 7th Sisters</h1>
+			<p><a href="https://t7s.jp">Game Website</a></p>
+		</PageHeader>
+	</Post>
+</Container>
--- a/src/routes/games/template.svelte
+++ b/src/routes/games/template.svelte
@ -1,19 +1,25 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile:</h1>
-        <p class="page-header__text"><a class="post-header__social" href="/">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main">
-        <h2>My Review</h2>
-        <blockquote />
-        <p><a href="/">Read more</a></p>
-    </main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Game Profile:</h1>
+			<p><a href="/">Game Website</a></p>
+		</PageHeader>
+
+		<PostMain comments={false}>
+			<h2>My Review</h2>
+			<blockquote />
+			<p><a href="/">Read more</a></p>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/games/unison.svelte
+++ b/src/routes/games/unison.svelte
@ -1,27 +1,33 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Game Profile</title>
+	<title>Damillora: Game Profile</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Game Profile: 欅坂46・日向坂46 UNI'S ON AIR</h1>
-        <p class="page-header__text"><a class="post-header__social" href="https://keyahina-unisonair.com/">Game Website</a></p>
-    </PageHeader>
-    <main class="container mx-auto main">
-        <h2>My Review</h2>
-        <blockquote>
-            Suffice to say, I enjoy this game more than Nogizaka46's rhythm
-            game, which requires memorization of songs a bit too much.
-        </blockquote>
-        <p>
-            <a
-                href="https://blog.nanao.moe/game-reviews/keyakizaka46-hinatazaka46-unis-on-air/"
-                >Read more</a
-            >
-        </p>
-    </main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+            <h1>Game Profile: 欅坂46・日向坂46 UNI'S ON AIR</h1>
+            <p><a href="https://keyahina-unisonair.com/">Game Website</a></p>
+		</PageHeader>
+
+		<PostMain comments={false}>
+            <h2>My Review</h2>
+            <blockquote>
+                Suffice to say, I enjoy this game more than Nogizaka46's rhythm
+                game, which requires memorization of songs a bit too much.
+            </blockquote>
+            <p>
+                <a
+                    href="https://blog.nanao.moe/game-reviews/keyakizaka46-hinatazaka46-unis-on-air/"
+                    >Read more</a
+                >
+            </p>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@ -1,30 +1,33 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Hero from '@damillora/plachta/components/Hero/Hero.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Index from '@damillora/plachta/components/PageTypes/Index.svelte';
 </script>

 <svelte:head>
 	<title>Damillora</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Damillora</h1>
-		<p class="page-header__text">Technology enthusiast VTuber!</p>
-	</PageHeader>
-	<main class="container main">
+<Container>
+	<Index>
+		<h1>Welcome to Damillora's website</h1>
 		<p>
 			Welcome to the official website of indie Virtual YouTuber and technology enthusiast Damillora!
 		</p>
-		<p>I do tech, programming, and mobile games stuff. I like unique, weird, and interesting things,</p>
+		<p>
+			I do tech, programming, and mobile games stuff. I like unique, weird, and interesting things,
+		</p>
 		<h2>Channel trailer</h2>
 		<p>Coming soon...</p>
-		<h2>Join the Network: <a href="https://discord.gg/hzdgA7ZyNz">Discord</a>&nbsp;|&nbsp;<a href="https://matrix.to/#/#general:matrix.nanao.moe">Matrix</a></h2>
+		<h2>
+			Join the Network: <a href="https://discord.gg/hzdgA7ZyNz">Discord</a>&nbsp;|&nbsp;<a
+				href="https://matrix.to/#/#general:matrix.nanao.moe">Matrix</a
+			>
+		</h2>
 		<p>
-			The Damillora Network is the official place for my fans to interact, and a
-			place for enthusiast to gather and discuss about various topics!
+			The Damillora Network is the official place for my fans to interact, and a place for
+			enthusiast to gather and discuss about various topics!
 		</p>
-		<p>
-			The Network is reachable via Discord and Matrix.
-		</p>
-	</main>
-</div>
+		<p>The Network is reachable via Discord and Matrix.</p>
+	</Index>
+</Container>
--- a/src/routes/links.svelte
+++ b/src/routes/links.svelte
@ -1,29 +1,26 @@
 <script>
-    import PageHeader from "$lib/components/PageHeader.svelte";
-    import MediaItem from "$lib/components/MediaItem.svelte";
+	import Hero from '@damillora/plachta/components/Hero/Hero.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Index from '@damillora/plachta/components/PageTypes/Index.svelte';
+	import MediaItem from '$lib/components/MediaItem.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Links</title>
+	<title>Damillora: Links</title>
 </svelte:head>

-<div class="page">
-    <PageHeader>
-        <h1 class="page-header__heading">Links</h1>
-    </PageHeader>
-    <main class="container mx-auto main">
-        <p>
-            Here, I post links that is of my interest, and might be for you too!
-        </p>
-        <h2>Personal Links</h2>
-        <div class="card-list">
-            <MediaItem
-                title="Damillora's Favorite Music Playlist"
-                link="/favmusiclist"
-            >
-                    This playlist contains some of the music I listen to
-                    frequently.
-            </MediaItem>
-        </div>
-    </main>
-</div>
+<Container>
+	<Index>
+		<h1>Links</h1>
+
+		<p>Here, I post links that is of my interest, and might be for you too!</p>
+		<h2>Personal Links</h2>
+		<div class="card-list">
+			<MediaItem
+				title="Damillora's Favorite Music Playlist"
+				link="/favmusiclist"
+				description="This playlist contains some of the music I listen to frequently."
+			/>
+		</div>
+	</Index>
+</Container>
--- a/src/routes/projects/altessimo.svelte
+++ b/src/routes/projects/altessimo.svelte
@ -1,39 +1,43 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
-	import GalleryImage from '$lib/components/GalleryImage.svelte';
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
 	<title>Damillora: Altessimo</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Altessimo</h1>
-		<p class="page-header__text">
-			<a class="post-header__social" href="https://altessimo.nanao.moe">live</a>
-			&bull;
-			<a class="post-header__social" href="https://github.com/Damillora/Altessimo">source code</a>
-		</p>
-	</PageHeader>
-	<main class="container mx-auto main">
-		<h2>Description</h2>
-		<p>
-			Altessimo is a web application I built to catalogue and put in context Idolmaster lyricists,
-			composers, and arrangers.
-		</p>
-		<p>The database itself is definitely still a work-in-progress.</p>
-		<h2>Technologies</h2>
-		<ul>
-			<li>Django</li>
-			<li>Bootstrap</li>
-		</ul>
-		<h2>Screenshots</h2>
-		<div class="gallery">
-			<GalleryImage src="/images/projects/altessimo/1.png" alt="Altessimo" />
-			<GalleryImage src="/images/projects/altessimo/2.png" alt="Altessimo" />
-			<GalleryImage src="/images/projects/altessimo/3.png" alt="Altessimo" />
-			<GalleryImage src="/images/projects/altessimo/4.png" alt="Altessimo" />
-		</div>
-	</main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Altessimo</h1>
+			<p>
+				<a href="https://altessimo.nanao.moe">live</a>
+				&bull;
+				<a href="https://github.com/Damillora/Altessimo">source code</a>
+			</p>
+		</PageHeader>
+		<PostMain comments={false}>
+			<h2>Description</h2>
+			<p>
+				Altessimo is a web application I built to catalogue and put in context Idolmaster lyricists,
+				composers, and arrangers.
+			</p>
+			<p>The database itself is definitely still a work-in-progress.</p>
+			<h2>Technologies</h2>
+			<ul>
+				<li>Django</li>
+				<li>Bootstrap</li>
+			</ul>
+			<h2>Screenshots</h2>
+			<div class="gallery">
+				<img src="/images/projects/altessimo/1.jpg" alt="Altessimo" />
+				<img src="/images/projects/altessimo/2.jpg" alt="Altessimo" />
+				<img src="/images/projects/altessimo/3.jpg" alt="Altessimo" />
+				<img src="/images/projects/altessimo/4.jpg" alt="Altessimo" />
+			</div>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/projects/index.svelte
+++ b/src/routes/projects/index.svelte
@ -1,17 +1,17 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
 	import ProjectItem from '$lib/components/ProjectItem.svelte';
+	import Index from '@damillora/plachta/components/PageTypes/Index.svelte';
 </script>

 <svelte:head>
 	<title>Project Portfolio</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Project Portfolio</h1>
-	</PageHeader>
-	<main class="container mx-auto main">
+<Container>
+	<Index>
+		<h1>Projects</h1>
+
 		<p>This is a list of projects that I maintain and publicly available on my GitHub.</p>
 		<h2>Active Projects</h2>
 		<div class="card-list">
@ -20,15 +20,10 @@
 				codename="rinze"
 				description="The home page for my online identity"
 			/>
-			<ProjectItem
-				name="nanao.moe (legacy)"
-				codename="miracle"
-				description="Former codebase of nanao.moe"
-			/>
 			<ProjectItem
 				name="Damillora's Virtual Memoir"
-				codename="yuika"
-				description="The blog for my hobbies"
+				codename="shallie"
+				description="My online blog"
 			/>
 			<ProjectItem
 				name="Altessimo"
@ -49,6 +44,7 @@
 				codename="miracle"
 				description="Former codebase of nanao.moe"
 			/>
+			<ProjectItem name="Yuika theme" codename="yuika" description="Previous theme for my blog" />
 		</div>
-	</main>
-</div>
+	</Index>
+</Container>
--- a/src/routes/projects/miracle.svelte
+++ b/src/routes/projects/miracle.svelte
@ -1,38 +1,41 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
-	import GalleryImage from '$lib/components/GalleryImage.svelte';
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
 	<title>Damillora: nanao.moe (legacy)</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">nanao.moe (legacy)</h1>
-		<p class="page-header__text">
-			<a class="post-header__social" href="https://nanao.moe">former live</a>
-			&bull;
-			<a class="post-header__social" href="https://github.com/Damillora/miracle">source code</a>
-		</p>
-	</PageHeader>
-	<main class="container main">
-		<h2>Description</h2>
-		<p>
-			A domain carves a person's place in the Internet. This is the codebase that formerly serves
-			nanao.moe. It is named miracle, which is named after a Madeon song (Good Faith is great, btw).
-		</p>
-		<p>Originally, it is styled in pure CSS. However, it later used Tailwind.</p>
-		<h2>Technologies</h2>
-		<ul>
-			<li>Vue.js</li>
-			<li>Nuxt.js</li>
-			<li>Tailwind CSS</li>
-		</ul>
-		<h2>Screenshots</h2>
-		<div class="gallery">
-			<GalleryImage src="/images/projects/miracle/1.png" alt="Miracle" />
-			<GalleryImage src="/images/projects/miracle/2.png" alt="Miracle" />
-		</div>
-	</main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>nanao.moe (legacy)</h1>
+			<p>
+				<a href="https://github.com/Damillora/miracle">source code</a>
+			</p>
+		</PageHeader>
+		<PostMain comments={false}>
+			<h2>Description</h2>
+			<p>
+				A domain carves a person's place in the Internet. This is the codebase that formerly serves
+				nanao.moe. It is named miracle, which is named after a Madeon song (Good Faith is great,
+				btw).
+			</p>
+			<p>Originally, it is styled in pure CSS. However, it later used Tailwind.</p>
+			<h2>Technologies</h2>
+			<ul>
+				<li>Vue.js</li>
+				<li>Nuxt.js</li>
+				<li>Tailwind CSS</li>
+			</ul>
+			<h2>Screenshots</h2>
+			<div class="gallery">
+				<img src="/images/projects/miracle/1.jpg" alt="Miracle" />
+				<img src="/images/projects/miracle/2.jpg" alt="Miracle" />
+			</div>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/projects/rinze.svelte
+++ b/src/routes/projects/rinze.svelte
@ -1,41 +1,44 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
-	import GalleryImage from '$lib/components/GalleryImage.svelte';
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
 	<title>Damillora: nanao.moe</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">nanao.moe</h1>
-		<p class="page-header__text">
-			<a class="post-header__social" href="https://nanao.moe">live</a>
-			&bull;
-			<a class="post-header__social" href="https://github.com/Damillora/rinze">source code</a>
-		</p>
-	</PageHeader>
-	<main class="container main">
-		<h2>Description</h2>
-		<p>
-			A domain carves a person's place in the Internet. nanao.moe now serves as my primary web page.
-			The website contains information about my projects and interests.
-		</p>
-		<p>
-			The new codebase uses the same design as previous. However, it adopts new technologies and
-			rewrites the stylesheet in SASS.
-		</p>
-		<h2>Technologies</h2>
-		<ul>
-			<li>Svelte</li>
-			<li>SvelteKit</li>
-			<li>SASS</li>
-		</ul>
-		<h2>Screenshots</h2>
-		<div class="gallery">
-			<GalleryImage src="/images/projects/rinze/1.png" alt="Rinze" />
-			<GalleryImage src="/images/projects/rinze/2.png" alt="Rinze" />
-		</div>
-	</main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>nanao.moe</h1>
+			<p>
+				<a href="https://nanao.moe">live</a>
+				&bull;
+				<a href="https://github.com/Damillora/rinze">source code</a>
+			</p>
+		</PageHeader>
+		<PostMain comments={false}>
+			<h2>Description</h2>
+			<p>
+				A domain carves a person's place in the Internet. nanao.moe now serves as my primary web page.
+				The website contains information about my projects and interests.
+			</p>
+			<p>
+				nanao.moe is now using the new Mare Serenitatis design language. However, the technology stack remains the same.
+			</p>
+			<h2>Technologies</h2>
+			<ul>
+				<li>Svelte</li>
+				<li>SvelteKit</li>
+				<li>SASS</li>
+			</ul>
+			<h2>Screenshots</h2>
+			<div class="gallery">
+				<img src="/images/projects/rinze/1.jpg" alt="Rinze" />
+				<img src="/images/projects/rinze/2.jpg" alt="Rinze" />
+			</div>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/projects/shallie.svelte
+++ b/src/routes/projects/shallie.svelte
@ -0,0 +1,45 @@
+<script>
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
+</script>
+
+<svelte:head>
+	<title>Damillora: Damillora's Virtual Memoir</title>
+</svelte:head>
+
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Damillora's Virtual Memoir</h1>
+			<p>
+				<a href="https://blog.nanao.moe">live</a>
+				&bull;
+				<a href="https://git.nanao.moe/Damillora/Shallie">source code</a>
+			</p>
+		</PageHeader>
+		<PostMain comments={false}>
+			<h2>Description</h2>
+			<p>
+				Damillora's Virtual Memoir is my hobby-related blog, writing about games and idols. As part
+				of a design system reorganization, a new blog frontend written in SvelteKit.
+			</p>
+			<p>
+				The backend runs on Ghost, a publication-focused CMS, while the frontend uses SvelteKit and
+				SASS based on Mare Serenitatis design language.
+			</p>
+			<h2>Technologies</h2>
+			<ul>
+				<li>Ghost</li>
+				<li>Svelte</li>
+				<li>SvelteKit</li>
+				<li>SASS</li>
+			</ul>
+			<h2>Screenshots</h2>
+			<div class="gallery">
+				<img src="/images/projects/shallie/1.jpg" alt="Yuika" />
+			</div>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/projects/shioriko.svelte
+++ b/src/routes/projects/shioriko.svelte
@ -1,35 +1,39 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
-	import GalleryImage from '$lib/components/GalleryImage.svelte';
+	import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
+	import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+	import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
 	<title>Damillora: nanao.moe</title>
 </svelte:head>

-<div class="page">
-	<PageHeader>
-		<h1 class="page-header__heading">Shioriko</h1>
-		<p class="page-header__text">
-			<a class="post-header__social" href="https://github.com/Damillora/Shioriko">source code</a>
-		</p>
-	</PageHeader>
-	<main class="container main">
-		<h2>Description</h2>
-		<p>
-			Shioriko is a booru-like image board software written in Go and Svelte. Features currently
-			includes automatic tag resolution, searching by tag, infinite-scrolling post browsing, and
-			similarity search based on perceptual hashing.
-		</p>
-		<h2>Technologies</h2>
-		<ul>
-			<li>Svelte</li>
-			<li>Bulma</li>
-			<li>Go</li>
-		</ul>
-		<h2>Screenshots</h2>
-		<div class="gallery">
-			<GalleryImage src="/images/projects/shioriko/1.png" alt="Shioriko" />
-		</div>
-	</main>
-</div>
+<Container>
+	<Post>
+		<PageHeader>
+			<h1>Shioriko</h1>
+			<p>
+				<a href="https://github.com/Damillora/Shioriko">source code</a>
+			</p>
+		</PageHeader>
+		<PostMain comments={false}>
+			<h2>Description</h2>
+			<p>
+				Shioriko is a booru-like image board software written in Go and Svelte. Features currently
+				includes automatic tag resolution, searching by tag, infinite-scrolling post browsing, and
+				similarity search based on perceptual hashing.
+			</p>
+			<h2>Technologies</h2>
+			<ul>
+				<li>Svelte</li>
+				<li>Bulma</li>
+				<li>Go</li>
+			</ul>
+			<h2>Screenshots</h2>
+			<div class="gallery">
+				<img src="/images/projects/shioriko/1.jpg" alt="Shioriko" />
+			</div>
+		</PostMain>
+	</Post>
+</Container>
--- a/src/routes/projects/yuika.svelte
+++ b/src/routes/projects/yuika.svelte
@ -1,25 +1,26 @@
 <script>
-    import PageHeader from '$lib/components/PageHeader.svelte';
-    import GalleryImage from '$lib/components/GalleryImage.svelte';
+    import PageHeader from '@damillora/plachta/components/PageHeader/PageHeader.svelte';
+    import Container from "@damillora/plachta/components/Container/Container.svelte";
+    import Post from '@damillora/plachta/components/PageTypes/Post.svelte';
+    import PostMain from '@damillora/plachta/components/Post/PostMain.svelte';
 </script>

 <svelte:head>
-    <title>Damillora: Damillora's Virtual Memoir</title>
+    <title>Damillora: Yuika theme</title>
 </svelte:head>

-<div class="page">
+<Container>
+  <Post>
    <PageHeader>
-      <h1 class="page-header__heading">Damillora's Virtual Memoir</h1>
-      <p class="page-header__text">
-        <a class="post-header__social" href="https://blog.nanao.moe">live</a>
-        &bull;
-        <a class="post-header__social" href="https://github.com/Damillora/Yuika">source code</a>
+      <h1>Yuika theme</h1>
+      <p >
+        <a href="https://github.com/Damillora/Yuika">source code</a>
      </p>
    </PageHeader>
-    <main class="container mx-auto main">
+    <PostMain comments={false}>
      <h2>Description</h2>
      <p>
-        Damillora's Virtual Memoir is my hobby-related blog, writing about games and idols.
+        Damillora's Virtual Memoir is my hobby-related blog, writing about games and idols. The blog uses the Yuika theme, which was designed solely for Damillora's Virtual Memoir.
      </p>
      <p>
        The blog runs on Ghost, a publication-focused CMS, while the theme uses Tailwind CSS for its CSS framework.
@ -32,13 +33,14 @@
      </ul>
      <h2>Screenshots</h2>
      <div class="gallery">
-        <GalleryImage src="/images/projects/yuika/1.png" alt="Yuika"/>
-        <GalleryImage src="/images/projects/yuika/2.png" alt="Yuika"/>
-        <GalleryImage src="/images/projects/yuika/3.png" alt="Yuika"/>
-        <GalleryImage src="/images/projects/yuika/4.png" alt="Yuika"/>
-        <GalleryImage src="/images/projects/yuika/5.png" alt="Yuika"/>
-        <GalleryImage src="/images/projects/yuika/6.png" alt="Yuika"/>
+        <img src="/images/projects/yuika/1.jpg" alt="Yuika"/>
+        <img src="/images/projects/yuika/2.jpg" alt="Yuika"/>
+        <img src="/images/projects/yuika/3.jpg" alt="Yuika"/>
+        <img src="/images/projects/yuika/4.jpg" alt="Yuika"/>
+        <img src="/images/projects/yuika/5.jpg" alt="Yuika"/>
+        <img src="/images/projects/yuika/6.jpg" alt="Yuika"/>
      </div>
+    </PostMain>

-    </main>
-  </div>
+  </Post>
+</Container>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/images
+++ b/static/images
@ -1 +1 @@
-Subproject commit 15a50c78146ecc715a344e46eee83f7f151c825b
+Subproject commit 38296b9cbc72f9a91286b4ca83dba8ad6267ab21
--- a/static/logo-512.png
+++ b/static/logo-512.png
--- a/svelte.config.js
+++ b/svelte.config.js
@ -9,7 +9,5 @@ export default {

 	kit: {
 		adapter: node(),
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte'
 	}
 };
--- a/tsconfig.json
+++ b/tsconfig.json
@ -2,7 +2,9 @@
 	"compilerOptions": {
 		"moduleResolution": "node",
 		"module": "es2020",
-		"lib": ["es2020"],
+		"lib": [
+			"es2020"
+		],
 		"target": "es2019",
 		/**
 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
@ -23,8 +25,19 @@
 		"allowJs": true,
 		"checkJs": true,
 		"paths": {
-			"$lib/*": ["src/lib/*"]
+			"$lib": [
+				"src/lib"
+			],
+			"$lib/*": [
+				"src/lib/*"
+			]
 		}
 	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
-}
+	"include": [
+		"src/**/*.d.ts",
+		"src/**/*.js",
+		"src/**/*.ts",
+		"src/**/*.svelte"
+	],
+	"extends": "./.svelte-kit/tsconfig.json"
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+        plugins: [sveltekit()]
+};
+
+export default config;
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Damillora	b7f880f4c1	feat: wrap some pages in index first	2022-07-25 01:26:04 +07:00
Damillora	501d19607d	fix: missing fonts	2022-07-25 01:23:03 +07:00
Damillora	389b9780de	feat: update plachta	2022-07-25 00:43:02 +07:00
Damillora	d2438324a8	feat: update plachta	2022-07-25 00:38:04 +07:00
Damillora	91da9a9bd7	feat: add loading	2022-07-25 00:21:53 +07:00
Damillora	a0fcc161f7	feat: fix building with newer sveltekit	2022-07-24 23:44:19 +07:00
Damillora	649bf4e207	chore: fix build command	2022-07-24 23:37:50 +07:00
Damillora	29955b4faa	feat: add artery gear profile and update favicon	2022-07-24 23:31:50 +07:00
Damillora	e90c29e615	feat: migrate to plachta	2022-07-24 23:25:35 +07:00