Update theme and dependencies (#326)

# Problem

Updating the theme colors and layout

Also updated npm dependencies

# Solution

Updated theme to be the same as `docs.frequency.xyz` although without
the footer or header (although kept them empty in there so the css
doesn't have to change)

## Steps to Verify:

1. `cargo install mdbook@0.4.51 && cargo install mdbook-mermaid@0.15.0`
2. `cd libraries/js`
3. `npm i && npm run build`
4. `cd dist && npm pack && cd ..`
5. `cd ../../tools/signed-request-generator`
6. `npm install
../../libraries/js/dist/projectlibertylabs-siwf-0.0.0.tgz`
7. `npm run build`
8. `cd ../..`
9. `rm -Rf docs/src/Generator && cp -a
tools/signed-request-generator/build docs/src/Generator`
10. `cd docs`
11. `npm i`
12. `mdbook serve`
13. See new theme!

Author: wilwade

.github/workflows/common/set-up-mdbook/action.yaml

@@ -8,10 +8,10 @@ runs:
   using: "composite"
   steps:
     - name: Setup mdBook 📚
-      uses: jontze/action-mdbook@0765bef0c7c5792f93bf3ed3d487a0ca32c9da33
+      uses: jontze/action-mdbook@6c0be56d14c4bf16861b00af61f50ff7400ce502
       with:
         token: ${{ inputs.token }}
-        mdbook-version: "0.4.47" # Use a semver compatible string
+        mdbook-version: "0.4.51" # Use a semver compatible string
         # Optional Plugins have to be enabled
         # use-linkcheck: true
         # linkcheck-version: "~0.7.7"

.github/workflows/deploy-pages-v2.yml

@@ -60,7 +60,7 @@ jobs:
 
       - name: Build with mdBook
         working-directory: docs
-        run: mdbook build && ls book
+        run: npm i && mdbook build && ls book
 
       - name: Structure v2 (Docs + Assets)
         run: |

.github/workflows/verify-pr-v2-docs.yaml

@@ -52,4 +52,4 @@ jobs:
 
       - name: Build mdBook 📚
         working-directory: docs
-        run: mdbook build && ls book
+        run: npm i && mdbook build && ls book

.github/workflows/verify-pr-v2-tool-generator.yml

@@ -15,7 +15,7 @@ jobs:
         node-version: [22.x]
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.51.1-noble
+      image: mcr.microsoft.com/playwright:v1.53.0-noble
 
     steps:
       - name: Checkout

.github/workflows/verify-pr-v2-web-sdk.yml

@@ -15,7 +15,7 @@ jobs:
         node-version: [20.x, 22.x]
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.51.1-noble
+      image: mcr.microsoft.com/playwright:v1.53.0-noble
 
     steps:
       - name: Checkout
@@ -44,3 +44,13 @@ jobs:
       - name: Build
         working-directory: libraries/sdk-web
         run: npm run build
+
+      - name: Upload Report
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: Tests Report
+          path: |
+            libraries/sdk-web/__snapshots__
+            libraries/sdk-web/test-results
+          retention-days: 4

README.md

@@ -68,7 +68,7 @@ Documentation is written in [CommonMark Markdown](https://rust-lang.github.io/md
 #### Prerequisites
 
 - [mdBook](https://rust-lang.github.io/mdBook/)
-  - Cargo: `cargo install mdbook@0.4.42`
+  - Cargo: `cargo install mdbook@0.4.51`
   - Mac Brew `brew install mdbook`
   - Binaries: [Download Release](https://github.com/rust-lang/mdBook/releases)
 - [Node.js v20+](https://nodejs.org)
@@ -77,6 +77,7 @@ Documentation is written in [CommonMark Markdown](https://rust-lang.github.io/md
 - Build the signed-request-generator: follow the "Development" and "Build" steps in `[tools/signed-request-generator/README.md]`.
 - Copy the new Generator to the docs directory: `rm -Rf docs/src/Generator && cp -a tools/signed-request-generator/build docs/src/Generator`
 - `cd ../../docs`
+- Install packages `npm i`
 - Serve the HTML locally and watch for changes: `mdbook serve` or `mdbook serve -p <port, default 3000>`
 - For style edits see: [`docs/css/overrides.css`](./docs/css/overrides.css)
 - For changes to the custom preprocessor see: [`docs/preprocessors/README.md`](./docs/preprocessors/README.md)

docs/.gitignore

@@ -1 +1,4 @@
 book
+package-lock.json
+node_modules
+css/tailwind.css

docs/book.toml

@@ -14,20 +14,26 @@ command = "node preprocessors/svg-embed.mjs"
 [preprocessor.generator]
 command = "node preprocessors/generator.mjs"
 
+[preprocessor.tailwind]
+renderers = ["html"]
+command = 'node preprocessors/noop-npx.mjs "npx -y @tailwindcss/cli -i ./theme/tailwind.css -o ./css/tailwind.css"'
+
 
 [output.html]
-no-section-label = true
-git-repository-url = "https://github.com/ProjectLibertyLabs/siwf"
-edit-url-template = "https://github.com/ProjectLibertyLabs/siwf/blob/main/docs/{path}"
-preferred-dark-theme = "coal"
 additional-css = [
+  "css/tailwind.css",
+  "css/overrides.css",
+  "css/side-nav.css",
+  "css/button-links.css",
   "css/highlight.css",
   "css/highlight-dark.css",
-  "css/tailwind-short.css",
-  "css/button-links.css",
   "css/generator.css",
-  "css/overrides.css",
 ]
+no-section-label = true
+copy-fonts = false # Switched to custom fonts
+git-repository-url = "https://github.com/ProjectLibertyLabs/siwf"
+edit-url-template = "https://github.com/ProjectLibertyLabs/siwf/blob/main/docs/{path}"
+preferred-dark-theme = "coal"
 
 [output.html.fold]
 enable = true

docs/css/button-links.css

@@ -15,22 +15,22 @@
 .button-links a,
 .button-links > p a,
 .button-links a:link,
-.button-links > p a:link {
+.button-links > p a:link,
+.button-links a:visited,
+.button-links > p a:visited {
   text-decoration: none;
   box-sizing: content-box;
   font-weight: 700;
   color: var(--button-nav-fg);
   background-color: var(--button-nav-bg);
-  border: 2px solid transparent;
   border-radius: 9999px;
   user-select: none;
   padding: 20px 10%;
   margin: 10px;
   display: flex;
   font-size: 20px;
   flex: 0.5;
-  transition-property: border, color;
-  transition-duration: 0.5s;
+  transition: none;
   justify-content: center;
   align-items: center;
   text-align: center;
@@ -68,7 +68,6 @@
 .button-links a:visited:hover,
 .button-links > p a:visited:hover {
   text-decoration: none;
-  border: 2px solid var(--button-nav-hover-border);
   color: var(--button-nav-hover-fg);
   background: var(--button-nav-hover-bg);
 }