Table of Contents component
This commit is contained in:
parent
038cc6e3c2
commit
a4bf1bb37a
|
@ -1,4 +1,5 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({});
|
||||
|
|
BIN
public/favicon-16x16.png
Normal file
BIN
public/favicon-16x16.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 887 B |
BIN
public/favicon-32x32.png
Normal file
BIN
public/favicon-32x32.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.6 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
|
@ -1,9 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
Before Width: | Height: | Size: 749 B |
52
src/components/Toc.astro
Normal file
52
src/components/Toc.astro
Normal file
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
interface Props {
|
||||
headings: Array<{
|
||||
depth: number;
|
||||
slug: string;
|
||||
text: string;
|
||||
}>
|
||||
}
|
||||
|
||||
type Heading = Props['headings'][number];
|
||||
type Nested = Heading & { children?: Heading[] };
|
||||
|
||||
const { headings } = Astro.props;
|
||||
|
||||
function fold(headings: Heading[]) {
|
||||
const toc = [] as Nested[];
|
||||
const map = new Map<number, Nested>();
|
||||
for (const h of headings) {
|
||||
const heading = { ...h };
|
||||
map.set(heading.depth, heading);
|
||||
if (heading.depth === 2)
|
||||
toc.push(heading)
|
||||
else {
|
||||
const backref = map.get(heading.depth - 1)!;
|
||||
backref.children
|
||||
? backref.children.push(heading)
|
||||
: backref.children = [heading];
|
||||
}
|
||||
}
|
||||
return toc;
|
||||
}
|
||||
---
|
||||
|
||||
<section class="p-toc">
|
||||
<h2>Content</h2>
|
||||
<nav id="TableOfContents">
|
||||
<ul>
|
||||
{fold(headings).map(heading => (
|
||||
<li>
|
||||
<a href={`#${heading.slug}`}>{heading.text}</a>
|
||||
{heading.children && (
|
||||
<ul>
|
||||
{heading.children?.map((child: any) => (
|
||||
<li><a href={`#${heading.slug}`}>{heading.text}</a></li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
</section>
|
|
@ -2,21 +2,34 @@
|
|||
import dayjs from "dayjs";
|
||||
import Base from "./Base.astro";
|
||||
import Header from "../components/headers/Article.astro";
|
||||
import Toc from "../components/Toc.astro";
|
||||
|
||||
const {frontmatter} = Astro.props;
|
||||
interface Props {
|
||||
headings: any[],
|
||||
frontmatter: {
|
||||
title: string;
|
||||
date: string;
|
||||
tags: string[];
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
headings,
|
||||
frontmatter: {
|
||||
title,
|
||||
date,
|
||||
tags,
|
||||
}} = Astro.props;
|
||||
---
|
||||
<Base>
|
||||
<main class="l-article">
|
||||
<aside class="l-article__aside">
|
||||
<div class="l-article__toc">
|
||||
<!-- {%- include "partials/toc.html" -%} -->
|
||||
<Toc headings={headings} />
|
||||
</div>
|
||||
</aside>
|
||||
<article class="l-article__article marker readable">
|
||||
<Header
|
||||
title={frontmatter.title}
|
||||
date={dayjs(frontmatter.date)}
|
||||
tags={frontmatter.tags}/>
|
||||
<Header title={title} date={dayjs(date)} tags={tags}/>
|
||||
<div class="markdown">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
@ -1,11 +1,10 @@
|
|||
---
|
||||
import Base from "./Base.astro";
|
||||
|
||||
|
||||
const notice = {
|
||||
header: "Hello!",
|
||||
header: "Website ported to Astro 2!",
|
||||
content: [
|
||||
"Test"
|
||||
"Third time's a charm, so hopefully this time it will last longer. So far Astro looks really cool."
|
||||
]
|
||||
};
|
||||
---
|
||||
|
|
Loading…
Reference in a new issue