Merge pull request #68 from stephenwf/feature/vite

Vite + Node 18/20

.github/workflows/build.yml

@@ -0,0 +1,42 @@
+name: Build + test
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ['18', '20']
+
+    name: Node ${{ matrix.node }} build
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-${{ matrix.node }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-${{ matrix.node }}-pnpm-store-
+
+      - run: pnpm i --frozen-lockfile
+      - run: pnpm run build
+      - run: pnpm run test

.github/workflows/podman-image.yml

@@ -3,7 +3,7 @@ name: Podman Image CI
 
 on:
   push:
-    branches: [ "main", "demo" ]
+    branches: ['main', 'demo']
 
 env:
   REGISTRY_USER: ${{ github.actor }}
@@ -12,37 +12,57 @@ env:
   IMAGE_TAG: ${{ fromJSON('{"refs/heads/main":"develop","refs/heads/demo":"production"}')[github.ref] }}
 
 jobs:
-
   build:
     runs-on: ubuntu-latest
-
+    name: Node 18 build
     steps:
-    - uses: actions/checkout@v3
-    - name: Install Node 14
-      uses: actions/setup-node@v3
-      with:
-        node-version: 14
-        cache: 'yarn'
-    - name: Yarn install
-      run: yarn install --frozen-lockfile # optional, --immutable
-    - name: Yarn build
-      # Explicitly set CI to false to avoid elevating warnings to errors
-      run: CI=false yarn build
-    - name: Build Image
-      id: build_image
-      uses: redhat-actions/buildah-build@v2
-      with:
-        image: timeliner
-        tags: ${{ env.IMAGE_TAG }} ${{ github.sha }}
-        containerfiles: ./Dockerfile
-        oci: true
-    - name: Push To GHCR
-      uses: redhat-actions/push-to-registry@v2
-      with:
-        image: ${{ steps.build_image.outputs.image }}
-        tags: ${{ steps.build_image.outputs.tags }}
-        registry: ${{ env.IMAGE_REGISTRY }}
-        username: ${{ env.REGISTRY_USER }}
-        password: ${{ env.REGISTRY_PASSWORD }}
-        extra-args: |
-          --disable-content-trust
+      - uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-18-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-18-pnpm-store-
+
+      - run: pnpm i --frozen-lockfile
+      - run: pnpm run build
+      - run: pnpm run test
+
+      # Unchanged from the original.
+      - name: Build Image
+        id: build_image
+        uses: redhat-actions/buildah-build@v2
+        with:
+          image: timeliner
+          tags: ${{ env.IMAGE_TAG }} ${{ github.sha }}
+          containerfiles: ./Dockerfile
+          oci: true
+
+      - name: Push To GHCR
+        uses: redhat-actions/push-to-registry@v2
+        with:
+          image: ${{ steps.build_image.outputs.image }}
+          tags: ${{ steps.build_image.outputs.tags }}
+          registry: ${{ env.IMAGE_REGISTRY }}
+          username: ${{ env.REGISTRY_USER }}
+          password: ${{ env.REGISTRY_PASSWORD }}
+          extra-args: |
+            --disable-content-trust

app/index.html

@@ -0,0 +1,20 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width,viewport-fit=cover, initial-scale=1.0"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+    <link rel="preload" href="/collections.json" as="fetch" />
+    <title>Timeliner</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="../src/index.jsx"></script>
+  </body>
+</html>

index.html

@@ -0,0 +1,46 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width,viewport-fit=cover, initial-scale=1.0"
+    />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
+    <link rel="preload" href="/collections.json" as="fetch" />
+    <title>Timeliner</title>
+    <script type="module" src="./src/homepage.js"></script>
+  </head>
+  <body>
+    <div class="homepage container">
+      <h1>IIIF Timeliner</h1>
+      <div class="panel">
+        <p>
+          Timeliner is a reimplementation of Variations Audio Timeliner as a web
+          application, using the IIIF Presentation API 3.0. As with the original
+          version, developed as a part of the Variations Digital Music Library
+          System, it is an audio annotation and analysis tool for creating and
+          labeling bubble diagrams. These diagrams can be used to navigate music
+          or other audio for detailed study.
+        </p>
+        <p>
+          In addition to its use as a standalone application, the Timeliner is
+          available as integrated feature within the successor to Variations,
+          Avalon Media System. Avalon users can create new bubble diagrams
+          directly from item pages within their Avalon instance and edit, share
+          and copy timelines across all items in the repository.
+        </p>
+        <p>
+          Please note that due to standard browser security, audio resources
+          used with Timeliner must be set up for Cross-origin resource sharing
+          (CORS). This is not necessarily the case for many resources on the
+          web, and not all URLs for media files may work.
+        </p>
+      </div>
+      <a href="/app/index.html" class="button">Go to Timeliner</a>
+    </div>
+  </body>
+</html>

package.json

@@ -6,30 +6,25 @@
   "author": "Stephen Fraser <[email protected]>",
   "license": "MIT",
   "scripts": {
-    "start": "fesk-start",
-    "build": "fesk-build && docz build && cp -R overrides/dist/* dist/",
-    "test": "jest --coverage",
+    "start": "vite",
+    "build": "vite build",
+    "test": "vitest --coverage",
     "docz:dev": "docz dev",
     "docz:build": "docz build",
     "watch": "fesk-watch",
     "snyk-protect": "snyk-protect",
     "prepublish": "npm run snyk-protect"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
-    "@babel/preset-env": "^7.1.0",
-    "@babel/preset-react": "^7.0.0",
-    "@fesk/scripts": "^1.1.1",
-    "@fesk/webpack-config": "^1.1.1",
     "@reach/component-component": "^0.1.1",
     "@snyk/protect": "^1.1044",
-    "@types/jest": "^23.3.2",
-    "babel-core": "^7.0.0-bridge",
-    "babel-jest": "^23.6.0",
-    "docz": "1.0.3",
-    "jest": "^23.6.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.0.5",
     "js-yaml": "3.13.1",
-    "redux-saga-test-plan": "^3.7.0"
+    "redux-saga-test-plan": "^3.7.0",
+    "sass-embedded": "^1.77.8",
+    "vite": "^5.4.2",
+    "vitest": "^2.0.5"
   },
   "dependencies": {
     "@fesk/bem-js": "^1.0.1",
@@ -56,20 +51,7 @@
     "redux-persist": "^5.10.0",
     "redux-saga": "^0.16.0",
     "redux-undo-redo": "^2.0.0",
-    "voca": "^1.4.0",
-    "webpack-config": "^7.5.0"
-  },
-  "jest": {
-    "transform": {
-      "^.+\\.jsx?$": "<rootDir>/jest.transform.js"
-    },
-    "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "/coverage/",
-      "(.test)\\.(ts|tsx|js)$",
-      "jest.transform.js",
-      ".json"
-    ]
+    "voca": "^1.4.0"
   },
   "resolutions": {
     "get-pkg-repo": "4.1.1",