Move Documentation components to theme

gatsby-config.js

@@ -37,7 +37,12 @@ const plugins = [
   'gatsby-plugin-react-helmet',
   'gatsby-plugin-sitemap',
   'gatsby-plugin-twitter',
-  'gatsby-theme-iterative-docs',
+  {
+    resolve: 'gatsby-theme-iterative-docs',
+    options: {
+      remark: false
+    }
+  },
   {
     resolve: 'gatsby-source-filesystem',
     options: {

gatsby-node.js

@@ -1,4 +1,5 @@
 require('dotenv').config()
+const path = require('path')
 
 const { setPageContext } = require('./src/gatsby/common')
 
@@ -39,4 +40,14 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
     }
     actions.replaceWebpackConfig(config)
   }
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        'gatsby-theme-iterative-docs': path.resolve(
+          'plugins',
+          'gatsby-theme-iterative-docs'
+        )
+      }
+    }
+  })
 }

plugins/gatsby-remark-dvc-linker/apiLinker.js

@@ -1,7 +1,9 @@
 /* eslint-env node */
 
 const { createLinkNode } = require('./helpers')
-const { getItemByPath } = require('../../src/utils/shared/sidebar')
+const {
+  getItemByPath
+} = require('../../plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar')
 
 const DVC_API_REGEXP = /dvc.api([a-z-._]*\(\)$)?/
 const METHOD_REGEXP = /^[a-z-._]*\(\)$/

plugins/gatsby-remark-dvc-linker/commandLinker.js

@@ -1,7 +1,9 @@
 /* eslint-env node */
 
 const { createLinkNode } = require('./helpers')
-const { getItemByPath } = require('../../src/utils/shared/sidebar')
+const {
+  getItemByPath
+} = require('../../plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar')
 
 const DVC_REGEXP = /dvc\s+[a-z][a-z-.]*/
 const COMMAND_REGEXP = /^[a-z][a-z-]*$/

plugins/gatsby-remark-dvc-linker/liveLinker.js

@@ -1,7 +1,9 @@
 /* eslint-env node */
 
 const { createLinkNode } = require('./helpers')
-const { getItemByPath } = require('../../src/utils/shared/sidebar')
+const {
+  getItemByPath
+} = require('../../plugins/gatsby-theme-iterative-docs/src/utils/shared/sidebar')
 
 const LIVE_API_REGEXP = /Live.([a-z-._]*\(\)$)?/
 const METHOD_REGEXP = /^[a-z-._]*\(\)$/

plugins/gatsby-theme-iterative-docs/gatsby-config.js

@@ -0,0 +1,57 @@
+module.exports = ({ remark }) => {
+  const plugins = []
+  if (remark) {
+    plugins.push({
+      resolve: 'gatsby-transformer-remark',
+      options: {
+        plugins: [
+          'gatsby-remark-embedder',
+          {
+            resolve: 'gatsby-remark-prismjs',
+            options: {
+              noInlineHighlight: true,
+              languageExtensions: [
+                {
+                  language: 'text',
+                  definition: {}
+                }
+              ]
+            }
+          },
+          {
+            resolve: 'gatsby-remark-smartypants',
+            options: {
+              quotes: false
+            }
+          },
+          {
+            resolve: 'gatsby-remark-embed-gist',
+            options: {
+              includeDefaultCss: true
+            }
+          },
+          'gatsby-remark-relative-images',
+          'gatsby-remark-copy-linked-files',
+          'gatsby-remark-external-links',
+          {
+            resolve: 'gatsby-remark-autolink-headers',
+            options: {
+              enableCustomId: true,
+              isIconAfterHeader: true
+            }
+          },
+          {
+            resolve: 'gatsby-remark-images',
+            options: {
+              withWebp: true
+            }
+          },
+          'gatsby-remark-responsive-iframe'
+        ]
+      }
+    })
+  }
+  return {
+    plugins
+  }
+}

plugins/gatsby-theme-iterative-docs/gatsby-node.js

@@ -10,8 +10,9 @@ exports.pluginOptionsSchema = ({ Joi }) => {
     disable: Joi.boolean().default(Boolean(process.env.SKIP_DOCS)),
     getTemplate: Joi.function().default(() => defaultGetTemplate),
     defaultTemplate: Joi.string().default(
-      path.resolve('src', 'templates', 'doc.tsx')
-    )
+      require.resolve('./src/templates/doc.tsx')
+    ),
+    remark: Joi.boolean().default(true)
   })
 }
 
@@ -33,6 +34,25 @@ exports.createSchemaCustomization = async api => {
   ])
 }
 
+exports.onCreateWebpackConfig = ({ actions }) => {
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        [path.resolve(__dirname, 'sidebar')]: path.resolve(
+          'src',
+          'gatsby-theme-iterative-docs',
+          'sidebar'
+        ),
+        [path.resolve(__dirname, 'redirects')]: path.resolve(
+          'src',
+          'gatsby-theme-iterative-docs',
+          'redirects'
+        )
+      }
+    }
+  })
+}
+
 exports.createPages = require('./createPages.js')
 
 exports.onCreateNode = require('./onCreateNode.js')

plugins/gatsby-theme-iterative-docs/index.js

@@ -0,0 +1 @@
+// noop

plugins/gatsby-theme-iterative-docs/pseudo-shadow.js

@@ -0,0 +1,3 @@
+const path = require('path')
+const pseudoShadow = modulePath => require(path.resolve(modulePath))
+module.exports = pseudoShadow

plugins/gatsby-theme-iterative-docs/redirects.js

@@ -0,0 +1,2 @@
+const pseudoShadow = require('./pseudo-shadow')
+module.exports = pseudoShadow('./src/gatsby-theme-iterative-docs/redirects')

plugins/gatsby-theme-iterative-docs/sidebar.js

@@ -0,0 +1,2 @@
+const pseudoShadow = require('./pseudo-shadow')
+module.exports = pseudoShadow('./src/gatsby-theme-iterative-docs/sidebar')

src/components/Documentation/WithJSX/index.tsx → plugins/gatsby-theme-iterative-docs/src/components/Documentation/WithJSX/index.tsx

@@ -3,8 +3,9 @@ import React from 'react'
 import MarkdownMain from '../Markdown/Main'
 import RightPanel from '../RightPanel'
 
-import { IHeading, getGithubLink } from '../'
+import { IHeading } from '../'
 import { getItemByPath } from '../../../utils/shared/sidebar'
+import { getGithubLink } from '../../../getGithubLink'
 
 interface IWithJSXProps {
   path: string

src/components/Documentation/index.tsx → plugins/gatsby-theme-iterative-docs/src/components/Documentation/index.tsx

@@ -5,15 +5,13 @@ import Markdown from './Markdown'
 import RightPanel from './RightPanel'
 
 import { getItemByPath } from '../../utils/shared/sidebar'
+import { getGithubLink } from '../../getGithubLink'
 
 export interface IHeading {
   slug: string
   text: string
 }
 
-export const getGithubLink = (source: string): string =>
-  `https://github.com/iterative/dvc.org/blob/master/content${source}`
-
 interface IDocumentationProps {
   path: string
   headings: Array<IHeading>

plugins/gatsby-theme-iterative-docs/src/components/Link/index.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback } from 'react'
+import { URL } from 'iso-url'
+import { useLocation } from '@reach/router'
+import GatsbyLink from 'gatsby-link'
+import { getRedirect } from '../../utils/shared/redirects'
+import { scrollIntoLayout, getScrollNode } from '../../utils/front/scroll'
+import safeQuerySelector from '../../utils/front/safeQuerySelector'
+
+export type ILinkProps = {
+  children: React.ReactNode
+  className?: string
+  href: string
+  target?: undefined | '_blank'
+  state?: unknown
+  scrollOptions?: Record<string, unknown>
+  optOutPreRedirect?: undefined | true
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>
+
+const PROTOCOL_REGEXP = /^https?:\/\//
+const isRelative = (url: string): boolean => !PROTOCOL_REGEXP.test(url)
+const isMailto = (url: string): boolean => url.startsWith('mailto:')
+
+const ResultLinkComponent: React.FC<ILinkProps> = ({
+  href,
+  children,
+  rel,
+  target,
+  download = false,
+  ...restProps
+}) => {
+  // Handle all situations where a basic `a` must be used over Gatsby Link
+  const hrefIsRelative = isRelative(href)
+  const hrefIsMailto = isMailto(href)
+  const hrefHasTarget = typeof target === 'string'
+  // Fragments within the page should be `a`, but links to other pages
+  // that have anchors should be okay.
+  const hrefIsRelativeFragment = href.startsWith('#')
+
+  if (
+    download ||
+    !hrefIsRelative ||
+    hrefIsMailto ||
+    hrefHasTarget ||
+    hrefIsRelativeFragment
+  ) {
+    /*
+       Change external links without an explicit rel to have 'noopener
+       noreferrer', but leave explicitly defined rels alone.
+       Do the same with `target=_blank`
+    */
+    if (!hrefIsRelative) {
+      if (typeof rel !== 'string') {
+        rel = 'noopener noreferrer'
+      }
+      if (!hrefHasTarget) {
+        target = '_blank'
+      }
+    }
+
+    return (
+      <a
+        download={download}
+        href={href}
+        rel={rel}
+        target={target}
+        {...restProps}
+      >
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <GatsbyLink to={href} {...restProps}>
+      {children}
+    </GatsbyLink>
+  )
+}
+
+const scrollToHash = (hash: string, scrollOptions = {}): void => {
+  if (hash) {
+    scrollIntoLayout(safeQuerySelector(hash), {
+      waitImages: true,
+      ...scrollOptions
+    })
+  }
+}
+
+const Link: React.FC<ILinkProps> = ({
+  href,
+  scrollOptions,
+  optOutPreRedirect,
+  ...restProps
+}) => {
+  const currentLocation = useLocation()
+
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>) => {
+      if (restProps.onClick) {
+        restProps.onClick(e)
+      }
+
+      // Handle local fragments manually, allowing for more control than
+      // native HTML fragment navigation.
+      if (href === '#') {
+        getScrollNode().scrollTop = 0
+      } else if (href.startsWith('#')) {
+        e.preventDefault()
+
+        // We can't navigate by direct usage of @reach/router#navigate because
+        // gatsby-react-router-scroll will package intercept scroll in this
+        // case and we will see undesired jump
+        window.history.pushState(null, '', href)
+        scrollToHash(href, scrollOptions)
+      }
+    },
+    [restProps.onClick, currentLocation]
+  )
+
+  const location = new URL(href)
+
+  if (location.host === currentLocation.host && !optOutPreRedirect) {
+    // Replace link href with redirect if it exists
+    const [, redirectUrl] = getRedirect(location.host, location.pathname)
+
+    if (redirectUrl) {
+      href = isRelative(redirectUrl)
+        ? redirectUrl + currentLocation.search
+        : redirectUrl
+    }
+  }
+
+  return <ResultLinkComponent href={href} {...restProps} onClick={onClick} />
+}
+
+export default Link

src/components/SEO/index.tsx → plugins/gatsby-theme-iterative-docs/src/components/SEO/index.tsx

@@ -3,9 +3,14 @@ import Helmet from 'react-helmet'
 import { IGatsbyImageData } from 'gatsby-plugin-image'
 
 import getSiteMeta from '../../queries/siteMeta'
-import { IPaginatorPageInfo } from '../Paginator'
 import { buildMetadata, MetaProps } from './helper'
 
+export interface IPaginatorPageInfo {
+  currentPage: number
+  nextPage?: string
+  previousPage?: string
+}
+
 interface ISEOProps {
   title?: string
   defaultMetaTitle?: boolean

plugins/gatsby-theme-iterative-docs/src/config/custom-media.js

@@ -0,0 +1,19 @@
+const screens = {
+  giant: 1200,
+  desktop: 1005,
+  tablet: 768,
+  phablet: 572,
+  phone: 376
+}
+
+module.exports = {
+  screens,
+  customMedia: {
+    '--xxs-scr': `(max-width: ${screens.phone}px)`,
+    '--xs-scr': `(max-width: ${screens.phablet}px)`,
+    '--sm-scr': `(max-width: ${screens.tablet}px)`,
+    '--md-scr': `(max-width: ${screens.desktop - 1}px)`,
+    '--lg-scr': `(min-width: ${screens.desktop}px)`,
+    '--xl-scr': `(min-width: ${screens.giant}px)`
+  }
+}

plugins/gatsby-theme-iterative-docs/src/constants.ts

@@ -0,0 +1 @@
+export const githubRepo = 'iterative/dvc'

plugins/gatsby-theme-iterative-docs/src/getGithubLink.ts

@@ -0,0 +1,3 @@
+import { githubRepo } from './constants'
+export const getGithubLink = (sourcePath: string): string =>
+  `https://github.com/${githubRepo}/blob/master/content${sourcePath}`

src/utils/front/breakpoints.ts → plugins/gatsby-theme-iterative-docs/src/utils/front/breakpoints.ts

@@ -1,5 +1,5 @@
 import includes from 'lodash/includes'
-import { customMedia } from '../../../config/postcss/media'
+import { customMedia } from '../../config/custom-media'
 
 type AvailableCustomMedia = keyof typeof customMedia