fix: Markdown README issues (#507)

Author: dogmar

src/components/Markdown.tsx

@@ -4,6 +4,8 @@ import ReactMarkdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw'
 import styled from 'styled-components'
 
+import { isExternalUrl, removeTrailingSlashes } from '../utils/urls'
+
 import MultilineCode from './Code'
 import InlineCode from './InlineCode'
 
@@ -42,8 +44,10 @@ function getLastStringChild(children: any, depth = 0): any {
 function MarkdownPreformatted({ children, ...props }: any) {
   let lang
 
-  if (children.props?.className?.startsWith('lang-')) {
-    lang = children.props.className.slice(5)
+  const className = children?.[0]?.props?.className
+
+  if (className && typeof className === 'string') {
+    lang = /language-(\w+)/.exec(className)?.[1] || ''
   }
   const stringChild = getLastStringChild(children) || ''
 
@@ -170,9 +174,9 @@ function MarkdownImage({
   ...props
 }: any) {
   // Convert local image paths to full path on github
-  // Only works if primary git branch is named "master"
-  if (gitUrl && src && !src.match(/^https*/)) {
-    src = `${gitUrl}/raw/${mainBranch}/${src}`
+  if (gitUrl && src && !isExternalUrl(src)) {
+    src = src.replace(/^\//, '')
+    src = `${removeTrailingSlashes(gitUrl)}/raw/${mainBranch}/${src}`
   }
 
   return (
@@ -186,6 +190,33 @@ function MarkdownImage({
   )
 }
 
+function MarkdownLink({
+  href,
+  gitUrl,
+  mainBranch,
+  ...props
+}: {
+  href: string
+  gitUrl: string
+  mainBranch: string
+}) {
+  // Convert local readme hrefs to full path on github
+  if (gitUrl && href && !isExternalUrl(href)) {
+    // Remove potential starting slash
+    href = href.replace(/^\//, '')
+    href = `${removeTrailingSlashes(gitUrl)}/blob/${mainBranch}/${href}`
+  }
+
+  return (
+    <MdA
+      {...props}
+      target="_blank"
+      rel="noopener noreferrer"
+      href={href}
+    />
+  )
+}
+
 function Markdown({ text, gitUrl, mainBranch }: MarkdownProps) {
   return useMemo(
     () => (
@@ -208,7 +239,10 @@ function Markdown({ text, gitUrl, mainBranch }: MarkdownProps) {
           }),
           p: render({ component: MdP }),
           div: render({ component: MdDiv }),
-          a: render({ component: MdA, props: { target: '_blank' } }),
+          a: render({
+            component: MarkdownLink,
+            props: { gitUrl, mainBranch },
+          }),
           span: render({ component: MdSpan }),
           code: render({ component: InlineCode }),
           pre: render({

src/stories/Markdown.stories.tsx

@@ -10,6 +10,8 @@ const markdown = `# Plural Console
   </div>
 </div>
 
+![Console](/assets/public/PluralConsole-background.png)
+
 # H1 - Some un-ordered lists
 
 * Reception of over-the-air application updates
@@ -47,14 +49,33 @@ Lorem <i>italic</i> dolor sit <em>em</em>, consectetur adipiscing elit, sed do e
 
 > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
-###### H6 - A code block
+###### H6 - A code block without a language
 
-\`\`\`sh
+\`\`\`
 brew install erlang@23
 cp -r /opt/homebrew/opt/erlang@23/lib/erlang ~/.asdf/installs/erlang/23.1.5
 asdf reshim erlang 23.1.5
 \`\`\`
 
+###### H6 - A code block with a language
+
+\`\`\`javascript
+function sum(x,y) {
+  return x + y;
+}
+
+const num1 = 12;
+const num2 = 24;
+
+console.log(sum(num1, num2));
+\`\`\`
+
+###### Links
+[Absolute url](https://google.com)  
+[Absolute url - no protocol](//google.com)  
+[Relative url – Console Readme](README.md)  
+[Root relative url – Console Security](/SECURITY.md)  
+
 ___
 
 # Some more stuff from Chatwoot's readme