Skip to content

Commit e23e35d

Browse files
author
Ahmad Awais ⚡️
authored
feat: Table of Content & Auto-links for Headings (nodejs#186)
* feat: Add tableOfContents * feat: Add Auto links for Headings * feat: Add gatsby-remark-autolink-headers * feat: Add tableOfContents * refactor: Headings on Mobile * style: TOC * style: The autolink-headers * refactor: CSS Formatting * fix: Yarn update * fix: Scripts npm to yarn * fix: Explicit display for Firefox * fix: Remove formatting * fix: No margin in TOC * fix: No need for important tag * fix: Revert formatting * fix: Revert formatting * style: Fill color for header links * feat: New TOC component * style: Fix a11y for colors * feat: Update snapshots script * fix: A11y color * fix: Jest snapshot update FIXES: #18 FIXES: #26
1 parent 7b1db22 commit e23e35d

10 files changed

Lines changed: 106 additions & 26 deletions

File tree

‎gatsby-config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,16 @@ module.exports = {
4949
resolve: 'gatsby-transformer-remark',
5050
options: {
5151
plugins: [
52+
{
53+
resolve: `gatsby-remark-autolink-headers`,
54+
options: {
55+
offsetY: `125`,
56+
icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`,
57+
className: `autolink-headers`,
58+
maintainCase: false,
59+
removeAccents: true,
60+
},
61+
},
5262
{
5363
resolve: `gatsby-remark-prismjs`,
5464
options: {

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"gatsby-plugin-sharp": "^2.0.17",
2121
"gatsby-plugin-sitemap": "^2.0.5",
2222
"gatsby-plugin-typescript": "^2.0.0",
23+
"gatsby-remark-autolink-headers": "^2.0.15",
2324
"gatsby-remark-images": "^3.0.1",
2425
"gatsby-remark-prismjs": "^3.2.0",
2526
"gatsby-source-contentful": "^2.0.1",
@@ -45,8 +46,10 @@
4546
"format": "prettier --write '**/*.{ts,tsx,js}'",
4647
"format-check": "prettier --check '**/*.{ts,tsx,js}'",
4748
"jest": "jest",
49+
"snapshot": "jest --updateSnapshot",
4850
"test": "yarn format-check && yarn tslint && yarn jest",
49-
"tslint": "tslint --project ./tsconfig.json"
51+
"tslint": "tslint --project ./tsconfig.json",
52+
"serve": "yarn run build && clear && gatsby serve"
5053
},
5154
"devDependencies": {
5255
"@babel/core": "^7.3.3",

‎src/components/article.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React from 'react';
22
import { PaginationInfo } from '../types';
3-
import Pagination from './pagination';
4-
import EditLink from './edit-link';
53
import AuthorLink from './author-link';
4+
import EditLink from './edit-link';
5+
import Pagination from './pagination';
6+
import TOC from './toc';
67

78
type Props = {
89
title: string;
910
html: string;
11+
tableOfContents: string;
1012
authors: string[];
1113
relativePath: string;
1214
next?: PaginationInfo;
@@ -16,13 +18,15 @@ type Props = {
1618
const Article = ({
1719
title,
1820
html,
21+
tableOfContents,
1922
previous,
2023
next,
2124
relativePath,
2225
authors,
2326
}: Props) => (
2427
<article className="article-reader">
2528
<h1 className="article-reader__headline">{title}</h1>
29+
<TOC heading="TABLE OF CONTENTS" tableOfContents={tableOfContents} />
2630
<div dangerouslySetInnerHTML={{ __html: html }} />
2731
<div
2832
style={{

‎src/components/layout.css‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -412,28 +412,22 @@ main {
412412
.article-reader h5,
413413
.article-reader h6 {
414414
font-family: var(--sans-serif);
415+
margin-bottom: 0.1rem;
416+
position: relative;
417+
}
418+
419+
.article-reader h1 {
415420
margin-bottom: 2.8rem;
416421
}
417422

418-
.hero h1,
419-
.article-reader h1,
420-
.article-reader h2,
421-
.article-reader h3 {
423+
.hero h1 {
422424
cursor: pointer;
423425
}
424426

425-
.hero h1::before,
426-
.article-reader h1::before,
427-
.article-reader h2::before,
428-
.article-reader h3::before {
429-
color: var(--orange3);
430-
content: "#";
431-
display: inline-block;
432-
font-weight: 800;
433-
margin-left: -4.2rem;
434-
padding-right: 1.2rem;
435-
text-align: right;
436-
width: 3.0rem;
427+
.article-reader h2,
428+
.article-reader h3 {
429+
border-bottom: 1px solid #eaecef;
430+
padding-bottom: 0.1rem;
437431
}
438432

439433
.article-reader h1 { font-size: 4.8rem; }
@@ -528,3 +522,31 @@ main {
528522
top: 2000px;
529523
width: 3px;
530524
}
525+
526+
/* TOC */
527+
details,
528+
.toc {
529+
cursor: pointer;
530+
}
531+
.toc h6 {
532+
display: inline-block;
533+
margin: 0;
534+
}
535+
.toc a {
536+
font-family: var(--sans-serif);
537+
text-decoration: none;
538+
border-bottom: 1px dotted var(--gray3);
539+
}
540+
541+
.toc li p {
542+
margin: 0;
543+
}
544+
545+
/* 3rd Party plugin styles. */
546+
/* Styles for gatsby-remark-autolink-headers plugin*/
547+
548+
.autolink-headers {
549+
position: absolute;
550+
left: -4px;
551+
fill: var(--green8);
552+
}

‎src/components/mobile.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -170,9 +170,9 @@
170170
}
171171

172172

173-
.article-reader h1 { font-size: 3.2rem; padding-left: 3.2rem; }
174-
.article-reader h2 { font-size: 2.8rem; padding-left: 2.8rem; }
175-
.article-reader h3 { font-size: 2.4rem; padding-left: 2.4rem; }
173+
.article-reader h1 { font-size: 3.2rem; }
174+
.article-reader h2 { font-size: 2.8rem; }
175+
.article-reader h3 { font-size: 2.4rem; }
176176
.article-reader h4 { font-size: 2.2rem; }
177177
.article-reader h5 { font-size: 2.0rem; }
178178
.article-reader h6 {

‎src/components/toc.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
3+
type Props = {
4+
heading: string;
5+
tableOfContents: string;
6+
};
7+
8+
const TOC = ({ heading, tableOfContents }: Props) => {
9+
if (!tableOfContents) {
10+
return null;
11+
}
12+
13+
return (
14+
<details className="toc">
15+
<summary>
16+
<h6>{heading}</h6>
17+
</summary>
18+
<div dangerouslySetInnerHTML={{ __html: tableOfContents }} />
19+
</details>
20+
);
21+
};
22+
23+
export default TOC;

‎src/templates/learn.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React from 'react';
21
import { graphql } from 'gatsby';
3-
import { LearnPageData, LearnPageContext } from '../types';
4-
import Layout from '../components/layout';
5-
import Hero from '../components/hero';
2+
import React from 'react';
63
import Article from '../components/article';
4+
import Hero from '../components/hero';
5+
import Layout from '../components/layout';
76
import Navigation from '../components/navigation';
7+
import { LearnPageContext, LearnPageData } from '../types';
88

99
type Props = {
1010
data: LearnPageData;
@@ -16,6 +16,7 @@ export default ({
1616
doc: {
1717
frontmatter: { title, description },
1818
html,
19+
tableOfContents,
1920
fields: { authors },
2021
},
2122
},
@@ -28,6 +29,7 @@ export default ({
2829
<Article
2930
title={title}
3031
html={html}
32+
tableOfContents={tableOfContents}
3133
next={next}
3234
authors={authors}
3335
previous={previous}
@@ -42,6 +44,7 @@ export const query = graphql`
4244
doc: markdownRemark(fields: { slug: { eq: $slug } }) {
4345
id
4446
html
47+
tableOfContents
4548
frontmatter {
4649
title
4750
description

‎src/types/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export interface LearnPageData {
1717
doc: {
1818
id: string;
1919
html: string;
20+
tableOfContents: string;
2021
frontmatter: {
2122
title: string;
2223
description: string;

‎test/components/__snapshots__/article.test.tsx.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ exports[`Article component renders correctly 1`] = `
99
>
1010
test-title
1111
</h1>
12+
<TOC
13+
heading="TABLE OF CONTENTS"
14+
/>
1215
<div
1316
dangerouslySetInnerHTML={
1417
Object {

‎yarn.lock‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5298,6 +5298,17 @@ gatsby-react-router-scroll@^2.0.2:
52985298
scroll-behavior "^0.9.9"
52995299
warning "^3.0.0"
53005300

5301+
gatsby-remark-autolink-headers@^2.0.15:
5302+
version "2.0.15"
5303+
resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-2.0.15.tgz#f52bfa6ffe4d210a377cc8dc6b0da3726e5f4e74"
5304+
integrity sha512-4UXgE9ecn5aysz4d/kEIOoovYTITiUHIIM0jSeY8i3jh/dEPvsa4DP3w8lmUNznAInMJgTw76rz99DeVfEgJyw==
5305+
dependencies:
5306+
"@babel/runtime" "^7.0.0"
5307+
github-slugger "^1.1.1"
5308+
lodash "^4.17.11"
5309+
mdast-util-to-string "^1.0.2"
5310+
unist-util-visit "^1.3.0"
5311+
53015312
gatsby-remark-images@^3.0.1:
53025313
version "3.0.1"
53035314
resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-3.0.1.tgz#01ac72451841ba5b82b9b260fe99ffca005c1eb4"

0 commit comments

Comments
 (0)