From d6feae3b8c70b15facf56040264f7fad76619126 Mon Sep 17 00:00:00 2001
From: Nexmoe <16796652+nexmoe@users.noreply.github.com>
Date: Fri, 3 May 2024 11:33:07 +0800
Subject: [PATCH] Update footer component (#118)

* refactor: footer init

* feat: Add dynamic footer sitemap rendering

- Add TypeScript to script setup in Footer.vue
- Define interfaces for List, Sitemap, and Props in Footer.vue
- Render footer links dynamically based on sitemap data in Footer.vue
- Update config interface in config.ts to include footerLinks
- Import FooterSitemap interface in config.ts
- Pass siteName and sitemap data to LazyPublicFooter in default.vue

* style: Update primary color to a new hue and adjust foreground color

* feat: Update primary color in Catalog.vue

Changed primary color class in Catalog.vue from using hex values to using
semantic class names for better readability and consistency.

* refactor: Update Props interface in Footer.vue

Changed the sitemap property in the Props interface to be optional by adding a question mark. Updated references to sitemap property to refer to props.sitemap. Also updated the sitemap prop in the default layout to config.footerLinks.

* feat: Update Footer component to use optional sitemap props

Updated the Footer component to make the sitemap prop optional by adding a '?' to the prop type. Also changed references to sitemap to use props.sitemap. Additionally, corrected typo in layouts/default.vue by changing 'config.stiemap' to 'config.footerLinks'.
---
 assets/css/tailwind.css       |  4 +--
 components/public/Catalog.vue |  2 +-
 components/public/Footer.vue  | 46 ++++++++++++++++++++++++++++-------
 components/public/Header.vue  |  2 +-
 layouts/default.vue           |  7 +++++-
 server/trpc/routers/config.ts |  3 +++
 6 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 5ea5e57..9cf599f 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -19,8 +19,8 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
  
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 47.75deg 92.27% 59.41%;
+    --primary-foreground: 39deg 62.5% 6.27%;
  
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
diff --git a/components/public/Catalog.vue b/components/public/Catalog.vue
index e46bbed..13429c7 100644
--- a/components/public/Catalog.vue
+++ b/components/public/Catalog.vue
@@ -85,6 +85,6 @@ onUnmounted(() => {
 }
 
 .active {
-  @apply bg-[#f7d038] text-[#1a1306] hover:bg-[#f7d038];
+  @apply bg-primary text-primary-foreground hover:bg-primary;
 }
 </style>
diff --git a/components/public/Footer.vue b/components/public/Footer.vue
index 214618f..4b54391 100644
--- a/components/public/Footer.vue
+++ b/components/public/Footer.vue
@@ -1,18 +1,46 @@
-<script setup>
+<script setup lang="ts">
 import dayjs from 'dayjs'
 
-const config = await useGetConfig()
+interface List {
+	title: string
+	url: string
+}
+
+export interface Sitemap {
+	title: string
+	list: List[]
+}
+
+export interface Props {
+	sitemap?: Sitemap[]
+	siteName: string
+}
+
+const props = defineProps<Props>()
 </script>
 
 <template>
-	<div class="container flex">
-		<div class="footer my-16">
-			Copyright © {{ dayjs(new Date()).format('YYYY') }} {{ config.siteName }}, Powered by <a
-				class="underline"
-				href="https://github.com/nexmoe/roam-space" target="_blank"
-			>Roam Space</a>
+	<footer class="mt-12 bg-white dark:bg-gray-900">
+		<div class="mx-auto w-full max-w-screen-xl">
+			<div v-if="props.sitemap" class="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4">
+				<div v-for="item in props.sitemap" :key="item.title">
+					<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">{{ item.title }}</h2>
+					<ul v-for="list in item.list" :key="list.title"
+						class="text-gray-500 dark:text-gray-400 font-medium">
+						<li class="mb-4">
+							<a :href="list.url" class="hover:underline">{{ list.title }}</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+			<div class="px-4 py-6 md:flex md:items-center md:justify-between">
+				<span class="text-sm text-gray-500 dark:text-gray-300 sm:text-center">© {{ dayjs(new
+			Date()).format('YYYY') }} {{ props.siteName }} All Rights Reserved. Powered by <a class="underline"
+						href="https://github.com/nexmoe/roam-space" target="_blank">Roam Space</a>
+				</span>
+			</div>
 		</div>
-	</div>
+	</footer>
 </template>
 
 <style>
diff --git a/components/public/Header.vue b/components/public/Header.vue
index 70baa59..5896347 100644
--- a/components/public/Header.vue
+++ b/components/public/Header.vue
@@ -72,7 +72,7 @@ const config = await useGetConfig()
 }
 
 .item.active {
-	@apply bg-[#f7d038] text-[#1a1306];
+	@apply bg-primary text-primary-foreground;
 }
 
 .author {}
diff --git a/layouts/default.vue b/layouts/default.vue
index 6b268c6..0a578ba 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,6 +4,7 @@ useHead({
 		lang: 'zh-CN',
 	},
 })
+const config = await useGetConfig()
 </script>
 
 <template>
@@ -11,7 +12,11 @@ useHead({
 		<PublicHeader />
 		<slot />
 		<LazyPublicTool />
-		<LazyPublicFooter v-once />
+		<LazyPublicFooter
+			v-once
+			:site-name="config.siteName"
+			:sitemap="config.footerLinks"
+		/>
 	</div>
 </template>
 
diff --git a/server/trpc/routers/config.ts b/server/trpc/routers/config.ts
index ed136e3..f3a0aed 100644
--- a/server/trpc/routers/config.ts
+++ b/server/trpc/routers/config.ts
@@ -1,5 +1,7 @@
 import { publicProcedure, router } from '../trpc'
 import type { Props as SocialProps } from '~/components/public/Social.vue'
+import type { Sitemap as FooterSitemap } from '~/components/public/Footer.vue'
+
 import defaultData from '~/config/hero.json'
 
 interface PrismaConfigItem {
@@ -14,6 +16,7 @@ interface Config {
 	tags?: string[]
 	menus?: Menu[]
 	socials?: SocialProps[]
+	footerLinks?: FooterSitemap[]
 	siteUrl: string
 	siteName: string
 	siteDescription: string