Refactor Switch component to be a plugin.

gitlab-pages/website/docusaurus.config.js

@@ -99,7 +99,6 @@ const siteConfig = {
   },*/
 
   // Add custom scripts here that would be placed in <script> tags.
-  scripts: ['https://buttons.github.io/buttons.js'],
 
   // On page navigation for the current documentation page.
   // No .html extensions for paths.
@@ -113,11 +112,12 @@ const siteConfig = {
   // You may provide arbitrary config keys to be used as needed by your
   // template. For example, if you need your repo's URL...
   // repoUrl: repoUrl,
-  stylesheets: [
-    'https://fonts.googleapis.com/css?family=DM+Sans:400,400i,500,500i,700,700i|Open+Sans:300,300i,400,600|Source+Code+Pro&display=swap'
+  plugins: [
+    '@ligo/syntax', {
+
+    }
   ],
   
-  
   presets: [
     [
       '@docusaurus/preset-classic',

gitlab-pages/website/package.json

@@ -14,11 +14,18 @@
     "webpack": "4.41.2"
   },
   "browserslist": {
-    "production": [">0.2%", "not dead", "not op_mini all"],
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "dependencies": {
+    "@ligo/syntax": "file:src/@ligo/syntax"
   }
 }

gitlab-pages/website/src/@ligo/syntax/output/index.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = function (context, options) {
+  return {
+    name: 'ligo-syntax-plugin',
+
+    getThemePath() {
+      return path.resolve(__dirname, './theme');
+    }
+
+  };
+};

gitlab-pages/website/src/@ligo/syntax/output/theme/Syntax/SyntaxContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const SyntaxContext = React.createContext('pascaligo');
+export default SyntaxContext;

gitlab-pages/website/src/@ligo/syntax/output/theme/Syntax/SyntaxSwitch.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+function SyntaxSwitch(props) {
+  return React.createElement("select", {
+    className: styles.syntaxSwitch,
+    defaultValue: props.syntax,
+    onChange: e => props.onSyntaxChange(e.target.value)
+  }, React.createElement("option", {
+    value: "pascaligo"
+  }, "PascaLIGO"), React.createElement("option", {
+    value: "cameligo"
+  }, "CameLIGO"), React.createElement("option", {
+    value: "reasonligo"
+  }, "ReasonLIGO"));
+}
+
+export default SyntaxSwitch;

gitlab-pages/website/src/@ligo/syntax/output/theme/Syntax/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import SyntaxContext from './SyntaxContext';
+
+function Syntax(props) {
+  return React.createElement(SyntaxContext.Consumer, null, syntax => {
+    if (syntax === props.syntax) {
+      return props.children;
+    } else {
+      return React.createElement(React.Fragment, null);
+    }
+  });
+}
+
+export default Syntax;
+export { SyntaxContext };

gitlab-pages/website/src/@ligo/syntax/package.json

@@ -0,0 +1,28 @@
+{
+    "name": "@ligo/syntax",
+    "description": "Switch between different syntaxes",
+    "version": "0.0.0",
+    "main": "output/index.js",
+    "peerDependencies": {
+        "@docusaurus/core": "^2.0.0-alpha.43",
+        "@docusaurus/preset-classic": "^2.0.0-alpha.43",
+        "react": "^16.8.4",
+        "react-dom": "^16.8.4",
+        "webpack": "4.41.2"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.8.4",
+        "@babel/core": "^7.8.7",
+        "@babel/preset-env": "^7.8.7",
+        "@babel/preset-react": "^7.8.3",
+        "prism-react-renderer": "^1.0.2"
+    },
+    "babel": {
+        "presets": [
+            "@babel/preset-react"
+        ]
+    },
+    "scripts": {
+        "build": "rm -rf output && mkdir output && node_modules/.bin/babel src/theme/Syntax/*.js -d output/theme/Syntax/ && node_modules/.bin/babel src/theme/SyntaxTitle/*.js -d output/theme/SyntaxTitle/ &&  node_modules/.bin/babel src/*.js -d output/ && cp ./src/theme/Syntax/styles.module.css output/theme/Syntax/"
+    }
+}

gitlab-pages/website/src/@ligo/syntax/src/index.js

@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = function(context, options) {
+    return {
+        name: 'ligo-syntax-plugin',
+
+        getThemePath() {
+            return path.resolve(__dirname, './theme');
+        }
+    }
+}

gitlab-pages/website/src/@ligo/syntax/src/theme/Syntax/SyntaxContext.js

@@ -3,4 +3,3 @@ import React from 'react';
 const SyntaxContext = React.createContext('pascaligo');
 
 export default SyntaxContext;
-

gitlab-pages/website/src/@ligo/syntax/src/theme/Syntax/SyntaxSwitch.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 import styles from './styles.module.css';
 
-function SyntaxSwitch (props) {   
+function SyntaxSwitch (props) {
     return (
         <select className={styles.syntaxSwitch}  defaultValue={props.syntax} onChange={e => props.onSyntaxChange(e.target.value)}>
             <option value="pascaligo">PascaLIGO</option>

gitlab-pages/website/src/@ligo/syntax/src/theme/Syntax/index.js

@@ -16,3 +16,5 @@ function Syntax(props) {
 }
 
 export default Syntax
+
+export { SyntaxContext }

gitlab-pages/website/src/@ligo/syntax/src/theme/Syntax/styles.module.css

@@ -0,0 +1,37 @@
+  .syntaxSwitch {
+    display: block;
+    font-size: 1rem;
+    font-weight: bold;
+    line-height: 1rem;
+    padding: .6em 1.4em .5em .8em;
+    box-sizing: border-box;
+    border: none;
+    color: var(--color-primary-text);
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: transparent;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
+    background-repeat: no-repeat, repeat;
+    background-position: right .7em top 50%, 0 0;
+    background-size: .65em auto, 100%;
+  }
+  .syntaxSwitch::-ms-expand {
+      display: none;
+  }
+  .syntaxSwitch:hover {
+      border-color: #888;
+  }
+  .syntaxSwitch:focus {
+      border-color: #aaa;
+      box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+      box-shadow: 0 0 0 3px -moz-mac-focusring;
+      color: var(--color-primary-text); 
+      outline: none; 
+  }
+  .syntaxSwitch option {
+      color: var(--color-primary-text);
+      font-weight:normal;
+  }
+  
+  

gitlab-pages/website/src/theme/DocSidebar/index.js

@@ -15,7 +15,7 @@ import isInternalUrl from '@docusaurus/utils'; // eslint-disable-line import/no-
 
 import styles from './styles.module.css';
 
-import SyntaxSwitch from '../Syntax/SyntaxSwitch';
+import SyntaxSwitch from '@theme/Syntax/SyntaxSwitch';
 
 
 const MOBILE_TOGGLE_SIZE = 24;