Some styling touches

src/.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1730844981172
+	}
+}

src/.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/package.json

@@ -19,6 +19,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-responsive": "^10.0.0",
+    "reading-time": "^1.5.0",
     "typewriter-effect": "^2.21.0"
   }
 }

src/pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       react-responsive:
         specifier: ^10.0.0
         version: 10.0.0(react@18.3.1)
+      reading-time:
+        specifier: ^1.5.0
+        version: 1.5.0
       typewriter-effect:
         specifier: ^2.21.0
         version: 2.21.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1506,6 +1509,9 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  reading-time@1.5.0:
+    resolution: {integrity: sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==}
+
   regex@4.3.3:
     resolution: {integrity: sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==}
 
@@ -3493,6 +3499,8 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  reading-time@1.5.0: {}
+
   regex@4.3.3: {}
 
   rehype-parse@9.0.1:

src/src/components/footer/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-
 import { Links } from "@/components/footer/links";
 
 export default function Footer({ fixed = false }) {
@@ -10,11 +9,11 @@ export default function Footer({ fixed = false }) {
     >
       <a href={link.href} target="_blank" rel="noopener noreferrer">{link.label}</a>
     </div>
-   ));
+  ));
 
   return (
     <footer className={`w-full ${fixed ? "fixed bottom-0 left-0 right-0" : ""}`}>
-      <div className="flex flex-row px-6 py-1.5 font-bold text-2xl justify-center space-x-10">
+      <div className="flex flex-row px-2 py-1 text-lg lg:px-6 lg:py-1.5 lg:text-3xl md:text-2xl justify-between md:justify-center space-x-2 md:space-x-10 lg:space-x-20">
         {footerLinks}
       </div>
     </footer>

src/src/components/footer/links.ts

@@ -9,6 +9,6 @@ export const Links: FooterLink[] = [
   { id: 0, href: "mailto:contact@timmypidashev.dev", label: "Contact", color: "text-green" },
   { id: 1, href: "https://github.com/timmypidashev", label: "Github", color: "text-yellow" },
   { id: 3, href: "https://www.linkedin.com/in/timothy-pidashev-4353812b8", label: "Linkedin", color: "text-blue" },
-  { id: 4, href: "https://instagram.com/timmypidashev", label: "Instagram", color: "text-purple" },
+  { id: 4, href: "https://github.com/timmypidashev/web", label: "Source", color: "text-purple" },
-  { id: 5, href: "https://github.com/timmypidashev/web", label: "Source", color: "text-aqua" },
+  { id: 5, href: "https://github.com/timmypidashev/web/releases", label: "v1", color: "text-aqua" }
 ];

src/src/components/header/index.tsx

@@ -30,12 +30,9 @@ export default function Header() {
     <header className={`fixed top-0 left-0 right-0 transition-transform duration-300 ${
       visible ? "translate-y-0" : "-translate-y-full"
     }`}>
-      <div className="hidden md:flex flex-row pt-2 md:text-3xl items-center justify-center lg:space-x-20 md:space-x-10">
+      <div className="flex flex-row pt-1 px-2 text-lg lg:pt-2 lg:text-3xl md:text-2xl items-center justify-between md:justify-center space-x-2 md:space-x-10 lg:space-x-20">
         {headerLinks}
       </div>
-      <div className="flex md:hidden">
-       {headerLinks}
-      </div>
     </header>
   );
 };

src/src/components/header/links.ts

@@ -7,8 +7,8 @@ interface HeaderLink {
 
 export const Links: HeaderLink[] = [
   { id: 0, href: "/", label: "Home", color: "text-green" },
-  { id: 1, href: "projects", label: "Projects", color: "text-yellow" },
+  { id: 1, href: "about", label: "About", color: "text-yellow" },
-  { id: 2, href: "resume", label: "Resume", color: "text-blue" },
+  { id: 2, href: "projects", label: "Projects", color: "text-blue" },
   { id: 3, href: "blog", label: "Blog", color: "text-purple" },
-  { id: 4, href: "shop", label: "Shop", color: "text-aqua" }
+  { id: 4, href: "resume", label: "Resume", color: "text-aqua" }
 ];

src/src/data/blog-posts/corebooting-my-thinkpad.md

@@ -0,0 +1,104 @@
+---
+title: "I corebooted my T440p, here's how I did it."
+author: "Timothy Pidashev"
+date: "2024/06/05"
+description: "This is a sample MDX file."
+tags: ["coreboot", "t440p", "dgpu"]
+---
+
+
+```python
+# discord api
+import discord
+from discord.ext import commands
+
+# custom utilities
+from Utilities import log
+
+log = log.Logger("errors")
+
+class Errors(commands.Cog):
+    def __init__(self, client):
+        self.client = client
+
+    @commands.Cog.listener()
+    async def on_ready(self):
+        await log.info("Errors cog loaded.")
+
+    @commands.Cog.listener()
+    async def on_command_error(self, context, error):
+
+        if isinstance(error, commands.CheckFailure):
+            await context.reply(
+                "You are not priveleged enough to use this command.", 
+                mention_author=False
+            )
+
+        else:
+            await context.reply(
+                f"**Error**\n```diff\n- {error}```",
+                mention_author=False
+            )
+
+def setup(client):
+    client.add_cog(Errors(client))
+```
+
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+*Italic Text*
+
+_Italic Text_
+
+**Bold Text**
+
+__Bold Text__
+
+* Bullet List
+  * Item 1
+  * Item 2
+    * Subitem 1
+    * Subitem 2
+
+1. Numbered List
+   1. Item 1
+   2. Item 2
+      - Subitem 1
+      - Subitem 2
+
+[Link Text](https://example.com)
+
+![Image Alt Text](https://example.com/image.jpg)
+
+> Blockquote
+>
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+`Inline Code`
+
+| Table Header 1 | Table Header 2 |
+|----------------|----------------|
+| Table Row 1    | Table Row 1    |
+| Table Row 2    | Table Row 2    |
+
+<sup>Superscript Text</sup>
+
+<sub>Subscript Text</sub>
+
+<mark>Highlighted Text</mark>
+
+<ins>Underlined Text</ins>
+
+<del>Strikethrough Text</del>
+
+<abbr title="Abbreviation">Abbreviation</abbr>

src/src/layouts/blog.astro

@@ -0,0 +1,32 @@
+---
+const { content } = Astro.props;
+
+import "@/style/globals.css";
+
+import Header from "@/components/header";
+import Footer from "@/components/footer";
+
+export interface Props {
+  title: string;
+  description: string;
+  permalink: string;
+  current?: string;
+}
+const { title, description, permalink, current } = Astro.props;
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<title>{content.title}</title>
+	</head>
+  <body class="bg-background text-foreground">
+    <Header client:load />
+    <main>
+      <slot />
+    </main>
+    <Footer client:load />
+	</body>
+</html>

src/src/lib/getPostData.ts

@@ -0,0 +1,14 @@
+import readingTime from "reading-time";
+
+type Post = {
+  title: string
+  file: string
+  rawContent: () => string
+}
+
+export default function getPostData(post: Post) {
+  return {
+    slug: post.file.split('/').pop().split('.').shift(),
+    readingTime: readingTime(post.rawContent()).text,
+  }
+}

src/src/pages/about.astro

@@ -4,9 +4,8 @@ import "@/style/globals.css"
 import MainLayout from "@/layouts/main.astro";
 ---
 
-<MainLayout content={{ title: "Shop | Timothy Pidashev" }}>
+<MainLayout content={{ title: "About | Timothy Pidashev" }}>
   <div class="flex items-center justify-center h-screen w-full">
-    <h1 class="text-4xl text-aqua font-bold">Shop</h1>
+    <h1 class="text-4xl text-blue font-bold">About</h1>
   </div>
 </MainLayout>
-

src/src/pages/blog.astro

@@ -1,12 +0,0 @@
----
-import "@/style/globals.css"
-
-import MainLayout from "@/layouts/main.astro";
----
-
-<MainLayout content={{ title: "Blog | Timothy Pidashev" }}>
-  <div class="flex items-center justify-center h-screen w-full">
-    <h1 class="text-4xl text-purple font-bold">Blog</h1>
-  </div>
-</MainLayout>
-

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

@@ -0,0 +1,29 @@
+---
+import { CollectionEntry, getCollection } from "astro:content";
+import MainLayout from "@/layouts/main.astro";
+
+export async function getStaticPaths() {
+	const posts = await getCollection("blog");
+	return posts.map((post) => ({
+		params: { slug: post.slug },
+		props: post,
+	}));
+}
+
+type Props = CollectionEntry<"blog">;
+const post = Astro.props;
+const { Content } = await post.render();
+---
+
+<MainLayout>
+  <article>
+    <h1 class="title">{post.data.title}</h1>
+    <p>by <a href={`/authors/${post.data.author.toLowerCase()}/`}>{post.data.author}</a>, 
+      published {post.data.pubDate.toDateString()}, 
+      tags: <strong>{post.data.tags.join(", ")}</strong>
+    </p>
+    <hr />
+    <Content />
+  </article>
+</MainLayout>
+

src/src/pages/blog/index.astro

@@ -0,0 +1,29 @@
+---
+import { getCollection } from 'astro:content';
+import MainLayout from '@/layouts/main.astro';
+
+const posts = (await getCollection('blog', ({ data }) => {
+  return data.isDraft !== true;
+})).sort(
+	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+---
+
+<MainLayout>
+  <section>
+    <ul>
+      {
+        posts.map((post) => (
+          <li>
+            <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
+            <p>by <a href={`/authors/${post.data.author.toLowerCase()}/`}>{post.data.author}</a>, 
+              published {post.data.pubDate.toDateString()}, 
+              tags: <strong>{post.data.tags.join(", ")}</strong>
+            </p>
+            <p>{post.data.description}</p>
+          </li>
+        ))
+      }
+    </ul>
+  </section>
+</MainLayout>