Comments (5)
TODO 3
Every post
should get an object with the Table of Contents, which is created out of the headers inside of the post
from next-markdown.
@dsumer regarding TODO3, we should use https://github.com/JS-DevTools/rehype-toc
This plugin (in addition to https://github.com/rehypejs/rehype-slug) turns this 👇
<html>
<body>
<h1>Apple Pie Recipe</h1>
<p>This is the world's best apple pie recipe...</p>
<div>
<h2>Filling</h2>
<p>The filling is the best part...</p>
<h3>Preparing the apples</h3>
<p>Cut the apples into 1/4 inch slices...</p>
<h3>Preparing the spice mix</h3>
<p>In a mixing bowl, combine sugar, cinnamon...</p>
</div>
<div>
<h2>Crust</h2>
<p>How to make the perfect flaky crust...</p>
<h3>Preparing the dough</h3>
<p>Combine flour, sugar, salt...</p>
<h3>The criss-cross top</h3>
<p>Cut the top crust into 1/2 inch strips...</p>
</div>
</body>
</html>
Into that (it adds a nav
element and id
attrs) 👇
<html>
<body>
<nav class="toc">
<ol class="toc-level toc-level-1">
<li class="toc-item toc-item-h1">
<a class="toc-link toc-link-h1" href="#apple-pie-recipe">
Apple Pie Recipe
</a>
<ol class="toc-level toc-level-2">
<li class="toc-item toc-item-h2">
<a class="toc-link toc-link-h2" href="#filling">
Filling
</a>
<ol class="toc-level toc-level-3">
<li class="toc-item toc-item-h3">
<a class="toc-link toc-link-h3" href="#preparing-the-apples">
Preparing the apples
</a>
</li>
<li class="toc-item toc-item-h3">
<a class="toc-link toc-link-h3" href="#preparing-the-spice-mix">
Preparing the spice mix
</a>
</li>
</ol>
</li>
<li class="toc-item toc-item-h2">
<a class="toc-link toc-link-h2" href="#crust">
Crust
</a>
<ol class="toc-level toc-level-3">
<li class="toc-item toc-item-h3">
<a class="toc-link toc-link-h3" href="#preparing-the-dough">
Preparing the dough
</a>
</li>
<li class="toc-item toc-item-h3">
<a class="toc-link toc-link-h3" href="#the-criss-cross-top">
The criss-cross top
</a>
</li>
</ol>
</li>
</ol>
</li>
</ol>
</nav>
<h1 id="apple-pie-recipe">Apple Pie Recipe</h1>
<p>This is the world's best apple pie recipe...</p>
<div>
<h2 id="filling">Filling</h2>
<p>The filling is the best part...</p>
<h3 id="preparing-the-apples">Preparing the apples</h3>
<p>Cut the apples into 1/4 inch slices...</p>
<h3 id="preparing-the-spice-mix">Preparing the spice mix</h3>
<p>In a mixing bowl, combine sugar, cinnamon...</p>
</div>
<div>
<h2 id="crust">Crust</h2>
<p>How to make the perfect flaky crust...</p>
<h3 id="preparing-the-dough">Preparing the dough</h3>
<p>Combine flour, sugar, salt...</p>
<h3 id="the-criss-cross-top">The criss-cross top</h3>
<p>Cut the top crust into 1/2 inch strips...</p>
</div>
</body>
</html>
from next-markdown.
Awesome, thank you @dsumer 🙏
You are 100% right with rehype-toc
as one of the main concept behind next-markdown
is "build your own layout". So we want to keep the generated HTML as light as possible.
However one should be able to use rehype-toc
if needed, that's why I have created #9.
from next-markdown.
I've added a PR for the Table of Contents: #8
I'm not sure regarding "rehype-toc" as it adds the table of contents automatically to the html output of the markdown, which is maybe not what every user wants?
from next-markdown.
I have been working on it last week and here is where I end with:
- extends to folder the "_" (= won't create a path) and "[...] " rules (= will be ignored ignore this when creating the path)
- export a new function:
getStaticPropsForNextmd(path: string[])
that does all the file parsing for you - also,
files
will be renamed intosubPaths
, meaning thatdocs/index.md
will list every path next todocs
.
I think these rules will make it easy to create your own getStaticProps
to fit your file structure.
from next-markdown.
Related Issues (8)
- feat (advanced): allow to flatten some directories for docs / blog classification purpose
- feat: optional catch all routes HOT 1
- load page error HOT 2
- feat: support mdx
- feat: enhance blog-aware rules to handle more use cases (blog, docs...) HOT 1
- Setup the project so it's easy to develop and test this nextjs library HOT 3
- feat (advanced): split next-markdown into smaller modules HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-markdown.