From d0320daee950ccf8651ed43254e91f45992e49b0 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Thu, 1 Feb 2024 10:09:46 -0800
Subject: [PATCH] Fixing articles state values not updating and hide/show
 article text.

---
 src/lib/components/Articles.svelte       | 21 +++++++++++++--------
 src/lib/components/ExternalLink.svelte   |  5 +++--
 src/lib/components/bandcamp/index.svelte |  3 +--
 src/routes/+page.svelte                  | 10 +++++-----
 src/routes/articles/[page]/+page.svelte  |  7 ++++---
 5 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/Articles.svelte b/src/lib/components/Articles.svelte
index 073714e..a80f546 100644
--- a/src/lib/components/Articles.svelte
+++ b/src/lib/components/Articles.svelte
@@ -2,16 +2,19 @@
 	import type { Article } from "$lib/types/article";
 	import ExternalLink from './ExternalLink.svelte';
 
-  const { articles, totalArticles, compact = false, classes = [] } = $props<{
+  const { articles, totalArticles, compact = false, showMoreArticles = false, classes = [] } = $props<{
     articles: Article[];
     totalArticles: number;
     compact?: boolean;
+    showMoreArticles?: boolean;
     classes?: string[]
   }>();
 </script>
 
 <div>
-  <h2>Favorite Articles</h2>
+  {#if showMoreArticles}
+    <h2>Favorite Articles</h2>
+  {/if}
   <div class={classes.join(' ')}>
     {#each articles as article (article.hashed_url)}
       <article class='card'>
@@ -42,12 +45,14 @@
       </article>
     {/each}
   </div>
-  <div class="moreArticles">
-    <a href="/articles">{`${totalArticles} more articles`}</a>
-    <a href="/articles" aria-label={`${totalArticles} more articles`}>
-      <iconify-icon icon="material-symbols:arrow-right-alt-rounded"></iconify-icon>
-    </a>
-  </div>
+  {#if showMoreArticles}
+    <div class="moreArticles">
+      <a href="/articles">{`${totalArticles} more articles`}</a>
+      <a href="/articles" aria-label={`${totalArticles} more articles`}>
+        <iconify-icon icon="material-symbols:arrow-right-alt-rounded"></iconify-icon>
+      </a>
+    </div>
+  {/if}
 </div>
 
 
diff --git a/src/lib/components/ExternalLink.svelte b/src/lib/components/ExternalLink.svelte
index 605eb96..259792f 100644
--- a/src/lib/components/ExternalLink.svelte
+++ b/src/lib/components/ExternalLink.svelte
@@ -2,7 +2,7 @@
 	import OpenInNew from '@iconify-icons/mdi/open-in-new';
 	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;
 		target?: string;
 		href: string;
@@ -10,12 +10,13 @@
 		showIcon?: boolean;
 		clazz?: string;
 		icon?: IconifyIcon;
+		children: () => any
 	}>();
 </script>
 
 
 <a class:show-icon={showIcon} class={clazz} aria-label={`Open ${ariaLabel} externally`} title={`Open ${ariaLabel} externally`} {href} {rel} {target}>
-	<slot />
+	{@render children()}
 	{#if showIcon}
 		<iconify-icon {icon} width="24" height="24" role="img" title={`Open ${ariaLabel} Externally`} />
 	{/if}
diff --git a/src/lib/components/bandcamp/index.svelte b/src/lib/components/bandcamp/index.svelte
index ca9944b..9d74344 100644
--- a/src/lib/components/bandcamp/index.svelte
+++ b/src/lib/components/bandcamp/index.svelte
@@ -5,8 +5,7 @@
 	const { albums } = $props<{
 		albums: Album[];
 	}>();
-	const displayAlbums =
-		albums?.length > 6 ? albums.slice(0, 6) : albums;
+	const displayAlbums = albums?.length > 6 ? albums.slice(0, 6) : albums;
 
 	for (let album of displayAlbums) {
 		album.src = {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 929849d..c72dbbb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import Bandcamp from '$lib/components/bandcamp/index.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 { albums, articlesData } = $state(data);
-	const { articles, totalArticles } = $state(articlesData);
+	const albums = $derived(data.albums);
+	const articlesData = $derived(data.articlesData);
+	const articles = $derived(articlesData.articles);
+	const totalArticles = $derived(articlesData.totalArticles);
 
   const userNames = {
     github: 'BradNut',
@@ -60,7 +60,7 @@
 		</p>
 	<div class="social-info">
 		<Bandcamp {albums} />
-		<Articles {articles} {totalArticles} compact />
+		<Articles {articles} {totalArticles} compact showMoreArticles />
 	</div>
 </div>
 
diff --git a/src/routes/articles/[page]/+page.svelte b/src/routes/articles/[page]/+page.svelte
index 0abb445..5e0714d 100644
--- a/src/routes/articles/[page]/+page.svelte
+++ b/src/routes/articles/[page]/+page.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
 	import Pagination from "$lib/components/pagination/index.svelte";
-	import type { Article } from "$lib/types/article";
 	import Articles from "$lib/components/Articles.svelte";
-	import type { PageData } from "./$types";
 
 	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>
 
 <div>