-
Notifications
You must be signed in to change notification settings - Fork 101
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: bring back CodeBlockFile component
- Loading branch information
1 parent
87f6e01
commit 8633f26
Showing
54 changed files
with
4,117 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
<script setup lang="ts"> | ||
import { transformContent } from '../../transformers' | ||
import { useAsyncData } from '#imports' | ||
const props = defineProps<{ | ||
path: string | ||
language?: string | ||
filename?: string | ||
}>() | ||
const modules = import.meta.glob(['./*.vue', '!./CodeBlockFile.vue'], { as: 'raw' }) | ||
// console.log(`modules → `, modules) | ||
function prepareContent(content: string) { | ||
return `\`\`\`${props.language || ''}${props.filename ? ` [${props.filename}]` : ''}\n${content}\n\`\`\`` | ||
} | ||
const { data: doc } = await useAsyncData(`playground-${props.path}`, async () => { | ||
try { | ||
const module = modules[props.path] | ||
if (!module) | ||
console.error('Component Not Found.') | ||
const content = prepareContent(await module() as any) | ||
// console.log(`content → `, content) | ||
const parsed = await transformContent('content:index.md', content) | ||
return parsed | ||
} | ||
catch (e) { | ||
return doc.value | ||
} | ||
}) | ||
</script> | ||
|
||
<template> | ||
<ContentRenderer :key="doc.updatedAt" class="docus-content" :value="doc"> | ||
<template #empty> | ||
<div class="p-8"> | ||
<Alert type="warning"> | ||
<p class="font-semibold"> | ||
Content is empty! | ||
</p> | ||
<br><br> | ||
<p> | ||
Type any <span class="font-semibold">Markdown</span> or <span class="font-semibold">MDC code</span> in | ||
editor to see it replaced by rendered nodes in this panel. | ||
</p> | ||
</Alert> | ||
</div> | ||
</template> | ||
</ContentRenderer> | ||
</template> | ||
|
||
<style scoped> | ||
.docus-content :deep(.filename) { | ||
display: block; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
import type { Node as UnistNode } from 'unist' | ||
import type { MarkdownNode, MarkdownOptions, MarkdownRoot } from '../types' | ||
|
||
type Node = UnistNode & { | ||
tagName?: string | ||
value?: string | ||
children?: Node[] | ||
properties: Record<string, any> | ||
} | ||
|
||
/** | ||
* JSON compiler | ||
*/ | ||
export default function (this: any, _options: MarkdownOptions) { | ||
/** | ||
* Parses nodes for JSON structure. Attempts to drop | ||
* unwanted properties. | ||
*/ | ||
function parseAsJSON(node: Node | Node[]) { | ||
if (Array.isArray(node)) | ||
return node.map(parseAsJSON).filter(Boolean) | ||
|
||
// Remove double dashes and trailing dash from heading ids | ||
if (node.tagName?.startsWith('h') && node.properties.id) { | ||
node.properties.id = node.properties.id | ||
.replace(/-+/g, '-') | ||
.replace(/-$/, '') | ||
.replace(/^-/, '') | ||
} | ||
|
||
/** | ||
* Element node creates an isolated children array to | ||
* allow nested elements | ||
*/ | ||
if (node.type === 'element') { | ||
if (node.tagName === 'li') { | ||
// unwrap unwanted paragraphs around `<li>` children | ||
let hasPreviousParagraph = false | ||
node.children = node.children.flatMap((child) => { | ||
if (child.tagName === 'p') { | ||
if (hasPreviousParagraph) { | ||
// Insert line break before new paragraph | ||
child.children.unshift({ | ||
type: 'element', | ||
tagName: 'br', | ||
properties: {}, | ||
}) | ||
} | ||
|
||
hasPreviousParagraph = true | ||
return child.children | ||
} | ||
return child | ||
}) as Node[] | ||
} | ||
|
||
/** | ||
* Rename component slots tags name | ||
*/ | ||
if (node.tagName === 'component-slot') | ||
node.tagName = 'template' | ||
|
||
return <MarkdownNode> { | ||
type: 'element', | ||
tag: node.tagName as string, | ||
props: node.properties, | ||
children: parseAsJSON(node.children || []), | ||
} | ||
} | ||
|
||
/** | ||
* Text node | ||
*/ | ||
if (node.type === 'text') { | ||
// Remove new line nodes | ||
if (node.value === '\n') | ||
return null | ||
|
||
return <MarkdownNode> { | ||
type: 'text', | ||
value: node.value as string, | ||
} | ||
} | ||
|
||
// Remove comment nodes from AST tree | ||
if (node.type === 'comment') | ||
return null | ||
|
||
node.children = parseAsJSON(node.children || []) | ||
|
||
return node as MarkdownNode | ||
} | ||
|
||
this.Compiler = function (root: Node): MarkdownRoot { | ||
/** | ||
* We do not use `map` operation, since each node can be expanded to multiple top level | ||
* nodes. Instead, we need a array to fill in as many elements inside a single | ||
* iteration | ||
*/ | ||
return { | ||
type: 'root', | ||
children: parseAsJSON(root.children || []), | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,105 @@ | ||
import type { Processor } from 'unified' | ||
import { unified } from 'unified' | ||
import remarkParse from 'remark-parse' | ||
import remark2rehype from 'remark-rehype' | ||
import remarkMDC from 'remark-mdc' | ||
import type { MarkdownOptions, MarkdownPlugin, MarkdownRoot } from '../types' | ||
import handlers from './handler' | ||
import compiler from './compiler' | ||
import { flattenNodeText } from './utils/ast' | ||
import { nodeTextContent } from './utils/node' | ||
|
||
const usePlugins = (plugins: Record<string, false | MarkdownPlugin>, stream: Processor) => { | ||
for (const plugin of Object.values(plugins)) { | ||
if (plugin) { | ||
const { instance, ...options } = plugin | ||
stream.use(instance, options) | ||
} | ||
} | ||
} | ||
|
||
/** | ||
* Generate text excerpt summary | ||
* @param {string} excerptContent - JSON AST generated from excerpt markdown. | ||
* @returns {string} concatinated excerpt | ||
*/ | ||
export function generateDescription(excerptContent: MarkdownRoot) { | ||
return flattenNodeText(excerptContent) | ||
} | ||
|
||
/** | ||
* Generate json body | ||
* @param {string} content - file content | ||
* @param {object} data - document data | ||
* @returns {object} JSON AST body | ||
*/ | ||
export function generateBody(content: string, options: MarkdownOptions & { data: any }): Promise<MarkdownRoot> { | ||
const rehypeOptions: any = { | ||
handlers, | ||
allowDangerousHtml: true, | ||
} | ||
|
||
return new Promise((resolve, reject) => { | ||
const stream = unified().use(remarkParse) | ||
|
||
if (options.mdc) | ||
stream.use(remarkMDC) | ||
|
||
usePlugins(options.remarkPlugins, stream) | ||
stream.use(remark2rehype, rehypeOptions) | ||
usePlugins(options.rehypePlugins, stream) | ||
|
||
stream.use(compiler, options as any) | ||
stream.process( | ||
{ | ||
value: content, | ||
data: options.data, | ||
}, | ||
(error, file) => { | ||
if (error) | ||
return reject(error) | ||
|
||
Object.assign(options.data, file?.data || {}) | ||
|
||
resolve(file?.result as MarkdownRoot) | ||
}, | ||
) | ||
}) | ||
} | ||
|
||
export function contentHeading(body: MarkdownRoot) { | ||
let title = '' | ||
let description = '' | ||
const children = body.children | ||
// top level `text` and `hr` can be ignored | ||
.filter(node => node.type !== 'text' && node.tag !== 'hr') | ||
|
||
if (children.length && children[0].tag === 'h1') { | ||
/** | ||
* Remove node | ||
*/ | ||
const node = children.shift()! | ||
|
||
/** | ||
* Generate title | ||
*/ | ||
title = nodeTextContent(node) | ||
} | ||
|
||
if (children.length && children[0].tag === 'p') { | ||
/** | ||
* Remove node | ||
*/ | ||
const node = children.shift()! | ||
|
||
/** | ||
* Generate description | ||
*/ | ||
description = nodeTextContent(node) | ||
} | ||
|
||
return { | ||
title, | ||
description, | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import type { H } from 'mdast-util-to-hast' | ||
import { all } from 'mdast-util-to-hast' | ||
import { wrap } from './utils' | ||
|
||
export default function blockquote(h: H, node: any) { | ||
return h(node, 'blockquote', wrap(all(h, node), true)) | ||
} |
Oops, something went wrong.