From 508b8c20f785b3da083aad7757c5959b2ec70d70 Mon Sep 17 00:00:00 2001
From: Thomas Kunwar <yathomasi@gmail.com>
Date: Fri, 20 May 2022 02:07:46 +0545
Subject: [PATCH] Tools global highlighter (#12)

* using cli lang and updated to accept mlem

* supporting dvc as well
---
 .../config/prismjs/dvc-hook.js                |  2 +-
 .../config/prismjs/dvc.js                     | 27 ++++++-------------
 .../config/prismjs/mlem-commands.js           | 14 ++++++++++
 .../config/prismjs/usage.js                   |  4 +++
 .../gatsby-theme-iterative/gatsby-config.js   |  6 ++++-
 .../Markdown/Main/styles.module.css           |  3 ++-
 6 files changed, 34 insertions(+), 22 deletions(-)
 create mode 100644 packages/gatsby-theme-iterative/config/prismjs/mlem-commands.js

diff --git a/packages/gatsby-theme-iterative/config/prismjs/dvc-hook.js b/packages/gatsby-theme-iterative/config/prismjs/dvc-hook.js
index 76f10b45..fbd35946 100644
--- a/packages/gatsby-theme-iterative/config/prismjs/dvc-hook.js
+++ b/packages/gatsby-theme-iterative/config/prismjs/dvc-hook.js
@@ -7,7 +7,7 @@ const argsRegex = new RegExp(/\-{1,2}[a-zA-Z-]*/, 'ig')
 // Make sure the $ part of the command prompt in shell
 // examples isn't copiable by making it an 'input' token.
 Prism.hooks.add('after-tokenize', env => {
-  if (['dvc', 'cml'].includes(env.language) && Array.isArray(env.tokens)) {
+  if (['dvc', 'cli'].includes(env.language) && Array.isArray(env.tokens)) {
     for (const token of env.tokens) {
       if (token.type === 'line' && /^\$\s+$/.test(token.content[0])) {
         const old = token.content[0]
diff --git a/packages/gatsby-theme-iterative/config/prismjs/dvc.js b/packages/gatsby-theme-iterative/config/prismjs/dvc.js
index a5f4df51..92beaafa 100644
--- a/packages/gatsby-theme-iterative/config/prismjs/dvc.js
+++ b/packages/gatsby-theme-iterative/config/prismjs/dvc.js
@@ -10,6 +10,7 @@ const { bash } = Prism.languages
 
 const dvc = require('./dvc-commands')
 const cml = require('./cml-commands')
+const mlem = require('./mlem-commands')
 
 // Command arrays are intentionally reverse sorted
 // to prevent shorter matches before longer ones
@@ -35,7 +36,7 @@ const git = [
 
 const beforeCommand = String.raw`(\$[\s(]+|;\s*)`
 
-Prism.languages.dvc = {
+Prism.languages.cli = {
   line: {
     pattern: /(?<=(^|\n))\$[\s\S]*?[^\\](:?\n|$)/,
     inside: {
@@ -46,30 +47,16 @@ Prism.languages.dvc = {
         greedy: true,
         lookbehind: true
       },
-      git: {
+      cml: {
         pattern: new RegExp(
-          String.raw`${beforeCommand}\b(?:git (?:${git.join('|')}))\b`
+          String.raw`${beforeCommand}\b(?:cml (?:${cml.join('|')}))\b`
         ),
         greedy: true,
         lookbehind: true
       },
-      command: {
-        pattern: new RegExp(String.raw`${beforeCommand}\b[a-zA-Z0-9\-_]+\b`),
-        greedy: true,
-        lookbehind: true
-      },
-      ...bash
-    }
-  },
-  comment: bash.comment
-}
-Prism.languages.cml = {
-  line: {
-    pattern: /(?<=(^|\n))\$[\s\S]*?[^\\](:?\n|$)/,
-    inside: {
-      cml: {
+      mlem: {
         pattern: new RegExp(
-          String.raw`${beforeCommand}\b(?:cml (?:${cml.join('|')}))\b`
+          String.raw`${beforeCommand}\b(?:mlem (?:${mlem.join('|')}))\b`
         ),
         greedy: true,
         lookbehind: true
@@ -91,3 +78,5 @@ Prism.languages.cml = {
   },
   comment: bash.comment
 }
+
+Prism.languages.dvc = Prism.languages.cli
diff --git a/packages/gatsby-theme-iterative/config/prismjs/mlem-commands.js b/packages/gatsby-theme-iterative/config/prismjs/mlem-commands.js
new file mode 100644
index 00000000..c4805a83
--- /dev/null
+++ b/packages/gatsby-theme-iterative/config/prismjs/mlem-commands.js
@@ -0,0 +1,14 @@
+module.exports = [
+  'init',
+  'list',
+  'pprint',
+  'create',
+  'serve',
+  'deploy',
+  'types',
+  'link',
+  'clone',
+  'import',
+  'pack',
+  'apply'
+]
diff --git a/packages/gatsby-theme-iterative/config/prismjs/usage.js b/packages/gatsby-theme-iterative/config/prismjs/usage.js
index 0f8dc442..d2719cf8 100644
--- a/packages/gatsby-theme-iterative/config/prismjs/usage.js
+++ b/packages/gatsby-theme-iterative/config/prismjs/usage.js
@@ -2,6 +2,7 @@
 
 const dvc = require('./dvc-commands')
 const cml = require('./cml-commands')
+const mlem = require('./mlem-commands')
 const Prism = require('prismjs')
 
 Prism.languages.usage = {
@@ -11,6 +12,9 @@ Prism.languages.usage = {
   cml: {
     pattern: new RegExp(`cml (?:${cml.join('|')})`)
   },
+  mlem: {
+    pattern: new RegExp(`mlem (?:${mlem.join('|')})`)
+  },
   usage: {
     pattern: /(^|\n)\s*(usage|positional arguments|optional arguments)/
   },
diff --git a/packages/gatsby-theme-iterative/gatsby-config.js b/packages/gatsby-theme-iterative/gatsby-config.js
index 116eaadc..4a6ee10b 100644
--- a/packages/gatsby-theme-iterative/gatsby-config.js
+++ b/packages/gatsby-theme-iterative/gatsby-config.js
@@ -99,7 +99,11 @@ module.exports = ({
               options: {
                 icon: linkIcon,
                 // Pathname can also be array of paths. eg: ['docs/command-reference;', 'docs/api']
-                pathname: ['docs/command-reference', `docs/ref`]
+                pathname: [
+                  'docs/command-reference',
+                  `docs/ref`,
+                  'docs/cli-reference'
+                ]
               }
             },
             {
diff --git a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Main/styles.module.css b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Main/styles.module.css
index dbefa412..7fe7e6a2 100644
--- a/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Main/styles.module.css
+++ b/packages/gatsby-theme-iterative/src/components/Documentation/Markdown/Main/styles.module.css
@@ -183,7 +183,8 @@
       }
 
       .token.dvc,
-      .token.cml {
+      .token.cml,
+      .token.mlem {
         color: #56b1d0;
         font-weight: bold;
       }