Relative paths for docs/ issue + edit on github link + path.resolve windows issue

Author: nilubava

config.js

@@ -30,7 +30,7 @@ const config = {
     description:
       'Prisma replaces traditional ORMs and can be used to build GraphQL servers, REST APIs, microservices & more.',
     keywords: 'Docs, prisma, 2.0',
-    docsLocation: 'https://github.com/prisma/prisma2-docs/tree/master/content',
+    docsLocation: 'https://github.com/prisma/docs/tree/master/content',
     twitter: {
       site: '@prisma',
       creator: '@prisma',

gatsby-config.js

@@ -19,6 +19,9 @@ const gatsbyRemarkPlugins = [
   {
     resolve: `gatsby-remark-images`,
   },
+  {
+    resolve: require.resolve('./plugins/gatsby-remark-to-absoluteurl'),
+  },
   {
     resolve: require.resolve('./plugins/gatsby-remark-check-links-numberless'),
   },

package.json

@@ -31,6 +31,7 @@
     "gatsby-remark-autolink-headers": "^2.2.1",
     "gatsby-remark-images": "^3.2.1",
     "gatsby-remark-prismjs": "^3.2.5",
+    "gatsby-remark-rewrite-relative-links": "^1.0.8",
     "gatsby-source-filesystem": "^2.0.24",
     "gatsby-source-remote-file": "^0.1.9",
     "gatsby-transformer-remark": "^2.3.2",

plugins/gatsby-remark-check-links-numberless/index.js

@@ -5,12 +5,12 @@ function getCacheKey(node) {
   return `remark-check-links-${node.id}-${node.internal.contentDigest}`
 }
 
-function getHeadingsMapKey(link, path) {
+function getHeadingsMapKey(link, pathUrl) {
   let key = link
   const hashIndex = link.indexOf('#')
   const hasHash = hashIndex !== -1
   if (hasHash) {
-    key = link.startsWith('#') ? path : link.slice(0, hashIndex)
+    key = link.startsWith('#') ? pathUrl : link.slice(0, hashIndex)
   }
 
   return {
@@ -32,6 +32,7 @@ module.exports = async function plugin(
   { exceptions = [], ignore = [], verbose = true } = {}
 ) {
   const withPathPrefix = createPathPrefixer(pathPrefix)
+  const pathSep = path.sep || '/'
   if (!markdownNode.fields) {
     // let the file pass if it has no fields
     return markdownAST
@@ -48,23 +49,6 @@ module.exports = async function plugin(
 
     if (!node.url.startsWith('mailto:') && !/^https?:\/\//.test(node.url)) {
       let tranformedUrl = node.url
-
-      if (!node.url.startsWith('#') && !node.url.startsWith('/')) {
-        const parent = getNode(markdownNode.parent)
-        tranformedUrl = withPathPrefix(
-          path
-            .resolve(
-              markdownNode.fields.slug
-                .replace(/\d+-/g, '')
-                .replace(/\/$/, '')
-                .split(path.sep)
-                .slice(0, parent.name === 'index' ? undefined : -1)
-                .join(path.sep) || '/',
-              node.url
-            )
-            .replace(/\/?(\?|#|$)/, '/$1')
-        )
-      }
       links.push({
         ...node,
         tranformedUrl,
@@ -78,7 +62,7 @@ module.exports = async function plugin(
   const parent = await getNode(markdownNode.parent)
   const setAt = Date.now()
   cache.set(getCacheKey(parent), {
-    path: withPathPrefix(markdownNode.fields.slug.replace(/\d+-/g, '').concat('/')),
+    path: withPathPrefix(markdownNode.fields.slug.replace(/\d+-/g, '').concat(pathSep)),
     links,
     headings,
     setAt,
@@ -115,23 +99,23 @@ module.exports = async function plugin(
   const prefixedExceptions = exceptions.map(withPathPrefix)
   const pathKeys = Object.keys(linksMap)
 
-  for (const path in linksMap) {
-    if (prefixedIgnore.includes(path)) {
+  for (const pathL in linksMap) {
+    if (prefixedIgnore.includes(pathL)) {
       // don't count broken links for ignored pages
       continue
     }
 
-    const linksForPath = linksMap[path]
+    const linksForPath = linksMap[pathL]
     if (linksForPath.length) {
       const brokenLinks = linksForPath.filter(link => {
         // return true for broken links, false = pass
-        const { key, hasHash, hashIndex } = getHeadingsMapKey(link.tranformedUrl, path)
+        const { key, hasHash, hashIndex } = getHeadingsMapKey(link.tranformedUrl, pathL)
         if (prefixedExceptions.includes(key)) {
           return false
         }
 
         const url = link.tranformedUrl.slice(0, hashIndex)
-        const urlToCheck = url.slice(-1) === '/' ? url : url.concat('/')
+        const urlToCheck = url.slice(-1) === pathSep ? url : url.concat(pathSep)
         const headings = headingsMap[key]
 
         if (headings) {
@@ -149,7 +133,7 @@ module.exports = async function plugin(
       const brokenLinkCount = brokenLinks.length
       totalBrokenLinks += brokenLinkCount
       if (brokenLinkCount && verbose) {
-        console.warn(`${brokenLinkCount} broken links found on ${path}`)
+        console.warn(`${brokenLinkCount} broken links found on ${pathL}`)
         for (const link of brokenLinks) {
           let prefix = '-'
           if (link.position) {
@@ -162,7 +146,7 @@ module.exports = async function plugin(
               ':'
             )
           }
-          console.warn(`${prefix} ${link.url}`)
+          console.warn(`${prefix} ${link.originalUrl}`)
         }
         console.log('')
       }

plugins/gatsby-remark-to-absoluteurl/index.js

@@ -0,0 +1,41 @@
+var visit = require('unist-util-visit')
+const path = require('path')
+
+function withPathPrefix(url, pathPrefix) {
+  const prefixed = pathPrefix + url
+  return prefixed.replace(/\/\//, '/')
+}
+
+module.exports = function plugin({ markdownAST, markdownNode, pathPrefix, getNode }) {
+  function visitor(node) {
+    node.originalUrl = node.url
+    if (
+      markdownNode.fields &&
+      markdownNode.fields.slug &&
+      !node.url.startsWith('/') &&
+      !node.url.startsWith('#') &&
+      !node.url.startsWith('mailto:') &&
+      !/^https?:\/\//.test(node.url)
+    ) {
+      const parent = getNode(markdownNode.parent)
+      node.url = withPathPrefix(
+        path
+          .resolve(
+            markdownNode.fields.slug
+              .replace(/\d+-/g, '')
+              .replace(/\/$/, '')
+              .split(path.sep)
+              .slice(0, parent.name === 'index' ? undefined : -1)
+              .join(path.sep) || '/',
+            node.url
+          )
+          .replace(/\/?(\?|#|$)/, '/$1'),
+        pathPrefix
+      )
+    }
+  }
+
+  visit(markdownAST, 'link', visitor)
+
+  return markdownAST
+}

plugins/gatsby-remark-to-absoluteurl/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "gatsby-remark-to-absoluteurl",
+  "version": "1.0.0",
+  "description": "Relative to absolute url",
+  "main": "index.js",
+  "author": "Nilufar Bava <[email protected]>",
+  "license": "ISC",
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin"
+  ]
+}

src/components/customMdx/button.tsx

@@ -5,6 +5,9 @@ import ArrowRight from '../../icons/ArrowRight'
 import withProps from 'styled-components-ts'
 import { useLocation } from '@reach/router'
 import { withPrefix } from 'gatsby'
+import isAbsoluteUrl from 'is-absolute-url'
+
+import * as path from 'path'
 
 export interface ButtonProps {
   href?: string
@@ -72,13 +75,27 @@ export const ButtonWrapper = withProps<ButtonProps>(styled.a)`
 //       background: ${p => darken(0.07, backgroundColorMap[p.color || 'green'])};
 //     }
 
-const ButtonLink = (props: ButtonProps) => {
+const getAbsPath = (href: any, location: any) => {
+  return withPrefix(
+    path
+      .resolve(
+        location.pathname
+          .replace('/docs', '')
+          .replace('docs', '')
+          .replace(/\/$/, '')
+          .split(path.sep)
+          .slice(0, -1)
+          .join(path.sep) || '/',
+        href
+      )
+      .replace(/\/?(\?|#|$)/, '/$1')
+  )
+}
+const ButtonLink = ({ href, ...props }: ButtonProps) => {
   const location = useLocation()
-  if (location.pathname === '/docs/') {
-    props.href = withPrefix(props.href!)
-  }
+  const newHref = isAbsoluteUrl(href) ? href : getAbsPath(href, location)
   return (
-    <ButtonWrapper {...props}>
+    <ButtonWrapper href={newHref} {...props}>
       {props.arrowLeft && <StyledArrowLeft />}
       {props.children}
       {props.arrow && <StyledArrow />}

yarn.lock

@@ -7107,6 +7107,13 @@ gatsby-remark-prismjs@^3.2.5:
     parse-numeric-range "^0.0.2"
     unist-util-visit "^1.4.1"
 
+gatsby-remark-rewrite-relative-links@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-rewrite-relative-links/-/gatsby-remark-rewrite-relative-links-1.0.8.tgz#b2a1190336fa0760518a4e318bc2c503a904f20a"
+  integrity sha512-7jCyMM+AWdp8mFLUWuJ5RGPQIKFzpLqf253QR6Aq8xrhlV0Bcz2k1+03MxPnGP0R5XetIoRm2W864KrbIZdk9Q==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
 gatsby-remark-sectionize@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/gatsby-remark-sectionize/-/gatsby-remark-sectionize-1.0.0.tgz#3b2c7e407738160fe3dd1d62db955cc64e8ceea4"