Create deploy workflow (#2)

Author: kevinbarabash

.github/workflows/deploy.yml

@@ -0,0 +1,55 @@
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      CI: true
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v4
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Cache node modules
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.OS }}-node_modules-
+      - name: yarn install
+        run: yarn install --frozen-lockfile
+      - name: yarn build
+        run: yarn build
+      - name: Upload Page Artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist/
+
+  deploy:
+    needs: build
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+      actions: read # to access artifacts from the build job
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

src/baseline/baseline-page.tsx

@@ -26,7 +26,7 @@ const simpleRow = b.row([
   b.char("0"),
 ]);
 
-const BaselinePage: React.FunctionComponent = () => {
+const BaselinePage = () => {
   const [stixFontData, setStixFontData] = React.useState<FontData | null>(null);
 
   React.useEffect(() => {

src/editor/editor-page.tsx

@@ -23,7 +23,7 @@ import { examples } from "./examples";
 
 const initialExample = 1;
 
-const EditorPage: React.FunctionComponent = () => {
+const EditorPage = () => {
   const [stixFontData, setStixFontData] = React.useState<FontData | null>(null);
   const [lmFontData, setLmFontData] = React.useState<FontData | null>(null);
   const [bonumFontData, setBonumFontData] = React.useState<FontData | null>(

src/parser/parser-page.tsx

@@ -26,7 +26,7 @@ const simpleRow = builders.row([
   builders.char("0"),
 ]);
 
-const EditorPage: React.FunctionComponent = () => {
+const EditorPage = () => {
   const [tab, setTab] = React.useState<"parse" | "edit">("parse");
   const [stixFontData, setStixFontData] = React.useState<FontData | null>(null);
   const [editTree, setEditTree] = React.useState<State["row"]>(simpleRow);

src/shared/formatting-palette.tsx

@@ -1,21 +1,17 @@
-import * as React from 'react';
-
-type EmptyProps = Record<string, never>;
-
 type FormattingEvent =
   | {
-      readonly type: 'color';
+      readonly type: "color";
       readonly value: string;
     }
   | {
-      readonly type: 'cancel';
+      readonly type: "cancel";
     }
   | {
-      readonly type: 'uncancel';
+      readonly type: "uncancel";
     };
 
 // TODO: determine the color based on the current selection
-const FormattingPalette: React.FC<EmptyProps> = (props) => {
+const FormattingPalette = () => {
   return (
     <div>
       <input
@@ -24,9 +20,9 @@ const FormattingPalette: React.FC<EmptyProps> = (props) => {
           const color = e.target.value;
 
           if (document.activeElement) {
-            const event = new CustomEvent<FormattingEvent>('formatting', {
+            const event = new CustomEvent<FormattingEvent>("formatting", {
               detail: {
-                type: 'color',
+                type: "color",
                 value: color,
               },
               bubbles: true,
@@ -40,9 +36,9 @@ const FormattingPalette: React.FC<EmptyProps> = (props) => {
       <button
         onClick={() => {
           if (document.activeElement) {
-            const event = new CustomEvent<FormattingEvent>('formatting', {
+            const event = new CustomEvent<FormattingEvent>("formatting", {
               detail: {
-                type: 'cancel',
+                type: "cancel",
               },
               bubbles: true,
               cancelable: true,
@@ -57,9 +53,9 @@ const FormattingPalette: React.FC<EmptyProps> = (props) => {
       <button
         onClick={() => {
           if (document.activeElement) {
-            const event = new CustomEvent<FormattingEvent>('formatting', {
+            const event = new CustomEvent<FormattingEvent>("formatting", {
               detail: {
-                type: 'uncancel',
+                type: "uncancel",
               },
               bubbles: true,
               cancelable: true,

src/shared/layout.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react';
+import * as React from "react";
 
 type Props = {
   readonly style?: React.CSSProperties;
   readonly children: React.ReactNode;
 };
 
-export const HStack: React.FunctionComponent<Props> = (props) => {
+export const HStack = (props: Props) => {
   const style: React.CSSProperties = {
     ...props.style,
-    display: 'flex',
-    flexDirection: 'row',
+    display: "flex",
+    flexDirection: "row",
   };
 
   return <div style={style}>{props.children}</div>;
 };
 
-export const VStack: React.FunctionComponent<Props> = (props) => {
+export const VStack = (props: Props) => {
   const style: React.CSSProperties = {
     ...props.style,
-    display: 'flex',
-    flexDirection: 'column',
+    display: "flex",
+    flexDirection: "column",
   };
 
   return <div style={style}>{props.children}</div>;

src/solver/solver-page.tsx

@@ -35,7 +35,7 @@ const safeParse = (input: Editor.types.CharRow): Semantic.types.Node | null => {
 // - use the colorMap option to highlight related nodes between steps
 //   e.g. 2(x + y) -> 2x + 2y the 2s would be the same color, etc.
 
-const SolverPage: React.FunctionComponent = () => {
+const SolverPage = () => {
   const [input, setInput] = React.useState(initialInput);
   const [answer, setAnswer] = React.useState<Editor.types.CharRow | null>(null);
   const [step, setStep] = React.useState<Solver.Step | null>(null);