Add MDX support

Start writing a blog and clean up/hide tester stuff

src/components/Note.astro

@@ -0,0 +1,36 @@
+---
+interface Props {
+    text: string,
+}
+
+const { text } = Astro.props;
+---
+
+<div class="note">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"></path></svg>
+    <span>{text}</span>
+</div>
+
+<style lang="scss">
+    @import "../styles/vars.scss";
+
+    .note {
+        margin: 16px 0;
+        padding: 10px;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        font-weight: 500;
+
+        border-radius: $radius;
+        background-color: $accent;
+        color: $light;
+
+        > span {
+            padding-left: 8px;
+        }
+    }
+</style>

src/content/posts/2024_05_28-Astro_is_hard.mdx

@@ -0,0 +1,34 @@
+---
+title: Astro is hard....
+description: Arugh
+pubDate: 2024-05-28
+tags:
+  - astro
+  - typescript
+---
+
+import Note from "../../components/Note.astro";
+
+<Note text="I have no clue what I'm doing :3" />
+
+- I've been trying to learn typescript through trying astro
+- Astro is hard, due to all the issues I've encountered
+
+```typescript
+export async function getTagsBySlug(postTags: string[]): Promise<CollectionEntry<"tags">[]> {
+    // Collect all the tags from collections
+    const allTags: CollectionEntry<"tags">[] = await getCollection("tags");
+    
+    // Loop through all the tags in a post and the tags in the collections
+    // To see if they match, if they do we'll return them
+    const tags: CollectionEntry<"tags">[] = [];
+    postTags.forEach((postTag) => {
+        allTags.forEach((allTag) => {
+            if (allTag.slug === postTag) tags.push(allTag);
+        });
+    });
+    
+    // Yeet
+    return tags;
+}
+```

src/content/posts/code-examples.mdx

@@ -1,4 +1,5 @@
 ---
+draft: true
 title: "Code Examples"
 description: "Aurghhhhhh"
 pubDate: 2022-07-08

src/content/posts/image-examples.mdx

@@ -1,4 +1,5 @@
 ---
+draft: true
 title: "Image Examples"
 description: "fug"
 pubDate: 2024-07-08

src/content/posts/markdown-example.mdx

@@ -1,10 +1,10 @@
 ---
+draft: true
 title: This is an example Post
 description: "Cheat Sheet for Markdown"
 pubDate: 2022-07-08
 tags:
     - "code"
-    - "fortnite"
 ---
 
 # Markdown Cheat Sheet

src/content/posts/math-examples.mdx

@@ -1,4 +1,5 @@
 ---
+draft: true
 title: "Math Examples"
 description: "REEEEEE"
 pubDate: 2024-06-08

src/content/tags/astro.md

@@ -0,0 +1,3 @@
+---
+name: Astro
+---

src/content/tags/code.md

@@ -1,3 +0,0 @@
----
-name: Code
----

src/content/tags/fortnite.md

@@ -1,3 +0,0 @@
----
-name: Fortnite
----

src/content/tags/math.md

@@ -1,5 +0,0 @@
----
-name: "Math"
----
-
-``

src/content/tags/typescript.md

@@ -0,0 +1,3 @@
+---
+name: Typescript
+---

src/layouts/Markdown.astro

@@ -111,7 +111,7 @@ const tags = await getTagsBySlug(post.data.tags);
             border-bottom-right-radius: 0;
         }
 
-        &:hover {
+        &:hover, &:focus-visible {
             padding: 0 20px;
 
             > span {

src/pages/index.astro

@@ -25,17 +25,15 @@ const posts = await getPosts("posts");
 
 	<div class="section">
 		<h2>Who am I</h2>
-		<p>
-			My name is Michał, I go by Fluffy, I'm 19 and I like computers
-			<br><br>
-			I mainly do website stuff, work with the front and backend, but I also like networking and breaking things
-			<br><br>
-			My favorite language currently is Go, but I also know a few other languages that are listed below!
-			<br><br>
-			I use Arch btw.
-			<br><br>
-		</p>
+		<p>My name is Michał, I go by Fluffy, I'm 19 and I like computers</p>
+		<p>I mainly do website stuff, work with the front and backend, but I also like networking and breaking things</p>
+		<p>My favorite language currently is Go, but I also know a few other languages that are listed below!</p>
+		<p>In my free time, which isn't that often anymore, I enjoy playing games, such as The Witcher, Spin&nbsp;RhythmXD and other random stuff</p>
+		<p>I use Arch btw.</p>
+	</div>
 
+	<div class="section">
+		<h2>Stalk me here</h2>
 		<ul class="pill-list" role="list">
 			<li><a class="button" href="https://www.twitter.com/fluffybeanUwU" target="_blank">Twitter</a></li>
 			<li><a class="button" href="https://bsky.app/profile/leggy.dev" target="_blank">BlueSky</a></li>
@@ -79,12 +77,16 @@ const posts = await getPosts("posts");
 
 	<div class="section">
 		<h2>Recent Posts</h2>
-		<ul class="project-list" role="list">
-			{posts.slice(0, 2).map(post => (
-				<Card {post} />
-			))}
-		</ul>
-		<a class="button" id="see-all-posts" href="/posts">All Posts</a>
+		{(posts.length > 0) ? (
+			<ul class="project-list" role="list">
+				{posts.slice(0, 2).map(post => (
+					<Card {post} />
+				))}
+			</ul>
+			<a class="button" id="see-all-posts" href="/posts">All Posts</a>
+		) : (
+			<p>No Posts yet made!</p>
+		)}
 	</div>
 
 	<div class="section">

src/styles/_pill.scss

@@ -19,13 +19,23 @@
     list-style: none;
 
     > a {
-        //text-decoration: none;
         color: inherit;
     }
+
+    &.large {
+        padding: 0 16px;
+        height: 40px;
+        font-size: 16px;
+    }
 }
 
-.pill.large {
-    padding: 0 16px;
-    height: 40px;
-    font-size: 16px;
+// If its a clickable element
+a.pill, button.pill {
+    text-decoration: none;
+
+    &:hover, &:focus-visible {
+        border: 2px solid $accent;
+        background-color: rgba($accent, 0.1);
+        outline: 0 solid transparent;
+    }
 }

src/styles/_section.scss

@@ -5,6 +5,10 @@
         padding-bottom: 10px;
     }
 
+    > p {
+        padding-bottom: 8px;
+    }
+
     &:last-of-type {
         padding-bottom: 0;
     }