Feature/21991 merge of latest uv4 from dev

.github/workflows/build-test.yml

@@ -7,19 +7,19 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [ '18' ]
+        node: [ '20' ]
 
     name: Node ${{ matrix.node }} build
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-${{ matrix.node }}-npm-${{ hashFiles('**/package-lock.lock') }}
           restore-keys: |
             ${{ runner.os }}-npm-
       - name: Setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
           node-version: ${{ matrix.node }}
 

.github/workflows/lint-and-prettify.yml

@@ -9,18 +9,21 @@ jobs:
 
     steps:
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
-          node-version: '18'
+          node-version: "20"
 
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Install npm dependencies
         run: npm install
 
       - name: Lint code
-        run: npm run lint
+        run: npm run lint-code
+
+      - name: Lint styles
+        run: npm run lint-styles
 
       - name: Prettify code
         run: npm run prettify

.github/workflows/release.yml

@@ -9,17 +9,17 @@ jobs:
     runs-on: ubuntu-latest
     name: Node build
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-${{ matrix.node }}-npm-${{ hashFiles('**/package-lock.lock') }}
           restore-keys: |
             ${{ runner.os }}-npm-
       - name: Setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
-          node-version: '18.x'
+          node-version: '20.x'
       - run: npm ci
       - run: npm run build
 
@@ -28,17 +28,17 @@ jobs:
     runs-on: ubuntu-latest
     name: Release
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-${{ matrix.node }}-npm-${{ hashFiles('**/package-lock.lock') }}
           restore-keys: |
             ${{ runner.os }}-npm-
       - name: Setup node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v5
         with:
-          node-version: '18.x'
+          node-version: '20.x'
 
       - name: Set tag
         id: tagName

.gitignore

@@ -50,6 +50,7 @@ node_modules
 src/extensions/*/lib/*.js
 !src/extensions/*/lib/*.proxy.js
 !src/extensions/*/config.js
+!docs/assets/*.js
 
 #################
 ## Misc

.stylelintrc.json

@@ -0,0 +1,26 @@
+{
+  "customSyntax": "postcss-less",
+  "extends": ["stylelint-config-standard-less"],
+  "plugins": ["stylelint-less"],
+  "rules": {
+    "block-no-empty": true,
+    "at-rule-no-unknown": null,
+    "color-no-invalid-hex": true,
+    "less/color-no-invalid-hex": null,
+    "rule-empty-line-before": null,
+    "selector-class-pattern": null,
+    "selector-id-pattern": null,
+    "declaration-empty-line-before": null,
+    "property-no-vendor-prefix": null,
+    "no-duplicate-selectors": null,
+    "no-descending-specificity": null,
+    "font-family-no-duplicate-names": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "selector-pseudo-element-no-unknown": null,
+    "selector-pseudo-class-no-unknown": null,
+    "declaration-block-no-duplicate-custom-properties": null,
+    "function-linear-gradient-no-nonstandard-direction": null,
+    "media-feature-name-no-unknown": null,
+    "media-feature-range-notation": "prefix"
+  }
+}

.vscode/settings.json

@@ -10,6 +10,11 @@
   },
   "typescript.check.workspaceVersion": false,
   "typescript.tsdk": "node_modules\\typescript\\lib",
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "stylelint.customSyntax": "postcss-less",
+  "stylelint.validate": ["css", "less"],
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "prettier.requireConfig": true,

CONTRIBUTING.md

@@ -48,6 +48,8 @@ UV source code lives inside the `/src/` folder.
 
 Here is a [diagram](https://docs.google.com/drawings/d/1i484Jd32FoLwtE5uvkBA6l5LV-DioSOZDIWD0WfhWl8/edit?usp=sharing) showing the overall architecture of the project.
 
+For more in-depth information on the application structure please see the [manual](https://github.com/UniversalViewer/universalviewer/blob/dev/manual/index.md).
+
 ## Running the test suite
 
 Before commiting your changes make sure tests are passing:

README.md

@@ -18,7 +18,11 @@ A community-developed open source project on a mission<br/> to help you share yo
 </a>
 </p>
 <p align="center"><a href="https://docs.google.com/forms/d/e/1FAIpQLSeHLD0kng5aXvGFsNN_tJGsZMTnp08Hv2F6kdGsJRb6bT0NWw/viewform" rel="nofollow"><strong>#</strong> Slack
-</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://bsky.app/profile/universalviewer.io"> <strong>@</strong> Bluesky</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://x.com/universalviewer"> <strong>@</strong> X</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="https://glammr.us/@universalviewer"> <strong>@</strong> Mastodon </a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="https://github.com/UniversalViewer/universalviewer/wiki"> About </a> </p>
+</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://bsky.app/profile/universalviewer.io"> <strong>@</strong> Bluesky</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="https://x.com/universalviewer"> <strong>@</strong> X</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="https://glammr.us/@universalviewer"> <strong>@</strong> Mastodon </a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="https://github.com/UniversalViewer/universalviewer/wiki"> History of the UV </a> </p>
+
+# The Universal Viewer (UV) is a community-developed open source project. Our mission is to help you share your content with the world
+
+The UV software can display images, 3D files and PDFs, play audio and video files, and more. 
 
 <br/>
 
@@ -33,11 +37,10 @@ A community-developed open source project on a mission<br/> to help you share yo
 
 - [**Website**](#-website)
 - [**Getting Started**](#-getting-started)
-- [**Contributing**](#-contributing)
-- [**Sponsors**](#-sponsors)
-- [**License**](#-license)
+- [**Contributing and Giving Feedback**](#-contributing-and-giving-feedback)
+- [**Contributors and Sponsors**](#-contributors-and-sponsors)
 - [**Accessibility Statement**](#-accessibility-statement)
-- [**Feedback**](#-feedback)
+- [**License**](#-license)
 
 ## 🌐 Website
 
@@ -52,37 +55,48 @@ See the [examples](https://github.com/UniversalViewer/universalviewer/wiki/UV-Ex
 
 Read the technical [docs](https://docs.universalviewer.io/modules.html) to learn more about the code and available configuration options.
 
-## 💻 Contributing
+Read the [manual](https://github.com/UniversalViewer/universalviewer/blob/dev/manual/index.md) for information on using, configuring, and developing for the UV.
 
-Read below to learn how to take part in improving the UV:
+<a id="feedback"></a>
+<a id="contributing"></a>
+## 📣 Contributing and Giving Feedback
 
-- Fork the repository and [run the examples from source](#-getting-started)
+An active, collaborative community of testers, developers and institutional users has grown around the Universal Viewer. Read this [blog post about a recent 'community sprint'](https://blogs.bl.uk/digital-scholarship/2024/11/working-together-the-community-sprint-experience-.html) to find out more about how we're working together.
+
+Talking to active contributors and sponsors is a great way to find out what the community is currently focusing on, and where help is needed:
+
+- Join the discussion on [Slack](http://universalviewer.io/#contact)
+- There is an [active Slack channel](https://docs.google.com/forms/d/e/1FAIpQLSeHLD0kng5aXvGFsNN_tJGsZMTnp08Hv2F6kdGsJRb6bT0NWw/viewform) and regular community calls.
+- You can view discussions and post on our [Google Group](https://groups.google.com/forum/#!forum/universalviewer)
+- Ask a question, request a new feature and file a bug with [GitHub issues](https://github.com/universalviewer/universalviewer/issues/new)
+- Engage with the [UV Steering Group](https://github.com/UniversalViewer/universalviewer/wiki/Steering-Group) and [community team](https://github.com/UniversalViewer/universalviewer/blob/dev/COMMUNITY_TEAM.md)
 - Get familiar with [Code of Conduct](https://github.com/UniversalViewer/universalviewer/blob/dev/CODE_OF_CONDUCT.md)
 - Read our [guide to contributing](https://github.com/UniversalViewer/universalviewer/blob/dev/CONTRIBUTING.md)
 - Read our [governance document](https://github.com/UniversalViewer/universalviewer/blob/dev/GOVERNANCE.md) to learn more about roles and responsibilities, support, membership, and the decision making process.
+
+If you want to dive into code, you can learn how to take part in improving the UV:
+
+- Fork the repository and [run the examples from source](#-getting-started)
 - Find an [issue](https://github.com/UniversalViewer/universalviewer/issues) to work on and submit a pull request
+- Help update our [Accessibility Statement](https://github.com/UniversalViewer/universalviewer/wiki/Accessibility-Statement-for-the-Universal-Viewer)
+- Star the repository to show your support ⭐
 - Could not find an issue? Look for bugs, typos, and missing features.
 
-![Contributors](https://raw.githubusercontent.com/UniversalViewer/assets/master/contributors.jpg "Contributors")
-
-<a href="https://github.com/UniversalViewer/universalviewer/graphs/contributors"><img src="https://opencollective.com/universalviewer/contributors.svg?width=890&button=false" /></a>
+<a id="sponsors"></a>
+## 🏅 Contributors and Sponsors
 
-## 🏅 Sponsors
+### Individual contributors
+[![Individual contributors](https://opencollective.com/universalviewer/contributors.svg?width=890&button=false "Individual contributors")](https://github.com/UniversalViewer/universalviewer/graphs/contributors)
 
+### Institutional contributors
 [Become a sponsor](https://opencollective.com/universalviewer#sponsor) and join our [Steering Group](https://github.com/UniversalViewer/universalviewer/wiki/Steering-Group) to help guide how our sponsorship funds are allocated.
 
-## 📖 License
-
-The Universal Viewer is released under the [MIT license](https://github.com/UniversalViewer/universalviewer/blob/master/LICENSE.txt).
+![Institutional contributors](https://raw.githubusercontent.com/UniversalViewer/assets/master/contributors.jpg "Institutional contributors")
 
 ## 📖 Accessibility Statement
 
 Read our [Accessibility Statement](https://github.com/UniversalViewer/universalviewer/wiki/Accessibility-Statement-for-the-Universal-Viewer)
 
-## 📣 Feedback
-
-Read below how to engage with the UV [community](https://github.com/UniversalViewer/universalviewer/blob/dev/COMMUNITY_TEAM.md):
+## 📖 License
 
-- Join the discussion on [Slack](http://universalviewer.io/#contact).
-- Ask a question, request a new feature and file a bug with [GitHub issues](https://github.com/universalviewer/universalviewer/issues/new).
-- Star the repository to show your support ⭐
+The Universal Viewer is released under the [MIT license](https://github.com/UniversalViewer/universalviewer/blob/master/LICENSE.txt).

__tests__/configuration_options.js

@@ -1,30 +1,46 @@
-describe('Configuration options', () => {
-  describe('thumb cache invalidation', () => {
+describe("Configuration options", () => {
+  describe("thumb cache invalidation", () => {
     beforeEach(async () => {
-      await page.goto('http://localhost:4444/');
-      await page.waitForSelector('#thumb0');
+      await page.goto("http://localhost:4444/");
+      await page.waitForSelector("#thumb0");
     });
-    it.skip('when set to false does not provide timestamp', async () => {
-      await page.evaluate(() => uv.set(
-        { config: { modules: { contentLeftPanel: { options: { thumbsCacheInvalidation: { enabled: false }}}}}}
-      ));
-      await page.waitForSelector('#thumb0');
-      const imageSrc = await page.$eval('#thumb0 img', e => e.src);
-      expect(imageSrc).toEqual( 
+    it.skip("when set to false does not provide timestamp", async () => {
+      await page.evaluate(() =>
+        uv.set({
+          config: {
+            modules: {
+              contentLeftPanel: {
+                options: { thumbsCacheInvalidation: { enabled: false } },
+              },
+            },
+          },
+        })
+      );
+      await page.waitForSelector("#thumb0");
+      const imageSrc = await page.$eval("#thumb0 img", (e) => e.src);
+      expect(imageSrc).toEqual(
         expect.stringMatching(
-          'https://dlcs.io/iiif-img/wellcome/1/ff2085d5-a9c7-412e-9dbe-dda87712228d/full/90,/0/default.jpg'
+          "https://dlcs.io/iiif-img/wellcome/1/ff2085d5-a9c7-412e-9dbe-dda87712228d/full/90,/0/default.jpg"
         )
       );
     });
-    it.skip('has a configurable parameter type', async () => {
-      await page.evaluate(() => uv.set(
-        { config: { modules: { contentLeftPanel: { options: { thumbsCacheInvalidation: { paramType: '#' }}}}}}
-      ));
-      await page.waitForSelector('#thumb0');
-      const imageSrc = await page.$eval('#thumb0 img', e => e.src);
-      expect(imageSrc).toEqual( 
+    it.skip("has a configurable parameter type", async () => {
+      await page.evaluate(() =>
+        uv.set({
+          config: {
+            modules: {
+              contentLeftPanel: {
+                options: { thumbsCacheInvalidation: { paramType: "#" } },
+              },
+            },
+          },
+        })
+      );
+      await page.waitForSelector("#thumb0");
+      const imageSrc = await page.$eval("#thumb0 img", (e) => e.src);
+      expect(imageSrc).toEqual(
         expect.stringContaining(
-          'https://dlcs.io/iiif-img/wellcome/1/ff2085d5-a9c7-412e-9dbe-dda87712228d/full/90,/0/default.jpg#t='
+          "https://dlcs.io/iiif-img/wellcome/1/ff2085d5-a9c7-412e-9dbe-dda87712228d/full/90,/0/default.jpg#t="
         )
       );
     });