Merge branch 'master' into giscus

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,38 +1,28 @@
 ---
-name: Bug report
+name: Bug report｜问题反馈
 about: Create a report to help us improve
-title: ''
-labels: ''
+title: '[BUG]: '
+labels: 'bug'
 assignees: ''
 
 ---
 
-**Describe the bug**
+### Describe the bug｜问题描述
 A clear and concise description of what the bug is.
 
-**To Reproduce**
+### To Reproduce｜复现步骤
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 
-**Expected behavior**
+### Expected behavior｜预期行为
 A clear and concise description of what you expected to happen.
 
-**Screenshots**
+### Screenshots｜屏幕截图
 If applicable, add screenshots to help explain your problem.
 
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
+### Additional context｜补充信息
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +1,20 @@
 ---
-name: Feature request
+name: Feature request｜功能请求
 about: Suggest an idea for this project
-title: ''
-labels: ''
+title: '[Feature Request]: '
+labels: 'enhancement'
 assignees: ''
 
 ---
 
-**Is your feature request related to a problem? Please describe.**
+### Problem Description｜问题描述
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 
-**Describe the solution you'd like**
+### Solution｜解决方案
 A clear and concise description of what you want to happen.
 
-**Describe alternatives you've considered**
+### Alternative｜备选方案
 A clear and concise description of any alternative solutions or features you've considered.
 
-**Additional context**
+### Additional context｜补充信息
 Add any other context or screenshots about the feature request here.

.github/dependabot.yml

@@ -0,0 +1,23 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: daily
+    open-pull-requests-limit: 3
+    pull-request-branch-name:
+      separator: '-'
+    groups:
+      patch-updates:
+        patterns:
+          - '*'
+        update-types:
+          - patch
+      minor-updates:
+        patterns:
+          - '*'
+        update-types:
+          - minor
+    ignore:
+      - dependency-name: '*'
+        update-types: ['version-update:semver-major']

.vscode/extensions.json

@@ -1,8 +1,7 @@
 {
   "recommendations": [
     "astro-build.astro-vscode",
-    "antfu.unocss",
-    "biomejs.biome"
+    "antfu.unocss"
   ],
   "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -57,82 +57,5 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.associations": {
     "*.mdx": "markdown"
-  },
-  "cSpell.words": [
-    "abbrlink",
-    "antfu",
-    "apiflash",
-    "apos",
-    "Artículos",
-    "astrodotbuild",
-    "astrojs",
-    "attributify",
-    "backref",
-    "belleza",
-    "Beze",
-    "Blockquotes",
-    "blurhash",
-    "bmoji",
-    "canvaskit",
-    "Disqus",
-    "Etiquetas",
-    "figcaption",
-    "Frontmatter",
-    "Fuwriu",
-    "Giscus",
-    "GSAP",
-    "gtag",
-    "hètí",
-    "Heti",
-    "katex",
-    "Lightbox",
-    "Macbook",
-    "mdast",
-    "Moeyua",
-    "msrc",
-    "msvalidate",
-    "noopener",
-    "noreferrer",
-    "Noto",
-    "oklch",
-    "opengraph",
-    "overlayscrollbars",
-    "pagefind",
-    "partytown",
-    "photoswipe",
-    "pswp",
-    "radishzz",
-    "rashomon",
-    "rehype",
-    "reimagines",
-    "Retipografía",
-    "Retypeset",
-    "Reviviendo",
-    "Roundhand",
-    "Segoe",
-    "Sentimentalisme",
-    "Servetus",
-    "shiki",
-    "Sobre",
-    "srcset",
-    "STIX",
-    "stylesheet",
-    "tipográfica",
-    "titlebar",
-    "Twikoo",
-    "Umami",
-    "unocss",
-    "unpic",
-    "vite",
-    "waline",
-    "walinejs",
-    "weibo",
-    "Возрождая",
-    "красоту",
-    "Переверстка",
-    "Посты",
-    "себе",
-    "Теги",
-    "типографики"
-  ]
+  }
 }

README.md

@@ -1,5 +1,5 @@
-<img alt="Cover Image" src="assets/retypeset-en-desktop.webp"/>
-<img alt="Cover Image" src="assets/retypeset-en-mobile.webp"/>
+<img alt="Cover Image" src="images/retypeset-en-desktop.webp"/>
+<img alt="Cover Image" src="images/retypeset-en-mobile.webp"/>
 
 <div align="center">
   <picture>
@@ -32,7 +32,7 @@ Retypeset is a static blog theme based on the [Astro](https://astro.build/) fram
 - Built with Astro and UnoCSS
 - Support for SEO, Sitemap, OpenGraph, TOC, RSS, MDX and LaTeX
 - i18n support
-- Light/Dark mode
+- Light / Dark mode
 - Elegant view transitions
 - Rich theme customization
 - Optimized typography
@@ -41,35 +41,43 @@ Retypeset is a static blog theme based on the [Astro](https://astro.build/) fram
 
 ## Performance
 
+<br>
 <p align="center">
-  <a href="https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fretypeset.radishzz.cc%2F">
-    <img width="710" alt="Retypeset Lighthouse Score" src="assets/retypeset-lighthouse-score.svg">
+  <a href="https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fretypeset.radishzz.cc%2Fen%2F&form_factor=desktop">
+    <img width="710" alt="Retypeset Lighthouse Score" src="images/retypeset-lighthouse-score.svg">
   <a>
 </p>
 
-## Deploy
+## Getting Started
 
-1. Click [`Fork`](https://github.com/radishzzz/astro-theme-retypeset/fork) to clone this repository.
+1. [Fork](https://github.com/radishzzz/astro-theme-retypeset/fork) this repository, or use this template to create a new repository.
+2. Run the following commands in your terminal:
 
-2. Click `Deploy to Netlify` or `Deploy to Vercel` below
+   ```bash
+   # Clone the repository
+   git clone <repository-url>
 
-&emsp;[![Deploy to Netlify](assets/deploy-netlify.svg)](https://app.netlify.com/start)
-[![Deploy to Vercel](assets/deploy-vercel.svg)](https://vercel.com/new)
+   # Navigate to the project directory
+   cd <repository-name>
 
-3. Select the repository and click `Deploy`.
+   # Install pnpm globally (if not already installed)
+   npm install -g pnpm
 
-For other platforms, please refer to the [Astro Deployment Guides](https://docs.astro.build/en/guides/deploy/).
+   # Install dependencies
+   pnpm install
+
+   # Start the development server
+   pnpm dev
+   ```
+
+3. Refer to the [Theme Guide](https://retypeset.radishzz.cc/en/posts/theme-guide/) to customize your blog and create new articles.
+4. Refer to the [Astro Deployment Guides](https://docs.astro.build/en/guides/deploy/) to deploy your blog to Netlify, Vercel, or other platforms.
+
+&emsp;[![Deploy to Netlify](images/deploy-netlify.svg)](https://app.netlify.com/start) [![Deploy to Vercel](images/deploy-vercel.svg)](https://vercel.com/new)
 
 ## Updates
 
-1. Follow the [GitHub Docs](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) to run `Sync fork`.
-
-2. Do not click `Discard Changes`.
-
-## Documentation
-
-- [Theme Guide](https://retypeset.radishzz.cc/en/posts/theme-guide/)
-- [Theme Configuration File](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts)
+Retypeset releases [new features](https://github.com/radishzzz/astro-theme-retypeset/issues/18) from time to time. Simply run `pnpm update-theme` to update the theme. If you encounter merge conflicts, please refer to [this video](https://youtu.be/lz5OuKzvadQ?si=sH_ALNgqxrYqNVQT) for manual resolution.
 
 ## Credits
 
@@ -78,7 +86,7 @@ For other platforms, please refer to the [Astro Deployment Guides](https://docs.
 - [Redefine](https://github.com/EvanNotFound/hexo-theme-redefine)
 - [AstroPaper](https://github.com/satnaing/astro-paper)
 - [heti](https://github.com/sivan/heti)
-- [Early Summer Serif](https://github.com/GuiWonder/EarlySummerSerif)
+- [EarlySummerSerif](https://github.com/GuiWonder/EarlySummerSerif)
 
 ## Star History
 

README.zh.md

@@ -1,8 +1,8 @@
-<img alt="Cover Image" src="assets/retypeset-zh-desktop.webp"/>
-<img alt="Cover Image" src="assets/retypeset-zh-mobile.webp"/>
+<img alt="Cover Image" src="images/retypeset-zh-desktop.webp"/>
+<img alt="Cover Image" src="images/retypeset-zh-mobile.webp"/>
 
 <div align="center">
-  <a title="en" href="README.md">
+  <a title="en" href="https://github.com/radishzzz/astro-theme-retypeset?tab=readme-ov-file#retypeset">
     <img src="https://img.shields.io/badge/-English-545759?style=for-the-badge" alt="English">
   </a>
   <picture>
@@ -41,35 +41,43 @@ Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主
 
 ## 性能
 
+<br>
 <p align="center">
-  <a href="https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fretypeset.radishzz.cc%2F">
-    <img width="710" alt="Retypeset Lighthouse Score" src="assets/retypeset-lighthouse-score.svg">
+  <a href="https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fretypeset.radishzz.cc%2F&form_factor=desktop">
+    <img width="710" alt="Retypeset Lighthouse Score" src="images/retypeset-lighthouse-score.svg">
   <a>
 </p>
 
-## 部署
+## 开始
 
-1. 点击 [`Fork`](https://github.com/radishzzz/astro-theme-retypeset/fork) 克隆本仓库。
+1. [Fork](https://github.com/radishzzz/astro-theme-retypeset/fork) 此仓库，或使用此模版创建新仓库。
+2. 在终端执行以下指令：
 
-2. 点击下方 `Deploy to Netlify` 或 `Deploy to Vercel`
+   ```bash
+   # 克隆仓库
+   git clone <仓库地址>
 
-&emsp;[![Deploy to Netlify](assets/deploy-netlify.svg)](https://app.netlify.com/start)
-[![Deploy to Vercel](assets/deploy-vercel.svg)](https://vercel.com/new)
+   # 进入项目目录
+   cd <仓库名称>
 
-3. 选择对应仓库，点击 `Deploy` 即可。
+   # 全局安装 pnpm（如果未安装）
+   npm install -g pnpm
 
-其它平台请参考 [Astro 部署指南](https://docs.astro.build/zh-cn/guides/deploy/)。
+   # 安装依赖
+   pnpm install
+
+   # 启动开发服务器
+   pnpm dev
+   ```
+
+3. 参考 [主题上手指南](https://retypeset.radishzz.cc/posts/theme-guide/)，自定义你的博客并创建新文章。
+4. 参考 [Astro 部署指南](https://docs.astro.build/zh-cn/guides/deploy/)，将博客部署至 Netlify、Vercel 等平台。
+
+&emsp;[![Deploy to Netlify](images/deploy-netlify.svg)](https://app.netlify.com/start) [![Deploy to Vercel](images/deploy-vercel.svg)](https://vercel.com/new)
 
 ## 更新
 
-1. 参考 [GitHub 文档](https://docs.github.com/zh/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) 在克隆仓库中执行 `Sync fork` 同步最新分支。
-
-2. 不要点击 `Discard Changes` 放弃你的更改。
-
-## 文档
-
-- [主题上手指南](https://retypeset.radishzz.cc/posts/theme-guide/)
-- [主题配置文件](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts)
+Retypeset 会不定期发布 [新功能](https://github.com/radishzzz/astro-theme-retypeset/issues/18)，执行 `pnpm update-theme` 即可更新主题。如果遇到合并冲突，请参考 [此视频](https://youtu.be/lz5OuKzvadQ?si=sH_ALNgqxrYqNVQT) 手动解决。
 
 ## 鸣谢
 

astro.config.ts

@@ -1,22 +1,36 @@
+import type { Element } from 'hast'
 import mdx from '@astrojs/mdx'
 import partytown from '@astrojs/partytown'
 import sitemap from '@astrojs/sitemap'
-import compress from 'astro-compress'
+import Compress from 'astro-compress'
 import robotsTxt from 'astro-robots-txt'
 import { defineConfig } from 'astro/config'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeExternalLinks from 'rehype-external-links'
 import rehypeKatex from 'rehype-katex'
 import rehypeSlug from 'rehype-slug'
+import remarkDirective from 'remark-directive'
 import remarkMath from 'remark-math'
+import { visit } from 'unist-util-visit'
 import UnoCSS from 'unocss/astro'
 import { themeConfig } from './src/config'
 import { langMap } from './src/i18n/config'
-import { remarkReadingTime } from './src/plugins/remark-reading-time'
+import { rehypeCodeCopyButton } from './src/plugins/rehype-code-copy-button.mjs'
+import { rehypeImgToFigure } from './src/plugins/rehype-img-to-figure.mjs'
+import { rehypeUnwrapImg } from './src/plugins/rehype-unwrap-img.mjs'
+import { remarkAdmonitions } from './src/plugins/remark-admonitions.mjs'
+import { remarkGithubCard } from './src/plugins/remark-github-card.mjs'
+import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs'
 
 const url = themeConfig.site.url
 const locale = themeConfig.global.locale
 const linkPrefetch = themeConfig.preload.linkPrefetch
-const imageDomain = new URL(themeConfig.preload.imageHostURL as string).hostname
+const imageHostURL = themeConfig.preload.imageHostURL
+// Configure domains and remotePatterns to optimize remote images in Markdown files using ![alt](src) syntax
+// Docs: https://docs.astro.build/en/guides/images/#authorizing-remote-images
+const imageConfig = imageHostURL
+  ? { image: { domains: [imageHostURL], remotePatterns: [{ protocol: 'https' }] } }
+  : {}
 
 export default defineConfig({
   site: url,
@@ -26,10 +40,7 @@ export default defineConfig({
     prefetchAll: true,
     defaultStrategy: linkPrefetch,
   },
-  image: {
-    domains: [imageDomain],
-    remotePatterns: [{ protocol: 'https' }],
-  },
+  ...imageConfig,
   i18n: {
     locales: Object.entries(langMap).map(([path, codes]) => ({
       path,
@@ -44,21 +55,77 @@ export default defineConfig({
     mdx(),
     partytown({
       config: {
-        forward: ['dataLayer.push'],
+        forward: ['dataLayer.push', 'gtag'],
       },
     }),
     sitemap(),
     robotsTxt(),
-    compress(),
+    Compress({
+      CSS: true,
+      HTML: true,
+      Image: false,
+      JavaScript: true,
+      SVG: false,
+    }),
   ],
   markdown: {
     remarkPlugins: [
+      remarkDirective,
       remarkMath,
+      remarkAdmonitions,
+      remarkGithubCard,
       remarkReadingTime,
     ],
     rehypePlugins: [
-      rehypeSlug,
       rehypeKatex,
+      rehypeSlug,
+      rehypeCodeCopyButton,
+      rehypeImgToFigure,
+      rehypeUnwrapImg, // Must be after rehypeImgToFigure
+      [
+        rehypeAutolinkHeadings,
+        {
+          behavior: 'append',
+          test: ['h1', 'h2', 'h3', 'h4'],
+          content: {
+            type: 'element',
+            tagName: 'svg',
+            properties: {
+              'viewBox': '0 0 24 24',
+              'aria-hidden': 'true',
+              'fill': 'currentColor',
+            },
+            children: [
+              {
+                type: 'element',
+                tagName: 'path',
+                properties: {
+                  d: 'M2.6 21.4c2 2 5.9 2.9 8.9 0l3.5-3.5-1-1-3.5 3.5c-1.4 1.4-4.2 1.9-6.4-.3s-1.8-5-.3-6.4l3.5-3.5-1-1-3.5 3.5c-3 3-2 6.9 0 8.9ZM21.4 2.6c2 2 2.9 5.9 0 8.9L17.9 15l-1-1 3.5-3.5c1.4-1.4 1.9-4.2-.3-6.4s-5-1.8-6.4-.3l-3.5 3.5-1-1 3.5-3.5c3-3 6.9-2 8.9 0Z',
+                },
+              },
+              {
+                type: 'element',
+                tagName: 'path',
+                properties: {
+                  d: 'm8.01 14.97 6.93-6.93 1.061 1.06-6.93 6.93z',
+                },
+              },
+            ],
+          },
+          properties: (el: Element) => {
+            let text = ''
+            visit(el, 'text', (textNode) => {
+              text += textNode.value
+            })
+            return {
+              className: ['heading-anchor-link'],
+              ariaLabel: text
+                ? `Link to ${text.replace(/["']/g, char => char === '"' ? '"' : ''')}`
+                : undefined,
+            }
+          },
+        },
+      ],
       [
         rehypeExternalLinks,
         {
@@ -69,7 +136,7 @@ export default defineConfig({
       ],
     ],
     shikiConfig: {
-      // available themes: https://shiki.style/themes
+      // Available themes: https://shiki.style/themes
       themes: {
         light: 'github-light',
         dark: 'github-dark',

package.json

@@ -2,7 +2,7 @@
   "name": "astro-theme-retypeset",
   "type": "module",
   "version": "0.0.1",
-  "packageManager": "pnpm@10.7.0",
+  "packageManager": "pnpm@10.11.0",
   "repository": "https://github.com/radishzzz/astro-theme-retypeset",
   "scripts": {
     "dev": "astro check && astro dev",
@@ -10,47 +10,55 @@
     "preview": "astro preview",
     "astro": "astro",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "new-post": "esno scripts/new-post.ts",
+    "update-theme": "esno scripts/update-theme.ts",
+    "update-vendors": "curl -L https://unpkg.com/@waline/client@latest/dist/waline.css -o public/vendors/waline/waline.css && curl -L https://unpkg.com/@waline/client@latest/dist/waline.js -o public/vendors/waline/waline.js"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.2.3",
+    "@astrojs/mdx": "^4.3.0",
     "@astrojs/partytown": "^2.1.4",
-    "@astrojs/rss": "^4.0.11",
-    "@astrojs/sitemap": "^3.3.0",
-    "@waline/client": "^3.5.6",
-    "astro": "^5.5.6",
-    "astro-compress": "^2.3.7",
+    "@astrojs/sitemap": "^3.4.0",
+    "astro": "^5.8.1",
+    "astro-compress": "^2.3.8",
     "astro-og-canvas": "^0.7.0",
     "astro-robots-txt": "^1.0.0",
     "canvaskit-wasm": "^0.40.0",
-    "katex": "^0.16.21",
+    "feed": "^5.1.0",
+    "gsap": "^3.13.0",
+    "katex": "^0.16.22",
     "markdown-it": "^14.1.0",
-    "overlayscrollbars": "^2.11.1",
+    "mdast-util-to-string": "^4.0.0",
+    "node-html-parser": "^7.0.1",
     "photoswipe": "^5.4.4",
+    "reading-time": "^1.5.0",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-external-links": "^3.0.0",
     "rehype-katex": "^7.0.1",
     "rehype-slug": "^6.0.0",
+    "remark-directive": "^4.0.0",
     "remark-math": "^6.0.0",
-    "sanitize-html": "^2.15.0"
+    "sanitize-html": "^2.17.0",
+    "sharp": "^0.34.2",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^4.11.0",
+    "@antfu/eslint-config": "^4.13.2",
     "@astrojs/check": "^0.9.4",
+    "@types/hast": "^3.0.4",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^22.14.0",
-    "@types/sanitize-html": "^2.15.0",
-    "@unocss/eslint-plugin": "66.1.0-beta.8",
-    "@unocss/preset-attributify": "66.1.0-beta.8",
-    "@unocss/reset": "66.1.0-beta.8",
+    "@types/node": "^22.15.24",
+    "@types/sanitize-html": "^2.16.0",
+    "@unocss/eslint-plugin": "66.1.2",
+    "@unocss/preset-attributify": "66.1.2",
+    "@unocss/reset": "66.1.2",
     "astro-eslint-parser": "^1.2.2",
-    "eslint": "^9.23.0",
+    "eslint": "^9.27.0",
     "eslint-plugin-astro": "^1.3.1",
-    "lint-staged": "^15.5.0",
-    "mdast-util-to-string": "^4.0.0",
-    "reading-time": "^1.5.0",
-    "sharp": "^0.33.5",
-    "typescript": "~5.8.2",
-    "unocss": "66.1.0-beta.8",
+    "esno": "^4.8.0",
+    "lint-staged": "^16.1.0",
+    "typescript": "~5.8.3",
+    "unocss": "66.1.2",
     "unocss-preset-theme": "^0.14.1"
   },
   "lint-staged": {

public/feeds/atom-style.xsl

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xsl:stylesheet version="3.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+                xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/"
+                xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd">
+  <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
+  <xsl:template match="/">
+    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+      <head>
+        <title><xsl:value-of select="/atom:feed/atom:title"/> Web Feed</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
+        <style type="text/css">
+        /* Basic styles */
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
+        body{margin:0;font-family:ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:16px;line-height:1.5;word-wrap:break-word;color:oklch(25% 0.005 298)}
+        *{box-sizing:border-box}
+        p{margin-top:0;margin-bottom:16px}
+        strong{font-weight:600}
+        small{font-size:90%}
+        h1,h2,h3,h4,h5,h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}
+        h1{padding-bottom:.3em;font-size:2em;border-bottom:1px solid #E0DFE3}
+        h2{padding-bottom:.3em;font-size:1.5em;border-bottom:1px solid #E0DFE3}
+        h3{font-size:1.25em;margin-top:0;margin-bottom:0}
+        a{color:#0366d6;text-decoration:none}
+        a:hover{text-decoration:underline}
+
+        /* Utility classes */
+        .bg-white{background-color:oklch(0.96 0.005 298)!important}
+        .px-4{padding-right:24px!important;padding-left:24px!important}
+        .py-2{padding-top:8px!important;padding-bottom:8px!important}
+        .py-5{padding-top:32px!important;padding-bottom:32px!important}
+        .pb-3{padding-bottom:16px!important}
+        .pb-5{padding-bottom:32px!important}
+        .mt-3{margin-top:16px!important}
+        .mb-1{margin-bottom:4px!important}
+        .pr-1{padding-right:4px!important}
+        .border-0{border:0!important}
+        .text-gray{color:oklch(0.25 0.005 298 / 75%)!important}
+        @media (min-width:768px){
+          .mt-md-5{margin-top:32px!important}
+        }
+
+        /* Component styles */
+        .markdown{max-width:768px;margin-right:auto;margin-left:auto}
+        .markdown>*:first-child{margin-top:0!important}
+        .markdown>*:last-child{margin-bottom:0!important}
+        </style>
+      </head>
+      <body class="bg-white">
+        <nav class="px-4 py-2 mt-3 mt-md-5 markdown">
+          <p>
+            <strong>This is a web feed,</strong> also known as an RSS feed. <strong>Subscribe</strong> by copying the URL from the address bar into your newsreader.
+          </p>
+        </nav>
+        <div class="px-4 pb-3 markdown">
+          <header class="py-5">
+            <h1 class="border-0">
+              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="vertical-align: text-bottom; width: 1.2em; height: 1.2em;" class="pr-1" id="RSSicon" viewBox="0 0 256 256">
+                <defs>
+                  <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
+                    <stop  offset="0.0" stop-color="#E3702D"/><stop  offset="0.1071" stop-color="#EA7D31"/>
+                    <stop  offset="0.3503" stop-color="#F69537"/><stop  offset="0.5" stop-color="#FB9E3A"/>
+                    <stop  offset="0.7016" stop-color="#EA7C31"/><stop  offset="0.8866" stop-color="#DE642B"/>
+                    <stop  offset="1.0" stop-color="#D95B29"/>
+                  </linearGradient>
+                </defs>
+                <rect width="256" height="256" rx="55" ry="55" x="0"  y="0"  fill="#CC5D15"/>
+                <rect width="246" height="246" rx="50" ry="50" x="5"  y="5"  fill="#F49C52"/>
+                <rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
+                <circle cx="68" cy="189" r="24" fill="#FFF"/>
+                <path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
+                <path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
+              </svg>
+              Web Feed Preview
+            </h1>
+            <h2><xsl:value-of select="/atom:feed/atom:title"/></h2>
+            <p><xsl:value-of select="/atom:feed/atom:subtitle"/></p>
+            <a target="_blank">
+              <xsl:attribute name="href">
+                <xsl:value-of select="/atom:feed/atom:link[@rel='alternate']/@href"/>
+              </xsl:attribute>
+              Visit Website &#x2192;
+            </a>
+          </header>
+          <h2>Recent Items</h2>
+          <xsl:for-each select="/atom:feed/atom:entry">
+            <div class="pb-5">
+              <h3 class="mb-1">
+                <a target="_blank">
+                  <xsl:attribute name="href">
+                    <xsl:value-of select="atom:link[@rel='alternate']/@href"/>
+                  </xsl:attribute>
+                  <xsl:value-of select="atom:title"/>
+                </a>
+              </h3>
+              <small class="text-gray">
+                Published: <xsl:value-of select="substring(atom:published, 1, 10)" />
+              </small>
+            </div>
+          </xsl:for-each>
+        </div>
+      </body>
+    </html>
+  </xsl:template>
+</xsl:stylesheet>

public/feeds/rss-style.xsl

@@ -10,75 +10,49 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
         <style type="text/css">
-        /* Basic normalization styles */
-        html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
-        body{margin:0}
-        article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}
-        summary{display:list-item}
-        a{background-color:transparent}
-        a:active,a:hover{outline-width:0}
-        b,strong{font-weight:bolder}
-        h1{font-size:2em;margin:.67em 0}
-        img{border-style:none}
-        svg:not(:root){overflow:hidden}
-
-        /* Basic box model */
+        /* Basic styles */
+        html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
+        body{margin:0;font-family:ui-sans-serif,system-ui,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';font-size:16px;line-height:1.5;word-wrap:break-word;color:oklch(25% 0.005 298)}
         *{box-sizing:border-box}
-        body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px;line-height:1.5;color:#24292e}
+        p{margin-top:0;margin-bottom:16px}
+        strong{font-weight:600}
+        small{font-size:90%}
+        h1,h2,h3,h4,h5,h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}
+        h1{padding-bottom:.3em;font-size:2em;border-bottom:1px solid #E0DFE3}
+        h2{padding-bottom:.3em;font-size:1.5em;border-bottom:1px solid #E0DFE3}
+        h3{font-size:1.25em;margin-top:0;margin-bottom:0}
         a{color:#0366d6;text-decoration:none}
         a:hover{text-decoration:underline}
-        b,strong{font-weight:600}
-
-        /* Heading styles */
-        h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0;font-weight:600;line-height:1.25}
-        h1{font-size:32px}
-        h2{font-size:24px}
-        h3{font-size:20px}
-        p{margin-top:0;margin-bottom:10px}
-        small{font-size:90%}
 
         /* Utility classes */
-        .bg-white{background-color:#F2F1F5!important}
-        .container-md{max-width:768px;margin-right:auto;margin-left:auto}
+        .bg-white{background-color:oklch(0.96 0.005 298)!important}
         .px-4{padding-right:24px!important;padding-left:24px!important}
         .py-2{padding-top:8px!important;padding-bottom:8px!important}
         .py-5{padding-top:32px!important;padding-bottom:32px!important}
         .pb-3{padding-bottom:16px!important}
         .pb-5{padding-bottom:32px!important}
-        .mt-2{margin-top:8px!important}
         .mt-3{margin-top:16px!important}
         .mb-1{margin-bottom:4px!important}
         .pr-1{padding-right:4px!important}
         .border-0{border:0!important}
-        .text-gray{color:#586069!important}
-
-        /* Responsive classes */
+        .text-gray{color:oklch(0.25 0.005 298 / 75%)!important}
         @media (min-width:768px){
           .mt-md-5{margin-top:32px!important}
         }
 
-        /* Markdown body styles */
-        .markdown-body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:16px;line-height:1.5;word-wrap:break-word}
-        .markdown-body::before{display:table;content:""}
-        .markdown-body::after{display:table;clear:both;content:""}
-        .markdown-body>*:first-child{margin-top:0!important}
-        .markdown-body>*:last-child{margin-bottom:0!important}
-        .markdown-body a:not([href]){color:inherit;text-decoration:none}
-        .markdown-body p{margin-top:0;margin-bottom:16px}
-        .markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}
-        .markdown-body h1{padding-bottom:.3em;font-size:2em;border-bottom:1px solid #E0DFE3}
-        .markdown-body h2{padding-bottom:.3em;font-size:1.5em;border-bottom:1px solid #E0DFE3}
-        .markdown-body h3{font-size:1.25em}
-        .markdown-body img{max-width:100%;box-sizing:content-box;background-color:#fff}
+        /* Component styles */
+        .markdown{max-width:768px;margin-right:auto;margin-left:auto}
+        .markdown>*:first-child{margin-top:0!important}
+        .markdown>*:last-child{margin-bottom:0!important}
         </style>
       </head>
       <body class="bg-white">
-        <nav class="container-md px-4 py-2 mt-3 mt-md-5 markdown-body">
+        <nav class="px-4 py-2 mt-3 mt-md-5 markdown">
           <p>
             <strong>This is a web feed,</strong> also known as an RSS feed. <strong>Subscribe</strong> by copying the URL from the address bar into your newsreader.
           </p>
         </nav>
-        <div class="container-md px-4 pb-3 markdown-body">
+        <div class="px-4 pb-3 markdown">
           <header class="py-5">
             <h1 class="border-0">
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="vertical-align: text-bottom; width: 1.2em; height: 1.2em;" class="pr-1" id="RSSicon" viewBox="0 0 256 256">
@@ -97,12 +71,11 @@
                 <path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
                 <path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
               </svg>
-
               Web Feed Preview
             </h1>
             <h2><xsl:value-of select="/rss/channel/title"/></h2>
             <p><xsl:value-of select="/rss/channel/description"/></p>
-            <a class="head_link" target="_blank">
+            <a target="_blank">
               <xsl:attribute name="href">
                 <xsl:value-of select="/rss/channel/link"/>
               </xsl:attribute>
@@ -123,9 +96,6 @@
               <small class="text-gray">
                 Published: <xsl:value-of select="substring(pubDate, 1, 16)" />
               </small>
-              <div class="description mt-2">
-                <xsl:value-of select="description" disable-output-escaping="yes" />
-              </div>
             </div>
           </xsl:for-each>
         </div>