Add Inline code block command linker

packages/example/.gitignore

@@ -0,0 +1 @@
+/tmp

packages/example/get-sidebar.js

@@ -0,0 +1,20 @@
+const {
+  getAllToolsSidebar
+} = require('@dvcorg/gatsby-theme-iterative/src/utils/shared/sidebarUtils')
+const dvcSidebar = require('./content/docs/sidebar.json')
+
+const tools = [
+  {
+    name: 'dvc',
+    data: dvcSidebar
+  },
+  {
+    name: 'cml',
+    // Or, we can also simply use url to sidebar.json file
+    // url: 'https://raw.githubusercontent.com/iterative/cml.dev/master/content/docs/sidebar.json'
+    repo: 'cml.dev',
+    mainBranch: 'master'
+  }
+]
+
+getAllToolsSidebar(tools)

packages/example/package.json

@@ -6,9 +6,9 @@
   "license": "MIT",
   "scripts": {
     "clean": "gatsby clean",
-    "build": "gatsby build",
+    "build": "node get-sidebar.js && gatsby build",
     "serve": "gatsby serve",
-    "develop": "gatsby develop"
+    "develop": "node get-sidebar.js && gatsby develop"
   },
   "dependencies": {
     "@dvcorg/gatsby-theme-iterative": "*",

packages/example/src/@dvcorg/gatsby-theme-iterative/sidebar.js

@@ -1 +1 @@
-module.exports = require('../../../content/docs/sidebar.json')
+module.exports = require('../../../tmp/sidebar.json')

packages/gatsby-theme-iterative/plugins/gatsby-remark-dvc-linker/commandLinker.js

@@ -3,6 +3,7 @@
 const { createLinkNode, useMatcher } = require('./helpers')
 const { getItemByPath } = require('../../src/utils/shared/sidebar')
 const consts = require('../../consts')
+const { getToolsBaseUrl } = require('../../src/utils/shared/sidebarUtils')
 
 const {
   ARGS_REGEXP,
@@ -19,31 +20,37 @@ module.exports = aliasEntries => astNode => {
     const parts = node.value.split(/\s+/)
     const index = parts.findIndex(part => {
       const cli = String(part).trim()
-      return cli === 'dvc' || cli === 'cml' || cli === 'mlem'
+      return ['dvc', 'cml', 'mlem'].includes(cli)
     })
     const cli = parts[index]
     const commandRoot = cli === 'cml' ? CML_COMMAND_ROOT : COMMAND_ROOT
     const command = parts[index + 1]
+    let fullPath
     const aliasEntry =
       aliasEntries &&
       aliasEntries.find(({ matches }) =>
         useMatcher(matches, `${cli} ${command}`)
       )
-    const baseUrl =
+    const basePath =
       aliasEntry && aliasEntry.url ? aliasEntry.url : `${commandRoot}${command}`
-    let url
-    const isCommandPageExists = getItemByPath(baseUrl)
+    const isCommandPageExists = getItemByPath(basePath, cli)
     if (isCommandPageExists) {
-      url = baseUrl
+      fullPath = basePath
       for (const arg of parts.slice(index + 2)) {
-        if (arg && COMMAND_REGEXP.test(arg) && getItemByPath(`${url}/${arg}`)) {
-          url = `${url}/${arg}`
+        if (
+          arg &&
+          COMMAND_REGEXP.test(arg) &&
+          getItemByPath(`${fullPath}/${arg}`, cli)
+        ) {
+          fullPath = `${fullPath}/${arg}`
         } else if (arg && ARGS_REGEXP.test(arg)) {
           const id = arg.match(ARGS_REGEXP)[0]
-          url = `${url}#${id}`
+          fullPath = `${fullPath}#${id}`
           break
         }
       }
+      const baseUrl = getToolsBaseUrl(cli)
+      const url = baseUrl + fullPath
       createLinkNode(url, astNode)
     }
   }

packages/gatsby-theme-iterative/src/sidebar.js

@@ -1,8 +1,13 @@
 module.exports = [
   {
-    slug: '',
-    label: 'Home',
-    source: 'index.md',
-    icon: 'house'
+    name: 'dvc',
+    data: [
+      {
+        slug: '',
+        label: 'Home',
+        source: 'index.md',
+        icon: 'house'
+      }
+    ]
   }
 ]

packages/gatsby-theme-iterative/src/utils/shared/sidebar.d.ts

@@ -18,7 +18,7 @@ export function findChildWithSource(source: ISidebarItem): ISidebarItem
 
 export function getFirstPage(): string
 
-export function getItemByPath(path: string): ISidebarItem
+export function getItemByPath(path: string, tool?: string): ISidebarItem
 
 export function getItemBySource(source: string): ISidebarItem | false
 

packages/gatsby-theme-iterative/src/utils/shared/sidebar.js

@@ -21,7 +21,8 @@
 */
 
 const { titleCase } = require('title-case')
-const sidebar = require('@dvcorg/gatsby-theme-iterative/sidebar')
+const sidebarArr = require('@dvcorg/gatsby-theme-iterative/sidebar')
+
 const {
   SIDEBAR_UPPERCASE_KEYWORDS_REGEX,
   SIDEBAR_PATH_ROOT,
@@ -61,15 +62,19 @@ function validateRawItem({ slug, source, children, type, url }) {
   }
 }
 
-function findItemByField(data, field, targetValue) {
+function findItemByField(data, field, targetValue, tool) {
   if (data.length) {
     for (let i = 0; i < data.length; i++) {
       const { children } = data[i]
 
-      if (data[i][field] === targetValue) {
+      if (
+        tool
+          ? data[i][field] === targetValue && data[i]['name'] === tool
+          : data[i][field] === targetValue
+      ) {
         return data[i]
       } else if (children) {
-        const result = findItemByField(children, field, targetValue)
+        const result = findItemByField(children, field, targetValue, tool)
         if (result) {
           return result
         }
@@ -88,7 +93,7 @@ function findPrevItemWithSource(data, item) {
   }
 }
 
-function normalizeItem({ rawItem, parentPath, resultRef, prevRef }) {
+function normalizeItem({ name, rawItem, parentPath, resultRef, prevRef }) {
   validateRawItem(rawItem)
 
   const { label, slug, source, tutorials, type, url, style, icon } = rawItem
@@ -101,6 +106,7 @@ function normalizeItem({ rawItem, parentPath, resultRef, prevRef }) {
   switch (type) {
     case 'external':
       return {
+        name,
         type,
         path: url,
         label,
@@ -119,6 +125,7 @@ function normalizeItem({ rawItem, parentPath, resultRef, prevRef }) {
       const relativePath = parentPath + slug
 
       return {
+        name,
         path: relativePath
           ? `${SIDEBAR_PATH_ROOT}/${relativePath}`
           : SIDEBAR_PATH_ROOT,
@@ -133,6 +140,7 @@ function normalizeItem({ rawItem, parentPath, resultRef, prevRef }) {
 }
 
 function normalizeSidebar({
+  name,
   data,
   parentPath,
   parentResultRef,
@@ -146,6 +154,7 @@ function normalizeSidebar({
     const isShortcut = typeof rawItem === 'string'
     rawItem = isShortcut ? { slug: rawItem } : rawItem
     const normalizedItem = normalizeItem({
+      name,
       rawItem,
       parentPath,
       resultRef,
@@ -158,6 +167,7 @@ function normalizeSidebar({
 
     if (rawItem.children) {
       normalizedItem.children = normalizeSidebar({
+        name,
         data: rawItem.children,
         parentPath: `${parentPath}${rawItem.slug}/`,
         parentResultRef: resultRef,
@@ -175,14 +185,28 @@ function normalizeSidebar({
   return currentResult
 }
 
+const getNormalizedSidebar = sidebarArr => {
+  let allSidebar = []
+  for (const sidebar of sidebarArr) {
+    allSidebar = allSidebar.concat(
+      normalizeSidebar({
+        data: sidebar.data,
+        parentPath: '',
+        name: sidebar.name
+      })
+    )
+  }
+  return allSidebar
+}
+
 /*
  * Exports
  */
+const normalizedSidebar = getNormalizedSidebar(sidebarArr)
 
-const normalizedSidebar = normalizeSidebar({
-  data: sidebar,
-  parentPath: ''
-})
+const structure = getNormalizedSidebar(
+  sidebarArr.filter(sidebar => sidebar.local)
+)
 
 function findChildWithSource(item) {
   // Return item unchanged if isn't root-relative
@@ -196,12 +220,12 @@ function getFirstPage() {
   return findChildWithSource(normalizedSidebar[0]).path
 }
 
-function getItemByPath(path) {
+function getItemByPath(path, tool) {
   const normalizedPath = path.replace(/\/$/, '')
   const isRoot = normalizedPath === SIDEBAR_PATH_ROOT
   const item = isRoot
     ? normalizedSidebar[0]
-    : findItemByField(normalizedSidebar, 'path', normalizedPath)
+    : findItemByField(normalizedSidebar, 'path', normalizedPath, tool)
 
   if (!item) return false
 
@@ -236,7 +260,7 @@ function getParentsListFromPath(path) {
 }
 
 module.exports = {
-  structure: normalizedSidebar,
+  structure,
   findChildWithSource,
   getItemByPath,
   getItemBySource,

packages/gatsby-theme-iterative/src/utils/shared/sidebarUtils.js

@@ -0,0 +1,77 @@
+const sidebarArr = require('@dvcorg/gatsby-theme-iterative/sidebar')
+const path = require('path')
+const fs = require('fs')
+const fetch = require('isomorphic-fetch')
+
+const availableTools = (sidebarArr || [])
+  .filter(item => item.local)
+  .map(item => item.name)
+
+const getToolsBaseUrl = cli => {
+  if (availableTools.includes(cli)) return ''
+  switch (cli) {
+    case 'dvc':
+      return 'https://dvc.org'
+    case 'cml':
+      return 'https://cml.dev'
+    case 'mlem':
+      return 'https://mlem.ai'
+    default:
+      return ''
+  }
+}
+
+const getSideBarUrl = (repo, mainBranch = 'main') => {
+  return `https://raw.githubusercontent.com/iterative/${repo}/${mainBranch}/content/docs/sidebar.json`
+}
+
+const getSidebar = async tool => {
+  try {
+    let url = tool.url
+    if (!url) url = getSideBarUrl(tool.repo, tool.mainBranch)
+    const res = await fetch(url)
+    const sidebar = await res.json()
+    return sidebar
+  } catch (error) {
+    console.error(
+      `Error getting sidebar.json for ${tool.name} from repo ${tool.repo} branch ${tool.mainBranch}`
+    )
+    console.error(error)
+    //skipping
+    return []
+  }
+}
+
+const writeSidebarToFile = allSidebar => {
+  const dir = 'tmp'
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir)
+  }
+  const file = path.join(dir, 'sidebar.json')
+  const content = JSON.stringify(allSidebar, null, 2)
+  fs.writeFileSync(file, content)
+}
+
+const getAllToolsSidebar = async tools => {
+  let allSidebar = []
+
+  for (const tool of tools) {
+    if (tool.data) {
+      tool.local = true
+      allSidebar = allSidebar.concat(tool)
+    } else {
+      const sidebar = await getSidebar(tool)
+      tool.data = sidebar
+      allSidebar = allSidebar.concat(tool)
+    }
+  }
+  writeSidebarToFile(allSidebar)
+}
+
+module.exports = {
+  getToolsBaseUrl,
+  getSideBarUrl,
+  getSidebar,
+  writeSidebarToFile,
+  getAllToolsSidebar
+}