Shellnut_Public/personal-website-sveltekit
1
0
Fork 0
mirror of https://github.com/BradNut/personal-website-sveltekit synced 2025-09-08 23:20:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Creating BandcampAlbum component and the story for it plus updates.

Browse source
This commit is contained in:
Bradley Shellnut 2025-08-22 11:10:21 -07:00
parent f70203ebb4
commit ba13704b9a
5 changed files with 83 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/lib/components/ArticlesSkeleton.svelte
View file

@ -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>

28
src/lib/components/Bandcamp.stories.svelte
View file

@ -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 = [
{
title: "Album One",
artist: "Artist A",
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 sampleAlbums: Album[] = [
{ ...baseAlbum, title: "Album One", artwork: "https://picsum.photos/230?1" },
{ ...baseAlbum, title: "Album Two", artwork: "https://picsum.photos/230?2" },
{ ...baseAlbum, title: "Album Three", artwork: "https://picsum.photos/230?3" },
];
const { Story } = defineMeta({

60
src/lib/components/Bandcamp.svelte
View file

@ -1,10 +1,10 @@
<script lang="ts">
import type { Album } from "$lib/types/album";
import LazyImage from './LazyImage.svelte';
import type { Album } from "$lib/types/album";
import BandcampAlbum from './BandcampAlbum.svelte';
const { albums }: { albums: Album[] } = $props();
const displayAlbums =
albums?.length > 6 ? albums.slice(0, 6) : albums;
const { albums }: { albums: Album[] } = $props();
const displayAlbums =
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">
<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>
<BandcampAlbum {album} />
{/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>

22
src/lib/components/BandcampAlbum.stories.svelte Normal file
View file

@ -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" />

45
src/lib/components/BandcampAlbum.svelte Normal file
View file

@ -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>