pref: 一些优化 (#159)

* feat: 支持添加自定义 SEO meta 与 link

* chore: 添加 release 脚本与 CHANGELOG

* pref: 扩大标题点击区域

* chore: 挂载 disqus_config 到 window 对象上

* fix: 修复主题副标题错误取值的问题

* fix: 防止 Safari 中 main 元素自动获得焦点

* chore: 更新 Dependabot 配置，将更新频率从每周改为每月，并添加了依赖标签

* feat: 添加 Google Analytics

* pref: 移除默认 ga id

* chore: 重命名文件夹

* chore: 增加 release 脚本

* feat: 支持自定义 footer

* fix: 一些样式问题

* pref: 设置文章分页为首页，并增加分页配置

* feat: 实现自定义主题模块

* fix: 优化社交媒体图标

CHANGELOG.md

@@ -14,13 +14,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 支持添加自定义 SEO 链接。
 - 添加 release 脚本与 CHANGELOG
 - 支持 Google Analytics 配置。
+- 添加自定义主题模块。
 
 ### Changed
-- 扩大标题点击区域
+- 扩大标题点击区域。
 - 重新设计配置文件。
 - 重新设计布局。
 - 调整组件结构。
 - 优化整体样式。
+- 设置文章分页为首页。
 
 ### Fixed
 - 修正在移动端时标题的动画错误。

astro.config.ts

@@ -10,6 +10,7 @@ import { themeConfig } from './src/.config'
 export default defineConfig({
   site: themeConfig.site.website,
   prefetch: true,
+  base: '/',
   markdown: {
     remarkPlugins: [],
     rehypePlugins: [],

package.json

@@ -53,7 +53,8 @@
     "prettier-plugin-astro": "^0.13.0",
     "sanitize-html": "^2.13.0",
     "simple-git-hooks": "^2.11.1",
-    "unocss": "^0.62.4"
+    "unocss": "^0.62.4",
+    "unocss-preset-theme": "^0.13.0"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"

src/.config/default.ts

@@ -10,6 +10,7 @@ export const defaultConfig: ThemeConfig = {
     author: 'Moeyua',
     description: 'Rediscory the beauty of typography',
     website: 'https://astro-theme-typography.vercel.app/',
+    pageSize: 5,
     socialLinks: [
       {
         name: 'github',
@@ -31,7 +32,7 @@ export const defaultConfig: ThemeConfig = {
     navLinks: [
       {
         name: 'Posts',
-        href: '/posts/page/1',
+        href: '/',
       },
       {
         name: 'Archive',
@@ -57,12 +58,12 @@ export const defaultConfig: ThemeConfig = {
     theme: 'light',
     locale: 'zh-cn',
     colorsLight: {
-      foreground: '#2e405b',
+      primary: '#2e405b',
       background: '#ffffff',
     },
     colorsDark: {
-      foreground: '#ffffff',
-      background: '#2e405b',
+      primary: '#FFFFFF',
+      background: '#232222',
     },
     fonts: {
       header:

src/components/Pagination.astro

@@ -39,17 +39,17 @@ const {
   <div class="flex items-center gap-2">
     {
       showLeft && (
-        <a class=" inline-flex items-center" href={leftUrl}>
-          <span class="i-mdi-chevron-double-left w-4 h-4" />
-          <span>{leftTitle}</span>
+        <a title={leftTitle} href={leftUrl}>
+          <span class="inline-block vertical-mid i-mdi-chevron-double-left w-4 h-4" />
+          {leftTitle}
         </a>
       )
     }
     {
       showRight && (
-        <a class=" inline-flex items-center" href={rightUrl}>
-          <span>{rightTitle}</span>
-          <span class="i-mdi-chevron-double-right w-4 h-4" />
+        <a title={rightTitle} href={rightUrl}>
+          {rightTitle}
+          <span class="inline-block vertical-mid i-mdi-chevron-double-right w-4 h-4" />
         </a>
       )
     }

src/components/SiteNavigation.astro

@@ -5,7 +5,7 @@ const { navLinks, socialLinks } = themeConfig.site
 const { translate: t } = Astro.locals
 ---
 
-<nav class="text-center font-bold" flex="~ col gap-2">
+<nav class="text-center font-bold" flex="~ col gap-4">
   <ul lg="flex-col items-start text-4" class="text-3.5" flex="~ row gap-2 justify-center">
     {
       navLinks.map((nav) => (
@@ -22,7 +22,7 @@ const { translate: t } = Astro.locals
       socialLinks.map(({ href, name }) => (
         <li>
           <a href={href} target="_blank" title={name} class="not-underline-hover inline-flex items-center">
-            <span class={` i-mdi-${name}`}>{name}</span>
+            <span class:list={[`i-mdi-${name}`, 'w-6 h-6']}>{name}</span>
           </a>
         </li>
       ))

src/components/SiteTitle.astro

@@ -5,14 +5,14 @@ const { title, subtitle } = themeConfig.site
 ---
 
 <hgroup
-  lg="write-vertical-right items-start b-l-2px b-l-foreground-solid text-left"
+  lg="write-vertical-right items-start b-l-2px b-l-primary-solid text-left"
   flex="~ col gap-2.5"
   class="cursor-pointer text-center duration-800 ease-in-out"
 >
   <a
     class="not-underline-hover duration-800 ease-in-out"
     lg:p="x-2.5 b-12 hover:(t-3.75 b-8.75)"
-    hover:lg=" bg-foreground color-background"
+    hover:lg=" bg-primary color-background"
     href="/"
   >
     <h3 class="text-5 font-extrabold font-header">{subtitle}</h3>

src/layouts/LayoutDefault.astro

@@ -8,15 +8,20 @@ import Analytics from '~/components/Analytics.astro'
 import '~/styles/global.css'
 
 const lang = themeConfig.appearance.locale ?? 'en-us'
+const dark = themeConfig.appearance.theme === 'dark'
 ---
 
-<html lang={lang} class="animation-prepared">
+<html lang={lang} class:list={['animation-prepared', { dark }]}>
   <head>
     <slot name="seo"> <SiteSeo /> </slot>
     <Analytics />
   </head>
 
-  <body class="h-100vh max-w-1200px min-w-390px mx-a" p="7.5 lg:(y-0 x-20)" lg="grid cols-[3fr_1fr] rows-[1fr_9rem]">
+  <body
+    class="h-100vh max-w-1200px min-w-390px mx-a"
+    p="7.5 lg:(y-0 x-20)"
+    lg="grid gap-x-6 cols-[3fr_1fr] rows-[1fr_9rem]"
+  >
     <header
       class="transition-swup-header flex flex-col gap-2.5"
       m="7.5 lg:(x-0 t-20 b-4)"
@@ -26,10 +31,7 @@ const lang = themeConfig.appearance.locale ?? 'en-us'
       <SiteNavigation />
     </header>
 
-    <main
-      class="transition-swup-main link-fill overflow-y-scroll scrollbar-hide outline-none"
-      lg="row-1-3 col-1-2 py-20 "
-    >
+    <main class="transition-swup-main overflow-y-scroll scrollbar-hide outline-none" lg="row-1-3 col-1-2 py-20 ">
       <slot />
     </main>
 

src/pages/posts/page/[page].astro → src/pages/[...page].astro

@@ -1,5 +1,6 @@
 ---
 import type { GetStaticPaths, InferGetStaticPropsType } from 'astro'
+import { themeConfig } from '~/.config'
 import Pagination from '~/components/Pagination.astro'
 import LayoutDefault from '~/layouts/LayoutDefault.astro'
 import LayoutPost from '~/layouts/LayoutPost.astro'
@@ -9,7 +10,7 @@ const { translate: t } = Astro.locals
 
 export const getStaticPaths = (async ({ paginate }) => {
   const posts = await getPosts()
-  return paginate(posts, { pageSize: 5 })
+  return paginate(posts, { pageSize: themeConfig.site.pageSize })
 }) satisfies GetStaticPaths
 
 type Props = InferGetStaticPropsType<typeof getStaticPaths>

src/styles/global.css

@@ -1,21 +1,22 @@
 :root {
-  --uno-colors-foreground: theme('colors.foreground');
+  --uno-colors-primary: theme('colors.primary');
   --uno-colors-background: theme('colors.background');
   --uno-fonts-ui: theme('fontFamily.ui');
+  --uno-colors-shadow: theme('colors.shadow');
 }
 html {
   --at-apply: antialiased;
-  --at-apply: 'bg-background c-foreground font-ui';
+  --at-apply: 'bg-background c-primary font-ui text-shadow-color-shadow';
 
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
+  text-shadow: 1px 1px 1px var(--uno-colors-shadow);
   background-size: 7px 7px;
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
+  background-image: linear-gradient(to right, var(--uno-colors-shadow) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--uno-colors-shadow) 1px, transparent 1px);
 }
 
 :where(a):not(.not-underline-hover) {
-  padding: 1.5px;
+  --at-apply: 'p-1.5px';
   --at-apply: 'decoration-underline decoration-0.1em decoration-offset-2px';
   --at-apply: 'ease-in-out duration-300ms';
-  --at-apply: 'hover:(c-background bg-foreground decoration-foreground)';
+  --at-apply: 'hover:(c-background bg-primary decoration-primary)';
 }

src/types/themeConfig.ts

@@ -31,6 +31,7 @@ export interface ConfigSite {
   author: string
   description: string
   website: string
+  pageSize: number
   socialLinks: { name: string, href: string }[]
   navLinks: { name: string, href: string }[]
   categoryMap: { name: string, path: string }[]
@@ -69,7 +70,7 @@ export interface ConfigAnalytics {
 }
 
 interface Colors {
-  foreground: string
+  primary: string
   background: string
 }
 

uno.config.ts

@@ -1,3 +1,4 @@
+import type { Theme } from 'unocss/preset-uno'
 import presetAttributify from '@unocss/preset-attributify'
 import transformerDirectives from '@unocss/transformer-directives'
 import {
@@ -7,11 +8,10 @@ import {
   presetUno,
   transformerVariantGroup,
 } from 'unocss'
+import presetTheme from 'unocss-preset-theme'
 import { themeConfig } from './src/.config'
 
-const { theme, colorsDark, colorsLight, fonts } = themeConfig.appearance
-
-const colors = theme === 'dark' ? colorsDark : colorsLight
+const { colorsDark, colorsLight, fonts } = themeConfig.appearance
 
 const cssExtend = {
   ':root': {
@@ -23,6 +23,7 @@ const cssExtend = {
   },
 
   ':where(:not(pre):not(a) > code)': {
+    'white-space': 'normal',
     'padding': '2px 4px',
     'color': '#c7254e',
     'font-size': '90%',
@@ -52,9 +53,15 @@ export default defineConfig({
     presetTypography({ cssExtend }),
     presetAttributify(),
     presetIcons({ scale: 1.2, warn: true }),
+    presetTheme<Theme>({ theme: {
+      dark: {
+        colors: { ...colorsDark, shadow: '#FFFFFF0A' },
+        // TODO 需要配置代码块颜色
+      },
+    } }),
   ],
   theme: {
-    colors,
+    colors: { ...colorsLight, shadow: '#0000000A' },
     fontFamily: fonts,
   },
   shortcuts: [