michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor(markdown): removed rehype-slug in favor of our own implementation (#3234)

Browse source 
* Moved types arround

* Removed `rehype-slug` in favor of our own implementation

* Changeset

* Removed rehype-slug from examples

* Remove rehype-slug from tests

* Updated reference

* rehypeCollectHeaders is a function again

* Reverted rehype-slug removes

* Re-added rehype-slug to reference
This commit is contained in:
Juan Martín Seery 2022-04-29 21:07:09 -03:00 committed by GitHub
parent 9984f8ea24
commit de123b28b3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 64 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/cuddly-trees-sniff.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/markdown-remark': patch
---
Removed `rehype-slug` in favor of our own implementation. The behavior of the slugging should remain the same

6
.changeset/silly-yaks-happen.md Normal file
View file

@ -0,0 +1,6 @@
---
'astro': patch
'@astrojs/markdown-remark': patch
---
Moved some type from `astro` to `@astrojs/markdown-remark`

2
examples/with-markdown-plugins/astro.config.mjs
View file

@ -7,10 +7,10 @@ export default defineConfig({
markdown: {
remarkPlugins: ['remark-code-titles'],
rehypePlugins: [
'rehype-slug',
['rehype-autolink-headings', { behavior: 'prepend' }],
['rehype-toc', { headings: ['h2', 'h3'] }],
[addClasses, { 'h1,h2,h3': 'title' }],
'rehype-slug',
],
},
});

1
packages/astro/package.json
View file

@ -116,7 +116,6 @@
"prismjs": "^1.28.0",
"prompts": "^2.4.2",
"recast": "^0.20.5",
"rehype-slug": "^5.0.1",
"resolve": "^1.22.0",
"rollup": "^2.70.2",
"semver": "^7.3.7",

31
packages/astro/src/@types/astro.ts
View file

@ -2,7 +2,14 @@ import type { AddressInfo } from 'net';
import type * as babel from '@babel/core';
import type * as vite from 'vite';
import { z } from 'zod';
import type { ShikiConfig, RemarkPlugins, RehypePlugins } from '@astrojs/markdown-remark';
import type {
ShikiConfig,
RemarkPlugins,
RehypePlugins,
MarkdownHeader,
MarkdownMetadata,
MarkdownRenderingResult,
} from '@astrojs/markdown-remark';
import type { AstroConfigSchema } from '../core/config';
import type { AstroComponentFactory, Metadata } from '../runtime/server';
import type { ViteConfigWithSSR } from '../core/create-vite';
@ -530,7 +537,7 @@ export interface AstroUserConfig {
* @description
* Pass a custom [Remark](https://github.com/remarkjs/remark) plugin to customize how your Markdown is built.
*
* **Note:** Enabling custom `remarkPlugins` or `rehypePlugins` removes Astro's built-in support for [GitHub-flavored Markdown](https://github.github.com/gfm/) support, [Footnotes](https://github.com/remarkjs/remark-footnotes) syntax, [Smartypants](https://github.com/silvenon/remark-smartypants). You must explicitly add these plugins to your `astro.config.mjs` file, if desired.
* **Note:** Enabling custom `remarkPlugins` or `rehypePlugins` removes Astro's built-in support for [GitHub-flavored Markdown](https://github.github.com/gfm/) support and [Smartypants](https://github.com/silvenon/remark-smartypants). You must explicitly add these plugins to your `astro.config.mjs` file, if desired.
*
* ```js
* {
@ -549,13 +556,13 @@ export interface AstroUserConfig {
* @description
* Pass a custom [Rehype](https://github.com/remarkjs/remark-rehype) plugin to customize how your Markdown is built.
*
* **Note:** Enabling custom `remarkPlugins` or `rehypePlugins` removes Astro's built-in support for [GitHub-flavored Markdown](https://github.github.com/gfm/) support, [Footnotes](https://github.com/remarkjs/remark-footnotes) syntax, [Smartypants](https://github.com/silvenon/remark-smartypants). You must explicitly add these plugins to your `astro.config.mjs` file, if desired.
* **Note:** Enabling custom `remarkPlugins` or `rehypePlugins` removes Astro's built-in support for [GitHub-flavored Markdown](https://github.github.com/gfm/) support and [Smartypants](https://github.com/silvenon/remark-smartypants). You must explicitly add these plugins to your `astro.config.mjs` file, if desired.
*
* ```js
* {
* markdown: {
* // Example: The default set of rehype plugins used by Astro
* rehypePlugins: [['rehype-toc', { headings: ['h2', 'h3'] }], [addClasses, { 'h1,h2,h3': 'title' }], 'rehype-slug'],
* rehypePlugins: ['rehype-slug', ['rehype-toc', { headings: ['h2', 'h3'] }], [addClasses, { 'h1,h2,h3': 'title' }]],
* },
* };
* ```
@ -774,24 +781,10 @@ export interface ManifestData {
routes: RouteData[];
}
export interface MarkdownHeader {
depth: number;
slug: string;
text: string;
}
export interface MarkdownMetadata {
headers: MarkdownHeader[];
source: string;
html: string;
}
export interface MarkdownParserResponse {
export interface MarkdownParserResponse extends MarkdownRenderingResult {
frontmatter: {
[key: string]: any;
};
metadata: MarkdownMetadata;
code: string;
}
/**

2
packages/astro/test/astro-markdown-plugins.test.js
View file

@ -15,9 +15,9 @@ describe('Astro Markdown plugins', () => {
['rehype-autolink-headings', { behavior: 'prepend' }],
],
rehypePlugins: [
'rehype-slug',
['rehype-toc', { headings: ['h2', 'h3'] }],
[addClasses, { 'h1,h2,h3': 'title' }],
'rehype-slug',
],
},
});

3
packages/astro/test/fixtures/astro-markdown-plugins/package.json vendored
View file

@ -5,6 +5,7 @@
"dependencies": {
"@astrojs/preact": "workspace:*",
"astro": "workspace:*",
"hast-util-select": "^5.0.1"
"hast-util-select": "^5.0.1",
"rehype-slug": "^5.0.1"
}
}

1
packages/markdown/remark/package.json
View file

@ -32,7 +32,6 @@
"micromark-extension-mdx-jsx": "^1.0.3",
"prismjs": "^1.28.0",
"rehype-raw": "^6.1.1",
"rehype-slug": "^5.0.1",
"rehype-stringify": "^9.0.3",
"remark-gfm": "^3.0.1",
"remark-parse": "^10.0.1",

10
packages/markdown/remark/src/index.ts
View file

@ -1,4 +1,4 @@
import type { MarkdownRenderingOptions } from './types';
import type { MarkdownRenderingOptions, MarkdownRenderingResult } from './types';
import createCollectHeaders from './rehype-collect-headers.js';
import scopedStyles from './remark-scoped-styles.js';
@ -22,11 +22,13 @@ import rehypeRaw from 'rehype-raw';
export * from './types.js';
export const DEFAULT_REMARK_PLUGINS = ['remark-gfm', 'remark-smartypants'];
export const DEFAULT_REHYPE_PLUGINS = ['rehype-slug'];
export const DEFAULT_REHYPE_PLUGINS = [];
/** Shared utility for rendering markdown */
export async function renderMarkdown(content: string, opts: MarkdownRenderingOptions) {
export async function renderMarkdown(
content: string,
opts: MarkdownRenderingOptions
): Promise<MarkdownRenderingResult> {
let { mode, syntaxHighlight, shikiConfig, remarkPlugins, rehypePlugins } = opts;
const scopedClassName = opts.$?.scopedClassName;
const isMDX = mode === 'mdx';

21
packages/markdown/remark/src/rehype-collect-headers.ts
View file

@ -1,12 +1,14 @@
import { visit } from 'unist-util-visit';
import slugger from 'github-slugger';
import Slugger from 'github-slugger';
import type { MarkdownHeader, RehypePlugin } from './types.js';
/** */
export default function createCollectHeaders() {
const headers: any[] = [];
const headers: MarkdownHeader[] = [];
const slugger = new Slugger();
function rehypeCollectHeaders() {
return function (tree: any) {
function rehypeCollectHeaders(): ReturnType<RehypePlugin> {
return function (tree) {
visit(tree, (node) => {
if (node.type !== 'element') return;
const { tagName } = node;
@ -21,11 +23,12 @@ export default function createCollectHeaders() {
text += child.value;
});
let slug = node?.properties?.id || slugger.slug(text);
node.properties = node.properties || {};
node.properties.id = slug;
headers.push({ depth, slug, text });
if (typeof node.properties.id !== 'string') {
node.properties.id = slugger.slug(text);
}
headers.push({ depth, slug: node.properties.id, text });
});
};
}

32
packages/markdown/remark/src/remark-slug.ts
View file

@ -1,32 +0,0 @@
/**
* @typedef {import('mdast').Root} Root
* @typedef {import('hast').Properties} Properties
*/
import { toString } from 'mdast-util-to-string';
import { visit } from 'unist-util-visit';
import BananaSlug from 'github-slugger';
const slugs = new BananaSlug();
/**
* Plugin to add anchors headings using GitHub’s algorithm.
*
* @type {import('unified').Plugin<void[], Root>}
*/
export default function remarkSlug() {
return (tree: any) => {
slugs.reset();
visit(tree, (node) => {
console.log(node);
});
visit(tree, 'heading', (node) => {
const data = node.data || (node.data = {});
const props = /** @type {Properties} */ data.hProperties || (data.hProperties = {});
let id = props.id;
id = id ? slugs.slug(String(id), true) : slugs.slug(toString(node));
data.id = id;
props.id = id;
});
};
}

17
packages/markdown/remark/src/types.ts
View file

@ -40,3 +40,20 @@ export interface MarkdownRenderingOptions extends AstroMarkdownOptions {
scopedClassName: string | null;
};
}
export interface MarkdownHeader {
depth: number;
slug: string;
text: string;
}
export interface MarkdownMetadata {
headers: MarkdownHeader[];
source: string;
html: string;
}
export interface MarkdownRenderingResult {
metadata: MarkdownMetadata;
code: string;
}

6
pnpm-lock.yaml
View file

@ -523,7 +523,6 @@ importers:
prismjs: ^1.28.0
prompts: ^2.4.2
recast: ^0.20.5
rehype-slug: ^5.0.1
resolve: ^1.22.0
rollup: ^2.70.2
sass: ^1.50.1
@ -584,7 +583,6 @@ importers:
prismjs: 1.28.0
prompts: 2.4.2
recast: 0.20.5
rehype-slug: 5.0.1
resolve: 1.22.0
rollup: 2.70.2
semver: 7.3.7
@ -823,10 +821,12 @@ importers:
'@astrojs/preact': workspace:*
astro: workspace:*
hast-util-select: ^5.0.1
rehype-slug: ^5.0.1
dependencies:
'@astrojs/preact': link:../../../../integrations/preact
astro: link:../../..
hast-util-select: 5.0.1
rehype-slug: 5.0.1
packages/astro/test/fixtures/astro-markdown-shiki/langs:
specifiers:
@ -1485,7 +1485,6 @@ importers:
micromark-extension-mdx-jsx: ^1.0.3
prismjs: ^1.28.0
rehype-raw: ^6.1.1
rehype-slug: ^5.0.1
rehype-stringify: ^9.0.3
remark-gfm: ^3.0.1
remark-parse: ^10.0.1
@ -1505,7 +1504,6 @@ importers:
micromark-extension-mdx-jsx: 1.0.3
prismjs: 1.28.0
rehype-raw: 6.1.1
rehype-slug: 5.0.1
rehype-stringify: 9.0.3
remark-gfm: 3.0.1
remark-parse: 10.0.1