by Adam Kelly
How to easily create a table of contents for your Medium article
In this article, I’ll discuss how you can create a table of contents for your Medium post, and I’ll show you how I built the feature.
Table of Contents
Well, you can do one better. This is how to create a table of contents for your Medium article, automatically.
1. Get The URL
First, you need the URL of your Medium article. If it has been published, just grab the link from your address bar
If you are still writing, click the “share” button in the top right corner, and copy the link from there
2. Generate Your Table Of Contents
Now the easy bit. Go to www.mediumtoc.com and paste your URL in the input bar, and click “go.”
Then it should give you your contents, which you can copy and paste into your medium article!
You can see this in action at the top of this post.
How I Built This
I first designed the website in Sketch. I chose to take some design cues from the Medium website, with a serif font for the heading, and I also used the same button design.
I chose to use a https://material.io/guidelines/components/text-fields.html input bar, as the design is functional and minimalistic, the style I was going for.
The sites architecture is:
Back End: Express running on Now, although I plan to migrate to AWS Lambda, as there is only 1 API endpoint. The back end scrapes the headings from the Medium article and returns their links.
Front End Hosting / CDN: The site runs on Netlify, which has free SSL integration, and automatically deploys from the master branch on GitHub.
If anyone is interested in any of these topics, leave a comment and I will write more about them!
The website was designed and developed over the course of two days. The first day was focused on the back end of the site, and the design. The second day was the development. There are only 4 react components, and I chose not to use redux, as there is not very much changing in the state.
Get the source!
This is open source, so you can get all the code on github.com/adamisntdead/medium-toc. ✨
Big thanks to the freeCodeCamp community for their wonderful publication!