feat: refine table layout for known scope

Author: Justineo

assets/styles/post.styl

@@ -151,27 +151,8 @@ margin-y($top, $bottom = $top)
     border-radius 4px
     margin-y(1.5em)
 
-    thead
-      position sticky
-      top -1px
-      background #f3f6f988
-      backdrop-filter blur(4px)
-
-      th
-        position relative
-
-        &::after
-          content ""
-          position absolute
-          bottom 0
-          width 100%
-          height 1px
-          left 0
-          background #f1f1f1
-
-  // pre
-  // table
-  //   max-width 480px
+  th
+    background #f3f6f988
 
   th
   td
@@ -360,6 +341,43 @@ margin-y($top, $bottom = $top)
   [data-target]
     animation target-blink 6s ease 1 both
 
+table[data-scope]
+  display grid
+  grid-auto-rows auto
+
+  & > thead
+  & > thead > tr
+  & > tbody
+  & > tbody > tr
+    display contents
+
+  & > thead > tr > th
+    position sticky
+    top 0
+    z-index 1
+    border-top none
+    backdrop-filter blur(4px)
+
+  & > tbody > tr > td
+    border-top none
+    word-break break-word
+
+  &[data-scope="props"]
+    grid-template-columns max-content fit-content(20%) fit-content(20%) auto
+
+  &[data-scope="configs"]
+    grid-template-columns max-content fit-content(30%) fit-content(30%) auto
+
+  &[data-scope="events"]
+  &[data-scope="methods"]
+  &[data-scope="slots"]
+  &[data-scope="icons"]
+    grid-template-columns minmax(max-content, 30%) auto
+
+  &[data-scope="options"]
+  &[data-scope="modifiers"]
+    grid-template-columns max-content fit-content(30%) fit-content(30%) auto
+
 .meta
   display flex
   justify-content center

one/build/page.js

@@ -14,7 +14,7 @@ import stringifyObject from 'stringify-object'
 import { readFileSync, writeFileSync, replaceExtSync } from './util'
 import demo from './remark-demo'
 import ref from './remark-ref'
-import anchor from './remark-anchor'
+import scope from './remark-scope'
 import details from './remark-details'
 import custom from './remark-custom'
 import toc from './remark-extract-toc'
@@ -34,7 +34,7 @@ const PAGE_TPL = readFileSync(resolve(__dirname, '../templates/page.etpl'))
 const renderPage = etpl.compile(PAGE_TPL)
 
 const md = remark()
-  .use(anchor)
+  .use(scope)
   .use(custom)
   .use(ref)
   .use(details)

one/build/remark-anchor.js one/build/remark-scope.jsone/build/remark-anchor.js renamed to one/build/remark-scope.js

@@ -26,8 +26,10 @@ export default function attacher () {
     let scope = null
 
     visit(tree, (node, index, parent) => {
-      const { type, depth, children, value, position } = node
+      const { type, children, value, position } = node
       if (type === 'heading') {
+        let { depth } = node
+
         if (depth === 3) {
           let text = children[0]
           if (text && text.type === 'element' && text.tagName === 'icon-link') {
@@ -46,14 +48,19 @@ export default function attacher () {
         return
       }
 
+      if (type === 'table' && scope) {
+        node.data = node.data || {}
+        node.data.hProperties = { ...node.data.hProperties, 'data-scope': scope }
+      }
+
       if (
         type === 'inlineCode' &&
-        position.end.offset - position.start.offset - value.length === 4
+        position.end.offset - position.start.offset - value.length === 4 // ``value`` has 4 backticks
       ) {
         const id = `${scope || 'doc'}-${value.replace(/\./g, '-')}`
 
         node.data = node.data || {}
-        node.data.hProperties = { id }
+        node.data.hProperties = { ...node.data.hProperties, id }
 
         parent.children[index] = {
           type: 'link',