diff --git a/astro.config.mjs b/astro.config.mjs index 5b7752d..ea1607a 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -3,7 +3,7 @@ import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; import mdx from '@astrojs/mdx'; - +import remarkToc from 'remark-toc'; import cloudflare from '@astrojs/cloudflare'; @@ -21,6 +21,9 @@ export default defineConfig({ theme: 'nord', wrap: true }, + remarkPlugins: [ + [remarkToc, { heading: 'Contents', maxDepth: 3 }] + ] }, integrations: [sitemap(), mdx()], diff --git a/package.json b/package.json index b409a5e..c42ec2d 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@fontsource-variable/jetbrains-mono": "^5.2.5", "astro": "^5.2.5", "ico-endec": "^0.1.6", + "remark-toc": "^9.0.0", "sharp": "^0.34.1", "ultrahtml": "^1.6.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 320fe3a..69bc3ba 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: ico-endec: specifier: ^0.1.6 version: 0.1.6 + remark-toc: + specifier: ^9.0.0 + version: 9.0.0 sharp: specifier: ^0.34.1 version: 0.34.1 @@ -1022,6 +1025,9 @@ packages: '@types/tmp@0.0.33': resolution: {integrity: sha512-gVC1InwyVrO326wbBZw+AO3u2vRXz/iRWq9jYhpG4W8LXyIgDv3ZmcLQ5Q4Gs+gFMyqx+viFoFT+l3p61QFCmQ==} + '@types/ungap__structured-clone@1.2.0': + resolution: {integrity: sha512-ZoaihZNLeZSxESbk9PUAPZOlSpcKx81I1+4emtULDVmBLkYutTcMlCj2K9VNlf9EWODxdO6gkAqEaLorXwZQVA==} + '@types/unist@2.0.11': resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} @@ -2124,6 +2130,9 @@ packages: mdast-util-to-string@4.0.0: resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==} + mdast-util-toc@7.1.0: + resolution: {integrity: sha512-2TVKotOQzqdY7THOdn2gGzS9d1Sdd66bvxUyw3aNpWfcPXCLYSJCCgfPy30sEtuzkDraJgqF35dzgmz6xlvH/w==} + mdn-data@2.12.2: resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==} @@ -2622,6 +2631,9 @@ packages: remark-stringify@11.0.0: resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==} + remark-toc@9.0.0: + resolution: {integrity: sha512-KJ9txbo33GjDAV1baHFze7ij4G8c7SGYoY8Kzsm2gzFpbhL/bSoVpMMzGa3vrNDSWASNd/3ppAqL7cP2zD6JIA==} + require-directory@2.1.1: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} @@ -4208,6 +4220,8 @@ snapshots: '@types/tmp@0.0.33': {} + '@types/ungap__structured-clone@1.2.0': {} + '@types/unist@2.0.11': {} '@types/unist@3.0.3': {} @@ -5606,6 +5620,16 @@ snapshots: dependencies: '@types/mdast': 4.0.4 + mdast-util-toc@7.1.0: + dependencies: + '@types/mdast': 4.0.4 + '@types/ungap__structured-clone': 1.2.0 + '@ungap/structured-clone': 1.3.0 + github-slugger: 2.0.0 + mdast-util-to-string: 4.0.0 + unist-util-is: 6.0.0 + unist-util-visit: 5.0.0 + mdn-data@2.12.2: {} merge-stream@2.0.0: {} @@ -6327,6 +6351,11 @@ snapshots: mdast-util-to-markdown: 2.1.2 unified: 11.0.5 + remark-toc@9.0.0: + dependencies: + '@types/mdast': 4.0.4 + mdast-util-toc: 7.1.0 + require-directory@2.1.1: {} requires-port@1.0.0: {} diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro deleted file mode 100644 index 6e91d7c..0000000 --- a/src/components/TableOfContents.astro +++ /dev/null @@ -1,92 +0,0 @@ ---- -import type { MarkdownHeading } from 'astro'; - -interface Props { - headings: MarkdownHeading[]; -} - -const { headings } = Astro.props; - - -const filteredHeadings = headings.filter((heading) => heading.depth <= 3); - -// github.com/rezahedi/rezahedi.dev/blob/main/src/components/TOC.astro -function buildHierarchy(headings: MarkdownHeading[]) { - const toc: any[] = []; - const parentHeadings = new Map(); - - if (!headings) - return toc; - - headings.forEach((h: any) => { - const heading = { ...h, subheadings: [] }; - parentHeadings.set(heading.depth, heading); - // Change 2 to 1 if your markdown includes your

- if (heading.depth === 2) { - toc.push(heading); - } else { - parentHeadings.get(heading.depth - 1)?.subheadings.push(heading); - } - }); - return toc; -} - -const toc = buildHierarchy(filteredHeadings); ---- -
- Table of Contents - -
- - - diff --git a/src/components/shortcodes/Callout.astro b/src/components/shortcodes/Callout.astro index 9617c89..51d1cc6 100644 --- a/src/components/shortcodes/Callout.astro +++ b/src/components/shortcodes/Callout.astro @@ -40,10 +40,4 @@ const { icon, type = 'info'} = Astro.props; --callout-bg: var(--terminal-red); --callout-text: #111; } - - @media (prefers-color-scheme: light) { - :root:not([data-theme="dark"]) .callout-info { - --callout-text: #eee; - } - } \ No newline at end of file diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro index 9516bca..da2b02a 100644 --- a/src/pages/post/[...slug].astro +++ b/src/pages/post/[...slug].astro @@ -1,6 +1,5 @@ --- import Layout from '../../layouts/Layout.astro'; - import { getCollection, getEntry } from 'astro:content'; import Comments from "../../components/Comments.astro"; import {getImage} from "astro:assets"; @@ -8,7 +7,6 @@ import {siteConfig} from "../../config"; import ReplyViaEmail from "../../components/ReplyViaEmail.astro"; import { ExtractFirstImage } from '../../plugins/extract-images'; import AuthorInfo from "../../components/helper/authors/Info.astro"; -import TableOfContents from "../../components/TableOfContents.astro"; export async function getStaticPaths() { const blogEntries = await getCollection('posts'); @@ -19,8 +17,6 @@ export async function getStaticPaths() { const { entry } = Astro.props; const { Content } = await entry.render(); -const headings = await entry.render().then(rendered => rendered.headings); - const noscript = siteConfig.noClientJavaScript const slug = Astro.params.slug; const author = entry.data.author || {collection: 'authors', id: siteConfig.defaultAuthor.id}; @@ -52,7 +48,6 @@ const cover = customFeaturedImage || matchedImage_src?.src || firstImageURL || `

{entry.data.title}

{new Date(entry.data.pubDate).toISOString().split('T')[0]} - {headings.length !== 0 && }
diff --git a/src/styles/global.css b/src/styles/global.css index 19555c0..476c9e7 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -192,7 +192,7 @@ h1.title { margin-bottom: 0.5rem; } div.content { - margin: 1rem auto; + margin-bottom: 2rem; span.date { color: var(--secondary-text-color); font-size: 0.9rem; @@ -230,35 +230,11 @@ div.content { background-color: #3b4252 !important; } - table { - border-collapse: collapse; - } - - table, - th, - td { - border: 1px dashed var(--secondary-text-color); - padding: 10px; - } - h1, h2, h3, h4 { margin: 0.5rem 0; line-height: 1.3; } - a { - text-decoration: underline 1px; - } - - blockquote { - border-left: 1px solid var(--accent-color); - color: var(--text-color); - padding: 20px; - font-style: italic; - margin-left: 0; - margin-right: 0; - } - /* Responsive Images */ img { max-width: 100%;