Merge pull request #149 from laurentmmeyer/feature/add-gist

F!!: add a way to render github gist

Author: styxlab

components/RenderContent.tsx

@@ -2,10 +2,17 @@ import React from 'react'
 import rehypeReact, { ComponentProps, ComponentPropsWithNode } from 'rehype-react'
 import unified from 'unified'
 import { Node } from 'unist'
+import ReactGist from 'react-gist'
 
 import { NextLink } from '@components/NextLink'
 import { NextImage } from '@components/NextImage'
 
+const gist_regex = /https:\/\/gist.github.com\/\S+\/([a-f0-9]+)\.js/g
+
+type ScriptNode = {
+  src: string
+}
+
 /* eslint-disable react/display-name */
 const options = {
   createElement: React.createElement,
@@ -14,6 +21,15 @@ const options = {
   components: {
     Link: (props: ComponentProps) => <NextLink {...(props as ComponentPropsWithNode)} />,
     Image: (props: ComponentProps) => <NextImage {...(props as ComponentPropsWithNode)} />,
+    script: (props: ComponentProps) => {
+      const properties = props as ScriptNode
+      const myRegexp = new RegExp(gist_regex);
+      const match = myRegexp.exec(properties.src);
+      if (!!match && match.length > 1){
+        return <ReactGist id={match[1]}/>
+      }
+      return null;
+    }
   },
 }
 

package.json

@@ -53,6 +53,7 @@
     "probe-image-size": "^7.2.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-gist": "^1.2.4",
     "react-is": "^17.0.2",
     "refractor": "^3.3.1",
     "rehype": "^11.0.0",

yarn.lock

@@ -4036,6 +4036,11 @@ react-dom@17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-gist@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/react-gist/-/react-gist-1.2.4.tgz#4ee71f24cc6f60836354e2ad6e30f6d24e06e0f7"
+  integrity sha512-uDgPJ08IJsl/7auK3CS53JKGC1P/X7tNCzo9k0r6D/5l+ilsxE1+SAaylJCh0aeyZoJOoxQikKU+MHsAvA9iFw==
+
 react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"