Push to GitHub pages with actions

Author: kddnewton

.github/workflows/main.yml

@@ -1,11 +1,35 @@
-name: Github Pages
-on: [push]
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
 jobs:
-  build-and-deploy:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v3
 
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
@@ -16,17 +40,23 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: 14.x
+          node-version: 18.x
           cache: yarn
 
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
       - name: Package application
         run: |
           bundle exec rake
           yarn install --frozen-lockfile
           yarn build
 
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./docs
+          path: './docs'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

docs/index.html

@@ -23,9 +23,12 @@ <h1>Syntax Tree</h1>
           </select>
         </div>
       </nav>
-      <textarea id="editor">1 + 2 * 3</textarea>
+      <textarea id="editor">def fibonacci(n)
+  (n == 0 || n == 1) ? n : fibonacci(n - 1) + fibonacci(n - 2)
+end
+</textarea>
       <textarea id="output" disabled readonly>Loading...</textarea>
-      <div id="graph-container" class="graph-container"></div>
+      <div id="graph" class="graph">Loading...</div>
     </main>
     <script type="module" src="index.js"></script>
   </body>

src/index.css

@@ -53,7 +53,7 @@ select {
   min-width: 15em;
 }
 
-.graph-container {
+.graph {
   text-align: center;
   overflow-y: scroll;
   overflow-x: scroll;

src/index.js

@@ -18,7 +18,13 @@ await Promise.all([
       }
     });
   }),
-  import("./mermaid"),
+  // We're going to load mermaid asynchronously because it is a large module.
+  // When it gets loaded we'll tell it not to run on load and then we'll use it
+  // when the user selects the graph.
+  import("./mermaid").then(({ default: mermaid }) => {
+    mermaid.initialize({ startOnLoad: false });
+    return mermaid;
+  }),
   // We're going to load the Ruby VM chunk asynchronously because it is pretty
   // dang huge (> 40Mb). In the meantime the textarea that is holding the place
   // of the actual functional one is just going to display "Loading...".
@@ -30,6 +36,9 @@ await Promise.all([
   output.value = ruby.prettyPrint(editor.getValue());
   output.disabled = false;
 
+  // Next, grab a reference to the graph container element.
+  const graph = document.getElementById("graph");
+
   // This is the function that will be used to display the output from the
   // source.
   let displayFunction = ruby.prettyPrint;
@@ -43,12 +52,17 @@ await Promise.all([
 
       if (event.detail.kind === "mermaid") {
         output.setAttribute("style", "display: none;");
-        mermaid.render(source);
+        graph.setAttribute("style", "text-align: left;")
+        graph.innerHTML = "Loading..."
+
+        mermaid.render("preparedScheme", source).then(({ svg }) => {
+          graph.innerHTML = svg;
+          graph.setAttribute("style", "display: block; text-align: center;");
+        });
       } else {
         output.value = source;
         output.setAttribute("style", "");
-
-        mermaid.reset();
+        graph.setAttribute("style", "display: none;");
       }
     } catch (error) {
       // For now, just ignoring the error. Eventually I'd like to make this mark

src/mermaid.js

@@ -1,21 +1,3 @@
-import mermaidjs from "mermaid";
+import mermaid from "mermaid";
 
-const getCleanContainer = () => {
-  const div = document.querySelector("#graph-container");
-  div.innerHTML = "";
-  return div;
-}
-
-const render = async (source) => {
-  let container = getCleanContainer();
-
-  container.setAttribute("style", "display: block;");
-
-  mermaidjs.initialize({ startOnLoad: false });
-  const { svg } = await mermaidjs.render('preparedScheme', source);
-  container.innerHTML = svg;
-}
-
-const reset = () => getCleanContainer().setAttribute("style", "display: none;");
-
-export { render, reset };
+export default mermaid;