diff --git a/astro.config.mjs b/astro.config.mjs index ea1607a..5b7752d 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,9 +21,6 @@ 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 c42ec2d..b409a5e 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "@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 69bc3ba..320fe3a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,9 +32,6 @@ 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 @@ -1025,9 +1022,6 @@ 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==} @@ -2130,9 +2124,6 @@ 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==} @@ -2631,9 +2622,6 @@ 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'} @@ -4220,8 +4208,6 @@ snapshots: '@types/tmp@0.0.33': {} - '@types/ungap__structured-clone@1.2.0': {} - '@types/unist@2.0.11': {} '@types/unist@3.0.3': {} @@ -5620,16 +5606,6 @@ 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: {} @@ -6351,11 +6327,6 @@ 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 new file mode 100644 index 0000000..6e91d7c --- /dev/null +++ b/src/components/TableOfContents.astro @@ -0,0 +1,92 @@ +--- +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/pages/post/[...slug].astro b/src/pages/post/[...slug].astro index da2b02a..9516bca 100644 --- a/src/pages/post/[...slug].astro +++ b/src/pages/post/[...slug].astro @@ -1,5 +1,6 @@ --- import Layout from '../../layouts/Layout.astro'; + import { getCollection, getEntry } from 'astro:content'; import Comments from "../../components/Comments.astro"; import {getImage} from "astro:assets"; @@ -7,6 +8,7 @@ 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'); @@ -17,6 +19,8 @@ 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}; @@ -48,6 +52,7 @@ const cover = customFeaturedImage || matchedImage_src?.src || firstImageURL || `

{entry.data.title}

{new Date(entry.data.pubDate).toISOString().split('T')[0]} + {headings.length !== 0 && }