Polish SEO tags, fix dead classes, and tidy small accessibility details

src/components/MDX/CodeSnippet.astro

@@ -50,8 +50,12 @@ const copyID = Math.random().toString(36);
           }
           {title && <p>{title}</p>}
         </div>
-        <button class="font-bold" id=`copy-${copyID}`>
+        <button
-          Copy <Icon name="mdi:content-copy" class="ml-0.5 inline-block" />
+          type="button"
+          aria-label="Copy code to clipboard"
+          class="font-bold"
+          id=`copy-${copyID}`
+          >Copy <Icon name="mdi:content-copy" class="ml-0.5 inline-block" />
         </button>
       </div>
     </div>

src/components/Player.astro

@@ -136,7 +136,7 @@ const playerArtworkOpacity = 0.4;
             </button>
           </div>
           <div
-            class="mt-3 flex hidden flex-row items-center space-x-2 pt-1 text-sm md:flex"
+            class="mt-3 hidden flex-row items-center space-x-2 pt-1 text-sm md:flex"
           >
             <span class="flex w-9 items-center justify-center">
               <button

src/components/SEO.astro

@@ -66,6 +66,7 @@ import { Schema } from "astro-seo-schema";
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:url" content={url} />
+<meta property="og:type" content="website" />
 <meta
   property="og:image"
   content={image !== undefined && image.externalURL !== undefined
@@ -98,7 +99,7 @@ import { Schema } from "astro-seo-schema";
 <meta name="twitter:description" content={description} />
 <meta name="twitter:card" content="summary_large_image" />
 <meta
-  name="twitter:image:src"
+  name="twitter:image"
   content={image !== undefined && image.externalURL !== undefined
     ? image.externalURL
     : site.image.externalURL}

src/components/SectionTitle.astro

@@ -9,7 +9,7 @@ interface Props {
 const {
   Tag = "h2",
   lineColour = "border-primary",
-  lineColourDark = "dark:text-primary",
+  lineColourDark = "dark:border-primary",
   class: className
 } = Astro.props;
 ---

src/data/site.ts

@@ -6,7 +6,7 @@ export default {
     "Nathan Cummins is an award-winning composer, orchestrator, sound designer, and conductor known for his vibrant music across video games, film, and live performance. Based in Adelaide, he brings classical craft, bold creativity, and technical innovation to every project.",
   tagline: "Composer, Orchestrator, Conductor, Sound Designer",
   image: {
-    externalURL: `${import.meta.env.SITE}/nathan-cummins-composer-orchestrator-conductor.jpg`,
+    externalURL: `${import.meta.env.SITE ?? "https://www.nathancummins.com.au"}/nathan-cummins-composer-orchestrator-conductor.jpg`,
     src: "nathan-cummins-composer-orchestrator-conductor.jpg",
     alt: "Picture of Nathan Cummins, Adelaide composer, orchestrator, and conductor"
   } as SiteImage

src/pages/about.astro

@@ -122,7 +122,7 @@ import { Image } from "astro:assets";
         </ul>
       </div>
     </section>
-    <section id="Conducting">
+    <section id="conducting">
       <div class="mx-auto max-w-4xl px-8 text-left">
         <H2>Conducting</H2>
         <Paragraph

src/pages/contact.astro

@@ -11,8 +11,11 @@ import { Icon } from "astro-icon/components";
   <div class="w-full">
     <section id="contact" class="bg-primary dark:bg-gray-800">
       <div class="mx-auto max-w-4xl px-8 py-16 text-center">
-        <SectionTitle Tag="h1" class="text-white" lineColour="text-white"
+        <SectionTitle
-          >Let's get in touch!</SectionTitle
+          Tag="h1"
+          class="text-white"
+          lineColour="border-white"
+          lineColourDark="dark:border-white">Let's get in touch!</SectionTitle
         >
         <ContactForm />
       </div>

src/pages/index.astro

@@ -161,8 +161,10 @@ const tracks = (
     <section id="listen" class="bg-primary text-white dark:bg-gray-800">
       <div class="w-full overflow-hidden">
         <div class="pt-16 text-center">
-          <SectionTitle lineColour="text-white">Listen</SectionTitle>
+          <SectionTitle
-
+            lineColour="border-white"
+            lineColourDark="dark:border-white">Listen</SectionTitle
+          >
           <Paragraph
             >Click or tap on an image below to listen to the work.</Paragraph
           >
@@ -178,7 +180,7 @@ const tracks = (
         <Paragraph
           >I am very grateful to have been recognised and awarded for my work.</Paragraph
         >
-        <div class="md-8 h-48 overflow-hidden scroll-smooth p-0">
+        <div class="mb-8 h-48 overflow-hidden scroll-smooth p-0">
           <div
             class="animate-scrolling-awards m-0 mx-auto flex max-w-md flex-col space-y-8 p-0"
           >
@@ -213,13 +215,17 @@ const tracks = (
         <SectionTitle>Let's get in touch!</SectionTitle>
         <div class="grid grid-cols-1 text-lg md:grid-cols-2">
           <div class="col-span-1 flex flex-col items-center justify-center p-4">
-            <Icon name="fa7-solid:at" class="text-4xl" />
+            <Icon name="fa7-solid:at" class="text-4xl" aria-hidden="true" />
             <TextLink href="mailto:nathan@nathancummins.com.au" class="mt-4"
               >nathan@nathancummins.com.au</TextLink
             >
           </div>
           <div class="col-span-1 flex flex-col items-center justify-center p-4">
-            <Icon name="fa7-solid:envelope" class="text-4xl" />
+            <Icon
+              name="fa7-solid:envelope"
+              class="text-4xl"
+              aria-hidden="true"
+            />
             <Paragraph class="my-0 mt-4"
               >PO Box 2112 Regency Park SA 5942</Paragraph
             >