Build time tooltips

content/docs/user-guide/basic-concepts/data-artifact.md

@@ -0,0 +1,8 @@
+---
+name: 'Data Artifact'
+match: ['data artifact', 'data artifacts']
+---
+
+Any data file or directory, as well as intermediate or final result that is
+tracked by DVC, for example by using `dvc add`. See
+[Versioning Data and Models](/doc/use-cases/versioning-data-and-model-files).

content/docs/user-guide/basic-concepts/dependency.md

@@ -0,0 +1,8 @@
+---
+name: Dependency
+match: [dependency, dependencies]
+---
+
+A file or directory (possibly tracked by DVC) recorded in the `deps` section of
+a DVC-file (stage file). See `dvc run`. Stages are invalidated when any of their
+dependencies change.

content/docs/user-guide/basic-concepts/dvc-cache.md

@@ -0,0 +1,9 @@
+---
+name: 'DVC Cache'
+match: ['DVC cache', cache, caches, cached]
+---
+
+The DVC cache is a hidden storage (by default located in the `.dvc/cache`
+directory) for files that are under DVC control, and their different versions.
+For more details, please refer to this
+[document](/doc/user-guide/dvc-files-and-directories#structure-of-cache-directory).

content/docs/user-guide/basic-concepts/external-dependency.md

@@ -0,0 +1,9 @@
+---
+name: 'External Dependency'
+match: ['external dependency', 'external dependencies']
+---
+
+A DVC-file dependency with origin in an external source, for example HTTP, SSH,
+Amazon S3, Google Cloud Storage remote locations, or even other DVC
+repositories. See
+[External Dependencies](/doc/user-guide/external-dependencies).

content/docs/user-guide/basic-concepts/import-stage.md

@@ -0,0 +1,7 @@
+---
+name: 'Import Stage'
+match: ['import stage', 'import stages']
+---
+
+Stage (DVC-file) created with the `dvc import` or `dvc import-url` commands.
+They represent files or directories from external sources.

content/docs/user-guide/basic-concepts/output.md

@@ -0,0 +1,8 @@
+---
+name: Output
+match: [output, outputs]
+---
+
+A file or directory tracked by DVC, recorded in the `outs` section of a
+DVC-file. Outputs are usually the result of stages. See `dvc add`, `dvc run`,
+`dvc import`, et al. A.k.a. _data artifact_

content/docs/user-guide/basic-concepts/workspace.md

@@ -0,0 +1,7 @@
+---
+name: Workspace
+match: [workspace]
+---
+
+Directory containing all your project files, for example raw datasets, source
+code, ML models, etc. It will contain your DVC project.

gatsby-node.js

@@ -11,6 +11,7 @@ const callOnModels = require('./src/gatsby/utils/models')
 
 exports.createSchemaCustomization = api =>
   callOnModels(models, 'createSchemaCustomization', api)
+exports.sourceNodes = api => callOnModels(models, 'sourceNodes', api)
 exports.onCreateNode = api => callOnModels(models, 'onCreateNode', api)
 exports.createPages = api => callOnModels(models, 'createPages', api)
 

package.json

@@ -70,7 +70,6 @@
     "react-dom": "^16.13.1",
     "react-ga": "^2.7.0",
     "react-helmet": "^5.2.1",
-    "react-markdown": "^4.3.1",
     "react-popover": "^0.5.10",
     "react-slick": "^0.25.2",
     "react-use": "^14.0.0",

src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx

@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react'
 import cn from 'classnames'
-import ReactMarkdown from 'react-markdown'
 import Portal from '@reach/portal'
 import throttle from 'lodash/throttle'
 
@@ -110,9 +109,9 @@ const DesktopView: React.FC<IDesktopViewProps> = ({
             onBlur={hide}
           >
             <div className={styles.tooltipHeader}>{header}</div>
-            <ReactMarkdown
+            <div
               className={cn('markdown-body', styles.tooltipBody)}
-              source={description}
+              dangerouslySetInnerHTML={{ __html: description }}
             />
           </div>
         </Portal>

src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import cn from 'classnames'
 import Portal from '@reach/portal'
-import ReactMarkdown from 'react-markdown'
 
 import { isTriggeredFromKB } from '../../../../../utils/front/keyboard'
 
@@ -68,7 +67,10 @@ const MobileView: React.FC<IMobileViewProps> = ({
                 <div className={cn(styles.closeLine, styles.second)} />
               </div>
               <h5 className={styles.modalHeader}>{header}</h5>
-              <ReactMarkdown className="markdown-body" source={description} />
+              <div
+                className="markdown-body"
+                dangerouslySetInnerHTML={{ __html: description }}
+              />
             </div>
           </div>
         </Portal>

src/components/Documentation/Markdown/Tooltip/index.tsx

@@ -5,9 +5,10 @@ import ShowOnly from '../../../ShowOnly'
 import DesktopView from './DesktopView'
 import MobileView from './MobileView'
 
-import glossary from '../../../../../content/docs/glossary'
+import useGlossary from '../../../../utils/front/glossary'
 
 const Tooltip: React.FC<{ text: string }> = ({ text }) => {
+  const glossary = useGlossary()
   const [state, setState] = useState({
     description: '',
     header: '',

src/gatsby/models.js

@@ -5,6 +5,7 @@ const authors = require('./models/authors')
 const imageSourcePaths = require('./models/image-source-paths')
 const jsonFiles = require('./models/json-files')
 const communityPage = require('./models/community')
+const glossary = require('./models/glossary')
 
 const models = [
   markdownContent,
@@ -13,7 +14,8 @@ const models = [
   authors,
   imageSourcePaths,
   jsonFiles,
-  communityPage
+  communityPage,
+  glossary
 ]
 
 module.exports = models

src/gatsby/models/authors/onCreateMarkdownContentNode.js

@@ -1,7 +1,6 @@
-function createMarkdownAuthorNode(api, { parentNode }) {
+async function createMarkdownAuthorNode(api, { parentNode, createChildNode }) {
   if (parentNode.relativeDirectory.split('/')[0] !== 'authors') return
   const { node, actions, createNodeId, createContentDigest } = api
-  const { createNode, createParentChildLink } = actions
   const { frontmatter, rawMarkdownBody } = node
   const { path, name, avatar } = frontmatter
   const { relativePath } = parentNode
@@ -24,8 +23,7 @@ function createMarkdownAuthorNode(api, { parentNode }) {
       contentDigest: createContentDigest(fieldData)
     }
   }
-  createNode(authorNode)
-  createParentChildLink({ parent: node, child: authorNode })
+  return createChildNode(authorNode)
 }
 
 module.exports = createMarkdownAuthorNode

src/gatsby/models/blog/onCreateMarkdownContentNode.js

@@ -1,9 +1,8 @@
 const { markdownToHtml } = require('../../common.js')
 
-function createMarkdownBlogNode(api, { parentNode }) {
+async function createMarkdownBlogNode(api, { parentNode, createChildNode }) {
   if (parentNode.relativeDirectory.split('/')[0] !== 'blog') return
-  const { node, actions, createNodeId, createContentDigest } = api
-  const { createNode, createParentChildLink } = actions
+  const { node, createNodeId, createContentDigest } = api
   const { frontmatter, rawMarkdownBody } = node
   const {
     date,
@@ -45,8 +44,7 @@ function createMarkdownBlogNode(api, { parentNode }) {
       contentDigest: createContentDigest(fieldData)
     }
   }
-  createNode(postNode)
-  createParentChildLink({ parent: node, child: postNode })
+  return createChildNode(postNode)
 }
 
 module.exports = createMarkdownBlogNode

src/gatsby/models/community/index.js

@@ -1,5 +1,6 @@
 const moment = require('moment')
 const { getExpirationFields } = require('../../../utils/shared/expiration.js')
+const { childNodeCreator } = require('../../utils/models/nodes.js')
 
 function expiredNodesLog(typeName, nodes) {
   if (nodes.length > 0) {
@@ -9,22 +10,6 @@ function expiredNodesLog(typeName, nodes) {
   }
 }
 
-function childNodeCreator({
-  node,
-  actions: { createNode, createParentChildLink }
-}) {
-  return async function ({ children = [], ...rest }) {
-    const newNode = {
-      parent: node.id,
-      children,
-      ...rest
-    }
-
-    await createNode(newNode)
-    await createParentChildLink({ parent: node, child: newNode })
-  }
-}
-
 const expirationFields = {
   expires: {
     type: 'Date',
@@ -77,10 +62,10 @@ module.exports = {
     ])
   },
   async onParseJsonFile(api, { content }) {
-    const createChildNode = childNodeCreator(api)
     const { node, createNodeId, createContentDigest } = api
     // Only operate on the File node for data.json
     if (node.relativePath !== 'community.json') return null
+    const createChildNode = childNodeCreator(api)
     const { events, hero, ...rest } = content
 
     const heroesPromise =

src/gatsby/models/docs/onCreateMarkdownContentNode.js

@@ -1,11 +1,14 @@
 const path = require('path')
 
-function createMarkdownDocsNode(api, { parentNode }) {
+async function createMarkdownDocsNode(api, { parentNode, createChildNode }) {
+  // Suppress page creation for Basic Concepts and the Glossary
+  // They're only used in tooltips now, but we intend to expand on them later.
+  if (parentNode.relativeDirectory === 'docs/user-guide/basic-concepts') return
+
   const splitDir = parentNode.relativeDirectory.split('/')
   if (splitDir[0] !== 'docs') return
 
-  const { node, actions, createNodeId, createContentDigest } = api
-  const { createNode, createParentChildLink } = actions
+  const { node, createNodeId, createContentDigest } = api
   const { name, relativePath } = parentNode
   splitDir[0] = 'doc'
 
@@ -29,8 +32,7 @@ function createMarkdownDocsNode(api, { parentNode }) {
     }
   }
 
-  createNode(docNode)
-  createParentChildLink({ parent: node, child: docNode })
+  return createChildNode(docNode)
 }
 
 module.exports = createMarkdownDocsNode