feat: migrate to plachta

2024-12-23 08:03:45 +00:00 · 2022-07-24 23:25:35 +07:00 · 2022-07-24 23:25:35 +07:00 · e90c29e615
commit e90c29e615
parent bfe77a70e5
64 changed files with 3042 additions and 2569 deletions
--- a/5
+++ b/5
@ -2,8 +2,9 @@ FROM node:14

 # install dependencies
 WORKDIR /app
-COPY package.json package-lock.json ./
-RUN yarn install
+RUN npm install -g pnpm
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install

 # Copy all local files into the image.
 COPY . .
--- a/package.json
+++ b/package.json
@ -2,33 +2,34 @@
  "name": "~TODO~",
  "version": "0.0.1",
  "scripts": {
-    "dev": "svelte-kit dev",
+    "dev": "vite dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit 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.7.0",
+    "@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,23 @@
 <!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.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>
+
+	%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,42 @@
 <script>
-	import Header from '$lib/components/Header.svelte';
+	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 FloatingYuriko from '$lib/components/FloatingYuriko.svelte';
 	import { isYurikoBirthday } from '$lib/yuriko-birthday.js';
 </script>

-<Header />
-<main>
-	<slot />
-</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/>
+
+	<Footer>
+		<p>Copyright (c) 2021 Damillora</p>
+	</Footer>
+</Base>
+
 {#if isYurikoBirthday()}
 	<FloatingYuriko />
 {/if}

 <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,110 +1,105 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
-	import GalleryImage from '$lib/components/GalleryImage.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
 </script>

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

-<div class="page">
-	<PageHeader>
-		<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!
-		</p>
-		<h2>Profile</h2>
-		<ul>
-			<li><strong>Name: </strong> Damillora</li>
-			<li><strong>Birthday: </strong>February 29</li>
-		</ul>
-		<h2>Credits</h2>
-		<p>
-			I am thankful to several for bringing my Virtual YouTuber project to life, and I will list
-			them here.
-		</p>
-		<h3>Illustrator: Mira Cassiela</h3>
-		<p>Virtual artist | L2D artist + freelance character designer and illustrator</p>
-		<p>
-			<a href="https://www.youtube.com/channel/UCW62PICl31M0TDhTcvwepqw">YouTube</a>
-			&bull;
-			<a href="https://twitter.com/miracassiela">Twitter</a>
-			&bull;
-			<a href="https://www.instagram.com/miracassiela/">Instagram</a>
-			&bull;
-			<a href="https://linktr.ee/miracassiela">Links</a>
-		</p>
-		<h3>Live2D Rigging: Siauw Adhie</h3>
-		<p>
-			<a href="https://twitter.com/adhiesc123">Twitter</a>
-			&bull;
-			<a href="https://www.youtube.com/c/SiauwAdhie">YouTube</a>
-			&bull;
-			<a href="https://www.fiverr.com/adhiesc">Fiverr</a>
-		</p>
-		<h2>Where you can find me</h2>
-		<h3>Publishing media</h3>
-		<p>I publish content mainly in those sites</p>
-		<ul>
-			<li>
-				<p>YouTube:</p>
-				<p><a href="/channel">Damillora</a></p>
-			</li>
-			<li>
-				<p>Twitch:</p>
-				<p><a href="https://www.twitch.tv/damillora">Damillora</a></p>
-			</li>
-			<li>
-				<p>SoundCloud:</p>
-				<p><a href="https://soundcloud.com/damillora">damillora</a></p>
-			</li>
-			<li>
-				<p>GitHub:</p>
-				<p><a href="https://github.com/Damillora">Damillora</a></p>
-			</li>
-		</ul>
-		<h3>Alternative technologies</h3>
-		<p>
-			Mainstream platforms control what you can post, and you can lose access to data rightfully
-			yours.
-			<br />
-			I maintain presence in several altenative platforms and technologies to ensure I have control of
-			data I post, to contribute to a possible future, and as a backup when mainstream platforms go down.
-			<br />
-			If you have a presence in those platforms, I encourage you to use these instead, you will help
-			the adoption of those technologies!
-		</p>
-		<ul>
-			<li>
-				<p>Fediverse:</p>
-				<p><a href="https://fed.nanao.moe/@Damillora">Damillora@fed.nanao.moe</a></p>
-			</li>
-			<li>
-				<p>PeerTube:</p>
-				<p><a href="/fedichan">damillora@live.nanao.moe</a></p>
-			</li>
-			<li>
-				<p>Funkwhale:</p>
-				<p><a href="https://sounds.nanao.moe/@Damillora">@Damillora@live.nanao.moe</a></p>
-			</li>
-			<li>
-				<p>Matrix</p>
-				<p>@damillora:matrix.nanao.moe</p>
-			</li>
-			<li>
-				<p>Gemini</p>
-				<p><a href="gemini://gemini.nanao.moe">gemini.nanao.moe</a></p>
-			</li>
-		</ul>
-		<h2>GPG public key</h2>
-		<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" />
-		</div>
-	</main>
-</div>
+<Container>
+	<h1 class="page-header__heading">About Damillora</h1>
+	<p>
+		Hello! My name is Damillora. I'm an indie Virtual YouTuber with a focus on technology, games,
+		and music exploration!
+	</p>
+	<h2>Profile</h2>
+	<ul>
+		<li><strong>Name: </strong> Damillora</li>
+		<li><strong>Birthday: </strong>February 29</li>
+	</ul>
+	<h2>Credits</h2>
+	<p>
+		I am thankful to several for bringing my Virtual YouTuber project to life, and I will list them
+		here.
+	</p>
+	<h3>Illustrator: Mira Cassiela</h3>
+	<p>Virtual artist | L2D artist + freelance character designer and illustrator</p>
+	<p>
+		<a href="https://www.youtube.com/channel/UCW62PICl31M0TDhTcvwepqw">YouTube</a>
+		&bull;
+		<a href="https://twitter.com/miracassiela">Twitter</a>
+		&bull;
+		<a href="https://www.instagram.com/miracassiela/">Instagram</a>
+		&bull;
+		<a href="https://linktr.ee/miracassiela">Links</a>
+	</p>
+	<h3>Live2D Rigging: Siauw Adhie</h3>
+	<p>
+		<a href="https://twitter.com/adhiesc123">Twitter</a>
+		&bull;
+		<a href="https://www.youtube.com/c/SiauwAdhie">YouTube</a>
+		&bull;
+		<a href="https://www.fiverr.com/adhiesc">Fiverr</a>
+	</p>
+	<h2>Where you can find me</h2>
+	<h3>Publishing media</h3>
+	<p>I publish content mainly in those sites</p>
+	<ul>
+		<li>
+			<p>YouTube:</p>
+			<p><a href="/channel">Damillora</a></p>
+		</li>
+		<li>
+			<p>Twitch:</p>
+			<p><a href="https://www.twitch.tv/damillora">Damillora</a></p>
+		</li>
+		<li>
+			<p>SoundCloud:</p>
+			<p><a href="https://soundcloud.com/damillora">damillora</a></p>
+		</li>
+		<li>
+			<p>GitHub:</p>
+			<p><a href="https://github.com/Damillora">Damillora</a></p>
+		</li>
+	</ul>
+	<h3>Alternative technologies</h3>
+	<p>
+		Mainstream platforms control what you can post, and you can lose access to data rightfully
+		yours.
+		<br />
+		I maintain presence in several altenative platforms and technologies to ensure I have control of
+		data I post, to contribute to a possible future, and as a backup when mainstream platforms go down.
+		<br />
+		If you have a presence in those platforms, I encourage you to use these instead, you will help the
+		adoption of those technologies!
+	</p>
+	<ul>
+		<li>
+			<p>Fediverse:</p>
+			<p><a href="https://fed.nanao.moe/@Damillora">Damillora@fed.nanao.moe</a></p>
+		</li>
+		<li>
+			<p>PeerTube:</p>
+			<p><a href="/fedichan">damillora@live.nanao.moe</a></p>
+		</li>
+		<li>
+			<p>Funkwhale:</p>
+			<p><a href="https://sounds.nanao.moe/@Damillora">@Damillora@live.nanao.moe</a></p>
+		</li>
+		<li>
+			<p>Matrix</p>
+			<p>@damillora:matrix.nanao.moe</p>
+		</li>
+		<li>
+			<p>Gemini</p>
+			<p><a href="gemini://gemini.nanao.moe">gemini.nanao.moe</a></p>
+		</li>
+	</ul>
+	<h2>GPG public key</h2>
+	<p>My public key is accessible <a href="/damillora.asc">here</a>.</p>
+	<h2>Producer Meishi</h2>
+	<div class="gallery">
+		<img src="/images/meishi/front-shianv2.png" alt="Meishi front" />
+		<img src="/images/meishi/back-shianv2.png" alt="Meishi back" />
+	</div>
+</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,26 +1,23 @@
 <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';
 </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">
-		<p>You can contact me via various channels.</p>
-		<h2>Email: damillora(at)damillora.com</h2>
-		<p>
-			Emails are perfect for long-form correspondences. If you want to discuss about larger projects
-			or you're a corporation, I highly recommend using email.
-		</p>
-		<h2>Twitter: <a href="https://twitter.com/Damillora">Damillora</a></h2>
-		<p>
-			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>
+<Container>
+	<h1>Contact</h1>
+	<p>You can contact me via various channels.</p>
+	<h2>Email: damillora(at)damillora.com</h2>
+	<p>
+		Emails are perfect for long-form correspondences. If you want to discuss about larger projects
+		or you're a corporation, I highly recommend using email.
+	</p>
+	<h2>Twitter: <a href="https://twitter.com/Damillora">Damillora</a></h2>
+	<p>
+		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>
+</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/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,5 +1,5 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
 	import GameListItem from '$lib/components/GameListItem.svelte';
 </script>

@ -7,180 +7,177 @@
 	<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">
-			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>
-		<h2>Game Consoles</h2>
-		<GameListItem
-			name="Nintendo Switch"
-			link="/games"
-			playername="Damillora"
-			gameid="SW-8522-2159-0226"
-		/>
+<Container>
+	<h1>Game Profile</h1>

-		<h2>Game IDs</h2>
-		<div class="card-list">
-			<GameListItem
-				name="Alchemy Stars (SEA)"
-				link="/games/alchemystars"
-				playername="Damilora"
-				gameid="67119157"
-			/>
-			<GameListItem name="Arcaea" link="/games/arcaea" playername="Damillora" gameid="264202217" />
-			<GameListItem
-				name="ARGONAVIS from BanG Dream! AAside"
-				link="/games/aaside"
-				playername="Damilora"
-				gameid="3BUWJibt"
-			/>
-			<GameListItem
-				name="Arknights"
-				link="/games/arknights"
-				playername="Damillora"
-				gameid="Damillora#0835"
-			/>
-			<GameListItem
-				name="Azur Lane (EN)"
-				link="/games/azurlane"
-				playername="Damillora"
-				gameid="204960914"
-			/>
-			<GameListItem
-				name="BanG Dream! Girls Band Party (JP)"
-				link="/games/bandori"
-				playername="Damillora"
-				gameid="106205253"
-			/>
-			<GameListItem
-				name="Blue Archive"
-				link="/games/bluearchive"
-				playername="Damillora"
-				gameid="6296686"
-			/>
-			<GameListItem
-				name="Counter:Side"
-				link="/games/counterside"
-				playername="Damillora"
-				gameid="#394941"
-			/>
-			<GameListItem name="CUE!" link="/games/cue" playername="Damillora" gameid="37132287893" />
-			<GameListItem
-				name="Fate/Grand Order (JP)"
-				link="/games/fgo"
-				playername="Damillora"
-				gameid="744497723"
-			/>
-			<GameListItem
-				name="Genshin Impact"
-				link="/games/genshin"
-				playername="Damillora"
-				gameid="804547223"
-			/>
-			<GameListItem
-				name="Honkai Impact 3rd"
-				link="/games/honkai"
-				playername="Damillora"
-				gameid="17918429"
-			/>
-			<GameListItem
-				name="IDOLY PRIDE"
-				link="/games/idoly"
-				playername="Damillora"
-				gameid="QAPHJWMY"
-			/>
-			<GameListItem
-				name="Love Live! School Idol Festival (JP)"
-				link="/games/llsif"
-				playername="Damillora"
-				gameid="755897396"
-			/>
-			<GameListItem
-				name="Love Live! School idol festival ALL STARS (JP)"
-				link="/games/llsifas"
-				playername="-"
-				gameid="-"
-			/>
-			<GameListItem
-				name="maimai DX"
-				link="/games/maimai"
-				playername="YUIKA283"
-				gameid="6027059823123"
-			/>
-			<GameListItem name="Nogikoi" link="/games/nogikoi" playername="-" gameid="1673068678" />
-			<GameListItem
-				name="Project SEKAI COLORFUL STAGE"
-				link="/games/puroseka"
-				playername="Damillora"
-				gameid="5121608293470214"
-			/>
-			<GameListItem
-				name="Revue Starlight Re LIVE (EN)"
-				link="/games/starira"
-				playername="[RS]Damillora"
-				gameid="2490812618"
-			/>
-			<GameListItem
-				name="Shadowverse"
-				link="/games/shadowverse"
-				playername="Damillora"
-				gameid="778908673"
-			/>
-			<GameListItem
-				name="SOUND VOLTEX VIVID WAVE"
-				link="/games/sdvx"
-				playername="YUIKA283"
-				gameid="SV-6457-6694"
-			/>
-			<GameListItem
-				name="The iDOLM@STER Million Live: Theater Days"
-				link="/games/mirishita"
-				playername="Damillora"
-				gameid="CGTEDUQ4"
-			/>
-			<GameListItem
-				name="THE iDOLM@STER POPLINKS"
-				link="/games/poplinks"
-				playername="Damillora"
-				gameid="EQCU3N7K6T44J"
-			/>
-			<GameListItem
-				name="THE IDOLM@STER: Shiny Colors"
-				link="/games/shinymas"
-				playername="Damillora"
-				gameid="ePmtJyTwzn"
-			/>
-			<GameListItem
-				name="THE IDOLM@STER SideM GROWING STARS"
-				link="/games/saisuta"
-				playername="Damillora"
-				gameid="XZFL59XM"
-			/>
-			<GameListItem
-				name="Tokyo 7th Sisters"
-				link="/games/t7s"
-				playername="Damillora"
-				gameid="M2mXkWk"
-			/>
-			<GameListItem
-				name="欅坂46・日向坂46 UNI'S ON AIR"
-				link="games/unison"
-				playername="Damillora"
-				gameid="y2medy4d"
-			/>
-			<!--
-            <GameListItem
-              name=""
-              link=""
-              playername=""
-              gameid=""
-              />
-            -->
-		</div>
-	</main>
-</div>
+	<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>
+	<h2>Game Consoles</h2>
+	<GameListItem
+		name="Nintendo Switch"
+		link="/games"
+		playername="Damillora"
+		gameid="SW-8522-2159-0226"
+	/>
+
+	<h2>Game IDs</h2>
+	<div class="card-list">
+		<GameListItem
+			name="Alchemy Stars (SEA)"
+			link="/games/alchemystars"
+			playername="Damilora"
+			gameid="67119157"
+		/>
+		<GameListItem name="Arcaea" link="/games/arcaea" playername="Damillora" gameid="264202217" />
+		<GameListItem
+			name="ARGONAVIS from BanG Dream! AAside"
+			link="/games/aaside"
+			playername="Damilora"
+			gameid="3BUWJibt"
+		/>
+		<GameListItem
+			name="Arknights"
+			link="/games/arknights"
+			playername="Damillora"
+			gameid="Damillora#0835"
+		/>
+		<GameListItem
+			name="Azur Lane (EN)"
+			link="/games/azurlane"
+			playername="Damillora"
+			gameid="204960914"
+		/>
+		<GameListItem
+			name="BanG Dream! Girls Band Party (JP)"
+			link="/games/bandori"
+			playername="Damillora"
+			gameid="106205253"
+		/>
+		<GameListItem
+			name="Blue Archive"
+			link="/games/bluearchive"
+			playername="Damillora"
+			gameid="6296686"
+		/>
+		<GameListItem
+			name="Counter:Side"
+			link="/games/counterside"
+			playername="Damillora"
+			gameid="#394941"
+		/>
+		<GameListItem name="CUE!" link="/games/cue" playername="Damillora" gameid="37132287893" />
+		<GameListItem
+			name="Fate/Grand Order (JP)"
+			link="/games/fgo"
+			playername="Damillora"
+			gameid="744497723"
+		/>
+		<GameListItem
+			name="Genshin Impact"
+			link="/games/genshin"
+			playername="Damillora"
+			gameid="804547223"
+		/>
+		<GameListItem
+			name="Honkai Impact 3rd"
+			link="/games/honkai"
+			playername="Damillora"
+			gameid="17918429"
+		/>
+		<GameListItem
+			name="IDOLY PRIDE"
+			link="/games/idoly"
+			playername="Damillora"
+			gameid="QAPHJWMY"
+		/>
+		<GameListItem
+			name="Love Live! School Idol Festival (JP)"
+			link="/games/llsif"
+			playername="Damillora"
+			gameid="755897396"
+		/>
+		<GameListItem
+			name="Love Live! School idol festival ALL STARS (JP)"
+			link="/games/llsifas"
+			playername="-"
+			gameid="-"
+		/>
+		<GameListItem
+			name="maimai DX"
+			link="/games/maimai"
+			playername="YUIKA283"
+			gameid="6027059823123"
+		/>
+		<GameListItem name="Nogikoi" link="/games/nogikoi" playername="-" gameid="1673068678" />
+		<GameListItem
+			name="Project SEKAI COLORFUL STAGE"
+			link="/games/puroseka"
+			playername="Damillora"
+			gameid="5121608293470214"
+		/>
+		<GameListItem
+			name="Revue Starlight Re LIVE (EN)"
+			link="/games/starira"
+			playername="[RS]Damillora"
+			gameid="2490812618"
+		/>
+		<GameListItem
+			name="Shadowverse"
+			link="/games/shadowverse"
+			playername="Damillora"
+			gameid="778908673"
+		/>
+		<GameListItem
+			name="SOUND VOLTEX VIVID WAVE"
+			link="/games/sdvx"
+			playername="YUIKA283"
+			gameid="SV-6457-6694"
+		/>
+		<GameListItem
+			name="The iDOLM@STER Million Live: Theater Days"
+			link="/games/mirishita"
+			playername="Damillora"
+			gameid="CGTEDUQ4"
+		/>
+		<GameListItem
+			name="THE iDOLM@STER POPLINKS"
+			link="/games/poplinks"
+			playername="Damillora"
+			gameid="EQCU3N7K6T44J"
+		/>
+		<GameListItem
+			name="THE IDOLM@STER: Shiny Colors"
+			link="/games/shinymas"
+			playername="Damillora"
+			gameid="ePmtJyTwzn"
+		/>
+		<GameListItem
+			name="THE IDOLM@STER SideM GROWING STARS"
+			link="/games/saisuta"
+			playername="Damillora"
+			gameid="XZFL59XM"
+		/>
+		<GameListItem
+			name="Tokyo 7th Sisters"
+			link="/games/t7s"
+			playername="Damillora"
+			gameid="M2mXkWk"
+		/>
+		<GameListItem
+			name="欅坂46・日向坂46 UNI'S ON AIR"
+			link="games/unison"
+			playername="Damillora"
+			gameid="y2medy4d"
+		/>
+		<!--
+		<GameListItem
+		  name=""
+		  link=""
+		  playername=""
+		  gameid=""
+		  />
+		-->
+	</div>
+</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
@ -8,8 +8,8 @@

 <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>
+        <h1>Game Profile: maimai DX</h1>
+        <p><a href="https://maimai.sega.com/">Game Website</a></p>
    </PageHeader>
    <main class="container mx-auto main" />
 </div>
--- 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,30 @@
 <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';
 </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">
-		<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>
-		<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>
-		<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!
-		</p>
-		<p>
-			The Network is reachable via Discord and Matrix.
-		</p>
-	</main>
-</div>
+<Container>
+	<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>
+	<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>
+	<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!
+	</p>
+	<p>The Network is reachable via Discord and Matrix.</p>
+</Container>
--- a/src/routes/links.svelte
+++ b/src/routes/links.svelte
@ -1,29 +1,23 @@
 <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 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>
+	<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>
+</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,5 +1,5 @@
 <script>
-	import PageHeader from '$lib/components/PageHeader.svelte';
+	import Container from '@damillora/plachta/components/Container/Container.svelte';
 	import ProjectItem from '$lib/components/ProjectItem.svelte';
 </script>

@ -7,48 +7,45 @@
 	<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">
-		<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">
-			<ProjectItem
-				name="nanao.moe"
-				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"
-			/>
-			<ProjectItem
-				name="Altessimo"
-				codename="altessimo"
-				description="Work-in-progress database of composers and lyricists of THE iDOLM@STER"
-			/>
-			<ProjectItem
-				name="Shioriko"
-				codename="shioriko"
-				description="Booru-like imageboard software written in Go and Svelte"
-			/>
-		</div>
-		<h2>Inactive Projects</h2>
+<Container>
+	<h1>Projects</h1>

-		<div class="card-list">
-			<ProjectItem
-				name="nanao.moe (legacy)"
-				codename="miracle"
-				description="Former codebase of nanao.moe"
-			/>
-		</div>
-	</main>
-</div>
+	<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">
+		<ProjectItem
+			name="nanao.moe"
+			codename="rinze"
+			description="The home page for my online identity"
+		/>
+		<ProjectItem
+			name="Damillora's Virtual Memoir"
+			codename="shallie"
+			description="My online blog"
+		/>
+		<ProjectItem
+			name="Altessimo"
+			codename="altessimo"
+			description="Work-in-progress database of composers and lyricists of THE iDOLM@STER"
+		/>
+		<ProjectItem
+			name="Shioriko"
+			codename="shioriko"
+			description="Booru-like imageboard software written in Go and Svelte"
+		/>
+	</div>
+	<h2>Inactive Projects</h2>
+
+	<div class="card-list">
+		<ProjectItem
+			name="nanao.moe (legacy)"
+			codename="miracle"
+			description="Former codebase of nanao.moe"
+		/>
+		<ProjectItem
+			name="Yuika theme"
+			codename="yuika"
+			description="Previous theme for my blog"
+		/>
+	</div>
+</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/images
+++ b/static/images
@ -1 +1 @@
-Subproject commit 15a50c78146ecc715a344e46eee83f7f151c825b
+Subproject commit 38296b9cbc72f9a91286b4ca83dba8ad6267ab21
--- 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/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