Merge pull request #34 from brylie/add-blog-technologies

Add technologies field to blog posts and enhance tag filtering

Author: brylie

src/content.config.ts

@@ -56,6 +56,7 @@ const blog = defineCollection({
         .optional(),
       tags: z.array(z.string()),
       headline: z.string().optional(),
+      technologies: z.array(z.string()).optional(),
     })
     .transform((post) => ({
       ...post,

src/content/blog/2025-02-18-hello-astro.md

@@ -8,7 +8,8 @@ author: "Brylie Christopher Oxley"
 image:
   url: "https://docs.astro.build/assets/rose.webp"
   alt: "The Astro logo on a dark background with a pink glow."
-tags: ["astro", "blogging", "learning in public"]
+tags: ["blogging", "learning in public"]
+technologies: ["Astro", "JavaScript", "CSS"]
 ---
 
 Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.

src/content/blog/2025-02-25-tailwind-css-component-frameworks.md

@@ -8,8 +8,10 @@ author: "Brylie Christopher Oxley"
 image:
   url: "https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmvnn8bkeli9b4jwcambs.jpg"
   alt: "Tailwind CSS component frameworks"
-tags: ["tailwind css", "component frameworks", "open source", "web development"]
+tags: ["component frameworks", "open source", "web development"]
+technologies: ["Tailwind CSS", "JavaScript", "React"]
 ---
+
 As [Tailwind CSS](https://tailwindcss.com/) continues to reshape the frontend development landscape, we're seeing a flourishing ecosystem of component frameworks emerge. This 'State of Open-Source Tailwind CSS Component Frameworks' is a comprehensive overview of the current landscape, highlighting the most notable frameworks that embrace open-source principles and avoid freemium models favoring community-driven development. While commercial options like Tailwind UI offer polished solutions, many developers are turning to open-source alternatives that provide greater flexibility and transparency. Let's explore the most notable frameworks that embrace open-source principles, avoiding freemium models favoring community-driven development.
 
 ## FlyonUI: Bridging Semantic Classes and JavaScript Functionality
@@ -106,4 +108,4 @@ The rise of open-source Tailwind CSS component frameworks has democratized acces
 
 Remember that the best framework for your project isn't necessarily the one with the most components or features but the one that best aligns with your team's workflow and project requirements. Experiment with different options and contribute to the communities that resonate with your development philosophy.
 
-_This article reflects the state of Tailwind CSS component frameworks as of early 2025. Given the rapid evolution of frontend development, check the latest documentation and community discussions when deciding._
+_This article reflects the state of Tailwind CSS component frameworks as of early 2025. Given the rapid evolution of frontend development, check the latest documentation and community discussions when deciding._

src/content/blog/2025-03-04-parallel-major-chords.md

@@ -1,11 +1,11 @@
 ---
 layout: ../../layouts/MarkdownPostLayout.astro
-title: "Unlocking Musical Color: Understanding and Using Parallel Majors"
+title: "Parallel Major Chords: A Journey Through Music Theory"
 slug: "2025-parallel-major-chords"
 datePublished: 2025-03-04
-description: "Explore the concept of parallel majors and how they can add new colors to your musical compositions."
+description: "Dive into the world of parallel major chords and their unique role in music theory."
 author: "Brylie Christopher Oxley"
-tags: ["music theory", "composition", "parallel majors", "chord progressions"]
+tags: ["music theory", "chords", "composition", "harmony"]
 ---
 
 Have you ever wondered how some of your favorite songs create such emotionally rich and unexpected chord progressions? Many composers and songwriters use a powerful technique that involves borrowing chords from different scales or modes. Today, we'll explore a specific approach called "parallel majors" that can immediately add new colors to your compositions.
@@ -19,6 +19,7 @@ Before diving into parallel majors, let's establish some foundational concepts.
 A mode is essentially a scale that starts on a different note of a parent major scale. For example, if we take the C major scale (C, D, E, F, G, A, B) but start on D instead, we get D Dorian mode (D, E, F, G, A, B, C).
 
 The seven modes of the major scale are:
+
 1. Ionian (major)
 2. Dorian
 3. Phrygian
@@ -43,15 +44,15 @@ This gives us access to a whole new palette of chords to work with in our compos
 
 Here's a chart showing each C mode, its parallel major scale, and the chords that appear in those parallel major keys:
 
-| C Mode | Parallel Major | I | II | III | IV | V | VI | VII |
-|--------|----------------|---|----|----|----|----|----|----|
-| **C Ionian** | C Major | C | Dm | Em | F | G | Am | Bdim |
-| **C Dorian** | B♭ Major | B♭ | Cm | Dm | E♭ | F | Gm | Adim |
-| **C Phrygian** | A♭ Major | A♭ | B♭m | Cm | D♭ | E♭ | Fm | Gdim |
-| **C Lydian** | G Major | G | Am | Bm | C | D | Em | F♯dim |
-| **C Mixolydian** | F Major | F | Gm | Am | B♭ | C | Dm | Edim |
-| **C Aeolian** | E♭ Major | E♭ | Fm | Gm | A♭ | B♭ | Cm | Ddim |
-| **C Locrian** | D♭ Major | D♭ | E♭m | Fm | G♭ | A♭ | B♭m | Cdim |
+| C Mode           | Parallel Major | I   | II  | III | IV  | V   | VI  | VII   |
+| ---------------- | -------------- | --- | --- | --- | --- | --- | --- | ----- |
+| **C Ionian**     | C Major        | C   | Dm  | Em  | F   | G   | Am  | Bdim  |
+| **C Dorian**     | B♭ Major       | B♭  | Cm  | Dm  | E♭  | F   | Gm  | Adim  |
+| **C Phrygian**   | A♭ Major       | A♭  | B♭m | Cm  | D♭  | E♭  | Fm  | Gdim  |
+| **C Lydian**     | G Major        | G   | Am  | Bm  | C   | D   | Em  | F♯dim |
+| **C Mixolydian** | F Major        | F   | Gm  | Am  | B♭  | C   | Dm  | Edim  |
+| **C Aeolian**    | E♭ Major       | E♭  | Fm  | Gm  | A♭  | B♭  | Cm  | Ddim  |
+| **C Locrian**    | D♭ Major       | D♭  | E♭m | Fm  | G♭  | A♭  | B♭m | Cdim  |
 
 ## How to Use Parallel Majors in Your Compositions
 
@@ -60,9 +61,11 @@ Now for the fun part—putting this knowledge to practical use! Here's a step-by
 ### 1. Start with a Simple Progression in a Major Key
 
 Let's begin with a common chord progression in C major:
+
 ```
 C - Am - F - G
 ```
+
 This is a I - vi - IV - V progression, one of the most used progressions in pop music.
 
 ### 2. Identify Opportunities for Chord Borrowing
@@ -74,6 +77,7 @@ Each chord in your progression is a potential candidate for "borrowing" from a p
 Let's try replacing some chords in our progression by borrowing from parallel majors:
 
 **Example 1:** Replace the vi chord (Am) with the parallel major version from C Aeolian
+
 - Original: C - Am - F - G
 - Parallel major of C Aeolian is E♭ major
 - The vi chord in E♭ major is Cm
@@ -82,6 +86,7 @@ Let's try replacing some chords in our progression by borrowing from parallel ma
 This small change adds a beautiful, melancholic twist to an otherwise standard progression.
 
 **Example 2:** Replace the IV chord (F) with the parallel major version from C Phrygian
+
 - Original: C - Am - F - G
 - Parallel major of C Phrygian is A♭ major
 - The IV chord in A♭ major is D♭
@@ -94,6 +99,7 @@ This creates a more dramatic, unexpected shift that can work wonderfully for son
 Don't stop at just one borrowed chord! Try various combinations:
 
 **Example 3:** Borrow multiple chords
+
 - Original: C - Am - F - G
 - Replace Am with Cm (from C Aeolian's parallel major)
 - Replace G with C (from C Mixolydian's parallel major)
@@ -137,4 +143,4 @@ Take a simple chord progression in a key you're comfortable with and try replaci
 
 ---
 
-*Want to learn more about music theory concepts that can enhance your compositions? Check out our other articles on [brylie.online](https://brylie.online).*
+_Want to learn more about music theory concepts that can enhance your compositions? Check out our other articles on [brylie.online](https://brylie.online)._

src/content/blog/2025-03-09-what-is-an-orm.md

@@ -5,16 +5,9 @@ slug: "2025-demystifying-orm"
 datePublished: 2025-03-09
 description: "Learn how Object-Relational Mapping (ORM) connects object-oriented programming with relational databases, and why it matters for modern web development."
 author: "Brylie Christopher Oxley"
-tags:
-  [
-    "web development",
-    "databases",
-    "ORM",
-    "Prisma",
-    "TypeORM",
-    "JavaScript",
-    "TypeScript",
-  ]
+tags: ["web development", "databases", "ORM"]
+technologies:
+  ["Prisma", "TypeORM", "Sequelize", "Drizzle ORM", "JavaScript", "TypeScript"]
 ---
 
 # Demystifying ORM: A Developer's Bridge Between Code and Databases

src/pages/tags/[tag].astro

@@ -17,6 +17,11 @@ export async function getStaticPaths() {
     ...new Set(allProjects.flatMap((project) => project.data.tags || [])),
   ];
 
+  // Get all technologies from blog posts
+  const postTechnologies = [
+    ...new Set(allPosts.flatMap((post) => post.data.technologies || [])),
+  ];
+
   // Get all technologies from projects
   const projectTechnologies = [
     ...new Set(
@@ -26,13 +31,22 @@ export async function getStaticPaths() {
 
   // Combine all unique tags and technologies
   const uniqueTags = [
-    ...new Set([...postTags, ...projectTags, ...projectTechnologies]),
+    ...new Set([
+      ...postTags,
+      ...postTechnologies,
+      ...projectTags,
+      ...projectTechnologies,
+    ]),
   ].sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
 
   return uniqueTags.map((tag) => {
     // Filter posts that contain this tag
     const filteredPosts = allPosts
-      .filter((post) => post.data.tags.includes(tag))
+      .filter(
+        (post) =>
+          post.data.tags?.includes(tag) ||
+          post.data.technologies?.includes(tag),
+      )
       .sort(
         (a, b) =>
           new Date(b.data.datePublished).valueOf() -