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",
+    "slug": "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.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/utils/shared/sidebar.js

@@ -69,26 +69,35 @@ function findPrevItemWithSource(data, item) {
 function normalizeItem({ rawItem, parentPath, resultRef, prevRef }) {
   validateRawItem(rawItem)
 
-  const { label, slug, source, tutorials } = rawItem
-
-  // If prev item doesn't have source we need to search for it
-  const prevItemWithSource =
-    prevRef && findPrevItemWithSource(resultRef, prevRef)
+  const { label, slug, source, tutorials, type } = rawItem
+
+  switch (type) {
+    case 'external':
+      return {
+        type,
+        path: slug,
+        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 +154,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() {