Add playground application

.github/ISSUE_TEMPLATE/bug_report.md

@@ -11,6 +11,7 @@ Packages affected:
 - [ ] OWL/SHACL definitions
 - [ ] ts-sdk
 - [ ] ts-etl
+- [ ] spa
 
 ### Expected behavior
 

.github/ISSUE_TEMPLATE/documentation.md

@@ -11,6 +11,7 @@ Packages related to documentation request:
 - [ ] OWL/SHACL definitions
 - [ ] ts-sdk
 - [ ] ts-etl
+- [ ] spa
 
 ### Description
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -11,6 +11,7 @@ Packages to improve:
 - [ ] OWL/SHACL definitions
 - [ ] ts-sdk
 - [ ] ts-etl
+- [ ] spa
 
 ### Description
 

.github/workflows/gh-pages.yaml

@@ -0,0 +1,71 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+  workflow_call:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.14.0]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+
+      - name: Install dependencies
+        run: |
+          cd packages/spa ;
+          pnpm install;
+
+      - name: Verify builds
+        run: |
+          cd packages/spa ;
+          pnpm build;
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload subdirectory
+          path: './packages/spa/public'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.github/workflows/release.yaml

@@ -70,4 +70,8 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx multi-semantic-release
+        # must ignore spa because we need spa in the workspace file for development, but spa is not released.
+        run: npx multi-semantic-release --ignore-packages=packages/spa
+
+  release-github-pages-docs:
+    uses: ./.github/workflows/gh-pages.yaml

.github/workflows/spa-tests.yaml

@@ -0,0 +1,67 @@
+name: Test ts-etl
+
+on:
+  push:
+    # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+  workflow_call:
+
+env:
+  PKG_DIR: "packages/spa"
+
+jobs:
+  nodejs_test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.14.0]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 7
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('${{env.PKG_DIR}}/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: |
+          cd ${{env.PKG_DIR}} ;
+          pnpm install;
+
+      - name: Verify builds
+        run: |
+          cd ${{env.PKG_DIR}} ;
+          pnpm build;
+
+      - name: Test
+        run: |
+          cd ${{env.PKG_DIR}} ;
+          pnpm test;
+
+      - name: Lint Check
+        run: |
+          cd ${{env.PKG_DIR}} ;
+          pnpm lint;

packages/spa/.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/public/build/
+
+.DS_Store

packages/spa/README.md

@@ -0,0 +1,79 @@
+Docmap Visual Playground
+
+This Docmap visualizer is a simple stateless single-page web app that allows you to visualize a docmap based on our Crossref-to-Docmap ETL library. You can plug in any DOI, and if Crossref knows about it and it has reviews or a preprint, you'll get some interesting content back.
+
+## Demo
+
+You can try the live demo hosted on GitHub Pages [here](https://docmaps-project.github.io/docmaps).
+
+## Getting Started for Development
+
+### Prerequisites
+
+- Node.js (>= 12.x)
+- pnpm package manager
+
+### Installation
+
+1. Clone the repository:
+
+```bash
+git clone https://github.com/docmaps-project/docmaps
+cd docmaps/packages/spa
+```
+
+2. Install dependencies:
+
+```bash
+pnpm install
+```
+
+### Running the tests
+
+To run tests:
+
+```bash
+pnpm test
+```
+
+Note that you need an installation of Chrome, and must set
+the `CHROME_PATH` variable. If you use Chromium, it might be something like
+`/usr/local/bin/chromium`.
+
+### Running the App
+
+To start the development server:
+
+```bash
+pnpm run dev
+```
+
+Then navigate to `http://localhost:8080` in your browser.
+
+### Deploying to GH Pages
+
+The Github Pages is deployed from the `gh-pages` workflow in repository root. This workflow is called
+by the `release` workflow and is only triggered on merge to main. It first builds/bundles this package,
+then deploys the bundle. Note that because the repo name disagrees with the package name, the `index.html`
+is modified to use relative paths for all bundled resources.
+
+## Built With
+
+- [Svelte](https://svelte.dev/) - The web framework used
+- [render-rev](github.com/source-data/render-rev) - Display component built by EMBO
+- [pnpm](https://pnpm.io/) - The package manager
+
+## Contributing
+
+See the main repository contributing guidelines.
+
+## License
+
+See main repository license.
+
+## Acknowledgments
+
+- [render-rev](github.com/source-data/render-rev)
+- [Svelte](https://svelte.dev/)
+- [pnpm](https://pnpm.io/)
+- [crossref](https://crossref.org/)

packages/spa/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear",
+    "lint": "echo !!!!WARN: No linter setup!",
+    "test": "echo !!!!WARN: No test setup!"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "rollup": "^3.23.0",
+    "rollup-plugin-css-only": "^4.3.0",
+    "rollup-plugin-livereload": "^2.0.5",
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "rollup-plugin-svelte": "^7.1.5",
+    "svelte": "^3.59.1"
+  },
+  "dependencies": {
+    "@docmaps/etl": "workspace:^0.1.2",
+    "@source-data/render-rev": "github:source-data/render-rev",
+    "@spider-ui/global-event-registry": "^0.2.7",
+    "docmaps-sdk": "^0.5.1",
+    "fp-ts": "^2.16.0",
+    "prismjs": "^1.29.0",
+    "sirv-cli": "^2.0.2",
+    "upgraded-element": "^0.6.5"
+  }
+}

packages/spa/public/global.css

@@ -0,0 +1,63 @@
+html, body {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:visited {
+	color: rgb(0,80,160);
+}
+
+label {
+	display: block;
+}
+
+input, button, select, textarea {
+	font-family: inherit;
+	font-size: inherit;
+	-webkit-padding: 0.4em 0;
+	padding: 0.4em;
+	margin: 0 0 0.5em 0;
+	box-sizing: border-box;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+}
+
+input:disabled {
+	color: #ccc;
+}
+
+button {
+	color: #333;
+	background-color: #f4f4f4;
+	outline: none;
+}
+
+button:disabled {
+	color: #999;
+}
+
+button:not(:disabled):active {
+	background-color: #ddd;
+}
+
+button:focus {
+	border-color: #666;
+}

packages/spa/public/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width,initial-scale=1'>
+
+	<title>Docmaps Demonstration</title>
+
+	<link rel='icon' type='image/png' href='./favicon.png'>
+	<link rel='stylesheet' href='./global.css'>
+	<link rel='stylesheet' href='./build/bundle.css'>
+
+	<script defer src='./build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>