diff --git a/astro.config.mjs b/astro.config.mjs index 3987aba8d..bce4ceaea 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -15,7 +15,6 @@ import { astroCodeSnippets, codeSnippetAutoImport, } from "./integrations/astro-code-snippets"; -import { astroDropdowns } from "./integrations/astro-dropdowns"; import { tabsAutoImport, tabNameAutoImport, @@ -49,7 +48,7 @@ export default defineConfig({ ], site: `https://dev-docs-nine.vercel.app/`, markdown: { - remarkPlugins: [remarkDefinitionList, remarkMermaid, ...astroDropdowns()], + remarkPlugins: [remarkDefinitionList, remarkMermaid], remarkRehype: { handlers: { ...defListHastHandlers, diff --git a/integrations/astro-dropdowns.ts b/integrations/astro-dropdowns.ts deleted file mode 100644 index 1a1971a07..000000000 --- a/integrations/astro-dropdowns.ts +++ /dev/null @@ -1,100 +0,0 @@ -import type { AstroUserConfig } from 'astro'; -import { h as _h, Properties } from 'hastscript'; -import type { Paragraph as P, Root } from 'mdast'; -import remarkDirective from 'remark-directive'; -import type { Plugin, Transformer } from 'unified'; -import { remove } from 'unist-util-remove'; -import { visit } from 'unist-util-visit'; - -/** Generate an mdast HTML tree ready for conversion to HTML by rehype. */ -function h(el: string, attrs: Properties = {}, children: any[] = []): P { - const { tagName, properties } = _h(el, attrs); - return { - type: 'paragraph', - data: { hName: tagName, hProperties: properties }, - children, - }; -} - -/** - * remark plugin that converts blocks delimited with `:::` into styled - * dropdowns (a.k.a. "accordions"). Depends on the `remark-directive` module - * for the core parsing logic. - * - * For example, this Markdown - * - * ```md - * :::dropdown[Did you know?] - * Astro helps you build faster websites with “Islands Architecture”. - * ::: - * ``` - * - * will produce this output - * - * ```astro - * - * ``` - */ -function remarkDropdowns(): Plugin<[], Root> { - - const transformer: Transformer = (tree) => { - visit(tree, (node, index, parent) => { - if (!parent || index === null || node.type !== 'containerDirective') { - return; - } - const directive = node.name; - if (directive !== "dropdown") return; - - // remark-directive converts a container’s “label” to a paragraph in - // its children, but we want to pass it as the summary, so - // we iterate over the children, find a directive label, store it for the - // summary, and remove the paragraph from children. - let summary = "dropdown" - remove(node, (child): boolean | void => { - if (child.data?.directiveLabel) { - if ( - 'children' in child && - Array.isArray(child.children) && - 'value' in child.children[0] - ) { - summary = child.children[0].value; - } - return true; - } - }); - - const dropdown = h( - 'details', - { - 'aria-label': summary, - class: `dropdown`, - }, - [ - h('summary', { class: `summary` }, [ - { type: 'text', value: summary }, - ]), - h('section', { class: `dropdown-content` }, node.children), - ] - ); - - parent.children[index] = dropdown; - }); - }; - - return function attacher() { - return transformer; - }; -} - -type RemarkPlugins = NonNullable< - NonNullable['remarkPlugins'] ->; - -export function astroDropdowns(): RemarkPlugins { - return [remarkDirective, remarkDropdowns()]; -}