From a556a622ab9f87e934bb32501ea95526089d5b62 Mon Sep 17 00:00:00 2001 From: radishzzz Date: Thu, 13 Mar 2025 05:00:18 +0000 Subject: [PATCH] feat: automatically generate Open Graph cards --- .vscode/settings.json | 1 + README.md | 2 +- README.zh.md | 2 +- package.json | 3 +-- pnpm-lock.yaml | 11 +++----- public/image/Astro-Icon.png | Bin 0 -> 1400 bytes public/image/Logo.svg | 1 - src/config.ts | 4 +-- src/content/posts/Theme Guide-en.md | 2 +- src/content/posts/Theme Guide-zh.md | 2 +- src/layouts/Head.astro | 12 ++++----- src/pages/[lang]/posts/[slug].astro | 8 +++++- src/pages/og/[...route].ts | 39 +++++++++++++++++++++++----- src/utils/description.ts | 2 +- 14 files changed, 59 insertions(+), 30 deletions(-) create mode 100644 public/image/Astro-Icon.png delete mode 100644 public/image/Logo.svg diff --git a/.vscode/settings.json b/.vscode/settings.json index 2d1be0d..1ccaef5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -84,6 +84,7 @@ "msvalidate", "noopener", "noreferrer", + "Noto", "oklch", "overlayscrollbars", "pagefind", diff --git a/README.md b/README.md index 086fd6c..e79238e 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ # Retypeset -Retypeset is a static blog theme based on the Astro framework, inspired by Typography. Retypeset establishes a new visual standard and reimagines the layout of all pages, offering a reading experience similar to paper books, reviving the beauty of typography. Details in every sight, elegance in every space. +Retypeset is a static blog theme based on the [Astro](https://astro.build/) framework, inspired by [Typography](https://astro-theme-typography.vercel.app/). Retypeset establishes a new visual standard and reimagines the layout of all pages, offering a reading experience similar to paper books, reviving the beauty of typography. Details in every sight, elegance in every space. - [Live Demo](https://retypeset.radishzz.cc/) - [Mobile design](https://mastergo.com/file/151079538766773?fileOpenFrom=home&page_id=M&source=link_share&shareId=151079538766773) diff --git a/README.zh.md b/README.zh.md index a634ee8..95a8477 100644 --- a/README.zh.md +++ b/README.zh.md @@ -19,7 +19,7 @@ # 重新编排 -Retypeset 是一款基于 Astro 框架的静态博客主题，设计灵感来自 Typography。本主题通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。 +Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，设计灵感来自 [Typography](https://astro-theme-typography.vercel.app/)。本主题通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。 - [在线预览](https://retypeset.radishzz.cc/) - [移动端设计稿](https://mastergo.com/file/151079538766773?fileOpenFrom=home&page_id=M&source=link_share&shareId=151079538766773) diff --git a/package.json b/package.json index 918f880..880f039 100644 --- a/package.json +++ b/package.json @@ -43,8 +43,7 @@ "sanitize-html": "^2.14.0", "sharp": "^0.33.5", "typescript": "~5.8.2", - "unist-util-visit": "^5.0.0", - "vite": "^6.2.1" + "unist-util-visit": "^5.0.0" }, "devDependencies": { "@antfu/eslint-config": "^4.10.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89c69d1..9fc0d62 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -95,9 +95,6 @@ importers: unist-util-visit: specifier: ^5.0.0 version: 5.0.0 - vite: - specifier: ^6.2.1 - version: 6.2.1(@types/node@22.13.10)(jiti@2.4.2)(lightningcss@1.28.2)(terser@5.37.0)(yaml@2.7.0) devDependencies: '@antfu/eslint-config': specifier: ^4.10.1 @@ -1622,8 +1619,8 @@ packages: duplexer@0.1.2: resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==} - electron-to-chromium@1.5.114: - resolution: {integrity: sha512-DFptFef3iktoKlFQK/afbo274/XNWD00Am0xa7M8FZUepHlHT8PEuiNBoRfFHbH1okqN58AlhbJ4QTkcnXorjA==} + electron-to-chromium@1.5.115: + resolution: {integrity: sha512-MN1nahVHAQMOz6dz6bNZ7apgqc9InZy7Ja4DBEVCTdeiUcegbyOYE9bi/f2Z/z6ZxLi0RxLpyJ3EGe+4h3w73A==} emmet@2.4.11: resolution: {integrity: sha512-23QPJB3moh/U9sT4rQzGgeyyGIrcM+GH5uVYg2C6wZIxAIJq7Ng3QLT79tl8FUwDXhyq9SusfknOrofAKqvgyQ==} @@ -5216,7 +5213,7 @@ snapshots: browserslist@4.24.4: dependencies: caniuse-lite: 1.0.30001703 - electron-to-chromium: 1.5.114 + electron-to-chromium: 1.5.115 node-releases: 2.0.19 update-browserslist-db: 1.1.3(browserslist@4.24.4) @@ -5475,7 +5472,7 @@ snapshots: duplexer@0.1.2: {} - electron-to-chromium@1.5.114: {} + electron-to-chromium@1.5.115: {} emmet@2.4.11: dependencies: diff --git a/public/image/Astro-Icon.png b/public/image/Astro-Icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3c497fe3a30c9ea239fa32dbaef994ff18e9c70a GIT binary patch literal 1400 zcmV-;1&8{HP)Px#32;bRa{vGqB>(^xB>_oNB=7(L03lFJR7FQ{Ob`_r78oEG7#|lH9v2uM7Z@HF z7#9bG*h9dYNxfuR$z!kq*@y>0kPLbhdi-If@md=#0o<7 zhG;bpMG8Xo{N}1244)pV3vJiGzqvjh&TQ7d-vQzYP;036M=N;-)~SEL1BU0IjiK7# zT-B4{wovVN0DBtP6srBrl{^n?3f2B-HBUrZ^zV;W^;D=KRQscqJ(+R3{tGVGzuy7k z=}>W~_BU7Ze5_dieg~KrAf=(&-(1y8;L}5Op@sVQH`m9Dm>v4tvopS@K2(hd0Ln(R zR)?zLuE(Xisp7UCR;>S;nqj357;hexNNKe48xg6rx$3K>VTH{VcLFEC0VVne#K#`? zG8(O{xzeuw710{-NdaT6)PKJVNYzf2-s>`ILe(PNUK6Sc@Y(@dqdx~IT?Yy<29eKCuI*TKyN67p=6Vf2adSn*J6&bV^%P5^X5W3RTBw znS3NQRf{)2=jq?#fVs5@!X1Dqp=ufNH&a4YlE$B)73EwtW&Ax_af<#hEWWwwmQpDW z;P6njtSyk1>c1Ek-CUovO^^mhE9M>K;9v(x-tm}Wv4UCRp(71l2DGPtngc9W|I~ji zqR5MJ>M=MCl*kbv(*YxQ*af2D-lcLKP^$le!ve=b_V2JqCgXr`kXZEjwz>XUsG15R zBttCfU&G&rs;w#uKvw%ET6v?);&R8=kN_$nLI?vP5f1!f0y2d}BGq?9u;u%=*4Dz+=&WuZvG8b*6T!Q0ShoHo$92HAsZ72>?Kkgdve( z9>{=9v?Epf*A+o3)Uf{h&B~CBluv5E1F+!>?#%3{<-eG}`zsf+?Hu$fTv#&J&;P1e zL#SYW@q`6!BT|c|6}R^?6N;E$eV(3D>Eih!7x}14mn(VqfHFfR>~5R;E+eRAy6kmb zMW{x2>wbozfdRjP!h*kfFCzoa0Rz@kf2ni89i=`9hk>WNbb-gabg>apUEEVC*fo`c zT~jG&+?`4F0}X*=q0{AGjLkh?zgZCuhPR&e_d9^$Xk6UEMIT47b3sX8jMVj78<=-;7xR0000 \ No newline at end of file diff --git a/src/config.ts b/src/config.ts index 2a888ae..d87ca15 100644 --- a/src/config.ts +++ b/src/config.ts @@ -14,8 +14,8 @@ export const themeConfig: ThemeConfig = { // site url url: 'https://retypeset.radishzz.cc', // favicon url - // support only webp, svg or png - favicon: '/image/Logo.svg', // https://example.com/logo.svg + // support only ico or png for best compatibility with Open Graph and RSS avatar + favicon: '/image/Astro-Icon.png', // https://example.com/logo.png }, // SITE INFORMATION >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END diff --git a/src/content/posts/Theme Guide-en.md b/src/content/posts/Theme Guide-en.md index 5afbc80..06a110d 100644 --- a/src/content/posts/Theme Guide-en.md +++ b/src/content/posts/Theme Guide-en.md @@ -7,4 +7,4 @@ pin: 99 lang: en --- -Retypeset is a static blog theme based on the Astro framework, inspired by Typography. Retypeset establishes a new visual standard and reimagines the layout of all pages, offering a reading experience similar to paper books, reviving the beauty of typography. Details in every sight, elegance in every space. +Retypeset is a static blog theme based on the [Astro](https://astro.build/) framework, inspired by [Typography](https://astro-theme-typography.vercel.app/). Retypeset establishes a new visual standard and reimagines the layout of all pages, offering a reading experience similar to paper books, reviving the beauty of typography. Details in every sight, elegance in every space. diff --git a/src/content/posts/Theme Guide-zh.md b/src/content/posts/Theme Guide-zh.md index c2c0798..27ca8e5 100644 --- a/src/content/posts/Theme Guide-zh.md +++ b/src/content/posts/Theme Guide-zh.md @@ -7,4 +7,4 @@ pin: 99 lang: zh --- -Retypeset 是一款基于Astro框架的静态博客主题，设计灵感来自Typography。本主题通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。 +Retypeset 是一款基于[Astro](https://astro.build/)框架的静态博客主题，设计灵感来自[Typography](https://astro-theme-typography.vercel.app/)。本主题通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。 diff --git a/src/layouts/Head.astro b/src/layouts/Head.astro index 0a79ff5..eda065a 100644 --- a/src/layouts/Head.astro +++ b/src/layouts/Head.astro @@ -13,23 +13,23 @@ const { postTitle, postDescription, postSlug } = Astro.props const { title, subtitle, description, author, url, favicon } = themeConfig.site const { mode, light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color const { locale, moreLocale } = themeConfig.global -// TODO: Change openGraph image fallback url -const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '', openGraph = 'https://placehold.co/1200x630' } = themeConfig.seo ?? {} +const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '', openGraph: ogUrl } = themeConfig.seo ?? {} const { google = '', bing = '', yandex = '', baidu = '' } = verification const { commentURL = '', imageHostURL = '', customGoogleAnalyticsJS = '', customUmamiAnalyticsJS = '' } = themeConfig.preload const initMetaTheme = mode === 'dark' ? darkMode : lightMode const pageTitle = postTitle ? `${postTitle} | ${title}` : `${title} - ${subtitle}` const pageDescription = postDescription || description -const pageImage = postSlug ? `${url}/og/${postSlug}.png` : `${openGraph}` +// TODO: Change openGraph image fallback url +const openGraph = typeof ogUrl === 'string' ? ogUrl : 'https://placehold.co/1200x630' +const pageImage = postSlug ? `${url}/og/${postSlug}.png` : openGraph --- -{favicon.toLowerCase().endsWith('.webp') && } -{favicon.toLowerCase().endsWith('.svg') && } {favicon.toLowerCase().endsWith('.png') && } +{favicon.toLowerCase().endsWith('.ico') && } {pageTitle} @@ -65,7 +65,7 @@ const pageImage = postSlug ? `${url}/og/${postSlug}.png` : `${openGraph}` - + diff --git a/src/pages/[lang]/posts/[slug].astro b/src/pages/[lang]/posts/[slug].astro index 7aa3869..5eb0da1 100644 --- a/src/pages/[lang]/posts/[slug].astro +++ b/src/pages/[lang]/posts/[slug].astro @@ -2,6 +2,7 @@ import Waline from '@/components/Comments/Waline.astro' import Layout from '@/layouts/Layout.astro' import { checkSlugDuplication } from '@/utils/content' +import { generateDescription } from '@/utils/description' import { generateMultiLangPostPaths } from '@/utils/i18n/route' import { getCollection } from 'astro:content' @@ -17,10 +18,15 @@ export async function getStaticPaths() { } const { post } = Astro.props +const description = generateDescription(post) const { Content, remarkPluginFrontmatter } = await post.render() --- - +

{post.data.title}