From 511b8eead216853d613429e1a6234f2116814763 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= <marcus@essenmitsosse.de>
Date: Fri, 25 Nov 2022 04:43:07 +0100
Subject: [PATCH] Add ability to load code from GitHub

---
 website/plugins/remarkCodeBlocks.mjs |  2 +-
 website/src/components/code.js       |  5 ++---
 website/src/components/github.js     | 11 +++++++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/website/plugins/remarkCodeBlocks.mjs b/website/plugins/remarkCodeBlocks.mjs
index 0d327e2a9..0e260e057 100644
--- a/website/plugins/remarkCodeBlocks.mjs
+++ b/website/plugins/remarkCodeBlocks.mjs
@@ -43,7 +43,7 @@ function remarkCodeBlocks(userOptions = {}) {
                     firstLine.startsWith('%%GITHUB_')
                 ) {
                     // GitHub URL
-                    attrs.github = 'true'
+                    attrs.github = node.value
                 }
                 // If it's a bash code block and single line, check for prompts
                 if (lang === 'bash') {
diff --git a/website/src/components/code.js b/website/src/components/code.js
index 199de6bbd..b1f134501 100644
--- a/website/src/components/code.js
+++ b/website/src/components/code.js
@@ -207,14 +207,13 @@ export class Code extends React.Component {
     static defaultProps = {
         lang: 'none',
         executable: null,
-        github: false,
     }
 
     static propTypes = {
         lang: PropTypes.string,
         title: PropTypes.string,
         executable: PropTypes.oneOf(['true', 'false', true, false, null]),
-        github: PropTypes.oneOf(['true', 'false', true, false, null]),
+        github: PropTypes.string,
         prompt: PropTypes.string,
         highlight: PropTypes.string,
         className: PropTypes.string,
@@ -246,7 +245,7 @@ export class Code extends React.Component {
         const { Juniper } = this.state
 
         if (github) {
-            return <GitHubCode url={children} className={ghClassNames} lang={lang} />
+            return <GitHubCode url={github} className={ghClassNames} lang={lang} />
         }
         if (!!executable && Juniper) {
             return (
diff --git a/website/src/components/github.js b/website/src/components/github.js
index a950dbef8..a825b4d55 100644
--- a/website/src/components/github.js
+++ b/website/src/components/github.js
@@ -1,7 +1,13 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import highlightCode from 'gatsby-remark-prismjs/highlight-code.js'
+import Prism from 'prismjs'
+
+// We manually load all the languages that are needed, which are currently only those:
+import 'prismjs/components/prism-json.min.js'
+import 'prismjs/components/prism-python.min.js'
+import 'prismjs/components/prism-yaml.min.js'
+import 'prismjs/components/prism-ini.min.js'
 
 import Icon from './icon'
 import Link from './link'
@@ -39,7 +45,8 @@ const GitHubCode = ({ url, lang, errorMsg = defaultErrorMsg, className }) => {
         }
     }, [initialized, rawUrl, errorMsg])
 
-    const highlighted = lang === 'none' || !code ? code : highlightCode(lang, code)
+    const highlighted =
+        lang === 'none' || !code ? code : Prism.highlight(code, Prism.languages[lang], lang)
 
     return (
         <>