add cover_image for seo purposes

TeemuKoivisto · Apr 2, 2024 · dc0481e · dc0481e
1 parent 65389c8
commit dc0481e
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 2 deletions.
diff --git a/cover_image.avif b/cover_image.avif
diff --git a/packages/client/src/components/play/ScoreOptions.svelte b/packages/client/src/components/play/ScoreOptions.svelte
@@ -172,7 +172,7 @@
     .scale-dropdown {
       --search-dropdown-width: 100%;
     }
-    @media (width <= 475px) {
+    @media (width <= 656px) {
       grid-template-columns: 1fr 1fr;
       .range {
         grid-column-end: span 2;

diff --git a/packages/client/src/config.ts b/packages/client/src/config.ts
@@ -13,6 +13,12 @@ export const SITE_METADATA = {
   url: 'https://midi-note-trainer.teemukoivisto.xyz',
   title: 'MIDI Note Trainer',
   description: 'Practise music notation, scales and chords using MIDI directly from browser.',
+  image: {
+    url: 'https://midi-note-trainer.teemukoivisto.xyz/cover_image.avif',
+    width: 1350,
+    height: 1080,
+    alt: 'Image of MIDI Note Trainer UI'
+  },
   tags: [
     'music',
     'midi',

diff --git a/packages/client/src/routes/(site)/+layout.svelte b/packages/client/src/routes/(site)/+layout.svelte
@@ -15,7 +15,7 @@
     url: SITE_METADATA.url,
     title: SITE_METADATA.title,
     description: SITE_METADATA.description,
-    images: []
+    images: [SITE_METADATA.image]
   }}
   twitter={{
     title: SITE_METADATA.title,
@@ -29,6 +29,7 @@
     datePublished: SITE_METADATA.datePublished,
     dateModified: SITE_METADATA.dateModified,
     description: SITE_METADATA.description,
+    image: [SITE_METADATA.image.url],
     keywords: SITE_METADATA.tags,
     author: {
       '@type': 'Person',

diff --git a/packages/client/static/cover_image.avif b/packages/client/static/cover_image.avif