Add external doc sidebar links and replace "Changelog" with one.

content/docs/sidebar.json

@@ -440,17 +440,8 @@
     ]
   },
   {
-    "slug": "changelog",
-    "source": false,
-    "children": [
-      {
-        "label": "v0.12 - v0.18",
-        "slug": "0.18"
-      },
-      {
-        "label": "v0.19 - v0.35",
-        "slug": "0.35"
-      }
-    ]
+    "label": "Changelog",
+    "url": "https://github.com/iterative/dvc/releases",
+    "type": "external"
   }
 ]

src/components/Community/data.json

@@ -38,7 +38,7 @@
       "description": "Step-by-step introduction to basic DVC features"
     },
     {
-      "url": "/doc/changelog",
+      "url": "https://github.com/iterative/dvc/releases",
       "title": "Changelog",
       "description": "See what's new in DVC."
     }

src/components/Documentation/Layout/SidebarMenu/index.tsx

@@ -8,6 +8,7 @@ import includes from 'lodash/includes'
 import ShowOnly from '../../../ShowOnly'
 import DownloadButton from '../../../DownloadButton'
 import Link from '../../../Link'
+import { ReactComponent as ExternalLinkIcon } from '../../../../../static/img/external-link-minimal.svg'
 
 import {
   structure,
@@ -25,34 +26,53 @@ interface ISidebarMenuItemProps {
   source: boolean | string
   onClick: (e: React.MouseEvent) => void
   activePaths?: Array<string>
+  type?: string
 }
 
 const SidebarMenuItem: React.FC<ISidebarMenuItemProps> = ({
   children,
   label,
   path,
   activePaths,
-  onClick
+  onClick,
+  type
 }) => {
   const isActive = activePaths && includes(activePaths, path)
   const isRootParent =
     activePaths && activePaths.length > 1 && activePaths[0] === path
 
-  return (
-    <>
+  const className = cn(
+    styles.sectionLink,
+    isActive && styles.active,
+    isRootParent && 'docSearch-lvl0',
+    'link-with-focus'
+  )
+
+  const parentElement =
+    type === 'external' ? (
+      <Link
+        href={path}
+        id={path}
+        className={className}
+        onClick={onClick}
+        target="_blank"
+      >
+        {label} <ExternalLinkIcon />
+      </Link>
+    ) : (
       <Link
         href={getPathWithSource(path)}
         id={path}
-        className={cn(
-          styles.sectionLink,
-          isActive && styles.active,
-          isRootParent && 'docSearch-lvl0',
-          'link-with-focus'
-        )}
+        className={className}
         onClick={onClick}
       >
         {label}
       </Link>
+    )
+
+  return (
+    <>
+      {parentElement}
       {children && (
         <Collapse isOpened={!!isActive}>
           {children.map(item => (

src/components/Link/index.tsx

@@ -21,12 +21,13 @@ const ResultLinkComponent: React.FC<ILinkProps> = ({
   href,
   children,
   rel,
+  target,
   ...restProps
 }) => {
   // Handle all situations where a basic `a` must be used over Gatsby Link
   const hrefIsRelative = isRelative(href)
   const hrefIsMailto = isMailto(href)
-  const hrefHasTarget = restProps.target
+  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('#')
@@ -40,13 +41,19 @@ const ResultLinkComponent: React.FC<ILinkProps> = ({
     /*
        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 && typeof rel !== 'string') {
-      rel = 'noopener noreferrer'
+    if (!hrefIsRelative) {
+      if (typeof rel !== 'string') {
+        rel = 'noopener noreferrer'
+      }
+      if (!hrefHasTarget) {
+        target = '_blank'
+      }
     }
 
     return (
-      <a href={href} rel={rel} {...restProps}>
+      <a href={href} rel={rel} target={target} {...restProps}>
         {children}
       </a>
     )

src/utils/shared/sidebar.js

@@ -25,17 +25,25 @@ const PATH_ROOT = '/doc'
 const FILE_ROOT = '/docs/'
 const FILE_EXTENSION = '.md'
 
-function validateRawItem({ slug, source, children }) {
+function validateRawItem({ slug, source, children, type, url }) {
   const isSourceDisabled = source === false
 
-  if (typeof slug !== 'string') {
-    throw Error("'slug' field is required in objects in sidebar.json")
-  }
+  switch (type) {
+    case 'external':
+      if (typeof url !== 'string') {
+        throw Error("'url' field is required in external sidebar.json entries")
+      }
+      break
+    default:
+      if (typeof slug !== 'string') {
+        throw Error("'slug' field is required in local sidebar.json entries")
+      }
 
-  if (isSourceDisabled && (!children || !children.length)) {
-    throw Error(
-      "If you set 'source' to false, you had to add at least one child"
-    )
+      if (isSourceDisabled && (!children || !children.length)) {
+        throw Error(
+          'Local sidebar.json entries with no source must have children'
+        )
+      }
   }
 }
 
@@ -69,26 +77,35 @@ function findPrevItemWithSource(data, item) {
 function normalizeItem({ rawItem, parentPath, resultRef, prevRef }) {
   validateRawItem(rawItem)
 
-  const { label, slug, source, tutorials } = rawItem
+  const { label, slug, source, tutorials, type, url } = rawItem
 
-  // If prev item doesn't have source we need to search for it
-  const prevItemWithSource =
-    prevRef && findPrevItemWithSource(resultRef, prevRef)
+  switch (type) {
+    case 'external':
+      return {
+        type,
+        path: url,
+        label
+      }
+    default:
+      // If prev item doesn't have source we need to search for it
+      const prevItemWithSource =
+        prevRef && findPrevItemWithSource(resultRef, prevRef)
 
-  const prev = prevItemWithSource && prevItemWithSource.path
+      const prev = prevItemWithSource && prevItemWithSource.path
 
-  const sourceFileName = source ? source : slug + FILE_EXTENSION
-  const sourcePath = FILE_ROOT + parentPath + sourceFileName
+      const sourceFileName = source ? source : slug + FILE_EXTENSION
+      const sourcePath = FILE_ROOT + parentPath + sourceFileName
 
-  const relativePath = parentPath + slug
+      const relativePath = parentPath + slug
 
-  return {
-    path: relativePath ? `${PATH_ROOT}/${relativePath}` : PATH_ROOT,
-    source: source === false ? false : sourcePath,
-    label: label ? label : startCase(slug),
-    tutorials: tutorials || {},
-    prev,
-    next: undefined
+      return {
+        path: relativePath ? `${PATH_ROOT}/${relativePath}` : PATH_ROOT,
+        source: source === false ? false : sourcePath,
+        label: label ? label : startCase(slug),
+        tutorials: tutorials || {},
+        prev,
+        next: undefined
+      }
   }
 }
 
@@ -145,7 +162,11 @@ const normalizedSidebar = normalizeSidebar({
 })
 
 function findChildWithSource(item) {
-  return item.source ? item : findChildWithSource(item.children[0])
+  // Return item unchanged if isn't root-relative
+  if (!item.path.startsWith('/')) return item
+  return item.source
+    ? item
+    : findChildWithSource(item.children && item.children[0])
 }
 
 function getFirstPage() {