feat: icon from cms on topics

NewcastleRSE · Jul 11, 2024 · 27d0c4d · 27d0c4d
1 parent 2c8a16d
commit 27d0c4d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 deletions.
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -23,14 +23,11 @@ export const handle: Handle = async ({ event, resolve }) => {
 	if (!event.url.pathname.includes('/assets')) {
 		log({ response: response, event: event, status: response.status })
 	}
-	// console.timeEnd(`id: ${id}`)
 	return response
 }
 
 export const handleError = async ({ event, status, message }) => {
-	// const errorId = crypto.randomUUID()
 	log({ status: status, event: event, content: message })
-
 	return {
 		message: status === 404 ? `This page does not exist!` : 'Whoops!'
 		// errorId

diff --git a/src/routes/[slug]/+layout.server.ts b/src/routes/[slug]/+layout.server.ts
@@ -19,7 +19,7 @@ export const load: LayoutServerLoad = async ({ locals, params, cookies }) => {
 				'icon',
 				'topics',
 				{ cards: [{ cards_id: ['*', { media: [{ directus_files_id: ['*'] }] }] }] },
-				{ topics: [{ cards: [{ cards_id: ['*'] }] }, 'title', 'slug'] }
+				{ topics: [{ cards: [{ cards_id: ['*'] }] }, 'title', 'slug', 'icon'] }
 			],
 			deep: {
 				cards: {

diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
@@ -46,25 +46,31 @@
 									goto(`/${$page.params.slug}/${topic.slug}`)
 								}}
 							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="icon icon-tabler icon-tabler-mood-kid hidden md:block"
-									width="88"
-									height="88"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="#44b3ce"
-									fill="none"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								>
-									<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-									<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
-									<path d="M9 10l.01 0" />
-									<path d="M15 10l.01 0" />
-									<path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
-									<path d="M12 3a2 2 0 0 0 0 4" />
-								</svg>
+								{#if topic.icon}
+									<div class="icon flex w-full gap-2">
+										{@html topic.icon}
+									</div>
+								{:else}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="icon icon-tabler icon-tabler-mood-kid hidden md:block"
+										width="88"
+										height="88"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="#44b3ce"
+										fill="none"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+										<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+										<path d="M9 10l.01 0" />
+										<path d="M15 10l.01 0" />
+										<path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
+										<path d="M12 3a2 2 0 0 0 0 4" />
+									</svg>
+								{/if}
 								<p>{topic.title}</p>
 							</button>
 						</div>