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

Fixing articles state values not updating and hide/show article text.

Browse source
This commit is contained in:
Bradley Shellnut 2024-02-01 10:09:46 -08:00
parent d7e7e19627
commit d0320daee9
5 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/lib/components/Articles.svelte
View file

@ -2,16 +2,19 @@
import type { Article } from "$lib/types/article"; import type { Article } from "$lib/types/article";
import ExternalLink from './ExternalLink.svelte'; import ExternalLink from './ExternalLink.svelte';
const { articles, totalArticles, compact = false, classes = [] } = $props<{ const { articles, totalArticles, compact = false, showMoreArticles = false, classes = [] } = $props<{
articles: Article[]; articles: Article[];
totalArticles: number; totalArticles: number;
compact?: boolean; compact?: boolean;
showMoreArticles?: boolean;
classes?: string[] classes?: string[]
}>(); }>();
</script> </script>
<div> <div>
<h2>Favorite Articles</h2> {#if showMoreArticles}
<h2>Favorite Articles</h2>
{/if}
<div class={classes.join(' ')}> <div class={classes.join(' ')}>
{#each articles as article (article.hashed_url)} {#each articles as article (article.hashed_url)}
<article class='card'> <article class='card'>
@ -42,12 +45,14 @@
</article> </article>
{/each} {/each}
</div> </div>
<div class="moreArticles"> {#if showMoreArticles}
<a href="/articles">{`${totalArticles} more articles`}</a> <div class="moreArticles">
<a href="/articles" aria-label={`${totalArticles} more articles`}> <a href="/articles">{`${totalArticles} more articles`}</a>
<iconify-icon icon="material-symbols:arrow-right-alt-rounded"></iconify-icon> <a href="/articles" aria-label={`${totalArticles} more articles`}>
</a> <iconify-icon icon="material-symbols:arrow-right-alt-rounded"></iconify-icon>
</div> </a>
</div>
{/if}
</div> </div>

5
src/lib/components/ExternalLink.svelte
View file

@ -2,7 +2,7 @@
import OpenInNew from '@iconify-icons/mdi/open-in-new'; import OpenInNew from '@iconify-icons/mdi/open-in-new';
import type { IconifyIcon } from 'iconify-icon'; import type { IconifyIcon } from 'iconify-icon';
const { rel = 'noreferrer', target = '_blank', href, ariaLabel, showIcon = false, clazz = "", icon = OpenInNew } = $props<{ const { rel = 'noreferrer', target = '_blank', href, ariaLabel, showIcon = false, clazz = "", icon = OpenInNew, children } = $props<{
rel?: string; rel?: string;
target?: string; target?: string;
href: string; href: string;
@ -10,12 +10,13 @@
showIcon?: boolean; showIcon?: boolean;
clazz?: string; clazz?: string;
icon?: IconifyIcon; icon?: IconifyIcon;
children: () => any
}>(); }>();
</script> </script>
<a class:show-icon={showIcon} class={clazz} aria-label={`Open ${ariaLabel} externally`} title={`Open ${ariaLabel} externally`} {href} {rel} {target}> <a class:show-icon={showIcon} class={clazz} aria-label={`Open ${ariaLabel} externally`} title={`Open ${ariaLabel} externally`} {href} {rel} {target}>
<slot /> {@render children()}
{#if showIcon} {#if showIcon}
<iconify-icon {icon} width="24" height="24" role="img" title={`Open ${ariaLabel} Externally`} /> <iconify-icon {icon} width="24" height="24" role="img" title={`Open ${ariaLabel} Externally`} />
{/if} {/if}

3
src/lib/components/bandcamp/index.svelte
View file

@ -5,8 +5,7 @@
const { albums } = $props<{ const { albums } = $props<{
albums: Album[]; albums: Album[];
}>(); }>();
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) { for (let album of displayAlbums) {
album.src = { album.src = {

10
src/routes/+page.svelte
View file

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import Bandcamp from '$lib/components/bandcamp/index.svelte'; import Bandcamp from '$lib/components/bandcamp/index.svelte';
import Articles from '$lib/components/Articles.svelte'; import Articles from '$lib/components/Articles.svelte';
import type { Album } from '$lib/types/album';
import type { Article, ArticlePageLoad } from '$lib/types/article';
const { data } = $props(); const { data } = $props();
const { albums, articlesData } = $state(data); const albums = $derived(data.albums);
const { articles, totalArticles } = $state(articlesData); const articlesData = $derived(data.articlesData);
const articles = $derived(articlesData.articles);
const totalArticles = $derived(articlesData.totalArticles);
const userNames = { const userNames = {
github: 'BradNut', github: 'BradNut',
@ -60,7 +60,7 @@
</p> </p>
<div class="social-info"> <div class="social-info">
<Bandcamp {albums} /> <Bandcamp {albums} />
<Articles {articles} {totalArticles} compact /> <Articles {articles} {totalArticles} compact showMoreArticles />
</div> </div>
</div> </div>

7
src/routes/articles/[page]/+page.svelte
View file

@ -1,11 +1,12 @@
<script lang="ts"> <script lang="ts">
import Pagination from "$lib/components/pagination/index.svelte"; import Pagination from "$lib/components/pagination/index.svelte";
import type { Article } from "$lib/types/article";
import Articles from "$lib/components/Articles.svelte"; import Articles from "$lib/components/Articles.svelte";
import type { PageData } from "./$types";
const { data } = $props(); const { data } = $props();
const { articles, currentPage, totalArticles, limit } = $state(data); const articles = $derived(data.articles);
const currentPage = $derived(data.currentPage);
const totalArticles = $derived(data.totalArticles);
const limit = $derived(data.limit);
</script> </script>
<div> <div>