Add support API for header, footer, Home image and small adjust.

cms/src/lib/components/Footer.svelte

@@ -1,6 +1,11 @@
-<script>
+<script lang="ts">
   // make dynamic date to be added to footer
   let date = new Date().getFullYear();
+  export let logo_url:string = "/images/logo.png"
+  export let address:string ="173  ถนนดินสอ  แขวงเสาชิงช้า  เขตพระนคร กรุงเทพมหานคร  10200"
+  export let organization:string = "กองสรรหาบุคคล yyy"
+  export let divisions:{title:string,url:string}[] =[]
+  export let institutes:{title:string,url:string}[] =[]
 </script>
 
 <footer class="relative bg-blueGray-200 pt-8 pb-6">
@@ -28,12 +33,12 @@
       <div class="w-full lg:w-6/12 px-4">
         <div class=" mb-4">
           <div class="w-12 rounded-full">
-          <img src="/images/logo.png" alt="logo">
+          <img src="{logo_url}" alt="logo">
           </div>
         </div>
-        <h5 class="text-2xl font-semibold">กองสรรหาบุคคล</h5>
+        <h5 class="text-2xl font-semibold">{organization}</h5>
         <h6 class="text-md mt-1 mb-2 text-blueGray-600">
-          173  ถนนดินสอ  แขวงเสาชิงช้า  เขตพระนคร กรุงเทพมหานคร  10200
+          {address}
         </h6>
         <div class="mt-6 lg:mb-0 mb-6">
           
@@ -60,42 +65,17 @@
               ส่วนราชการ
             </span>
             <ul class="list-none">
+              {#each divisions as d}
               <li>
                 <a
                   class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
-                  href="https://webportal.bangkok.go.th/KSB"
+                  href="{d.url}"
                   target="_blank"
                 >
-                  กองสรรหาบุคคล
+                  {d.title}
-                </a>
-              </li>
-              <li>
-                <a
-                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
-                  href="https://webportal.bangkok.go.th/pdbma"
-                  target="_blank"
-                >
-                กองพัฒนาระบบราชการ
-                </a>
-              </li>
-              <li>
-                <a
-                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
-                  href="https://webportal.bangkok.go.th/csc_personal"
-                  target="_blank"
-                >
-                กองอัตรากำลัง
-                </a>
-              </li>
-              <li>
-                <a
-                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
-                  href="http://203.155.220.238/csc/index.php/en/discipline-morality"
-                  target="_blank"
-                >
-                กองทะเบียนประวัติข้าราชการ
                 </a>
               </li>
+              {/each}
             </ul>
           </div>
           <div class="w-full lg:w-4/12 px-4">
@@ -105,42 +85,17 @@
             หน่วยงาน
             </span>
             <ul class="list-none">
+              {#each institutes as i}
               <li>
                 <a
                   class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
-                  href="https://main.bangkok.go.th/"
+                  href="{i.url}"
                   target="_blank"
                 >
-                กรุงเทพมหานคร
+                {i.title}
-                </a>
-              </li>
-              <li>
-                <a
-                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
-                  href="https://webportal.bangkok.go.th/pdd"
-                  target="_blank"
-                >
-                สนป.กทม./กองการเจ้าหน้าที่
-                </a>
-              </li>
-              <li>
-                <a
-                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
-                  href="https://webportal.bangkok.go.th/bangkokeducation"
-                  target="_blank"
-                >
-                สำนักการศึกษา กทม.
-                </a>
-              </li>
-              <li>
-                <a
-                  class="text-blueGray-600 hover:text-blueGray-800 font-semibold block pb-2 text-sm"
-                  href="https://www.ocsc.go.th/"
-                  target="_blank"
-                >
-                สำนักงาน ก.พ.
                 </a>
               </li>
+              {/each}
             </ul>
           </div>
         </div>

cms/src/lib/components/Header.svelte

@@ -1,3 +1,10 @@
+<script lang="ts">
+  export let logo_url:string = "/images/logo.png"
+  export let organization:string = "กองสรรหาบุคคล yyy"
+  export let supervised:string = "สำนักงาน ก.ก.xx"
+
+</script>
+
 <div class="navbar bg-white w-full top-0 z-50 fixed flex-wrap items-center justify-between px-4 ">
 	<div
 	class="container px-4 mx-auto flex flex-no-wrap items-center justify-between"
@@ -7,17 +14,13 @@
 		<div class="content-center grid">
 		<div class="avatar">
 			<div class="w-10 rounded-full">
-			<img src="/images/logo.png" alt="logo">
+			<img src="{logo_url}" alt="logo">
 			</div>
 		</div>
 		</div>
 		<div class="content-center grid pl-4">
-		<a class="textline1" 
+			{organization}
-			target="_blank"
+		<div class="textline2">{supervised}</div>
-			href="https://webportal.bangkok.go.th/KSB">
-			กองสรรหาบุคคล
-		</a>
-		<div class="textline2">สำนักงาน ก.ก.</div>
 		</div>
 	</div>
 	</div>
@@ -50,11 +53,13 @@
 </div>
 </div>
 <style>
+/* 
 .textline1{
 line-height:1.2rem !important;
 font-weight: 400;
-/* color: #02A998; */
+color: #02A998;
-}
+} 
+*/
 .textline2{
 font-size: 0.80rem;
 line-height:1.3rem !important;

cms/src/routes/+layout.svelte

@@ -10,10 +10,12 @@
     import type { LayoutData } from './$types';
 	export let data: LayoutData;
     console.log(data)
+    let {logo_url,supervised,divisions,institutes,address,organization} = data
+
 </script>
 
-<Header />
+<Header {logo_url} {organization} {supervised} />
 <div class="justify-center place-content-center" style="padding-top:50px">
     <slot />
 </div>
-<Footer />
+<Footer {logo_url} {organization} {address} {divisions} {institutes} />

cms/src/routes/+page.server.ts

@@ -1,15 +1,18 @@
 //import  content from "$lib/data/content/home.html?raw"
 //import { getQualifyExams,getCompetitiveExams } from '$lib/data/info';
 import type { PageServerLoad } from './$types';
-import type {Exam} from '$lib/components/Exam'
+import type {Exam} from '$lib/data/CMSDataType'
 import dayjs from 'dayjs' 
 export const load: PageServerLoad = async ({fetch}) => {
 	let qualify_exams: Exam[] = []
 	let competitive_exams: Exam[] = []
 	let content = ""
+	let image = undefined
 	let res = await fetch("/api/content?page=home")
 	if(res.ok){
-		content = (await res.json()).content
+		const r = await res.json()
+		content = r.content
+		image = r.image
 	}
 	res = await fetch("/api/qualifying")
 	if(res.ok){
@@ -25,5 +28,5 @@ export const load: PageServerLoad = async ({fetch}) => {
 			e.start? dayjs(e.start).format("DD MMM BBBB"):""
 		})
 	}
-    return { content , qualify_exams,competitive_exams };
+    return { content,image, qualify_exams,competitive_exams };
 };

cms/src/routes/+page.svelte

@@ -1,16 +1,7 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	export let data: PageData;
-	const qualify_exams = data.qualify_exams;
+	const {qualify_exams,competitive_exams,image} = data
-    const competitive_exams = data.competitive_exams;
-	const patternVue = "/images/pattern.png";
-	const sel1 = "/images/sel1.png";
-	const sel2 = "/images/sel2.png";
-	const sel3 = "/images/sel3.png";
-	const c1 = "/images/c1.jpg";
-	const c2 = "/images/c2.jpg";
-	const c3 = "/images/c3.jpg";
-
 </script>
 <section class="reative flex bg-gradient pt-10 pb-44 md:pb-38">
     <div class="container mx-auto items-start flex flex-wrap">
@@ -44,7 +35,7 @@
     </div>
     <img
 		class="absolute top-0 b-auto right-0  sm:w-5/12 sm:mt-32 pr-10 hidden md:flex"
-		src="{patternVue}"
+		src="{image}"
 		alt="..."
     />
 </section>

cms/src/routes/api/content/+server.ts

@@ -6,10 +6,12 @@ import  qualifying_content from "$lib/data/content/qualifying.html?raw"
 import  competitive_content from "$lib/data/content/competitive.html?raw"
 export const GET: RequestHandler = async ({url}: RequestEvent) => {
     let content = ""
+    let image = undefined
     const page= url.searchParams.get("page") ?? 'nopage'
     switch (page) {
         case "home":
             content = home_content
+            image = "/images/pattern.png"
             break;
         case "qualifying":
             content = qualifying_content            
@@ -26,6 +28,6 @@ export const GET: RequestHandler = async ({url}: RequestEvent) => {
     //slience error just send empty content if not found
     if(!content)
         console.log(`Request content ${page} not found`)
-    return json({content})
+    return json({content,image})
 
 }

cms/src/routes/competitive/[id]/+page.server.ts

@@ -3,7 +3,7 @@ import { error } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 export const load: PageServerLoad = async ({params,fetch}) => {
     const id =  params.id+""
-	const res = await fetch("/api/compettive/"+id)
+	const res = await fetch("/api/competitive/"+id)
 	if(res.status==404){
 		throw error(404,{message:`ค้นหาข้อมูลสอบคัดเลือก ${id}ไม่พบ`})
 	}

cms/src/routes/competitive/[id]/+page.svelte

@@ -50,7 +50,7 @@
 			{/if}
 			<hr class="border-blueGray-200 my-7" />
 			<div>
-				<a  href="javascript:history.back()" class="btn btn-outline text-gray-500">
+				<a  href="/competitive" class="btn btn-outline text-gray-500">
 					<i class="fa-solid fa-arrow-left mr-4"></i>
 					ย้อนกลับ
 				</a>

cms/src/routes/qualifying/+page.server.ts

@@ -1,6 +1,5 @@
 
-import type {CalendarEvent} from '$lib/data/CMSDataType'
+import type {CalendarEvent,Exam} from '$lib/data/CMSDataType'
-import type {Exam} from '$lib/data/CMSDataType' 
 import dayjs from 'dayjs'
 import type { PageServerLoad } from './$types'
 export const load: PageServerLoad = async ({fetch}) => {

cms/src/routes/qualifying/[id]/+page.svelte

@@ -50,7 +50,7 @@
 			{/if}
 			<hr class="border-blueGray-200 my-7" />
 			<div>
-				<a href="javascript:history.back()" class="btn btn-outline text-gray-500">
+				<a href="/qualifying" class="btn btn-outline text-gray-500">
 					<i class="fa-solid fa-arrow-left mr-4"></i>
 					ย้อนกลับ
 				</a>