Creating BandcampAlbum component and the story for it plus updates.

src/lib/components/ArticlesSkeleton.svelte

@@ -12,24 +12,24 @@
   <article class={`card skeleton ${classes.join(" ")}`}>
     <section>
       <h3>
-        <span class="skeleton-text skeleton-title" aria-hidden="true"
+        <span class="skeleton-text skeleton-title"
           >Loading article title...</span
         >
       </h3>
       <p>
-        <span class="skeleton-text skeleton-domain" aria-hidden="true"
+        <span class="skeleton-text skeleton-domain"
           >Loading domain...</span
         >
       </p>
     </section>
     <section>
       <p>
-        <span class="skeleton-text skeleton-reading" aria-hidden="true"
+        <span class="skeleton-text skeleton-reading"
           >Loading reading time...</span
         >
       </p>
       <p>
-        <span class="skeleton-text skeleton-tags" aria-hidden="true"
+        <span class="skeleton-text skeleton-tags"
           >Loading tags...</span
         >
       </p>

src/lib/components/Bandcamp.stories.svelte

@@ -1,29 +1,13 @@
 <script context="module" lang="ts">
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import Bandcamp from "./Bandcamp.svelte";
+  import type { Album } from "$lib/types/album";
+  import { sampleAlbum as baseAlbum } from "./BandcampAlbum.stories.svelte";
 
-  const sampleAlbums = [
+  const sampleAlbums: Album[] = [
-    {
+    { ...baseAlbum, title: "Album One", artwork: "https://picsum.photos/230?1" },
-      title: "Album One",
+    { ...baseAlbum, title: "Album Two", artwork: "https://picsum.photos/230?2" },
-      artist: "Artist A",
+    { ...baseAlbum, title: "Album Three", artwork: "https://picsum.photos/230?3" },
-      url: "https://example.com",
-      artwork: "https://picsum.photos/230?1",
-      src: undefined,
-    },
-    {
-      title: "Album Two",
-      artist: "Artist B",
-      url: "https://example.com",
-      artwork: "https://picsum.photos/230?2",
-      src: undefined,
-    },
-    {
-      title: "Album Three",
-      artist: "Artist C",
-      url: "https://example.com",
-      artwork: "https://picsum.photos/230?3",
-      src: undefined,
-    },
   ];
 
   const { Story } = defineMeta({

src/lib/components/Bandcamp.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { Album } from "$lib/types/album";
+  import type { Album } from "$lib/types/album";
-	import LazyImage from './LazyImage.svelte';
+  import BandcampAlbum from './BandcampAlbum.svelte';
 
-	const { albums }: { albums: Album[] } = $props();
+  const { albums }: { albums: Album[] } = $props();
-	const displayAlbums =
+  const displayAlbums =
-		albums?.length > 6 ? albums.slice(0, 6) : albums;
+    albums?.length > 6 ? albums.slice(0, 6) : albums;
 
 	for (let album of displayAlbums) {
 		album.src = {
@@ -22,26 +22,7 @@
 	<h2>Currently listening to:</h2>
 	<div class="albumsStyles">
 		{#each displayAlbums as album}
-			<div class="albumStyles">
+			<BandcampAlbum {album} />
-				<figure>
-					<a
-						title={`Link to ${album.title} by ${album.artist}`}
-						target="_blank"
-						href={album.url}
-						rel="noreferrer"
-					>
-						<LazyImage clazz="album-artwork" src={album.src} alt={`Album art for ${album.title}`} />
-					</a>
-				</figure>
-				<a
-					target="_blank"
-					href={album.url}
-					rel="noreferrer"
-				>
-					<h3>{album.title.length > 20 ? `${album.title.slice(0, 20)}...` : album.title}</h3>
-					<h3>{album.artist}</h3>
-				</a>
-			</div>
 		{/each}
 	</div>
 </div>
@@ -83,36 +64,7 @@
 				border: 3px solid var(--darkGrey);
 			}
 
-			/* ::-webkit-scrollbar {
-				width: 12px;
-			} */
-			/* scrollbar-width: thin;
-			scrollbar-color: var(--lightGrey) var(--darkGrey);
-			::-webkit-scrollbar-track {
-				background: var(--darkGrey);
-			}
-			::-webkit-scrollbar-thumb {
-				background-color: var(--lightGrey);
-				border-radius: 6px;
-				border: 3px solid var(--darkGrey);
-			} */
 			grid-template-columns: minmax(230px, 1fr);
 		}
 	}
-
-	.albumStyles {
-		display: grid;
-		justify-content: center;
-		text-align: center;
-
-		& figure {
-			margin-left: auto;
-			margin-right: auto;
-		}
-
-		@media (max-width: 550px) {
-			font-size: 1rem;
-			align-items: center;
-		}
-	}
 </style>

src/lib/components/BandcampAlbum.stories.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import BandcampAlbum from "./BandcampAlbum.svelte";
+  import type { Album } from "$lib/types/album";
+
+  export const sampleAlbum: Album = {
+    title: "Album One",
+    artist: "Artist A",
+    url: "https://example.com",
+    src: "https://picsum.photos/230?1",
+  };
+
+  const { Story } = defineMeta({
+    title: "Components/BandcampAlbum",
+    component: BandcampAlbum,
+    tags: ["autodocs"],
+    args: { album: sampleAlbum },
+    argTypes: { album: { control: "object" } },
+  });
+</script>
+
+<Story name="Default" />

src/lib/components/BandcampAlbum.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Album } from "$lib/types/album";
+  import LazyImage from './LazyImage.svelte';
+
+  const { album }: { album: Album } = $props();
+</script>
+
+<div class="albumStyles">
+  <figure>
+    <a
+      title={`Link to ${album.title} by ${album.artist}`}
+      target="_blank"
+      href={album.url}
+      rel="noreferrer"
+    >
+      <LazyImage clazz="album-artwork" src={album.src} alt={`Album art for ${album.title}`} />
+    </a>
+  </figure>
+  <a
+    target="_blank"
+    href={album.url}
+    rel="noreferrer"
+  >
+    <h3>{album.title.length > 20 ? `${album.title.slice(0, 20)}...` : album.title}</h3>
+    <h3>{album.artist}</h3>
+  </a>
+</div>
+
+<style lang="postcss">
+  .albumStyles {
+    display: grid;
+    justify-content: center;
+    text-align: center;
+
+    & figure {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    @media (max-width: 550px) {
+      font-size: 1rem;
+      align-items: center;
+    }
+  }
+</style>