content: staccato and legato

fezcode · fezcode · commit 2123989cc159 · 2026-02-07T04:05:51.000+03:00
diff --git a/src/components/MarkdownLink.jsx b/src/components/MarkdownLink.jsx
@@ -3,7 +3,7 @@ import { useSidePanel } from '../context/SidePanelContext';
 import { vocabulary } from '../data/vocabulary';
 import { ArrowSquareOut, CircleNotch } from '@phosphor-icons/react';
 
-const MarkdownLink = ({ href, children, className, ...props }) => {
+const MarkdownLink = ({ href, children, width = 450, className, ...props }) => {
   const { openSidePanel } = useSidePanel();
   const isExternal = href?.startsWith('http') || href?.startsWith('https');
   const isVocab =
@@ -35,6 +35,7 @@ const MarkdownLink = ({ href, children, className, ...props }) => {
               >
                 <LazyVocabComponent />
               </Suspense>,
+              width,
             );
           } else {
             console.warn(`Vocabulary term or loader not found: ${term}`);
diff --git a/src/data/vocab/legato.jsx b/src/data/vocab/legato.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { YoutubeLogoIcon } from '@phosphor-icons/react';
+import MarkdownLink from '../../components/MarkdownLink';
+
+export default function Legato() {
+  return (
+    <div className="space-y-6 font-mono text-sm leading-relaxed">
+      <p>
+        <strong className="text-current">Legato</strong> is a form of musical articulation. In modern notation, it indicates that musical notes are played or sung smoothly and connected.
+      </p>
+
+      <div className="border-l-2 border-blue-500/50 pl-4 py-1 italic text-gray-400 text-xs">
+        "Tied together, smooth, and flowing."
+      </div>
+
+      <p>
+        It is often indicated with a slur (a curved line) over or under the notes that are to be joined.
+      </p>
+
+      <div className="flex flex-col gap-4 pt-4 border-t border-white/10">
+        <div className="flex items-center gap-2 text-xs uppercase tracking-widest font-bold text-gray-500">
+          <span>See also:</span>
+          <MarkdownLink href="/vocab/staccato" className="text-orange-400 hover:underline" width={600}>Staccato</MarkdownLink>
+        </div>
+
+        <a
+          href="https://www.youtube.com/watch?v=ikppWbkG5TQ"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-xs text-red-400 hover:text-red-300 transition-colors"
+        >
+          <YoutubeLogoIcon size={16} weight="fill" />
+          <span>Visualizing Staccato vs Legato</span>
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/data/vocab/staccato.jsx b/src/data/vocab/staccato.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { YoutubeLogoIcon } from '@phosphor-icons/react';
+import MarkdownLink from '../../components/MarkdownLink';
+
+export default function Staccato() {
+  return (
+    <div className="space-y-6 font-mono text-sm leading-relaxed">
+      <p>
+        <strong className="text-current">Staccato</strong> is a form of musical articulation. In modern notation, it signifies a note of shortened duration, separated from the note that may follow by silence.
+      </p>
+
+      <div className="border-l-2 border-orange-500/50 pl-4 py-1 italic text-gray-400 text-xs">
+        "Detached, disconnected, and sharp."
+      </div>
+
+      <p>
+        It is often indicated with a small dot above or below the note head.
+      </p>
+
+      <div className="flex flex-col gap-4 pt-4 border-t border-white/10">
+        <div className="flex items-center gap-2 text-xs uppercase tracking-widest font-bold text-gray-500">
+          <span>See also:</span>
+          <MarkdownLink href="/vocab/legato" className="text-blue-400 hover:underline" width={600} >Legato</MarkdownLink>
+        </div>
+
+        <a
+          href="https://www.youtube.com/watch?v=ikppWbkG5TQ"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-xs text-red-400 hover:text-red-300 transition-colors"
+        >
+          <YoutubeLogoIcon size={16} weight="fill" />
+          <span>Visualizing Staccato vs Legato</span>
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/data/vocabulary.js b/src/data/vocabulary.js
@@ -83,4 +83,12 @@ export const vocabulary = {
     title: 'ETL (Extract, Transform, Load)',
     loader: () => import('./vocab/etl'),
   },
+  staccato: {
+    title: 'Staccato',
+    loader: () => import('./vocab/staccato'),
+  },
+  legato: {
+    title: 'Legato',
+    loader: () => import('./vocab/legato'),
+  },
 };
