feat: working table of contents
This commit is contained in:
grassblock
parent
29b1fa4afb
commit
856a8f2795
5 changed files with 98 additions and 34 deletions
|
|
@ -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()],
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
29
pnpm-lock.yaml
generated
29
pnpm-lock.yaml
generated
|
|
@ -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: {}
|
||||
|
|
|
|||
92
src/components/TableOfContents.astro
Normal file
92
src/components/TableOfContents.astro
Normal file
|
|
@ -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 <h1>
|
||||
if (heading.depth === 2) {
|
||||
toc.push(heading);
|
||||
} else {
|
||||
parentHeadings.get(heading.depth - 1)?.subheadings.push(heading);
|
||||
}
|
||||
});
|
||||
return toc;
|
||||
}
|
||||
|
||||
const toc = buildHierarchy(filteredHeadings);
|
||||
---
|
||||
<details>
|
||||
<summary>Table of Contents</summary>
|
||||
<ul class="toc-list">
|
||||
{
|
||||
toc.map((heading) => (
|
||||
<li class={`depth-${heading.depth}`} style={`margin-left: ${(heading.depth - 1)}rem;`}>
|
||||
<a href={`#${heading.slug}`}>{heading.text}</a>
|
||||
{
|
||||
heading.subheadings.length > 0 && (
|
||||
<ul>
|
||||
{
|
||||
heading.subheadings.map((subheading) => (
|
||||
<li class={`depth-${subheading.depth}`} style={`margin-left: ${(subheading.depth - 1)}rem;`}>
|
||||
<a href={`#${subheading.slug}`}>{subheading.text}</a>
|
||||
{subheading.subheadings.length > 0 && (
|
||||
<ul>
|
||||
{
|
||||
subheading.subheadings.map((subSubheading) => (
|
||||
<li class={`depth-${subSubheading.depth}`} style={`margin-left: ${(subSubheading.depth - 1)}rem;`}>
|
||||
<a href={`#${subSubheading.slug}`}>{subSubheading.text}</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
<style>
|
||||
details {
|
||||
margin: 0.5rem auto;
|
||||
}
|
||||
.toc-list {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.depth-1 {
|
||||
font-weight: bold;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.depth-2 {
|
||||
font-weight: 500;
|
||||
}
|
||||
.depth-3 {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -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 || `
|
|||
<h1 class="title">{entry.data.title}</h1>
|
||||
<AuthorInfo data={authorData} />
|
||||
<span class="date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
|
||||
{headings.length !== 0 && <TableOfContents headings={headings} />}
|
||||
<div class="content">
|
||||
<Content />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue