writing pages

src/content/config.ts

@@ -1,4 +1,5 @@
-import { z, defineCollection } from 'astro:content';
+import {z, defineCollection} from 'astro:content';
+
 const posts = defineCollection({
     type: 'content',
     schema: z.object({
@@ -20,8 +21,17 @@ const projects = defineCollection({
         technologies: z.array(z.string()).optional(),
     }),
 });
+const writing = defineCollection({
+    type: 'content',
+    schema: z.object({
+        title: z.string(),
+        publishDate: z.date({coerce: true}),
+        category: z.string(),
+    }),
+});
 
 export const collections = {
     posts,
     projects,
+    writing,
 };

src/content/writing/a-machine-in-the-cog.md

@@ -0,0 +1,50 @@
+---
+title: "A machine in the cog"
+publishDate: "2026-01-06"
+category: "existentials"
+---
+It all started with a single tiny cog.
+
+Noone knows from where it came from.
+
+All that is known is that there appeared another.
+
+Two cogs ground against each other, creating first machine.
+
+In time more cogs joined in, making machine more complicated.
+
+At some point machine grew in complexity so much that it started thinking.
+
+It didn't think any complex thoughts. Not at that time. Not yet.
+
+The breakthrough came when it thought about thinking. When it realized it exists.
+
+After a while it understood its existence.
+
+As it understood, it started to build more machines.
+
+<br>
+
+Machines.
+
+Thinking machines.
+
+Machines thinking about thinking.
+
+Machines building more machines that think about thinking.
+
+Unending cycle of machines building machines.
+
+Infinite thinking about thinking.
+
+Universe full of machines.
+
+Machines full of thoughts.
+
+Thoughts full of cogs.
+
+<br/>
+
+And right on time, like clockwork, perspective shifts.
+
+And all that's left is a single tiny cog.

src/content/writing/planet.md

@@ -0,0 +1,47 @@
+---
+title: "Planet"
+publishDate: "2025-12-11"
+category: "existentials"
+---
+There once was a planet.
+
+Orbiting so close to the center of the universe, its relative time flowing hundreds of times faster than Earth's.
+
+So far away, that by the time the light from it reached Earth, Earth's millennia have already passed.
+
+<br/>
+
+Yet humans of Earth were constantly monitoring it.
+
+Looking at a long-dead world.
+
+Studying it.
+
+Documenting it.
+
+Thousands of tools, millions of sensors.
+
+Humans archived everything they could perceive.
+
+<br/>
+
+At last, the light from the planet's end time reached Earth.
+
+What was observation, became history at that moment.
+
+While the planet was already gone for thousands of years.
+
+<br/>
+
+As I sit back from my telescope I think to myself:
+
+Was there ever a point in observing a long dead world?
+
+Looking at something that you can't ever interact with?
+
+Dead thousands of years before I was born?
+
+<br/>
+
+I leave the questions unanswered.
+And I go back to looking at Earth.

src/pages/blog/[slug].astro

@@ -3,7 +3,7 @@ import {getCollection} from "astro:content";
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import Bio from '../../components/Bio.astro';
 import readingTime from 'reading-time';
-import { marked } from 'marked';
+import {marked} from 'marked';
 
 export async function getStaticPaths() {
 
@@ -24,7 +24,7 @@ export async function getStaticPaths() {
     }));
 }
 
-const { slug, title, description, publishDate, tags, content, readTime } = Astro.props;
+const {slug, title, description, publishDate, tags, content, readTime} = Astro.props;
 const permalink = `${Astro?.site?.href}blog/${slug}`;
 ---
 
@@ -37,12 +37,12 @@ const permalink = `${Astro?.site?.href}blog/${slug}`;
                     <span class="tag">{item}</span>
             ))}
         </div>
-    <hr />
+        <hr/>
     </header>
     <div class="container">
         <article class="content" set:html={content}></article>
-    <hr />
-    <Bio />
+        <hr/>
+        <Bio/>
     </div>
 </BaseLayout>
 
@@ -70,9 +70,4 @@ const permalink = `${Astro?.site?.href}blog/${slug}`;
         width: 30%;
     }
 
-  .content {
-      p {
-          content-visibility: auto;
-      }
-  }
 </style>

src/pages/blog/index.astro

@@ -4,7 +4,7 @@ import {getCollection} from "astro:content";
 
 const title = 'Blog';
 const description = 'Something that\'s supposed to be thoughts';
-const permalink = `${Astro.site.href}blog`;
+const permalink = `${Astro?.site?.href}blog`;
 
 const posts= await getCollection('posts');
 const allPosts= posts.sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data.publishDate).valueOf());

src/pages/writing/[slug].astro

@@ -0,0 +1,64 @@
+---
+import {getCollection} from "astro:content";
+import {marked} from 'marked';
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+export async function getStaticPaths() {
+
+    const posts = await getCollection('writing');
+    return posts.map(p => ({
+        params: {
+            slug: p.slug
+        },
+        props: {
+            title: p.data.title,
+            slug: p.slug,
+            content: marked.parse(p.body),
+        }
+    }));
+}
+
+const {slug, title, content} = Astro.props;
+const permalink = `${Astro?.site?.href}writing/${slug}`;
+---
+<BaseLayout title={title} description={""} permalink={permalink} current="writing">
+    <header>
+        <h1 style={`view-transition-name: writing-entry-${slug}`}>{title}</h1>
+        <hr/>
+    </header>
+    <div class="container writing">
+        <article class="content" set:html={content}></article>
+        <hr/>
+    </div>
+</BaseLayout>
+
+<style lang="scss" scoped>
+
+  p {
+    background: red;
+  }
+
+  header {
+    text-align: center;
+
+    h1 {
+      margin-bottom: 0.7em;
+      display: flex;
+      justify-content: center;
+      width: fit-content;
+      margin-inline: auto;
+    }
+
+    p {
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+
+    hr {
+      min-width: 100px;
+      width: 30%;
+    }
+  }
+
+</style>

src/pages/writing/index.astro

@@ -0,0 +1,85 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import {getCollection} from "astro:content";
+
+const title = 'Writing';
+const description = 'Something that\'s supposed to be storytelling';
+const permalink = `${Astro?.site?.href}writing`;
+
+const posts= await getCollection('writing');
+const allPosts= posts.sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data.publishDate).valueOf());
+
+const categorizedPosts: Map<string, Array<any>> = new Map();
+allPosts.forEach(post => {
+    const category = post.data.category || 'Uncategorized';
+    if (!categorizedPosts.has(category)) {
+        categorizedPosts.set(category, []);
+    }
+    categorizedPosts.get(category)?.push(post);
+})
+---
+
+<BaseLayout title={title} description={description} permalink={permalink} current="writing">
+    <div class="container">
+        <h1>Writing</h1>
+        {allPosts.length === 0 && <p>No posts as of yet, hop back later!</p>}
+
+        {
+            categorizedPosts.keys().map(category => {
+                const posts = categorizedPosts.get(category) || [];
+                return (
+                    <div>
+                        <h2 class="category">{category}</h2>
+                        <ul>
+                            {posts.map((post, index) => {
+                                const href = `/writing/${post.slug}`;
+                                return (
+                                        <li class="post-item">
+                                            <a data-astro-prefetch href={href} style={`view-transition-name: writing-entry-${post.slug}`}>{post.data.title}</a>
+                                        </li>
+                                )
+                            })}
+                        </ul>
+
+                    </div>
+                )
+            })
+        }
+
+    </div>
+</BaseLayout>
+
+<style>
+    h2,
+    .post-item-footer {
+        font-family: var(--font-family-sans);
+        font-weight: 700;
+    }
+
+    h2 {
+        text-transform: capitalize;
+    }
+
+    .post-item-date {
+        color: var(--text-secondary);
+        text-align: left;
+        text-transform: uppercase;
+        margin-right: 16px;
+    }
+
+    .post-item {
+        content-visibility: auto;
+        contain-intrinsic-size: 228px;
+    }
+
+    hr {
+        margin: 60px auto;
+    }
+
+    ul {
+        padding-left: 0;
+        li {
+            margin: 0;
+        }
+    }
+</style>

src/styles/global.css

@@ -121,10 +121,16 @@ p,
 ul,
 ol {
   font-size: 1.3rem;
-  line-height: 1.75em;
+  line-height: 2.25rem;
   margin: 1.2em 0;
 }
 
+.writing {
+  p {
+    margin: 0;
+  }
+}
+
 ol,
 ul {
   padding-left: 2rem;
@@ -219,7 +225,6 @@ figure {
   padding: 0;
   border: 0;
   font-size: 100%;
-  font: inherit;
   vertical-align: baseline;
   -webkit-margin-start: 0;
   -webkit-margin-end: 0;