markdown and mpp page

src/components/ContentBox.astro

@@ -1,9 +1,7 @@
 <div
     class="m-2 rounded-2xl bg-[#ffffff05] px-4 py-4 shadow-md ring-1 ring-inset ring-[#ffffff08]"
 >
-    <div class="box-border">
-        <p class="text-neutral-300 text-lg">
-            <slot />
-        </p>
+    <div class="content-box box-border">
+        <slot />
     </div>
 </div>

src/components/MainHeader.astro

@@ -1,6 +1,12 @@
 ---
 import { Image } from "astro:assets";
 import Nav from "./Nav.astro";
+
+interface Props {
+    logo?: string;
+}
+
+const { logo } = Astro.props;
 ---
 
 <div
@@ -9,7 +15,7 @@ import Nav from "./Nav.astro";
 >
     <a href="/" class="float-left flex cursor-pointer items-end">
         <Image
-            src="logo.png"
+            src={logo || "/logo.png"}
             alt="Logo"
             width="64"
             height="64"

src/env.d.ts

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/layouts/FrontView.astro

@@ -5,14 +5,15 @@ import Header from "~/components/MainHeader.astro";
 
 interface Props {
     title: string;
+    logo?: string;
 }
 
-const { title } = Astro.props;
+const { title, logo } = Astro.props;
 ---
 
 <Layout title={title}>
     <div id="main" class="sm:w-full">
-        <Header />
+        <Header logo={logo} />
         <div id="container" class="w-full max-w-screen-xl mx-auto">
             <slot />
         </div>

src/layouts/Layout.astro

@@ -14,7 +14,7 @@ const { title } = Astro.props;
         <meta charset="UTF-8" />
         <meta name="description" content="Hri7566's homepage" />
         <meta name="viewport" content="width=device-width" />
-        <link rel="icon" type="image/png" href="logo.png" />
+        <link rel="icon" type="image/png" href="/logo.png" />
         <meta name="generator" content={Astro.generator} />
         <title>{title}</title>
         <ViewTransitions fallback="swap" />
@@ -41,6 +41,10 @@ const { title } = Astro.props;
                 background-size: 224px;
                 @apply bg-stone-950;
             }
+
+            code {
+                @apply rounded-md bg-[#ffffff05] px-1 py-1 shadow-md ring-1 ring-inset ring-[#ffffff08] text-gray-400;
+            }
         </style>
     </body>
 </html>

src/layouts/MDFront.astro

@@ -0,0 +1,35 @@
+---
+import PageBreak from "~/components/PageBreak.astro";
+import FrontView from "./FrontView.astro";
+import ContentBox from "~/components/ContentBox.astro";
+
+const { frontmatter } = Astro.props;
+---
+
+<FrontView title={frontmatter.title} logo={frontmatter.logo}>
+    <PageBreak title={frontmatter.title} />
+    <ContentBox>
+        <slot />
+    </ContentBox>
+    <style is:global>
+        .content-box {
+            @apply text-gray-300;
+        }
+
+        .content-box h1 {
+            @apply text-2xl;
+        }
+
+        .content-box h2 {
+            @apply text-xl;
+        }
+
+        .content-box h3 {
+            @apply text-lg;
+        }
+
+        .content-box p {
+            @apply my-2;
+        }
+    </style>
+</FrontView>

src/pages/info/mpp.md

@@ -0,0 +1,17 @@
+---
+layout: ~/layouts/MDFront.astro
+title: Multiplayer Piano
+logo: /128-piano.png
+---
+
+Multiplayer Piano is like a home to me. I learned how to script and interact with the web there, and it feels like one of those corners of the internet that you just don't know why it feels satisfying to interact with.
+
+Back in the day, it used to be full of life. Back when the main domain was still `multiplayerpiano.com` and not one of my friend's clones of the site, there were so many people messing with bots and scripts that would interact with the chat and the piano in ways that felt truly groundbreaking. There used to be a bot that could write letters on the piano, and that was amazing then.
+
+Since then, MPP has taken a turn for the worse, but my scripts and bots have improved. Since then, I made countless strange and wonderful things, like a Gameboy emulator that draws to a custom drawing script where everyone in the same room can see your drawing. I also ported the drawing script.
+
+The site, however, hasn't had such a nice history. Multiplayer Piano was sold in October 2020 to some jackass "entrepreneur" who thinks he can just turn it into a blog. The original WebSocket server isn't even up anymore, a clone of it is being hosted by my friends and this jackass is just mirroring their site files.
+
+The main site now has some... issues, to say the least. This guy put ads and giant links with inline CSS on the page as if it doesn't matter. I tried to contact him, but he is insisitent on not talking to anyone. I was banned from the official Discord server for a reason I don't even understand.
+
+Although a lot of annoyances have happened, the good news is that the site is still *somewhat* intact. The new site is `mppclone.com`, and it's fairly updated to work with new web standards and QOL features have been added, some of which by myself.