refactor: clean up SEO and theme configuration

- Remove unused SEO metadata fields like Facebook and site screenshot
- Rename global font configuration from 'font' to 'fontStyle'
- Update theme toggle to use documentElement instead of body for theme restoration
- Simplify HTML metadata and remove redundant meta tags
- Adjust index page to use div instead of time for date display

src/components/ThemeToggle.astro

@@ -31,12 +31,12 @@ function toggleTheme() {
 }
 
 function syncTheme() {
-  document.body.setAttribute('data-restore-theme', 'true')
+  document.documentElement.setAttribute('data-restore-theme', 'true')
   const theme = localStorage.getItem('theme')
   document.documentElement.classList.toggle('dark', theme === 'dark')
   themeToggle.setAttribute('aria-pressed', String(theme === 'dark'))
   requestAnimationFrame(() => {
-    document.body.removeAttribute('data-restore-theme')
+    document.documentElement.removeAttribute('data-restore-theme')
   })
 }
 

src/config.ts

@@ -32,9 +32,9 @@ export const themeConfig: ThemeConfig = {
 
   // GLOBAL SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   global: {
-    locale: 'zh', // support only zh, zh-tw, ja, en, es, ru. Default locale setting
+    locale: 'zh', // support only zh, zh-tw, ja, en, es, ru. Default language setting
     moreLocale: ['zh-tw', 'ja', 'en', 'es', 'ru'], // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']. NOT fill in the default locale code again
-    font: 'sans', // support only sans, serif. Choose the font style for posts
+    fontStyle: 'sans', // support only sans, serif. Choose the font style for posts
     titleSpace: 4, // support only 1, 2, 3, 4. Space between title and subtitle, 1 is the smallest, 4 is the largest
   },
   // GLOBAL SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
@@ -56,8 +56,6 @@ export const themeConfig: ThemeConfig = {
   // SEO SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   seo: {
     twitterID: '', // @twitter ID
-    facebookID: '', // @facebook ID
-    facebookLink: '', // facebook profile link
     // site verification
     verification: {
       google: '', // Google Search Console: https://search.google.com/search-console
@@ -73,7 +71,6 @@ export const themeConfig: ThemeConfig = {
       feedID: '', // feed ID
       userID: '', // user ID
     },
-    siteScreenshot: '', // take a screenshot of your website homepage to show on twitter card
   },
   // SEO SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 
@@ -106,7 +103,7 @@ export const themeConfig: ThemeConfig = {
   },
   // PRELOAD SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 
-  // ABOUT PAGE CONTENT >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
+  // ABOUT PAGE CONTENT >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   about: {
     // Required: Content for about page in default language
     '[locale]': '关于我',
@@ -117,7 +114,7 @@ export const themeConfig: ThemeConfig = {
     'es': 'Sobre mí',
     'ru': 'Обо мне',
   },
-  // ABOUT PAGE CONTENT >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
+  // ABOUT PAGE CONTENT >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 }
 
 export default themeConfig

src/layouts/Head.astro

@@ -12,20 +12,18 @@ const { postTitle, postDescription, postImage } = Astro.props
 const { title, subtitle, description, author, url, favicon } = themeConfig.site
 const { light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
 const { locale, moreLocale } = themeConfig.global
-const { verification = {}, twitterID = '', facebookID = '', facebookLink = '', googleAnalyticsID = '', umamiAnalyticsID = '', siteScreenshot = '' } = themeConfig.seo ?? {}
+const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '' } = themeConfig.seo ?? {}
 const { google = '', bing = '', yandex = '', baidu = '' } = verification
 const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '', customUmamiAnalyticsURL = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
 ---
 
 <head>
-<!-- Basic -->
+<!-- Basic info -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-
 {favicon.toLowerCase().endsWith('.webp') && <link rel="icon" type="image/webp" href={favicon} />}
 {favicon.toLowerCase().endsWith('.svg') && <link rel="icon" type="image/svg+xml" href={favicon} />}
 {favicon.toLowerCase().endsWith('.png') && <link rel="icon" type="image/png" href={favicon} />}
-
 <title>{postTitle ? `${postTitle} | ${title}` : `${title} - ${subtitle}`}</title>
 <meta name="description" content={postDescription || description} />
 <meta name="author" content={author} />
@@ -33,9 +31,6 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 <meta name="color-scheme" content="light dark" />
 <meta name="theme-color" content={lightMode} media="(prefers-color-scheme: light)" />
 <meta name="theme-color" content={darkMode} media="(prefers-color-scheme: dark)" />
-<meta itemprop="name" content={postTitle || title} />
-<meta itemprop="image" content={postImage || siteScreenshot} />
-<meta itemprop="description" content={postDescription || subtitle} />
 <ClientRouter />
 
 <!-- Preload -->
@@ -46,13 +41,8 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 {customGoogleAnalyticsURL && <link rel="dns-prefetch" href={customGoogleAnalyticsURL} />}
 {customUmamiAnalyticsURL && <link rel="dns-prefetch" href={customUmamiAnalyticsURL} />}
 <link rel="stylesheet" href={`${cdn}/gh/radishzzz/retypeset-font/font.css`} />
-
-<!-- Link -->
-<link rel="author" href={url} />
-<link rel="publisher" href={author} />
-<link rel="canonical" href={Astro.url} />
 <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS" />
-<link rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/" />
+<link rel="canonical" href={Astro.url} />
 
 <!-- i18n hreflang generate -->
 {[locale, ...moreLocale].map(lang => (
@@ -64,31 +54,24 @@ const { cdn, commentURL = '', imageHostURL = '', customGoogleAnalyticsURL = '',
 ))}
 
 <!-- Facebook Open Graph -->
-<meta property="fb:app_id" content={facebookID} />
-<meta property="og:url" content={Astro.url} />
-<meta property="og:type" content={postTitle ? 'article' : 'website'} />
 <meta property="og:title" content={postTitle || title} />
-<meta property="og:image" content={postImage || siteScreenshot} />
+<meta property="og:type" content={postTitle ? 'article' : 'website'} />
-<meta property="og:image:alt" content={postTitle || title} />
+<meta property="og:image" content={postImage || favicon} />
+<meta property="og:url" content={Astro.url} />
 <meta property="og:description" content={postDescription || subtitle} />
 <meta property="og:site_name" content={title} />
-<meta property="og:locale" content={Astro.currentLocale?.replace('-', '_') || 'en_US'} />
-<meta property="article:author" content={facebookLink} />
 
 <!-- Twitter Card -->
 <meta name="twitter:card" content="summary" />
-<meta name="twitter:url" content={Astro.url} />
 <meta name="twitter:title" content={postTitle || title} />
 <meta name="twitter:description" content={postDescription || subtitle} />
-<meta name="twitter:image" content={postImage || siteScreenshot} />
+<meta name="twitter:image" content={postImage || favicon} />
-<meta name="twitter:image:alt" content={postTitle || title} />
 {twitterID && (
   <>
     <meta name="twitter:site" content={twitterID} />
     <meta name="twitter:creator" content={twitterID} />
   </>
 )}
-<meta name="twitter:dnt" content="on" />
 
 <!-- Site Verification -->
 {google && <meta name="google-site-verification" content={google} />}

src/layouts/Layout.astro

@@ -18,7 +18,7 @@ interface Props {
 }
 
 const { postTitle, postDescription, postImage } = Astro.props
-const fontStyle = `font-${themeConfig.global.font}`
+const fontStyle = `font-${themeConfig.global.fontStyle}`
 ---
 
 <html

src/pages/index.astro

@@ -15,10 +15,10 @@ const postsByYear = await getPostsByYear()
             <li>
               <a href={`/posts/${post.data.slug || post.slug}/`}>
                 {post.data.title}
-                <time class="block lg:inline lg:before:content-['_']">
+                <div class="block lg:inline lg:before:content-['_']">
                   {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
                   {post.remarkPluginFrontmatter?.minutes && <span>  {post.remarkPluginFrontmatter.minutes} min</span>}
-                </time>
+                </div>
               </a>
             </li>
           ))}
@@ -39,10 +39,10 @@ const postsByYear = await getPostsByYear()
               {/* Post Title */}
               <a class="hover:text-secondary" href={`/posts/${post.data.slug || post.slug}`}>{post.data.title}</a>
                 {/* Post Date */} 
-                <time class="text-5.6 leading-7 font-date block lg:inline lg:before:content-['_'] opacity-30" aria-hidden="true">
+                <div class="text-5.6 leading-7 font-date block lg:inline lg:before:content-['_'] opacity-40" aria-hidden="true">
                   {post.data.published.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' }).replace('/', '-')}
                   {post.remarkPluginFrontmatter?.minutes &&  <span class="ml-2">  {post.remarkPluginFrontmatter.minutes} min</span>}
-                </time>
+                </div>
             </li>
           ))}
         </ul>

src/styles/global.css

@@ -80,7 +80,7 @@ html:not(.dark) {
 }
 
 @supports not (view-transition-name: none) {
-  body:not([data-restore-theme]) {
+  html:not([data-restore-theme]) {
     --at-apply: 'transition-colors duration-500 ease-in-out';
   }
 }

src/types/index.d.ts

@@ -32,7 +32,7 @@ export interface ThemeConfig {
   global: {
     locale: typeof langPath[number]
     moreLocale: typeof langPath[number][]
-    font: 'sans' | 'serif'
+    fontStyle: 'sans' | 'serif'
     titleSpace: 1 | 2 | 3 | 4
   }
 
@@ -47,8 +47,6 @@ export interface ThemeConfig {
 
   seo?: {
     twitterID?: string
-    facebookID?: string
-    facebookLink?: string
     verification?: {
       google?: string
       bing?: string
@@ -61,7 +59,6 @@ export interface ThemeConfig {
       feedID?: string
       userID?: string
     }
-    siteScreenshot: string
   }
 
   footer: {