update

site/package.json

@@ -36,6 +36,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@splidejs/svelte-splide": "^0.2.5",
 		"@tailwindcss/line-clamp": "^0.4.0",
 		"svelte-markdown": "^0.2.2",
 		"svelte-material-icons": "^2.0.2"

site/src/lib/helpers/api/fetch.js

@@ -13,15 +13,15 @@ import { PUBLIC_API_ENDPOINT } from '$env/static/public';
  */
 
 export const endpointFetch = (path, options) => {
-  if (typeof path !== 'string') {
-    throw new TypeError('path must be a string');
-  }
-  return fetch(`${PUBLIC_API_ENDPOINT}/${path}`, {
-    mode: 'cors',
-    headers: {
-      'Content-Type': 'application/json',
-      'Cache-Control': 'max-age=300'
-    },
-    ...options
-  })
-}
+	if (typeof path !== 'string') {
+		throw new TypeError('path must be a string');
+	}
+	return fetch(`${PUBLIC_API_ENDPOINT}/${path}`, {
+		mode: 'cors',
+		headers: {
+			'Content-Type': 'application/json',
+			'Cache-Control': 'max-age=300'
+		},
+		...options
+	});
+};

site/src/lib/helpers/apiType/common.js

@@ -1,12 +1,11 @@
-
 /**
  * @typedef {'th'|'en'} LocaleLanguage Available languages
  */
 /**
  * @typedef {string} richText Markdown string
  */
 /**
- * @typedef {string} DateFromISOString date in format 2022-08-09T13:51:37.644Z or ISO 8601, 
+ * @typedef {string} DateFromISOString date in format 2022-08-09T13:51:37.644Z or ISO 8601,
  *    can be parsed to date by new Date(date)
  */
 /**

site/src/routes/+error.svelte

@@ -1,7 +1,7 @@
 <script>
-	import { page } from '$app/stores'
-	let code = $page.status
-	let message = $page.error?.message
+	import { page } from '$app/stores';
+	let code = $page.status;
+	let message = $page.error?.message;
 </script>
 
 <svelte:head>

site/src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script>
+	import '@splidejs/svelte-splide/css';
 	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import '../app.css';

site/src/routes/about/+page.js

@@ -1,2 +1,2 @@
 /** @type {import('@sveltejs/kit').PageLoad} */
-export async function load({ fetch }) {	}
+export async function load({ fetch }) {}

site/src/routes/about/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	const title = 'เกี่ยวกับ'
+	const title = 'เกี่ยวกับ';
 	import HeroIMG from '@assets/banner.jpg';
 	import IconExternalLink from 'svelte-material-icons/LinkVariant.svelte';
 	const socialLinks = [

site/src/routes/donors/+page.js

@@ -1,7 +1,7 @@
 /** @type {import('@sveltejs/kit').PageLoad} */
 export async function load({ params, fetch }) {
-	let categories = await (await fetch('/api/categories')).json();
+	// let categories = await (await fetch('/api/categories')).json();
 	return {
-		categoryData: categories.data
-	}
+		categoryData: {}
+	};
 }

site/src/routes/donors/+page.svelte

@@ -94,9 +94,54 @@
 			{#if category && categories.find((c) => c.id === category)?.title && category !== 'all'}
 				หมวดหมู่: {categories.find((c) => c.id === category)?.title}
 			{:else}
-				คุณสามารถเลือกหมวดหมู่เพิ่มเติมได้ด้านล่าง
+				คุณสามารถค้นหาหรือเลือกหมวดหมู่เพิ่มเติมได้ด้านล่าง
 			{/if}
 		</div>
+		<form class="flex items-center mt-3 mx-auto w-full justify-center">
+			<label for="simple-search" class="sr-only">ค้นหาจากข่าวที่เคยได้ยินหรือหัวข้อที่คุณสนใจ</label>
+			<div class="relative w-3xl">
+				<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+					<svg
+						aria-hidden="true"
+						class="w-5 h-5 text-gray-500 dark:text-gray-400"
+						fill="currentColor"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+						><path
+							fill-rule="evenodd"
+							d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+							clip-rule="evenodd"
+						/></svg
+					>
+				</div>
+				<input
+					type="text"
+					id="simple-search"
+					class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 "
+					placeholder="Search"
+					required
+				/>
+			</div>
+			<button
+				type="submit"
+				class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300"
+			>
+				<svg
+					class="w-5 h-5"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
+					><path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/></svg
+				>
+				<span class="sr-only">ค้นหา</span>
+			</button>
+		</form>
 		<div class="flex flex-row items-center justify-center flex-wrap m-3">
 			{#each categories as { icon, id, title }}
 				<a href={`/donors?category=${id}`}>

site/src/routes/donors/19/+page.svelte

@@ -2,7 +2,10 @@
 	/** @type {import('./$types').PageData} */
 	export let data;
 	import { donorsList } from '@lib/store/mockupdata';
-  import MarkdownRenderer from '@lib/components/MarkdownRenderer.svelte';
+	import MarkdownRenderer from '@lib/components/MarkdownRenderer.svelte';
+	import { onMount } from 'svelte';
+	import { Splide, SplideSlide } from '@splidejs/svelte-splide';
+
 	export let linkId = '19';
 	let campaignData = {
 		data: {
@@ -467,15 +470,30 @@
 </svelte:head>
 <main class="p-10 container mx-auto md:max-w-2xl">
 	<div class="">
-		<img src="http://localhost:1337{campaignData.data.heroImage.formats.large.url}" alt={campaignData.data.heroImage.alternativeText} class="rounded-2xl mx-auto md:max-w-lg sm:max-w-md" />
+		<img
+			src="http://localhost:1337{campaignData.data.heroImage.formats.large.url}"
+			alt={campaignData.data.heroImage.alternativeText}
+			class="rounded-2xl mx-auto md:max-w-lg sm:max-w-md max-h-80"
+		/>
 	</div>
 	<h1 class="text-xl font-bold text-center my-7 mb-10">
 		{campaignData.data.title}
 	</h1>
 
 	<div class="container">
 		<h2 class="text-xl mt-4 mb-2">รายละเอียด</h2>
-		<MarkdownRenderer source="{campaignData.data.datails.replace(/\n/g,'\n\n')}"/>
+		<Splide aria-label="ความเสียหาย">
+			{#each campaignData.data.detailImages as image}
+				<SplideSlide>
+					<img
+						src="http://localhost:1337{image.formats.large.url}"
+						alt={image.alternativeText}
+						class="rounded-2xl mx-auto md:max-w-lg sm:max-w-md max-h-72 m-10"
+					/>
+				</SplideSlide>
+			{/each}
+		</Splide>
+		<MarkdownRenderer source={campaignData.data.datails.replace(/\n/g, '\n\n')} />
 
 		<h2 class="text-xl mt-4 mb-2">ช่องทางการบริจาค</h2>
 		<ul class="ml-2">
@@ -488,10 +506,12 @@
 								<strong>{donateMoney.accountName}</strong>
 								<ul class="ml-2">
 									<li>
-										<strong>เลขที่บัญชี</strong> {donateMoney.accountID}
+										<strong>เลขที่บัญชี</strong>
+										{donateMoney.accountID}
 									</li>
 									<li>
-										<strong>ธนาคาร</strong> {donateMoney.bank}
+										<strong>ธนาคาร</strong>
+										{donateMoney.bank}
 									</li>
 								</ul>
 							</li>
@@ -522,6 +542,12 @@
 				</li>
 			{/if}
 		</ul>
-		<small class="">หมวดหมู่: {campaignData}</small>
-  </div>
+		<h2 class="text-xl mt-4 mb-2">แหล่งที่มา</h2>
+		<MarkdownRenderer source={campaignData.data.source.replace(/\n/g, '\n\n')} />
+		<small class=""
+			>หมวดหมู่: <a href="/donors?category=accident"
+				>{campaignData.data.categories[0].displayTitle}</a
+			></small
+		>
+	</div>
 </main>

site/vite.config.js

@@ -11,7 +11,7 @@ const config = {
 			'@lib': path.resolve('./src/lib'),
 			'@assets': path.resolve('./src/lib/assets')
 		}
-	}
+	},
 };
 
 export default config;