src/content/posts/myExperiencesWithAstro.md

@@ -4,6 +4,15 @@ description: ""
 pubDate: "18 Feb 2026 21:07"
 ---
 
+<!-- 
+- what i learned about it
+  - astro components (similar to react components?)
+  - interactive components are difficult
+  - static dynamic routes (dynamically generated at build time, but static on the website)
+  - content collections
+  - mdx
+ -->
+
  # What is Astro?
 Astro is a static site generator that allows you to combine components together to quickly put together a website. It's somewhat similar to something like React, but instead of having the bloat of all the javascript it generates, Astro outputs a static HTML website. The only javascript it includes is what you write in `<script>` tags. It has bindings for those web frameworks, so you can use React components in your website alongside the astro ones. It will also still generate a static site that doesn't require any javascript other than what you put there yourself.
 

src/layouts/MainLayout.astro

@@ -23,7 +23,7 @@ const hasPosts = (await getCollection("blog")).length > 0;
         <Panel>
           <span style="display: flex; flex-direction: row; justify-content: space-between; width: 200px;">
             <a href="/">Home</a>
-            <a href="/blog/">Blog</a>
+            <a href="/blog">Blog</a>
           </span>
         </Panel>
       )

src/pages/blog/index.astro

@@ -3,7 +3,7 @@ import { getCollection } from "astro:content";
 import Main from "../../layouts/MainLayout.astro";
 import TransFlagPanel from "../../layouts/TransFlagPanel.astro";
 import Panel from "../../layouts/Panel.astro";
-import "../../styles/blogIndex.scss";
+import "./index.scss";
 
 const latestPosts = (await getCollection("blog")).sort(
   (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),