Merge pull request #84 from mudkipdev/redesign

Redesign

astro.config.mjs

@@ -9,7 +9,6 @@ export default defineConfig({
     markdown: {
         shikiConfig: {
             theme: "catppuccin-macchiato"
-            // TODO: light theme
         }
     }
 })

src/components/Date.astro

@@ -17,7 +17,7 @@ const { date } = Astro.props;
 
 <style>
     time {
-        color: var(--surface-2);
-        font-size: 0.85em;
+        margin-top: 5px; /* for blog page */
+        color: var(--surface-5);
     }
 </style>

src/components/Footer.astro

@@ -1,26 +1,22 @@
 ---
+const year = new Date().getFullYear();
 ---
 <footer>
-    <a href="https://mudkip.dev"><img alt="mudkip" src="/buttons/mudkip.png"></a>
-    <a href="https://matdoes.dev/retro"><img src="/buttons/mat.png"></a>
-    <a href="https://zeffo.me"><img src="/buttons/aman.webp" /></a>
-    <a href="https://goldenstack.net"><img src="/buttons/golden.png"></a>
-    <a href="https://damcraft.de"><img src="/buttons/dam.png"></a>
-    <a href="https://nikolan.xyz"><img src="/buttons/niko.png"></a>
-    <a href="https://paddyk45.de"><img src="/buttons/paddy.png"></a>
-    <a href="https://emortaldev.github.io"><img src="/buttons/emortal.png"></a>
-    <a href="https://aubrey.rs"><img src="/buttons/aubrey.png"></a>
-    <a href="https://redcatho.de"><img src="/buttons/red.png"></a>
-    <a href="https://mozilla.org/firefox"><img src="/buttons/firefox.png"></a>
-    <a href="https://code.visualstudio.com"><img src="/buttons/vsc.gif"></a>
-    <a href="https://ublockorigin.com"><img src="/buttons/ublock.png"></a>
-    <a href="https://512kb.club"><img src="/buttons/512kb-club.gif"></a>
+    <span id="footer">
+        copyright (c) mudkip {year}. all rights reserved.
+        <br>
+        website inspired by <a href="https://zptr.cc">zptr</a>
+    </span>
 </footer>
 
 <style>
-    footer a {
-        width: 88px;
-        height: 31px;
-        image-rendering: pixelated;
+    span#footer {
+        color: var(--surface-5);
+        user-select: none;
+    }
+
+    span#footer a {
+        --color: var(--surface-5);
+        font-size: inherit;
     }
 </style>

src/components/Header.astro

@@ -1,30 +1,44 @@
 ---
 ---
 <nav>
-    <a href="/">home</a>
-    <a href="/about">about</a>
-    <a href="/projects">projects</a>
-    <a href="/blog">blog</a>
+    <a href="/">/home</a>
+    <span class="divider">|</span>
+    <a href="/about">/about</a>
+    <span class="divider">|</span>
+    <a href="/projects">/projects</a>
+    <span class="divider">|</span>
+    <a href="/blog">/blog</a>
 </nav>
 
 <style>
-    a:nth-child(1) {
-        color: #ED8796;
+    nav {
+        display: flex;
+        flex-direction: row;
+        user-select: none;
+        gap: 1em;
     }
 
-    a:nth-child(2) {
-        color: #F5A97F;
+    nav span.divider {
+        color: var(--surface-5);
     }
 
-    a:nth-child(3) {
-        color: #EED49E;
+    nav a:nth-of-type(1) {
+        --color: var(--ctp-macchiato-red);
     }
 
-    a:nth-child(4) {
-        color: #A6DA95;
+    nav a:nth-of-type(2) {
+        --color: var(--ctp-macchiato-peach);
     }
 
-    a:nth-child(5) {
-        color: #8AADF4;
+    nav a:nth-of-type(3) {
+        --color: var(--ctp-macchiato-yellow);
+    }
+
+    nav a:nth-of-type(4) {
+        --color: var(--ctp-macchiato-green);
+    }
+
+    nav a:nth-of-type(5) {
+        --color: var(--ctp-macchiato-blue);
     }
 </style>

src/components/Profile.astro

@@ -0,0 +1,37 @@
+---
+interface Props {
+    path: string;
+}
+
+const { path } = Astro.props;
+---
+<div id="profile">
+    <img src="https://avatars.githubusercontent.com/u/86132148" width="80" height="80">
+    <div id="text">
+        <h1>mudkip</h1>
+        <p>{path}</p>
+    </div>
+</div>
+
+<hr>
+
+<style>
+    #profile {
+        display: flex;
+        flex-direction: row;
+        user-select: none;
+        gap: 1.25em;
+    }
+
+    /* fix all this */
+    #profile #text {
+        margin-top: -1em;
+        flex-direction: column;
+        gap: 0;
+    }
+
+    #profile p {
+        margin-top: -0.5em;
+        color: var(--surface-5);
+    }
+</style>

src/components/cards/Card.astro

@@ -9,11 +9,11 @@ const { title, description, url } = Astro.props;
 ---
 <div class="card">
     <slot name="before" />
-    <h2>{
-        url == null
-        ? title
-        : <a href={url}>{title}</a>
-    }</h2>
+    <p id="title">
+        <b>
+            {url == null ? title : <a href={url}>{title}</a>}
+        </b>
+    </p>
     <p>{description}</p>
     <slot name="after" />
 </div>
@@ -26,19 +26,14 @@ const { title, description, url } = Astro.props;
 
         padding: 1em;
         background-color: var(--mantle);
-        border-radius: 0.5em;
-    }
-
-    .card * {
-        margin: 0;
+        border: 2px solid var(--surface-3);
     }
 
     .card a {
-        color: var(--text);
+        --color: var(--text);
     }
 
-    .card p {
-        font-size: 0.85em;
+    .card #title {
         margin-bottom: 5px;
     }
 </style>

src/components/chat/Chat.astro

@@ -0,0 +1,2 @@
+---
+---

src/content/blog/welcome.md

@@ -2,4 +2,4 @@
 date: 2024-05-09
 title: welcome
 ---
-i have to add this page because of a stupid code limitation, anyways welcome to my blog
+this page only exists because of a code limitation

src/layouts/Page.astro

@@ -1,30 +1,42 @@
 ---
 import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
+import Profile from "@components/Profile.astro";
 import "../style.css";
-const { title } = Astro.props;
+
+interface Props {
+    title: string;
+    path?: string;
+}
+
+const { title, path = "~/" + title.toLowerCase().replaceAll(" ", "-") } = Astro.props;
 ---
 <html lang="en">
     <head>
-        <title>{title}</title>
+        <title>{path}</title>
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <link
-            rel="alternate" type="application/rss+xml"
-            title="mudkip's blog" href="/rss.xml"
+        rel="alternate" type="application/rss+xml"
+        title="mudkip's blog" href="/rss.xml"
         />
         <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <meta name="theme-color" content="#C6A0F6" />
-        <slot name="metadata">
-            <meta property="og:title" content={title} />
-        </slot>
+        <meta property="og:title" content={title} />
+        <slot name="metadata" />
     </head>
     <body>
-        <h1>{title}</h1>
-        <Header />
         <main>
+            <slot name="profile">
+                <Profile path={path} />
+            </slot>
+
+            <Header />
+            <hr>
             <slot />
+            <hr>
+            <Footer />
         </main>
-        <script is:inline type="text/javascript" src="/oneko.js"></script>
     </body>
 </html>

src/pages/about.astro

@@ -2,5 +2,21 @@
 import Page from "@layouts/Page.astro";
 ---
 <Page title="about">
-    <p>work in progress</p>
-</Page>
+    <p>work in progress<span id="wip">...</span></p>
+</Page>
+
+<script>
+    const element = document.getElementById("wip");
+    let iteration = 3;
+
+    setInterval(() => {
+        if (!element) {
+            return;
+        } else if (iteration > 5) {
+            iteration = 0;
+        }
+
+        element.textContent = ".".repeat(iteration > 3 ? 3 : iteration);
+        iteration++;
+    }, 250);
+</script>

src/pages/blog/[...slug].astro

@@ -3,7 +3,6 @@ import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
 import { getCollection } from "astro:content";
 import { stripContent } from "@content/config";
 import Page from "@layouts/Page.astro";
-import Date from "@components/Date.astro";
 
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
@@ -21,46 +20,13 @@ export const getStaticPaths = (async () => {
 const { post, data } = Astro.props;
 const { Content } = await post.render();
 const stripped = await stripContent(post);
+const path = "~/blog/" + data.title.toLowerCase().replaceAll(" ", "-") + ".txt";
 ---
-<Page title={data.title}>
+<Page title={data.title} path={path}>
     <Fragment slot="metadata">
         <meta property="og:site_name" content="mudkip" />
-        <meta property="og:title" content={data.title} />
         <meta property="og:description" content={stripped} />
     </Fragment>
 
-    <Date date={data.date} />
     <Content />
-
-    <div id="options">
-        <input type="checkbox" id="hide-cat">
-        <label for="hide-cat">hide cat</label>
-    </div>
-</Page>
-
-<style>
-    #options {
-        position: absolute;
-        bottom: 15px;
-        left: 15px;
-    }
-
-    label[for="hide-cat"] {
-        position: relative;
-        margin-left: 3px;
-        top: 2px;
-    }
-</style>
-
-<script is:inline>
-    let checkbox = document.querySelector("#hide-cat");
-    let cat = document.querySelector("#oneko");
-
-    checkbox.addEventListener("change", (event) => {
-        if (event.target.checked) {
-            cat.style.visibility = "hidden";
-        } else {
-            cat.style.visibility = "visible";
-        }
-    });
-</script>
+</Page>

src/pages/index.astro

@@ -3,19 +3,19 @@ import Page from "@layouts/Page.astro";
 
 const bio = "I'm a software developer and security researcher, my interests include programming, video games, and music.";
 ---
-<Page title="mudkip">
+<Page title="mudkip" path="~/">
     <Fragment slot="metadata">
+        <title>~/</title>
         <meta property="og:title" content="mudkip" />
         <meta property="og:description" content={bio} />
     </Fragment>
 
-    <p>
-        {bio}<br>
-        <span style="color: var(--surface-2)">(I also use NixOS btw)</span>
-    </p>
-    <ul>
+    <p>{bio}</p>
+    <span style="color: var(--surface-5)">(I also use NixOS btw)</span>
+
+    <!-- <ul>
         <li>Matrix: <a href="https://matrix.to/#/@mudkip:nope.chat" target="_blank">@mudkip:nope.chat</a></li>
         <li>GitHub: <a href="https://github.com/mudkipdev" target="_blank">mudkipdev</a></li>
         <li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
-    </ul>
+    </ul> -->
 </Page>

src/pages/projects.astro

@@ -16,11 +16,5 @@ import Cards from "@components/cards/Cards.astro";
             description="A Minecraft server featuring fun and unique minigames."
             url="https://github.com/skylite-network"
         />
-
-        <Card
-            title="scnewsbot"
-            description="A bot for the r/starcitizen Discord server."
-            url="https://github.com/mudkipdev/scnewsbot"
-        />
     </Cards>
 </Page>