feat: support header

README.md

@@ -7,13 +7,14 @@ d: ""
 
 # 邓清
 
-## 个人信息
-
-- Github: [https://github.com/Dunqing](https://github.com/Dunqing)
+- [https://github.com/Dunqing](https://github.com/Dunqing)
+>
+- dengqing0821@gmail.com
+- 2.5年
+- 21岁
+>
 - Telegram: @luckingforme
-- Email: dengqing0821@gmail.com
-- 工作经验：2.5年
-- 年龄：21
+
 
 ## 个人总结
 

playground/src/Resume.tsx

@@ -5,7 +5,7 @@ import '@unocss/reset/tailwind.css'
 import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 import clsx from 'clsx'
-import { description, meta, table } from './plugins'
+import { description, header, meta, table } from './plugins'
 
 function Resume() {
   const [markdown] = useState<string>(() => {
@@ -57,9 +57,19 @@ function Resume() {
                 return <span className="text-blue-gray-600" {...props} />
               },
               'description': ({ ...props }) => {
-                return <p {...props} className="text-sm indent">
-
-                </p>
+                return <p {...props} className="text-sm indent" />
+              },
+              'header': ({ node: _, ...props }) => {
+                return <header {...props} className="flex flex-col items-center p-4" />
+              },
+              'header-h1': ({ node: _, ...props }) => {
+                return <h1 {...props} className="text-2xl" />
+              },
+              'header-ul': ({ ...props }) => {
+                return <ul {...props} className="list-none flex flex-wrap" />
+              },
+              'header-li': ({ ...props }) => {
+                return <li className="sibling:before:content-| sibling:before:p-x-2 sibling:before:text-gray-400" {...props} />
               },
             }}
               remarkPlugins={[
@@ -69,6 +79,7 @@ function Resume() {
               ]}
               rehypePlugins={[
                 table,
+                header,
                 description,
               ]}
               >

playground/src/jsx.d.ts

@@ -8,6 +8,10 @@ declare global {
       'card-item-label': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
       'card-item-value': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
       'description': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+      'header': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+      'header-h1': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+      'header-ul': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
+      'header-li': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
     }
   }
 }

playground/src/plugins/_util.ts

@@ -3,6 +3,8 @@ import { is } from 'unist-util-is'
 
 const HeadingTag = ['h1', 'h2', 'h3']
 
-export const isHeading = (t: any): t is Element => is(t, { type: 'element' }) && HeadingTag.includes((t as Element).tagName)
+export const isHeading = (t: any, tagName?: string | string[]): t is Element => is(t, { type: 'element' }) && tagName ? [tagName].flat().includes((t as Element).tagName) : HeadingTag.includes((t as Element).tagName)
 export const isTable = (t: any): t is Element => is(t, { type: 'element', tagName: 'table' }) && HeadingTag.includes((t as Element).tagName)
 export const isText = (t: any): t is Text => is(t, { type: 'text' })
+export const isUl = <T>(t: T): t is T => is(t, { type: 'element', tagName: 'ul' })
+export const isBlockquote = (t: any) => is(t, { type: 'element', tagName: 'blockquote' })

playground/src/plugins/header.ts

@@ -0,0 +1,47 @@
+import type { Plugin } from 'unified'
+import { visit } from 'unist-util-visit'
+import type { Element } from 'hast'
+import { isBlockquote, isUl } from './_util'
+
+export const header: Plugin<[], Element> = function () {
+  return (root) => {
+    visit(root, {
+      type: 'element',
+      tagName: 'h1',
+    }, (paragraph, index, parent) => {
+      const len = parent.children.length
+      const children = []
+      const delIndex: number[] = []
+
+      for (let i = index + 2; i < len; i += 2) {
+        const element = parent.children[i] as Element
+
+        if (isBlockquote(element))
+          continue
+
+        if (!isUl(element))
+          break
+
+        children.push(element)
+
+        element.tagName = 'header-ul'
+
+        visit(element, { tagName: 'li' }, (li) => {
+          li.tagName = 'header-li'
+        })
+
+        delIndex.unshift(i)
+      }
+
+      if (children.length) {
+        paragraph.tagName = 'header-h1'
+        delIndex.forEach(i => parent.children.splice(i, 1))
+        parent.children.splice(index, 1, {
+          type: 'element',
+          tagName: 'header',
+          children: [paragraph, ...children],
+        })
+      }
+    })
+  }
+}

playground/src/plugins/index.ts

@@ -1,3 +1,4 @@
 export * from './meta'
 export * from './table'
 export * from './description'
+export * from './header'