Merge pull request #6 from brylie/abcjs-example

Add ABC notation player for C Major and D Dorian scales

Author: brylie

package-lock.json

@@ -18,6 +18,7 @@
     "@iconify-json/simple-icons": "^1.2.66",
     "@tailwindcss/vite": "^4.1.13",
     "astro": "^5.16.6",
+    "astro-abcjs": "^1.1.0",
     "astro-embed": "^0.12.0",
     "astro-icon": "^1.1.5",
     "markdown-it": "^14.1.0",

package.json

@@ -0,0 +1,10 @@
+---
+import AbcjsPlayer from "astro-abcjs/AbcjsPlayer.astro";
+---
+
+<AbcjsPlayer
+  notation={`X:1\nT:C Major\nM:4/4\nL:1/4\nK:C\nC D E F | G A B c |`}
+  showControls={true}
+  responsive={true}
+  abcjsVersion="6.6.0"
+/>

src/components/scales/CMajorScale.astro

@@ -0,0 +1,10 @@
+---
+import AbcjsPlayer from "astro-abcjs/AbcjsPlayer.astro";
+---
+
+<AbcjsPlayer
+  notation={`X:1\nT:D Dorian\nM:4/4\nL:1/4\nK:Ddor\nD E F G | A B c d |`}
+  showControls={true}
+  responsive={true}
+  abcjsVersion="6.6.0"
+/>

src/components/scales/DDorianMode.astro

@@ -9,6 +9,13 @@ keywords: ["music theory", "chords", "composition", "harmony", "parallel majors"
 
 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.
 
+import CMajorScale from '../../components/scales/CMajorScale.astro';
+import DDorianMode from '../../components/scales/DDorianMode.astro';
+
+## Parallel Majors Example (ABC Notation)
+
+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.
+
 ## What Are Parallel Majors?
 
 Before diving into parallel majors, let's establish some foundational concepts.
@@ -17,6 +24,14 @@ 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).
 
+---
+
+<CMajorScale />
+
+<DDorianMode />
+
+---
+
 The seven modes of the major scale are:
 
 1. Ionian (major)