diff --git a/docs/pages/docs/guide/_meta.ts b/docs/pages/docs/guide/_meta.ts index b5984190ba..95f63a8d72 100644 --- a/docs/pages/docs/guide/_meta.ts +++ b/docs/pages/docs/guide/_meta.ts @@ -7,6 +7,7 @@ export default { ssg: 'Next.js SSG', i18n: 'Next.js I18n', 'custom-css': '', + search: '', advanced: '', 'built-ins': 'Built-ins' } diff --git a/docs/pages/docs/guide/search.mdx b/docs/pages/docs/guide/search.mdx new file mode 100644 index 0000000000..45a357dd4f --- /dev/null +++ b/docs/pages/docs/guide/search.mdx @@ -0,0 +1,12 @@ +# Search + +Nextra features full-page search, that includes list items, code blocks, +headings and table cells. + +## Search in `{:html}` + +Inline `{:html}` can be searched as well as code blocks. + +```html +I'm Searchable! +``` diff --git a/packages/nextra/src/server/remark-plugins/remark-structurize.ts b/packages/nextra/src/server/remark-plugins/remark-structurize.ts index 6806e00cdf..e59c2ce43b 100644 --- a/packages/nextra/src/server/remark-plugins/remark-structurize.ts +++ b/packages/nextra/src/server/remark-plugins/remark-structurize.ts @@ -1,6 +1,9 @@ import type { Root } from 'mdast' import type { Plugin } from 'unified' import type { Search, StructurizedData } from '../../types' +import type { HProperties } from './remark-custom-heading-id' + +type RootContent = Root['children'][number] const CODE_TABLE_QUOTE_LIST = new Set([ 'code', @@ -37,7 +40,7 @@ export const remarkStructurize: Plugin<[Search], Root> = options => { } } - function walk(node: any): string { + function walk(node: RootContent | Root): string { let result = '' const { type } = node @@ -56,10 +59,15 @@ export const remarkStructurize: Plugin<[Search], Root> = options => { } } else if ( (opts.codeblocks && type === 'code') || - ['text', 'inlineCode', 'tableCell'].includes(type) + type === 'text' || + type === 'inlineCode' || + type === 'tableCell' ) { - result += node.value - if (!skip) content += node.value + // Inline code may have an `{:language}` suffix, trim this off if it exists. + const value = + type === 'inlineCode' ? node.value.replace(/\{:\w+}$/, '') : node.value + result += value + if (!skip) content += value } if ( @@ -78,7 +86,8 @@ export const remarkStructurize: Plugin<[Search], Root> = options => { if (node.depth > 1) { save() content = '' // reset content after h1 content - activeSlug = node.data.hProperties.id + '#' + result + const hProperties = node.data!.hProperties as HProperties + activeSlug = hProperties.id + '#' + result } } return result