From 2173fa309bcb9244c3fb750daf4c979b6a3ebf6f Mon Sep 17 00:00:00 2001
From: Nexmoe <16796652+nexmoe@users.noreply.github.com>
Date: Tue, 7 May 2024 17:28:15 +0800
Subject: [PATCH] feat(config): add 'Zhi Mang Xing' font to Google Fonts (#130)

Adds the 'Zhi Mang Xing' font to the list of Google Fonts used in the
Nuxt.js application. This font is used in the custom Poe component to
display the poem text.

feat(module): format module date and display it

Formats the module date using the `dayjs` library and displays it in a
badge next to the module title. This provides more context about when
the module was published.

style(footer): adjust grid layout on smaller screens

Modifies the grid layout of the footer sitemap on smaller screens to
display the items in a two-column layout instead of four columns. This
improves the responsiveness and readability of the footer on mobile
devices.

feat(poe): increase font size and adjust animation

Increases the font size of the major and poe text in the custom Poe
component, making the text more prominent and readable. Additionally,
the animation duration of the poe text is adjusted to improve the
visual effect.

style(theme): adjust secondary color and foreground

Updates the secondary color and foreground in the Tailwind CSS
configuration to match the primary color, creating a more consistent
color scheme throughout the application.
---
 assets/css/tailwind.css      | 4 ++--
 components/custom/Poe.vue    | 6 +++---
 components/public/Footer.vue | 2 +-
 components/space/Module.vue  | 7 +++++--
 nuxt.config.ts               | 1 +
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 9cf599f..5c6b02b 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -22,8 +22,8 @@
     --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%;
+    --secondary: 47.75deg 92.27% 59.41% / 32%;
+    --secondary-foreground: 39deg 62.5% 6.27%;
  
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
diff --git a/components/custom/Poe.vue b/components/custom/Poe.vue
index 4a720d3..58d7f69 100644
--- a/components/custom/Poe.vue
+++ b/components/custom/Poe.vue
@@ -5,10 +5,10 @@
 <template>
 	<div class="body pt-12 h-screen pb-12">
 		<div class="relative flex flex-row items-center justify-center gap-2 h-full">
-			<div class="major text-6xl text-center font-bold tracking-tight text-black">
+			<div class="major text-7xl text-center font-bold tracking-tight text-black">
 				谁怕？一蓑烟雨任平生
 			</div>
-			<div class="poe absolute top-1/2 left-1/2 text-5xl hover:z-20 -translate-x-1/2 -translate-y-1/2">
+			<div class="poe absolute top-1/2 left-1/2 text-6xl hover:z-20 -translate-x-1/2 -translate-y-1/2">
 				<div style="animation: fadeInOut 2s ease-in-out 0s forwards;">
 					莫听穿林打叶声
 				</div>
@@ -25,7 +25,7 @@
 
 <style scoped>
 .body {
-	font-family: Noto Serif SC;
+	font-family: Zhi Mang Xing;
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='24' height='24' fill='rgb(195,195,195)'%3E%3Ccircle cx='16' cy='16' r='1'/%3E%3C/svg%3E");
 }
 
diff --git a/components/public/Footer.vue b/components/public/Footer.vue
index ee42880..77f12cc 100644
--- a/components/public/Footer.vue
+++ b/components/public/Footer.vue
@@ -22,7 +22,7 @@ const props = defineProps<Props>()
 <template>
 	<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 pt-12 lg:py-8 md:grid-cols-4">
+			<div v-if="props.sitemap" class="grid grid-cols-2 gap-8 px-4 pt-12 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"
diff --git a/components/space/Module.vue b/components/space/Module.vue
index 5f91027..03ec495 100644
--- a/components/space/Module.vue
+++ b/components/space/Module.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { inferRouterOutputs } from '@trpc/server'
+import dayjs from 'dayjs'
 import type { AppRouter } from '@/server/trpc/routers'
 
 type RouterOutput = inferRouterOutputs<AppRouter>
@@ -32,8 +33,10 @@ const props = defineProps<Props>()
 					:width="20"
 					:url="module.url"
 				/>
-				<div class="truncate ">
-					{{ module.title }}
+				<div class="truncate">
+					<span
+						class="bg-accent color-accent-foreground rounded-full px-2 py-0.5 mr-1"
+					>{{ dayjs(module.date).format('M') }} 月</span>{{ module.title }}
 				</div>
 			</NuxtLink>
 		</div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 64ed601..365e2f1 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -130,6 +130,7 @@ export default defineNuxtConfig({
 	googleFonts: {
 		families: {
 			'Noto Serif SC': true,
+			'Zhi Mang Xing': true,
 		},
 	},