Use vite to build the mirador website.

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

Hide file tree

Showing 30 changed files with 6,363 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/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="/embed/">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="/embed/">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="/embed/" 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/"