feat: seo (#108)

* chore: seo init

* chore: improve type safe for config

* feat: og image

* feat: sitemap

* chore

* fix: lint

assets/css/tailwind.css

@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 240, 17%, 98%;
     --foreground: 222.2 84% 4.9%;
 
     --muted: 210 40% 96.1%;

components/Social.vue

@@ -14,12 +14,12 @@ type IconKey = keyof typeof iconMap
 export interface Props {
 	url: string
 	icon: IconKey
-	tip: string
+	name: string
 }
 </script>
 
 <template>
-	<a class="text-2xl text-gray-600 flex" :href="url" target="_blank" :title="props.tip">
+	<a class="text-2xl text-gray-600 flex" :href="url" target="_blank" :title="props.name">
 		<Icon :name="iconMap[props.icon]" />
 	</a>
 </template>

components/flow/Header.vue

@@ -10,13 +10,14 @@ const props = defineProps<Props>()
 <template>
 	<div :id="props.title" class="flow-header pl-2.5 flex items-center justify-between">
 		<div class="flex items-center space-x-3">
-			<div class="text-xl -mt-1 font-bold sm:truncate sm:text-3xl sm:tracking-tight">
+			<h2 class="text-xl -mt-1 font-bold sm:truncate sm:text-3xl sm:tracking-tight">
 				{{ props.title }}
-			</div>
+			</h2>
 		</div>
 		<NuxtLink
 			:to="props.url ? props.url : `/flow/${props.id}`"
 			:target="props.url?.startsWith('https://') ? '_blank' : ''"
+			:title="props.title"
 		>
 			<div class="py-2 px-5 flex items-center gap-1 flex-row bg-white rounded-full">
 				更多

components/flow/Index.vue

@@ -22,7 +22,7 @@ provide('flow', props.flow)
 		<FlowHeader v-if="props.header" :id="props.flow!.id" :title="props.flow!.title" :url="props.flow!.homepage" />
 
 		<div class="flow-body">
-			<NuxtLink v-for="(module) in props.flow!.module" :key="module.url" :to="module.url" target="_blank">
+			<NuxtLink v-for="(module) in props.flow!.module" :key="module.url" :title="module.title" :to="module.url" target="_blank">
 				<ModuleList v-if="props.flow!.configCard === 'list'" v-bind="{ module }" />
 				<ModuleProject v-else-if="props.flow!.configCard === 'project'" v-bind="{ module }" />
 				<ModuleImage v-else v-bind="{ module }" />

components/module/Image.vue

@@ -16,23 +16,23 @@ const text = computed(() => extractTextFromHTML(props.module.content))
 </script>
 
 <template>
-	<div class="module shu-card p-5 space-y-3 flex flex-col justify-between">
+	<div class="module shu-card p-4 space-y-3 flex flex-col justify-between">
 		<div class="space-y-3 ">
-			<div v-if="props.module.image" class="rounded-xl relative overflow-hidden">
+			<div class="p-1">
+				{{ formatDateTime(module.date) }}
+			</div>
+			<div v-if="props.module.image" class="max-h-96 rounded-xl relative overflow-hidden">
 				<NuxtImg
 					class="w-full" format="webp" :src="props.module!.image" :alt="module.title"
 					referrerpolicy="no-referrer" loading="lazy" width="320px" height="200px"
 				/>
 			</div>
 		</div>
-		<div class="space-y-3 pb-1">
-			<div>
-				{{ formatDateTime(module.date) }}
-			</div>
-			<div v-if="!flow.configNoTitle" class="font-bold text-2xl tracking-tight text-black">
+		<div class="space-y-3 p-1">
+			<h3 v-if="!flow.configNoTitle" class="font-bold text-2xl tracking-tight text-black">
 				{{ props.module.title }}
-			</div>
-			<div v-if="!flow.configNoContent && text !== ' '">
+			</h3>
+			<div v-if="!flow.configNoContent && text !== ' '" class="line-clamp-3">
 				<div v-html="text" />
 			</div>
 			<div

components/module/List.vue

@@ -27,15 +27,15 @@ const text = extractTextFromHTML(props.module.content)
 				class="h-10 w-10 rounded-full"
 				:src="props.module.image"
 				loading="lazy"
-				alt="Cover"
+				:alt="props.module.title"
 			/>
 
-			<div
+			<h3
 				v-if="!flow.configNoTitle"
 				class="text-base font-bold tracking-tight text-black truncate"
 			>
 				{{ props.module.title }}
-			</div>
+			</h3>
 		</div>
 
 		<div v-if="!flow.configNoContent" class="truncate">

components/module/Project.vue

@@ -23,10 +23,10 @@ const props = defineProps<Props>()
 					height="48px"
 					:src="props.module.image"
 					loading="lazy"
-					:title="props.module.title"
+					:alt="props.module.title"
 				/>
 			</div>
-			<div
+			<h3
 				class="text-xl font-bold tracking-tight text-black"
 				v-html="props.module.title"
 			/>

components/public/Footer.vue

@@ -7,7 +7,7 @@ const config = await useGetConfig()
 <template>
 	<div class="container flex">
 		<div class="footer mb-16">
-			Copyright © {{ dayjs(new Date()).format('YYYY') }} {{ config.title }}, Powered by <a
+			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>

components/public/Header.vue

@@ -11,14 +11,14 @@ const config = await useGetConfig()
 <template>
 	<div class="container header justify-between flex pt-6">
 		<div class="flex-1 flex items-center">
-			<NuxtLink :to="'/'" class="flex items-center gap-2">
-				<NuxtImg class="w-8 rounded-full" :src="config.avatar" />
-				<div class="uppercase">{{ config.title }}</div>
+			<NuxtLink :title="config.siteName" :to="'/'" class="flex items-center gap-2">
+				<NuxtImg :alt="config.siteName" class="w-8 rounded-full" :src="config.avatar" />
+				<div class="uppercase">{{ config.siteName }}</div>
 			</NuxtLink>
 		</div>
 		<div class="hidden md:flex flex-row gap-6">
 			<div v-if="config.menus" class="flex flex-2 tab rounded-full">
-				<NuxtLink class="item" :class="{
+				<NuxtLink :title="item.title" class="item" :class="{
 				active: $route.path === item.url
 			}" :target="item.url.startsWith('https://') ? '_blank' : ''" v-for="item in config.menus" :key="item.title"
 					:to="item.url">
@@ -40,7 +40,7 @@ const config = await useGetConfig()
 			</SheetTrigger>
 			<SheetContent>
 				<div class="py-6 gap-3 flex flex-col">
-					<NuxtLink class="item !py-3 !px-3" :class="{
+					<NuxtLink :title="item.title" class="item !py-3 !px-3" :class="{
 				active: $route.path === item.url
 			}" :target="item.url.startsWith('https://') ? '_blank' : ''" v-for="item in config.menus" :key="item.title"
 						:to="item.url">

config/hero.json

@@ -1,4 +1,7 @@
 {
+	"avatar": "https://unavatar.io/nexmoe",
+	"description": "一个开发者、创造者，未来主义狂热份子\n关于勇敢与热爱，喜欢赛博朋克",
+	"ogTheme": "#f7cb3b",
 	"tags": [
 		"🔆热爱",
 		"🔥内心炽热",
@@ -7,11 +10,10 @@
 		"喜欢创造",
 		"坦诚"
 	],
+	"siteName": "Nexmoe",
+	"siteDescription": "233 test",
+	"siteUrl": "https://i.nexmoe.com",
 	"menus": [
-		{
-			"title": "文章",
-			"url": "/flow/766a88fc-91c7-4134-8fa0-524591a51c5a"
-		},
 		{
 			"title": "人生大事",
 			"url": "https://nexmoe.com/line.html"
@@ -25,13 +27,11 @@
 		{
 			"name": "Github",
 			"url": "https://github.com/nexmoe",
-			"path": "github/nexmoe",
 			"icon": "github"
 		},
 		{
 			"name": "哔哩哔哩",
 			"url": "https://space.bilibili.com/20238211",
-			"path": "bilibili/20238211",
 			"icon": "bilibili"
 		},
 		{

layouts/default.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-const config = await useGetConfig()
-
 useHead({
 	htmlAttrs: {
 		lang: 'zh-CN',
@@ -9,10 +7,6 @@ useHead({
 </script>
 
 <template>
-	<Head>
-		<Title>{{ config.title }}</Title>
-		<Meta name="description" :content="config.description" />
-	</Head>
 	<!-- <div class="nexmoe-bg" /> -->
 	<PublicHeader />
 	<slot />
@@ -28,7 +22,7 @@ useHead({
 
 body {
 	/* font-family: Noto Serif SC; */
-	background-color: #f7f5fd;
+	/* background-color: #f7f5fd; */
 }
 
 .shu-card {

nuxt.config.ts

@@ -18,7 +18,7 @@ export default defineNuxtConfig({
 		'nuxt-scheduler',
 		'@nuxtjs/google-fonts',
 		'nuxt-icon',
-		// '@nuxtjs/seo',
+		'@nuxtjs/seo',
 		'@nuxtjs/tailwindcss',
 	],
 	ogImage: {
@@ -28,11 +28,25 @@ export default defineNuxtConfig({
 			'Noto+Serif+SC',
 		],
 	},
+	site: {
+		url: 'https://i.nexmoe.com',
+		name: 'Nexmoe',
+		description: '充满热情的开发者和创造者，热衷于未来主义和赛博朋克，追求良好的用户体验和界面设计。分享技术见解、优化技巧和对生活的热爱，提供有价值的内容和工具，通过技术改善日常生活。',
+	},
+	sitemap: {
+		sitemaps: {
+			categories: {
+				sources: [
+					'/api/__sitemap__/urls/categories',
+				],
+			},
+		},
+	},
 	extends: ['@sidebase/core'],
 	image: {
 		format: ['webp'],
 		quality: 80,
-		domains: ['p3-juejin.byteimg.com', 'sns-webpic-qc.xhscdn.com'],
+		domains: ['p3-juejin.byteimg.com', 'sns-webpic-qc.xhscdn.com', 'cdn.dribbble.com', 'picx.zhimg.com'],
 	},
 	googleFonts: {
 		families: {

package.json

@@ -31,6 +31,7 @@
 		"@faker-js/faker": "^8.4.0",
 		"@nuxt/test-utils": "^3.11.0",
 		"@nuxtjs/google-fonts": "^3.1.3",
+		"@nuxtjs/i18n": "^8.3.0",
 		"@nuxtjs/seo": "2.0.0-rc.10",
 		"@nuxtjs/tailwindcss": "^6.11.4",
 		"@testing-library/vue": "^8.0.1",

pages/flow/[id].vue

@@ -1,13 +1,23 @@
-<script setup>
+<script setup lang="ts">
 const id = useRoute().params.id
 const { $client } = useNuxtApp()
 const flow = await $client.flow.get.query({ id })
+const config = await useGetConfig()
 
 provide('flow', flow)
+
+defineOgImageComponent('NuxtSeo', {
+	theme: config.ogTheme,
+	title: flow.title,
+	description: flow.description,
+})
 </script>
 
 <template>
 	<div class="container">
+		<Head>
+			<Title>{{ flow.title }}</Title>
+		</Head>
 		<PublicProse v-if="flow.description" :title="flow.title">
 			{{ flow.description }}
 		</PublicProse>

pages/index.vue

@@ -11,12 +11,18 @@ useHead({
 		lang: 'zh-CN',
 	},
 })
+
+defineOgImageComponent('NuxtSeo', {
+	theme: config.ogTheme,
+	title: config.siteName,
+	description: config.description,
+})
 </script>
 
 <template>
 	<div class="page">
 		<div class="container">
-			<PublicProse :title="`Hi, I'm ${config.title}`">
+			<PublicProse :title="`Hi, I'm ${config.siteName}`">
 				<div class="whitespace-pre-wrap" v-html="config.description" />
 				<div class="tags flex flex-row flex-wrap gap-2">
 					<div