Deploy to demo site

.github/workflows/podman-image.yml

@@ -43,7 +43,7 @@ jobs:
             ${{ runner.os }}-18-pnpm-store-
 
       - run: pnpm i --frozen-lockfile
-      - run: pnpm run build
+      - run: VITE_DOCS=true pnpm run build:all
       - run: pnpm run test
 
       # Unchanged from the original.

.npmrc

@@ -0,0 +1,2 @@
+public-hoist-pattern[]=@babel/*
+public-hoist-pattern[]=@mdx-js/*

README.md

@@ -2,4 +2,54 @@
 
 Timeliner is a reimplementation of [Variations Audio Timeliner](http://variations.sourceforge.net/vat/index.html) as a web application, using the [IIIF Presentation API 3.0](https://iiif.io/api/presentation/3.0/).
 
-[Documentation](https://iiif-timeliner.netlify.com/docs) | [User stories](https://github.com/digirati-co-uk/timeliner/issues?q=is%3Aissue+is%3Aopen+label%3A"%3Abusts_in_silhouette%3A+user+story") ([Kanban](https://github.com/digirati-co-uk/timeliner)) | [UX Wireframe](https://preview.uxpin.com/874bd44d74fc6062565cd95dc2dfc9e694b6ed4f#/pages/92279172/simulate/no-panels?mode=i) | [Original timeliner](http://variations.indiana.edu/use/timelines.html) | [Demo site](https://iiif-timeliner.netlify.com) | [Changelog](https://github.com/digirati-co-uk/timeliner/issues?q=is%3Aissue+is%3Aclosed+milestone%3A"UI+Components+1.0")
+## Installation
+
+Node 18+ and `yarn` are required.
+
+```
+yarn install
+```
+
+## Development
+
+Start the main application at at [http://localhost:5173/](http://localhost:5173/) with hot-reload using,
+
+```
+yarn start
+```
+
+Start the documentation site in development mode at [http://localhost:3000/](http://localhost:3000/) using,
+
+```
+yarn docz:dev
+```
+
+## Building
+
+Build the main application,
+
+```
+yarn build
+```
+
+Build the main application and documentation together,
+
+```
+yarn build:all
+```
+
+Preview the production build (main app + docs) at [http://localhost:5173/](http://localhost:5173/) and docs at [http://localhost:5173/docs](http://localhost:5173/docs) using,
+
+```
+yarn preview
+```
+
+## Testing
+
+```
+yarn test
+```
+
+## Links
+
+[Documentation](https://timeliner.dlib.indiana.edu/docs) | [User stories](https://github.com/digirati-co-uk/timeliner/issues?q=is%3Aissue+is%3Aopen+label%3A"%3Abusts_in_silhouette%3A+user+story") | [UX Wireframe](https://preview.uxpin.com/874bd44d74fc6062565cd95dc2dfc9e694b6ed4f#/pages/92279172/simulate/no-panels?mode=i) | [Original timeliner](http://variations.indiana.edu/use/timelines.html) | [Demo site](https://timeliner.dlib.indiana.edu/) | [Changelog](https://github.com/digirati-co-uk/timeliner/issues?q=is%3Aissue+is%3Aclosed+milestone%3A"UI+Components+1.0") 

doczrc.js

@@ -0,0 +1,65 @@
+const path = require('path');
+const webpack = require('webpack');
+
+export default {
+  title: 'Timeliner',
+  repository: "https://github.com/IUBLibTech/timeliner",
+  description: 'IIIF Timeliner Documentation',
+  base: process.env.DOCZ_BASE || '/docs',
+  dest: './dist/docs',
+  src: './src',
+  wrapper: 'src/components/docs/components/DocsWrapper/DocsWrapper',
+  files: '**/*.{md,markdown,mdx}',
+  menu: [
+    'Getting started',
+    'User stories',
+    'Technical Documentation',
+  ],
+  onCreateWebpackChain(config) {
+    // Force all imports of 'docz' to resolve to the same copy so that the
+    // shared React context is a single instance.
+    config.resolve.alias.set(
+      'docz',
+      path.resolve(__dirname, 'node_modules/docz')
+    );
+    // Add SCSS support
+    config.module
+      .rule('scss')
+      .test(/\.scss$/)
+      .use('style-loader')
+      .loader('style-loader')
+      .end()
+      .use('css-loader')
+      .loader('css-loader')
+      .options({ sourceMap: false })
+      .end()
+      .use('sass-loader')
+      .loader('sass-loader')
+      .options({
+        implementation: require('sass'),
+        sourceMap: false,
+      })
+      .end();
+
+    // Plain CSS files (e.g. from third-party imports)
+    config.module
+      .rule('css')
+      .test(/\.css$/)
+      .use('style-loader')
+      .loader('style-loader')
+      .end()
+      .use('css-loader')
+      .loader('css-loader')
+      .options({ sourceMap: false })
+      .end();
+
+    // Expose VITE_DOCS to the docz/webpack bundle for conditional rendering in DocsWrapper
+    config
+      .plugin('define')
+      .use(webpack.DefinePlugin, [{
+        'process.env.VITE_DOCS': JSON.stringify(process.env.VITE_DOCS)
+      }]);
+
+    return config;
+  },
+};

index.html

@@ -1,46 +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>
+
+<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>
+    <div class="buttons-container">
       <a href="/app/index.html" class="button">Go to Timeliner</a>
+      <a href="/docs" class="button">View Documentation</a>
     </div>
-  </body>
+  </div>
+</body>
+
 </html>

package.json

@@ -9,27 +9,36 @@
     "start": "vite",
     "build": "vite build",
     "test": "vitest --coverage",
-    "docz:dev": "docz dev",
+    "docz:dev": "DOCZ_BASE=/ docz dev",
     "docz:build": "docz build",
+    "build:all": "yarn build && yarn docz:build",
+    "preview": "VITE_DOCS=true yarn build:all && npx serve dist -p 5173",
     "watch": "vite build --watch",
     "snyk-protect": "snyk-protect",
+    "postinstall": "node scripts/patch-docz.js",
     "prepublish": "npm run snyk-protect"
   },
   "devDependencies": {
     "@reach/component-component": "^0.1.1",
     "@snyk/protect": "^1.1044",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^2.0.5",
+    "css-loader": "^4.3.0",
+    "docz": "1.2.0",
     "js-yaml": "4.1.1",
     "redux-saga-test-plan": "^3.7.0",
+    "sass": "^1.32.0",
     "sass-embedded": "^1.77.8",
+    "sass-loader": "^10.2.0",
+    "style-loader": "^2.0.0",
     "vite": "^5.4.21",
     "vitest": "^2.0.5"
   },
   "dependencies": {
     "@material-ui/core": "^3.0.2",
     "@material-ui/icons": "^3.0.1",
     "@material-ui/lab": "^3.0.0-alpha.14",
+    "date-fns": "1.29.0",
     "docz-theme-default": "1.2.0",
     "hls.js": "^0.12.2",
     "immutability-helper": "^2.8.1",