Merge pull request #984 from OI-wiki/codetab-directive

feat: codetab directive

example/docs/test.md

@@ -30,6 +30,34 @@ Character Ascension[^ref1] material.
 接下来的 $m$ 行中的第 $i$ 行包含两个正整数 $l_i$ 和 $r_i$ ($1\le l_i\le r_i\le n$)，表示第 $i$ 次操作在区间 $[l_i,r_i]$ 上进行。
 ```
 
+## Codeblock tabs
+
+:::codes
+
+```cpp
+float Q_rsqrt(float number)
+{
+	long i;
+	float x2, y;
+	const float threehalfs = 1.5F;
+
+	x2 = number * 0.5F;
+	y  = number;
+	i  = * ( long * ) &y;                       // evil floating point bit level hacking
+	i  = 0x5f3759df - ( i >> 1 );               // what the fuck?
+	y  = * ( float * ) &i;
+	y  = y * ( threehalfs - ( x2 * y * y ) );   // 1st iteration
+//      y  = y * ( threehalfs - ( x2 * y * y ) );   // 2nd iteration, this can be removed
+
+	return y;
+}
+```
+```python
+def rev_sqrt(number: float) -> float:
+    return number**(-1/2)
+```
+:::
+
 ## 中文标题
 
 <h2 id = "index"> 附B：文章检索 </h2>

gatsby-theme-oi-wiki/gatsby-config.js

@@ -89,7 +89,9 @@ module.exports = {
         ],
         remarkPlugins: [
           require('remark-math'),
+          esmRequire('remark-directive').default,
           esmRequire('remark-details').default,
+          esmRequire('remark-codetab').default,
           require('remark-pseudocodejs'),
           [require('@mgtd/remark-shiki').remarkShiki, {
             semantic: false,

gatsby-theme-oi-wiki/package.json

@@ -57,7 +57,9 @@
     "rehype-mathjax": "^3.1.0",
     "rehype-parse": "^7.0.1",
     "rehype-react": "^6.2.1",
+    "remark-codetab": "file:plugins/remark-codetab",
     "remark-details": "^4.0.4",
+    "remark-directive": "^2.0.0",
     "remark-math": "^4.0.0",
     "remark-pseudocodejs": "file:plugins/remark-pseudocodejs",
     "simple-git": "^2.41.1",

gatsby-theme-oi-wiki/plugins/remark-codetab/index.js

@@ -0,0 +1,25 @@
+import { visit } from 'unist-util-visit'
+
+export default function attacher () {
+    return function transformer (ast) {
+        visit(ast, 'containerDirective', function(node) {
+            if (node.name !== 'codes') return
+
+            const langs = []
+            node.children = node.children.filter(i => {
+                if (i.type !== 'code') {
+                    console.warn('codes: ignoring non-code block')
+                    return false
+                }
+                langs.push(i.lang)
+                return true
+            })
+
+            node.data = {
+                hName: 'ow-codes',
+                hProperties: { 'tab-labels': langs.join(',') } 
+            }
+
+        })
+    }
+}

gatsby-theme-oi-wiki/plugins/remark-codetab/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "remark-codetab",
+  "version": "1.0.0",
+  "main": "index.js",
+  "author": "Xiaodai Dai",
+  "license": "MIT",
+  "dependencies": {
+    "unist-util-visit": "^4.1.0"
+  }
+}

gatsby-theme-oi-wiki/plugins/remark-codetab/yarn.lock

@@ -0,0 +1,30 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/unist@^2.0.0":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
+  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
+
+unist-util-is@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.1.1.tgz#e8aece0b102fa9bc097b0fef8f870c496d4a6236"
+  integrity sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==
+
+unist-util-visit-parents@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.0.tgz#44bbc5d25f2411e7dfc5cecff12de43296aa8521"
+  integrity sha512-y+QVLcY5eR/YVpqDsLf/xh9R3Q2Y4HxkZTp7ViLDU6WtJCEcPmRzW1gpdWDCDIqIlhuPDXOgttqPlykrHYDekg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+
+unist-util-visit@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.0.tgz#f41e407a9e94da31594e6b1c9811c51ab0b3d8f5"
+  integrity sha512-n7lyhFKJfVZ9MnKtqbsqkQEk5P1KShj0+//V7mAcoI6bpbUjh3C/OG8HVD+pBihfh6Ovl01m8dkcv9HNqYajmQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^5.0.0"
+    unist-util-visit-parents "^5.0.0"

gatsby-theme-oi-wiki/src/components/Codetab.tsx

@@ -0,0 +1,38 @@
+import Tab from '@material-ui/core/Tab'
+import Tabs from '@material-ui/core/Tabs'
+import React from 'react'
+
+interface CodetabProp {
+    'tab-labels': string;
+}
+
+const Codetab: React.FC<CodetabProp> = ({ children, ...rest }) => {
+    const [value, setValue] = React.useState(0)
+    const cont = Array.isArray(children) ? children : [children]
+
+    const handleChange = (_: unknown, newValue: number): void => {
+        setValue(newValue)
+    }
+
+    const labels = rest['tab-labels']?.split(',')
+    return (
+        <div>
+            <Tabs
+                value={value}
+                onChange={handleChange}
+                indicatorColor="primary"
+                textColor="primary"
+            >
+                {cont?.map((_, i) => {
+                    return <Tab label={labels?.[i] ?? 'Code'} key={i} />
+                })}
+            </Tabs>
+
+            {cont?.map((e, i) => {
+                return <div role="tabpanel" hidden={value !== i} key={i}>{e}</div>
+            })}
+        </div>
+    )
+}
+
+export default Codetab

gatsby-theme-oi-wiki/src/components/Mdx.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx'
 import MDRenderer from '../lib/MDRenderer'
 import Details from './Details'
 import Summary from './Summary'
+import Codetab from './Codetab'
 import { SmartLink, SmartLinkProps } from './Link'
 import SEO from './Seo'
 import StyledLayout from './StyledLayout'
@@ -75,6 +76,7 @@ const Mdx: React.FC<MdxProps> = ({ data: { mdx }, location }) => {
     a: LinkGetter,
     inlinecode: InlineCode,
     codeblock: Code,
+    'ow-codes': Codetab,
   }
 
   const isWIP = wordCount === 0 || (tags?.findIndex((x: string) => x === 'WIP') >= 0)

yarn.lock

@@ -9976,6 +9976,17 @@ mdast-util-definitions@^5.0.0:
     "@types/unist" "^2.0.0"
     unist-util-visit "^3.0.0"
 
+mdast-util-directive@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-directive/-/mdast-util-directive-2.1.1.tgz#1c7d42f452227752f450c314071fb6ebd8665cab"
+  integrity sha512-FzQQdO1SZGMflk3SoXITE64yPy+RAfsZgtfAuOVlc4G6H8g0XLkeKZ044z2q9tdY/rD1JfRrI+bmKry9wKhnjA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-markdown "^1.0.0"
+    parse-entities "^3.0.0"
+    stringify-entities "^4.0.0"
+    unist-util-visit-parents "^5.0.0"
+
 mdast-util-find-and-replace@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.1.0.tgz#69728acd250749f8aac6e150e07d1fd15619e829"
@@ -10363,6 +10374,19 @@ micromark-core-commonmark@^1.0.1:
     micromark-util-types "^1.0.1"
     parse-entities "^3.0.0"
 
+micromark-extension-directive@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/micromark-extension-directive/-/micromark-extension-directive-2.0.3.tgz#e876eddd29897bcb8916f2c8940cd4274b9f8cbf"
+  integrity sha512-kypTk6AOKTqYs7ObYFumojYcZlq07iiybq7CiFTIys4jQEieJnnzeAQ+KsdpoJ5pX2oxYWLA/ghBmPsIaahCfA==
+  dependencies:
+    micromark-factory-space "^1.0.0"
+    micromark-factory-whitespace "^1.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+    micromark-util-types "^1.0.0"
+    parse-entities "^3.0.0"
+    uvu "^0.5.0"
+
 micromark-extension-footnote@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/micromark-extension-footnote/-/micromark-extension-footnote-1.0.2.tgz#534c42211315406b43625fa29573c7094d5122c2"
@@ -12965,6 +12989,11 @@ [email protected]:
     fbjs "^3.0.0"
     invariant "^2.2.4"
 
+"remark-codetab@file:gatsby-theme-oi-wiki/plugins/remark-codetab":
+  version "1.0.0"
+  dependencies:
+    unist-util-visit "^4.1.0"
+
 remark-details@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/remark-details/-/remark-details-4.0.4.tgz#681ac9866a47d409984cf5292d481fc9fa4b16a3"
@@ -12980,6 +13009,16 @@ remark-details@^4.0.4:
     unified "^10.1.0"
     unist-util-visit "^4.1.0"
 
+remark-directive@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/remark-directive/-/remark-directive-2.0.0.tgz#db838ab7a2543dea0b07a2041fe982112f611add"
+  integrity sha512-1AMpSzp/NsvursAORfucrP+FeXJOm5kgA5Au8nID45zYNKAmI7PtI8ywExXl2U2pJlG4KtPyhA75flPRZz5K4A==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-directive "^2.0.0"
+    micromark-extension-directive "^2.0.0"
+    unified "^10.0.0"
+
 remark-footnotes@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-4.0.1.tgz#17d3c87ddc240924e8b4590b34a3d79aa8ede50c"