on master help sign in
Markdown: add support for heading ids
commit6ab8c367058c8283e3f6a45bc8557ea77c7ce49f authorMatilde Park <matilde@tlon.io> dateTue 29 Jun 2021, 16:36 (5 years ago) parent769ea63
3 files changed+71
components/Markdown.js+7 package-lock.json+62 package.json+2
components/Markdown.js+7
@@ -2,6 +2,8 @@ import markdownStyles from "../styles/markdown.module.css";
22import unified from "unified";
33import parse from "remark-parse";
44import remark2react from "remark-react";
5+import slug from "remark-slug";
6+import heading from "remark-heading-id";
57
68function P({ children }) {
79 return <p className="leading-snug">{children}</p>;
@@ -21,6 +23,9 @@ const options = {
2123 img: Img,
2224 // p: P,
2325 },
26+ sanitize: {
27+ clobberPrefix: "",
28+ },
2429};
2530
2631// Converts markdown strings into markdown HTML/React components
@@ -30,6 +35,8 @@ export default function Markdown({ post }) {
3035 {
3136 unified()
3237 .use(parse)
38+ .use(slug)
39+ .use(heading)
3340 .use(remark2react, options)
3441 .processSync(post.content).result
3542 }
package-lock.json+62
@@ -2494,6 +2494,11 @@
24942494 }
24952495 }
24962496 },
2497+ "emoji-regex": {
2498+ "version": "6.1.1",
2499+ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.1.1.tgz",
2500+ "integrity": "sha1-xs0OwbBkLio8Z6ETfvxeeW2k+I4="
2501+ },
24972502 "emojis-list": {
24982503 "version": "2.1.0",
24992504 "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
@@ -2837,6 +2842,14 @@
28372842 "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
28382843 "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4="
28392844 },
2845+ "github-slugger": {
2846+ "version": "1.3.0",
2847+ "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.3.0.tgz",
2848+ "integrity": "sha512-gwJScWVNhFYSRDvURk/8yhcFBee6aFjye2a7Lhb2bUyRulpIoek9p0I9Kt7PT67d/nUlZbFu8L9RLiA0woQN8Q==",
2849+ "requires": {
2850+ "emoji-regex": ">=6.0.0 <=6.1.1"
2851+ }
2852+ },
28402853 "glob": {
28412854 "version": "7.1.7",
28422855 "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
@@ -4973,6 +4986,14 @@
49734986 "unified": "^9.1.0"
49744987 }
49754988 },
4989+ "remark-heading-id": {
4990+ "version": "1.0.0",
4991+ "resolved": "https://registry.npmjs.org/remark-heading-id/-/remark-heading-id-1.0.0.tgz",
4992+ "integrity": "sha512-86QaOiL+8jTV9P5Y0S25kSIcykCd/XmnqiFltWZRWKHmsVT4sevN7QJnkpUjkCJUpIeWte/LYH7pVlCTGz89fw==",
4993+ "requires": {
4994+ "unist-util-visit": "^1.4.0"
4995+ }
4996+ },
49764997 "remark-html": {
49774998 "version": "13.0.1",
49784999 "resolved": "https://registry.npmjs.org/remark-html/-/remark-html-13.0.1.tgz",
@@ -5002,6 +5023,47 @@
50025023 "mdast-util-to-hast": "^10.0.0"
50035024 }
50045025 },
5026+ "remark-slug": {
5027+ "version": "6.0.0",
5028+ "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-6.0.0.tgz",
5029+ "integrity": "sha512-ln67v5BrGKHpETnm6z6adlJPhESFJwfuZZ3jrmi+lKTzeZxh2tzFzUfDD4Pm2hRGOarHLuGToO86MNMZ/hA67Q==",
5030+ "requires": {
5031+ "github-slugger": "^1.0.0",
5032+ "mdast-util-to-string": "^1.0.0",
5033+ "unist-util-visit": "^2.0.0"
5034+ },
5035+ "dependencies": {
5036+ "mdast-util-to-string": {
5037+ "version": "1.1.0",
5038+ "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz",
5039+ "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A=="
5040+ },
5041+ "unist-util-is": {
5042+ "version": "4.1.0",
5043+ "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
5044+ "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg=="
5045+ },
5046+ "unist-util-visit": {
5047+ "version": "2.0.3",
5048+ "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
5049+ "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
5050+ "requires": {
5051+ "@types/unist": "^2.0.0",
5052+ "unist-util-is": "^4.0.0",
5053+ "unist-util-visit-parents": "^3.0.0"
5054+ }
5055+ },
5056+ "unist-util-visit-parents": {
5057+ "version": "3.1.1",
5058+ "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
5059+ "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
5060+ "requires": {
5061+ "@types/unist": "^2.0.0",
5062+ "unist-util-is": "^4.0.0"
5063+ }
5064+ }
5065+ }
5066+ },
50055067 "remark-stringify": {
50065068 "version": "9.0.1",
50075069 "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-9.0.1.tgz",
package.json+2
@@ -20,9 +20,11 @@
2020 "react-dom": "17.0.2",
2121 "react-hotkeys": "^2.0.0",
2222 "remark": "^13.0.0",
23+ "remark-heading-id": "^1.0.0",
2324 "remark-html": "^13.0.1",
2425 "remark-parse": "^9.0.0",
2526 "remark-react": "^8.0.0",
27+ "remark-slug": "^6.0.0",
2628 "toml": "^3.0.0",
2729 "unified": "^9.2.1"
2830 },