diff --git a/astro.config.ts b/astro.config.ts index fcde578..a5763be 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -7,6 +7,7 @@ import { defineConfig } from 'astro/config' import rehypeExternalLinks from 'rehype-external-links' import rehypeKatex from 'rehype-katex' import remarkMath from 'remark-math' +import remarkSectionize from 'remark-sectionize' import UnoCSS from 'unocss/astro' import { themeConfig } from './src/config' import { langMap } from './src/i18n/config' @@ -53,6 +54,7 @@ export default defineConfig({ markdown: { remarkPlugins: [ remarkMath, + remarkSectionize, remarkReadingTime, ], rehypePlugins: [ @@ -66,8 +68,8 @@ export default defineConfig({ }, ], ], - // available themes: https://shiki.style/themes shikiConfig: { + // available themes: https://shiki.style/themes themes: { light: 'one-light', dark: 'one-dark-pro', diff --git a/package.json b/package.json index bdd90d5..ea04f69 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "lint-staged": "^15.5.0", "mdast-util-to-string": "^4.0.0", "reading-time": "^1.5.0", + "remark-sectionize": "^2.1.0", "sharp": "^0.33.5", "typescript": "~5.8.2", "unocss": "66.1.0-beta.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6b3e6ad..7a7de0f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -102,6 +102,9 @@ importers: reading-time: specifier: ^1.5.0 version: 1.5.0 + remark-sectionize: + specifier: ^2.1.0 + version: 2.1.0 sharp: specifier: ^0.33.5 version: 0.33.5 @@ -3014,6 +3017,9 @@ packages: remark-rehype@11.1.1: resolution: {integrity: sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==} + remark-sectionize@2.1.0: + resolution: {integrity: sha512-R/pHt1RLYrEqrbwOVXx8HnvvwOg+mxg8pE4kIWpIYE3/CuZhU8/PAx/0y1BbHWUA0jmTLTeWpUlDrS/B0pyd0g==} + remark-smartypants@3.0.2: resolution: {integrity: sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==} engines: {node: '>=16.0.0'} @@ -3346,9 +3352,15 @@ packages: unified@11.0.5: resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==} + unist-util-find-after@4.0.1: + resolution: {integrity: sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==} + unist-util-find-after@5.0.0: resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==} + unist-util-is@5.2.1: + resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==} + unist-util-is@6.0.0: resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} @@ -3370,9 +3382,15 @@ packages: unist-util-visit-children@3.0.0: resolution: {integrity: sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==} + unist-util-visit-parents@5.1.3: + resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==} + unist-util-visit-parents@6.0.1: resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + unist-util-visit@4.1.2: + resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==} + unist-util-visit@5.0.0: resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} @@ -7414,6 +7432,11 @@ snapshots: unified: 11.0.5 vfile: 6.0.3 + remark-sectionize@2.1.0: + dependencies: + unist-util-find-after: 4.0.1 + unist-util-visit: 4.1.2 + remark-smartypants@3.0.2: dependencies: retext: 9.0.0 @@ -7808,11 +7831,20 @@ snapshots: trough: 2.2.0 vfile: 6.0.3 + unist-util-find-after@4.0.1: + dependencies: + '@types/unist': 2.0.11 + unist-util-is: 5.2.1 + unist-util-find-after@5.0.0: dependencies: '@types/unist': 3.0.3 unist-util-is: 6.0.0 + unist-util-is@5.2.1: + dependencies: + '@types/unist': 2.0.11 + unist-util-is@6.0.0: dependencies: '@types/unist': 3.0.3 @@ -7843,11 +7875,22 @@ snapshots: dependencies: '@types/unist': 3.0.3 + unist-util-visit-parents@5.1.3: + dependencies: + '@types/unist': 2.0.11 + unist-util-is: 5.2.1 + unist-util-visit-parents@6.0.1: dependencies: '@types/unist': 3.0.3 unist-util-is: 6.0.0 + unist-util-visit@4.1.2: + dependencies: + '@types/unist': 2.0.11 + unist-util-is: 5.2.1 + unist-util-visit-parents: 5.1.3 + unist-util-visit@5.0.0: dependencies: '@types/unist': 3.0.3 diff --git a/src/components/MobileHeader.astro b/src/components/MobileHeader.astro index b1a94da..3170fbc 100644 --- a/src/components/MobileHeader.astro +++ b/src/components/MobileHeader.astro @@ -19,7 +19,7 @@ const marginBottom = { ---
-

+

-

+ {headerSubtitle && (
{/* post title */} - - {post.data.title} - +

+ + {post.data.title} + +

{/* mobile post time */}
`—`
` elements represent six levels of section headings. `

` is the highest section level while `

` is the lowest. -# H1 +# Heading 1 Preview -## H2 +## Heading 2 Preview -### H3 +### Heading 3 Preview -#### H4 +#### Heading 4 Preview -##### H5 +##### Heading 5 Preview -###### H6 +###### Heading 6 Preview ## Paragraph diff --git a/src/content/posts/Theme Guide-ja.md b/src/content/posts/Theme Guide-ja.md index aded0c9..6c9709b 100644 --- a/src/content/posts/Theme Guide-ja.md +++ b/src/content/posts/Theme Guide-ja.md @@ -8,4 +8,4 @@ lang: ja abbrlink: theme-guide --- -Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/)フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。 +Retypesetは、日本語では「再組版」と呼ばれる、[Astro](https://astro.build/) フレームワークをベースにした静的ブログテーマです。[活版印字](https://astro-theme-typography.vercel.app/)からデザインのインスピレーションを得て、新しい視覚的な規範を確立し、すべてのページのレイアウトを再構成することで、紙の書籍のような読書体験を提供し、版面の美しさを蘇らせます。見るものすべてが細部にこだわり、限られたスペースの中に優雅さを表現しています。 diff --git a/src/content/posts/Theme Guide-zh-tw.md b/src/content/posts/Theme Guide-zh-tw.md index 82f91f8..d7393b3 100644 --- a/src/content/posts/Theme Guide-zh-tw.md +++ b/src/content/posts/Theme Guide-zh-tw.md @@ -8,4 +8,4 @@ lang: zh-tw abbrlink: theme-guide --- -Retypeset 是一款基於[Astro](https://astro.build/)框架的靜態部落格主題，中文名為重新編排。本主題以[活版印字](https://astro-theme-typography.vercel.app/)為設計靈感，通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。 +Retypeset 是一款基於 [Astro](https://astro.build/) 框架的靜態部落格主題，中文名為重新編排。本主題以[活版印字](https://astro-theme-typography.vercel.app/)為設計靈感，通過建立全新的視覺規範，對所有頁面進行重新編排，打造紙質書頁般的閱讀體驗，再現版式之美。所見皆為細節，方寸盡顯優雅。 diff --git a/src/content/posts/Theme Guide-zh.md b/src/content/posts/Theme Guide-zh.md index 6aeee99..88dbe66 100644 --- a/src/content/posts/Theme Guide-zh.md +++ b/src/content/posts/Theme Guide-zh.md @@ -8,4 +8,4 @@ lang: zh abbrlink: theme-guide --- -Retypeset 是一款基于[Astro](https://astro.build/)框架的静态博客主题，中文名为重新编排。本主题以[活版印字](https://astro-theme-typography.vercel.app/)为设计灵感，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。 +Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，中文名为重新编排。本主题以[活版印字](https://astro-theme-typography.vercel.app/)为设计灵感，通过建立全新的视觉规范，对所有页面进行重新编排，打造纸质书页般的阅读体验，再现版式之美。所见皆为细节，方寸尽显优雅。 diff --git a/src/styles/heti.css b/src/styles/heti.css index e8a2f67..180cbae 100644 --- a/src/styles/heti.css +++ b/src/styles/heti.css @@ -3,34 +3,70 @@ * URL:https://github.com/sivan/heti * Author:Sivan [sun.sivan@gmail.com] */ + +/*! + * .heti = CJK text + * .heti not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) = non-CJK text + */ + + /* Global setting */ .heti { - line-height:1.5; - overflow-wrap:break-word; - word-wrap:break-word; - hyphens:auto; - letter-spacing:.02em + --at-apply: 'leading-1.5em break-words hyphens-auto tracking-0.02em'; } .heti:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) { - letter-spacing: 0; - hyphens: none; - line-height: 1.4; + --at-apply: 'leading-1.4em tracking-0'; } -.heti::before,.heti::after { - content:""; - display:table -} -.heti::after { - clear:both -} -.heti>*:first-child,.heti section>*:first-child,.heti td>*:first-child { - margin-block-start:0 !important -} -.heti>*:last-child,.heti section>*:last-child,.heti td>*:last-child { - margin-block-end:0 !important + +/* Common tags style */ +.heti p { + --at-apply: 'mb-6 text-justify'; } .heti a { - --at-apply: 'underline mx-0.25em decoration-secondary/25 font-medium underline-0.075em underline-offset-0.2em hover:(c-primary decoration-secondary/75 transition) lg:underline-0.1em'; + --at-apply: 'mx-0.15em font-medium transition-colors hover:(c-primary decoration-secondary/60) '; + --at-apply: 'underline decoration-secondary/25 underline-0.075em underline-offset-0.2em lg:underline-0.1em'; } + +/* Heading style */ +.heti .post-title { + --at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance mbs-0'; +} +.heti h1 { + --at-apply: 'text-8'; +} +.heti h2 { + --at-apply: 'text-6'; +} +.heti h3 { + --at-apply: 'text-5'; +} +.heti h4 { + --at-apply: 'text-4.5'; +} +.heti h5 { + --at-apply: 'text-4'; +} +.heti h6 { + --at-apply: 'text-3.5'; +} + +.heti h1,.heti h2,.heti h3 { + --at-apply: 'tracking-0.04em'; +} +.heti h1:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)), +.heti h2:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)), +.heti h3:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) { + --at-apply: 'tracking-0'; +} + +.heti h1,.heti h2,.heti h3,.heti h4,.heti h5,.heti h6 { + --at-apply: 'font-semibold mt-6 mb-3'; +} +/* .heti h1+h2 { + --at-apply: 'mbs-4.5'; +} +.heti h2+h3,.heti h3+h4,.heti h4+h5,.heti h5+h6 { + --at-apply: 'mbs-3'; +} */ .heti blockquote { margin-block-start:12px; margin-block-end:24px; @@ -74,16 +110,12 @@ background-color:#404040 } } -.heti p { - margin-block-start:12px; - margin-block-end:24px; - text-align:justify -} + .heti p:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)) { text-align:start } .heti pre { - --at-apply: 'bg-primary/3!'; + --at-apply: 'bg-secondary/8! scrollbar-hidden'; margin-block-start:12px; margin-block-end:12px; margin-inline-start:0; @@ -98,10 +130,10 @@ border-radius:4px; } html.dark .heti pre { - --at-apply: 'bg-primary/3!'; + --at-apply: 'bg-secondary/8!'; } html.dark .astro-code span { - --at-apply: 'bg-primary/0!'; + --at-apply: 'bg-secondary/0!'; } .heti pre code { margin:0; @@ -112,50 +144,8 @@ html.dark .astro-code span { .heti a,.heti abbr,.heti code,.heti heti-spacing,.heti [lang=en-US] { letter-spacing:normal } -.heti h1,.heti h2,.heti h3,.heti h4,.heti h5,.heti h6 { - position:relative; - margin:0; - margin-block-start:24px; - margin-block-end:12px; - font-weight:600 -} -.heti .post-title { - --at-apply: 'c-primary mb-2 font-bold text-9 leading-12 text-balance mbs-0'; -} -.heti h1 { - --at-apply: 'mb-6'; - font-size:32px; - line-height:48px -} -.heti h2 { - font-size:24px; - line-height:36px -} -.heti h3 { - font-size:20px; - line-height:36px -} -.heti h4 { - font-size:18px; - line-height:24px -} -.heti h5 { - font-size:16px; - line-height:24px -} -.heti h6 { - font-size:14px; - line-height:24px -} -.heti h1,.heti h2,.heti h3 { - letter-spacing:.05em -} -.heti h1:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti h1:not(:lang(zh)),.heti h2:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti h2:not(:lang(zh)),.heti h3:not(:lang(zh-CN)):not(:lang(zh-TW)):not(:lang(ja-JP)):not(:lang(ko-KR)),.heti h3:not(:lang(zh)) { - letter-spacing:0 -} -.heti h1+h2,.heti h2+h3,.heti h3+h4,.heti h4+h5,.heti h5+h6 { - margin-block-start:12px -} + + .heti ul,.heti ol,.heti dl { margin-block-start:12px; margin-block-end:24px