From e1e4f043af3e0e420be6f25266cdd0fa2a55c45a Mon Sep 17 00:00:00 2001 From: Sebastian Sdorra Date: Mon, 15 Apr 2024 14:12:32 +0200 Subject: [PATCH] docs(website): add anchor tags to headings and api parameters --- docs/04-migrate-from-contentlayer.mdx | 2 +- pnpm-lock.yaml | 97 +++++++++++++++++++++++---- website/content-collections.ts | 26 ++++++- website/package.json | 4 ++ 4 files changed, 113 insertions(+), 16 deletions(-) diff --git a/docs/04-migrate-from-contentlayer.mdx b/docs/04-migrate-from-contentlayer.mdx index 2091d554..aaf6c796 100644 --- a/docs/04-migrate-from-contentlayer.mdx +++ b/docs/04-migrate-from-contentlayer.mdx @@ -12,7 +12,7 @@ The concepts are similar, but there are some differences. ## Fields -Content Collections uses a [schema](/docs/main/configuration#collections) to define the fields of a collection. +Content Collections uses a [schema](/docs/main/configuration#schema) to define the fields of a collection. Computed fields can be added with the [transform](/docs/main/transform) function. ## Content diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a4777c4c..d3be7d1b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -857,6 +857,9 @@ importers: '@tailwindcss/typography': specifier: ^0.5.10 version: 0.5.10(tailwindcss@3.4.0) + '@types/hast': + specifier: ^3.0.4 + version: 3.0.4 '@types/node': specifier: ^20 version: 20.10.6 @@ -878,12 +881,21 @@ importers: eslint-config-next: specifier: 14.2.1 version: 14.2.1(eslint@8.56.0)(typescript@5.3.3) + github-slugger: + specifier: ^2.0.0 + version: 2.0.0 + hast-util-select: + specifier: ^6.0.2 + version: 6.0.2 hast-util-to-jsx-runtime: specifier: ^2.3.0 version: 2.3.0 postcss: specifier: ^8 version: 8.4.32 + rehype-slug: + specifier: ^6.0.0 + version: 6.0.0 shiki: specifier: 1.2.3 version: 1.2.3 @@ -5387,11 +5399,6 @@ packages: '@types/unist': 2.0.10 dev: true - /@types/hast@3.0.3: - resolution: {integrity: sha512-2fYGlaDy/qyLlhidX42wAH0KBi2TCjKMH8CHmBXgRlJ3Y+OXTiqsPQ6IWarZKwF1JoUcAJdPogv1d4b0COTpmQ==} - dependencies: - '@types/unist': 3.0.2 - /@types/hast@3.0.4: resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==} dependencies: @@ -6703,6 +6710,10 @@ packages: dependencies: safe-buffer: 5.1.2 + /bcp-47-match@2.0.3: + resolution: {integrity: sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==} + dev: true + /better-path-resolve@1.0.0: resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==} engines: {node: '>=4'} @@ -7463,6 +7474,10 @@ packages: nth-check: 2.1.1 dev: true + /css-selector-parser@3.0.5: + resolution: {integrity: sha512-3itoDFbKUNx1eKmVpYMFyqKX04Ww9osZ+dLgrk6GEv6KMVeXUhUnp4I5X+evw+u3ZxVU6RFXSSRxlTeMh8bA+g==} + dev: true + /css-tree@2.2.1: resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'} @@ -7802,6 +7817,11 @@ packages: path-type: 4.0.0 dev: true + /direction@2.0.1: + resolution: {integrity: sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==} + hasBin: true + dev: true + /dlv@1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} dev: true @@ -9467,6 +9487,10 @@ packages: split2: 4.2.0 dev: true + /github-slugger@2.0.0: + resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==} + dev: true + /glob-parent@5.1.2: resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} engines: {node: '>= 6'} @@ -9704,6 +9728,18 @@ packages: web-namespaces: 2.0.1 dev: false + /hast-util-has-property@3.0.0: + resolution: {integrity: sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==} + dependencies: + '@types/hast': 3.0.4 + dev: true + + /hast-util-heading-rank@3.0.0: + resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==} + dependencies: + '@types/hast': 3.0.4 + dev: true + /hast-util-parse-selector@4.0.0: resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==} dependencies: @@ -9728,6 +9764,27 @@ packages: zwitch: 2.0.4 dev: false + /hast-util-select@6.0.2: + resolution: {integrity: sha512-hT/SD/d/Meu+iobvgkffo1QecV8WeKWxwsNMzcTJsKw1cKTQKSR/7ArJeURLNJF9HDjp9nVoORyNNJxrvBye8Q==} + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.2 + bcp-47-match: 2.0.3 + comma-separated-tokens: 2.0.3 + css-selector-parser: 3.0.5 + devlop: 1.1.0 + direction: 2.0.1 + hast-util-has-property: 3.0.0 + hast-util-to-string: 3.0.0 + hast-util-whitespace: 3.0.0 + not: 0.1.0 + nth-check: 2.1.1 + property-information: 6.4.0 + space-separated-tokens: 2.0.2 + unist-util-visit: 5.0.0 + zwitch: 2.0.4 + dev: true + /hast-util-to-estree@2.3.3: resolution: {integrity: sha512-ihhPIUPxN0v0w6M5+IiAZZrn0LH2uZomeWwhn7uP7avZC6TE7lIiEh2yBMPr5+zi1aUCXq6VoYRgs2Bw9xmycQ==} dependencies: @@ -9793,7 +9850,7 @@ packages: resolution: {integrity: sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==} dependencies: '@types/estree': 1.0.5 - '@types/hast': 3.0.3 + '@types/hast': 3.0.4 '@types/unist': 3.0.2 comma-separated-tokens: 2.0.3 devlop: 1.1.0 @@ -9835,7 +9892,7 @@ packages: /hast-util-whitespace@3.0.0: resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==} dependencies: - '@types/hast': 3.0.3 + '@types/hast': 3.0.4 /hastscript@8.0.0: resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==} @@ -11033,7 +11090,7 @@ packages: resolution: {integrity: sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==} dependencies: '@types/estree-jsx': 1.0.3 - '@types/hast': 3.0.3 + '@types/hast': 3.0.4 '@types/mdast': 4.0.3 devlop: 1.1.0 mdast-util-from-markdown: 2.0.0 @@ -11064,7 +11121,7 @@ packages: resolution: {integrity: sha512-XZuPPzQNBPAlaqsTTgRrcJnyFbSOBovSadFgbFu8SnuNgm+6Bdx1K+IWoitsmj6Lq6MNtI+ytOqwN70n//NaBA==} dependencies: '@types/estree-jsx': 1.0.3 - '@types/hast': 3.0.3 + '@types/hast': 3.0.4 '@types/mdast': 4.0.3 '@types/unist': 3.0.2 ccount: 2.0.1 @@ -11118,7 +11175,7 @@ packages: resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==} dependencies: '@types/estree-jsx': 1.0.3 - '@types/hast': 3.0.3 + '@types/hast': 3.0.4 '@types/mdast': 4.0.3 devlop: 1.1.0 mdast-util-from-markdown: 2.0.0 @@ -12339,6 +12396,10 @@ packages: engines: {node: '>=0.10.0'} dev: true + /not@0.1.0: + resolution: {integrity: sha512-5PDmaAsVfnWUgTUbJ3ERwn7u79Z0dYxN9ErxCpVJJqe2RK0PJ3z+iFUxuqjwtlDDegXvtWoxD/3Fzxox7tFGWA==} + dev: true + /npm-install-checks@6.3.0: resolution: {integrity: sha512-W29RiK/xtpCGqn6f3ixfRYGk+zRyr+Ew9F2E20BfXxT5/euLdA/Nm7fO7OeTGuAmTs30cpgInyJ0cYe708YTZw==} engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} @@ -13260,7 +13321,7 @@ packages: '@types/react': '>=18' react: '>=18' dependencies: - '@types/hast': 3.0.3 + '@types/hast': 3.0.4 '@types/react': 18.2.46 devlop: 1.1.0 hast-util-to-jsx-runtime: 2.3.0 @@ -13450,6 +13511,16 @@ packages: vfile: 6.0.1 dev: false + /rehype-slug@6.0.0: + resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==} + dependencies: + '@types/hast': 3.0.4 + github-slugger: 2.0.0 + hast-util-heading-rank: 3.0.0 + hast-util-to-string: 3.0.0 + unist-util-visit: 5.0.0 + dev: true + /rehype-stringify@10.0.0: resolution: {integrity: sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==} dependencies: @@ -13546,7 +13617,7 @@ packages: /remark-rehype@11.0.0: resolution: {integrity: sha512-vx8x2MDMcxuE4lBmQ46zYUDfcFMmvg80WYX+UNLeG6ixjdCCLcw1lrgAukwBTuOFsS78eoAedHGn9sNM0w7TPw==} dependencies: - '@types/hast': 3.0.3 + '@types/hast': 3.0.4 '@types/mdast': 4.0.3 mdast-util-to-hast: 13.0.2 unified: 11.0.4 @@ -14916,7 +14987,7 @@ packages: execa: 5.1.1 globby: 11.1.0 joycon: 3.1.1 - postcss-load-config: 4.0.2(postcss@8.4.32) + postcss-load-config: 4.0.2(postcss@8.4.38) resolve-from: 5.0.0 rollup: 3.29.4 source-map: 0.8.0-beta.0 diff --git a/website/content-collections.ts b/website/content-collections.ts index 29bb7722..9a8349af 100644 --- a/website/content-collections.ts +++ b/website/content-collections.ts @@ -1,9 +1,31 @@ import { defineCollection, defineConfig } from "@content-collections/core"; +import rehypeSlug from "rehype-slug"; import rehypeShiki from "@shikijs/rehype"; import { Options, compileMDX } from "@content-collections/mdx"; +import { selectAll } from "hast-util-select"; +import { Root } from "hast"; +import GithubSlugger from "github-slugger"; + +function liCodeSlug() { + return (tree: Root) => { + const slugger = new GithubSlugger(); + + selectAll("li p code:first-of-type", tree).forEach((node) => { + const children = node.children; + if (children.length === 1 && children[0].type === "text") { + const text = slugger.slug(children[0].value); + node.properties.id = text; + } + }); + }; +} const mdxOptions: Options = { - rehypePlugins: [[rehypeShiki, { theme: "one-dark-pro" }]], + rehypePlugins: [ + liCodeSlug, + rehypeSlug, + [rehypeShiki, { theme: "one-dark-pro" }], + ], }; const integrations = defineCollection({ @@ -98,7 +120,7 @@ const docs = defineCollection({ linkText, body, href, - name + name, }; }, }); diff --git a/website/package.json b/website/package.json index 4d978964..98b74de9 100644 --- a/website/package.json +++ b/website/package.json @@ -28,6 +28,7 @@ "@shikijs/rehype": "1.2.4", "@shikijs/transformers": "1.2.4", "@tailwindcss/typography": "^0.5.10", + "@types/hast": "^3.0.4", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", @@ -35,8 +36,11 @@ "concurrently": "^8.2.2", "eslint": "^8", "eslint-config-next": "14.2.1", + "github-slugger": "^2.0.0", + "hast-util-select": "^6.0.2", "hast-util-to-jsx-runtime": "^2.3.0", "postcss": "^8", + "rehype-slug": "^6.0.0", "shiki": "1.2.3", "tailwindcss": "^3.4.0", "typescript": "^5"