Some more experimental changes with blogs + minor edits to the ssh key

blog

src/content/blogs/the-search-for-the-perfect-ssh-key.md

@@ -1,14 +1,12 @@
 ---
 title: The search for the perfect SSH key
-description: Here's how you can embed your name in an SSH key
+description: How you can embed your name in an SSH key
 date: 2024-11-14
 ---
 
-# The search for the perfect SSH key
-
-SSH keys are widely used among developers,
+SSH keys are a widely used tool among developers,
 they are the equivalent of a username and password in the development world.
-They enable you to prove you are who you claim to be and they are the gateway
+They allow you to prove your identity and they are the gateway
 into accessing servers remotely in a secure manner.
 
 ### The ssh public key format
@@ -32,7 +30,7 @@ Let's break it down
   - the length of the key, 32 bytes for ed25519 (4 bytes long)
   - the raw bytes for the ed25519 key (32 bytes long)
 
-### Embedding a word in base64
+## Embedding a word in base64
 
 Base64 is a widely used format for displaying binary in a compact and human readable way,
 it uses A-Z, a-z, 0-9, '/' and '+' adding up to 64 unique characters.

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

@@ -1,7 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import Blog from "@layouts/Blog.astro";
-import Markdown from "@components/Markdown.astro";
 import Terminal from "@layouts/Terminal.astro";
 import BlogItem from "@components/BlogItem.astro";
 
@@ -19,19 +17,37 @@ const { Content } = await entry.render();
 
 <Terminal path="blogs/">
     <div class="w-full h-[65vh] overflow-y-auto pr-4">
-        <div class="flex flex-col h-full m-0 p-0">
-            <BlogItem
-                title={entry.data.title}
-                description={entry.data.description ?? ""}
-                date={entry.data.date}
-            />
-            <div class="text-[130%] flex-grow">
+        <div class="text-[130%] h-full m-0 p-0">
+            <div class="text-[110%]">
+                <BlogItem
+                    title={entry.data.title}
+                    description={entry.data.description ?? ""}
+                    date={entry.data.date}
+                />
+            </div>
+            <div class="markdown">
+                <h2>Somewhat of a long heading</h2>
                 <Content />
             </div>
         </div>
     </div>
 </Terminal>
 
-<!-- <Blog title=`/home/kyren/blogs/${entry.slug}`> -->
-<!--     <Content /> -->
-<!-- </Blog> -->
+<style is:global>
+    .markdown p {
+        padding-bottom: 1rem;
+    }
+    .markdown strong {
+        font-weight: bold;
+    }
+    .markdown h2 {
+        color: var(--secondary);
+        font-size: 125%;
+        padding-bottom: 0.5rem;
+    }
+    .markdown h3 {
+        color: var(--secondary);
+        font-size: 110%;
+        padding-bottom: 0.25rem;
+    }
+</style>