Use vite to build the mirador website.

ProjectMirador · Dec 18, 2024 · bf704f4 · bf704f4
1 parent b005400
commit bf704f4
Show file tree

Hide file tree

Showing 32 changed files with 6,414 additions and 24 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -4,15 +4,9 @@ This repository contains the Mirador website.
 
 ### Run locally
 
-To run locally, use a http server
-```sh
-$ python -m SimpleHTTPServer
-```
-
-or
+To run locally, use vite:
 
 ```sh
-$ http-server # require npm i -g http-server
-``` 
-
-
+$ npm install
+$ npm run dev
+```
diff --git a/_redirects b/_redirects
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Mirador</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="shortcut icon" type="image/svg" href="/img/mirador-logo.svg"/>
+  </head>
+  <body>
+    <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
+    <script type="module">
+      import Mirador from 'mirador';
+      import config from './mirador-configs/default.js';
+      var miradorInstance = Mirador.viewer(config);
+    </script>
+  </body>
+</html>
diff --git a/demo/mirador-configs/default.js b/demo/mirador-configs/default.js
@@ -0,0 +1,31 @@
+// has 2 windows, one gaugin and one bodleian
+export default {
+  catalog: [
+    { manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
+    { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843' },
+    { manifestId: 'https://media.nga.gov/public/manifests/nga_highlights.json', provider: 'National Gallery of Art' },
+    { manifestId: 'https://data.ucd.ie/api/img/manifests/ucdlib:33064', provider: 'Irish Architectural Archive' },
+    { manifestId: 'https://wellcomelibrary.org/iiif/b18035723/manifest', provider: 'Wellcome Library' },
+    { manifestId: 'https://demos.biblissima.fr/iiif/metadata/florus-dispersus/manifest.json', provider: 'Biblissima' },
+    { manifestId: 'https://www.e-codices.unifr.ch/metadata/iiif/gau-Fragment/manifest.json', provider: 'e-codices - Virtual Manuscript Library of Switzerland' },
+    { manifestId: 'https://wellcomelibrary.org/iiif/collection/b18031511', provider: 'Wellcome Library' },
+    { manifestId: 'https://gallica.bnf.fr/iiif/ark:/12148/btv1b10022508f/manifest.json', provider: 'Bibliothèque nationale de France' },
+    { manifestId: 'https://manifests.britishart.yale.edu/Osbornfa1', provider: 'Beinecke Rare Book and Manuscript Library, Yale University' },
+    { manifestId: 'https://iiif.biblissima.fr/chateauroux/B360446201_MS0005/manifest.json', provider: 'Biblissima' },
+    { manifestId: 'https://iiif.durham.ac.uk/manifests/trifle/32150/t1/m4/q7/t1m4q77fr328/manifest', provider: 'Durham University Library' },
+    { manifestId: 'https://zavicajna.digitalna.rs/iiif/api/presentation/3/96571949-03d6-478e-ab44-a2d5ad68f935%252F00000001%252Fostalo01%252F00000071/manifest', provider: "Библиотека 'Милутин Бојић'" },
+  ],
+  id: 'mirador',
+  theme: {
+    transitions: {},
+  },
+  windows: [{
+    canvasId: 'https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174892',
+    manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
+  },
+  {
+    canvasId: 'https://iiif.bodleian.ox.ac.uk/iiif/canvas/e58b8c60-005c-4c41-a22f-07d49cb25ede.json',
+    manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json',
+    thumbnailNavigationPosition: 'far-bottom',
+  }],
+};
diff --git a/embed/index.html b/embed/index.html
@@ -10,8 +10,9 @@
   </head>
   <body>
     <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div>
-    <script>document.write("<script type='text/javascript' src='https://unpkg.com/mirador@latest/dist/mirador.min.js'><\/script>");</script>
-    <script type="text/javascript">
+    <script type="module">
+      import Mirador from 'mirador';
+
       var params = new URL(document.location).searchParams;
       var manifest = params.get('iiif-content') || params.get('manifest');
       var windows = [];

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/index.html b/index.html
@@ -19,10 +19,10 @@
     <nav>
       <ul>
         <li class="current">
-          <a href="/index.html">Home</a>
+          <a href="/">Home</a>
         </li>
         <li class="">
-          <a href="https://mirador-dev.netlify.app/__tests__/integration/mirador">Demo</a>
+          <a href="/demo/">Demo</a>
         </li>
         <li class="">
           <a href="https://github.com/projectmirador/mirador/wiki">Docs</a>
@@ -43,7 +43,7 @@
   <section id="banner">
     <div class="inner">
       <header>
-        <img src="img/mirador-logo.png" alt="Mirador">
+        <img src="/img/mirador-logo.png" alt="Mirador">
         <h2>mirador</h2>
       </header>
       <p>
@@ -54,7 +54,7 @@ <h2>mirador</h2>
       </p>
     </div>
     <div>
-      <a class="button button-primary" href="https://mirador-dev.netlify.app/__tests__/integration/mirador">Try a Live Demo</a>
+      <a class="button button-primary" href="/demo/">Try a Live Demo</a>
     </div>
   </section>
 
@@ -151,7 +151,7 @@ <h3>Open Source, Community-Driven Software</h3>
     </header>
 
     <section class="wrapper container special-alt">
-      <iframe src="https://mirador-dev.netlify.app/__tests__/integration/mirador/" width="800" height="600" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" id="frame" allowfullscreen="">You need an iFrame capable browser to view this.</iframe>
+      <iframe src="/demo/" width="800" height="600" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" id="frame" allowfullscreen="">You need an iFrame capable browser to view this.</iframe>
     </section>
 
     <header id="participate" class="special container">
@@ -172,6 +172,5 @@ <h2>Current Mirador Status</h2>
     </header>
     <p/>
   </article>
-  <script src="js/jquery.min.js"></script>
 </body>
 </html>
diff --git a/js/jquery.min.js b/js/jquery.min.js
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,6 @@
+# This is the configuration file for the netlify preview deploys
+# See https://www.netlify.com/docs/netlify-toml-reference/ for more
+
+[build]
+  command = "npm run build"
+  publish = "dist/"