Removed client side navigation

README.md

@@ -9,6 +9,8 @@
 
 ## Core
 
+- https://resilientwebdesign.com/
+
 Accord's Library v3.0 (shorten to AL3.0) follows the Metamodernist Web model described by Frédéric Bonnet in his article [From Classicism to Metamodernism — A Short History of Web Development](https://dev.to/fredericbonnet/the-third-age-of-web-development-kgj#the-metamodernist-period).
 
 - Embrace web standards instead of reinventing the wheel
@@ -93,8 +95,6 @@ Accord's Library v3.0 (shorten to AL3.0) follows the Metamodernist Web model des
 - Navigation
 
   - Smooth scrolling when using anchor links
-  - Loading animation when navigation takes more than 500ms
-  - View transitions on compatible browsers: when navigating, the next page has a fade-in animation.
   - On image pages (scans, gallery, image files), allow the user to navigate to the previous or next image using keyboard arrows.
 
 - On media pages (scans, images, audios, videos), provide a download button. This way, the user doesn't have to right-click -> "save media as..."
@@ -110,7 +110,6 @@ Accord's Library v3.0 (shorten to AL3.0) follows the Metamodernist Web model des
 
 ## Drawback of JavaScript
 
-When going back in the navigation history, the page seems to load slower when JavaScript is enabled.
 The parallax effect on background images is a bit demanding, it is disabled on mobiles and tablets to lessen the impact.
 
 ## Browser-specific tricks
@@ -303,3 +302,9 @@ Things to consider:
 
 - The root element of Component B (the one where we applied the CID) is now in the scope of Component A's CSS.
 - The opposite isn't true: Component B's scoped CSS cannot affect Component A.
+
+### Standards for this repo regarding Scope-CSS
+
+- Avoid :global()
+- Try to avoid passing a class to custom elements
+- If you do, the naming scheme should be `parent_name-child_name`

TODO.md

@@ -2,60 +2,68 @@
 
 ## Ongoing
 
-- [Analytics] Add analytics
+- [Feat] [Analytics] Add analytics
-- [Tooltips] Tooltip in under next element (example in timeline)
+- [Bugs] [Tooltips] Tooltip in under next element (example in timeline)
-- [Language override] Maso actor is not focusable with keyboard nav
+- [Bugs] [Language override] Maso actor is not focusable with keyboard nav
 
 ## Short term
 
-- [Timeline] Improve layout/spacing on mobile
+- [Bugs] [Safari] Aspect ratio broken for home IPs card
-- Display if a content has a source language
+- [Bugs] [iOS] Notch area is light mode color
-- [JSLess] Display if a content is available in more than one language
+- [Bugs] [iOS] Multi-parent page button is blue
-- Number of audio players seems limited (on Chrome and Firefox)
+- [Bugs] [iOS] Video doesn't seem to start
-- [RichTextContent] Handle relationship
+- [Bugs] TitleIcon is broken when there a lot of values https://v3.accords-library.com/en/pages/dod3-story-side-character-introduction
-- [Component] Make a metadata title component (combine with collectible custom info and table of content)
+- [Feat] Add languages to collectibles and pages previews
-- [RichTextContent] Add autolink block support
+- [Bugs] Folder icon is shrinking when title is too long https://v3.accords-library.com/en/folders/drakengard-1-3-shi-ni-itaru-aka
+- [Bugs] Missing title fontsize on simple titles https://v3.accords-library.com/en/images/6656a0113fe38b258ef5f852
+- [Feat] [RichTextContent] Handle relationship
+- [Bugs] Vollkorn doesn't support many languages
+- [Bugs] [Scans] Lack of spacing above credits if no description (e.g: https://v3.accords-library.com/en/collectibles/dod-official-guide-book-complete-edition/scans)
+- [Feat] [Timeline] Improve layout/spacing on mobile
+- [Feat] Display if a content has a source language
+- [Feat] [JSLess] Display if a content is available in more than one language
+- [Bugs] Number of audio players seems limited (on Chrome and Firefox)
+- [Feat] [RichTextContent] Add autolink block support
 
 ## Mid term
 
-- Save cookies for longer than just the session
+- [Feat] Change icons to filled one
-- [Timeline] Error if collectible not published?
+- [Feat] Save cookies for longer than just the session
-- [Timeline] display source language
+- [Bugs] [Timeline] Error if collectible not published?
-- [Timeline] Add details button in footer with credits + last updated / created
+- [Feat] [Timeline] display source language
-- [Videos] see why no video on Firefox and no poster on Chrome https://v3.accords-library.com/en/videos/661b672825d380e548dbb8c8
+- [Feat] [Timeline] Add details button in footer with credits + last updated / created
-- [Videos] Display platform info + channel page
+- [Bugs] [Videos] see why no video on Firefox and no poster on Chrome https://v3.accords-library.com/en/videos/661b672825d380e548dbb8c8
-- [JSLess] Provide JS-less alternative for timeline card footers
+- [Feat] [Videos] Display platform info + channel page
-- [JSLess] Provide JS-less alternative for parent pages
+- [Feat] [JSLess] Provide JS-less alternative for timeline card footers
+- [Feat] [JSLess] Provide JS-less alternative for parent pages
 
 ## Long term
 
-- [WebManifest] Add shortcuts https://web.dev/patterns/web-apps/shortcuts
+- [Feat] [Payload] Endpoints should provide a simple text-based version of the content (for OG purposes)
-- [PWA] Rich install UI https://web.dev/patterns/web-apps/richer-install-ui/
+- [Feat] [WebManifest] Add shortcuts https://web.dev/patterns/web-apps/shortcuts
-- Try using CSS instead of JS for parallax effect
+- [Feat] [PWA] Rich install UI https://web.dev/patterns/web-apps/richer-install-ui/
-- More data caching between the CMS and Astro
+- [Feat] Try using CSS instead of JS for parallax effect
-- [Folders] Support for nameless section
+- [Feat] More data caching between the CMS and Astro
-- [Scripts] Can't run the scripts using node (ts-node?)
+- [Feat] [Folders] Support for nameless section
-- [Scans] Adapt size of obi based on cover/dustjacket
+- [Feat] [Scripts] Can't run the scripts using node (ts-node?)
-- [Scans] Order of cover/dustjacket/obi should be based on the book's page order.
+- [Feat] [Scans] Order of cover/dustjacket/obi should be based on the book's page order.
-- [Medias] Add Parent pages
+- [Feat] [Medias] Add Parent pages
-- Add proper localization for formatFilesize, formatInches, formatMillimeters, formatPounds, and formatGrams
+- [Feat] Add proper localization for formatFilesize, formatInches, formatMillimeters, formatPounds, and formatGrams
-- [Timeline] Some filtering options (by source/languages)
+- [Feat] [Timeline] Some filtering options (by source/languages)
-- The Chronicles
+- [Feat] The Chronicles
-- The Changelog
+- [Feat] The Changelog
-- Grid view (all files)
+- [Feat] Grid view (all files)
-- Web archives
+- [Feat] Web archives
-- Contact page
+- [Feat] Contact page
-- About us page
+- [Feat] About us page
-- Global search function
+- [Feat] Global search function
   - Consider official search plugin for payload https://payloadcms.com/docs/plugins/search
-  - Convert Rich text to simple text for indexing and open graph purposes
+- [Feat] Anonymous comments
-- Anonymous comments
+- [Feat] [Images] add images group (which could be named or not)
-- [Images] add images group (which could be named or not)
+- [Feat] [Recorders] add list of contributions on recorders' pages
-- [Recorders] add list of contributions on recorders' pages
+- [Feat] Detect unused wording keys
-- Check if cache and prefetching can be used / should be used
-- Detect unused wording keys
 
 ## Bonus
 
-- Static HTML site export for archival
+- [Feat] Static HTML site export for archival
-- Secret Terminal mode
+- [Feat] Secret Terminal mode

package-lock.json

@@ -15,10 +15,10 @@
         "astro-icon": "^1.1.0",
         "node-cache": "^5.1.2",
         "tippy.js": "^6.3.7",
-        "ua-parser-js": "^1.0.37"
+        "ua-parser-js": "^1.0.38"
       },
       "devDependencies": {
-        "@iconify-json/material-symbols": "^1.1.80",
+        "@iconify-json/material-symbols": "^1.1.81",
         "@types/ua-parser-js": "^0.7.39",
         "astro-meta-tags": "^0.3.0",
         "autoprefixer": "^10.4.19",
@@ -2012,9 +2012,9 @@
       }
     },
     "node_modules/@iconify-json/material-symbols": {
-      "version": "1.1.80",
+      "version": "1.1.81",
-      "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.80.tgz",
+      "resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.81.tgz",
-      "integrity": "sha512-JrDMmWeHxFFMp3BBSsjvDvSiYzJ0qdYmHAQYWY/L5fxVZcIoeoQvtQR0wM1iJN4UDIsnHwbpJQ/sqZ/cvph6sw==",
+      "integrity": "sha512-DJhgiZQ935K2pG/ZhChLOA0tcQFZn8jCc1SVhiPY1cdjPslyamD569zaBm4Op5cAf6ouK8m6W85YVV8hXBLMgg==",
       "dev": true,
       "dependencies": {
         "@iconify/types": "*"
@@ -8964,9 +8964,9 @@
       }
     },
     "node_modules/ua-parser-js": {
-      "version": "1.0.37",
+      "version": "1.0.38",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.38.tgz",
-      "integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
+      "integrity": "sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==",
       "funding": [
         {
           "type": "opencollective",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v3.accords-library.com",
-  "version": "0.0.1",
+  "version": "3.0.0-beta.1",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -26,10 +26,10 @@
     "astro-icon": "^1.1.0",
     "node-cache": "^5.1.2",
     "tippy.js": "^6.3.7",
-    "ua-parser-js": "^1.0.37"
+    "ua-parser-js": "^1.0.38"
   },
   "devDependencies": {
-    "@iconify-json/material-symbols": "^1.1.80",
+    "@iconify-json/material-symbols": "^1.1.81",
     "@types/ua-parser-js": "^0.7.39",
     "astro-meta-tags": "^0.3.0",
     "autoprefixer": "^10.4.19",

src/components/AppLayout/components/AppLayoutSpinner.astro

@@ -1,66 +0,0 @@
----
-import { Icon } from "astro-icon/components";
-import { getI18n } from "src/i18n/i18n";
-
-const { t } = await getI18n(Astro.locals.currentLocale);
----
-
-{/* ------------------------------------------- HTML ------------------------------------------- */}
-
-<div id="app-layout-spinner"><Icon name="accords" /><p>{t("global.loading")}</p></div>
-
-{/* ------------------------------------------- CSS -------------------------------------------- */}
-
-<style>
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(720deg);
-    }
-  }
-
-  #app-layout-spinner {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    place-content: center;
-    place-items: center;
-    gap: 1em;
-    background-color: color-mix(in srgb, var(--color-elevation-0) 90%, transparent);
-    z-index: 9999;
-
-    transition-duration: 1s;
-    transition-property: opacity;
-    transition-delay: 500ms;
-    touch-action: none;
-    pointer-events: none;
-    user-select: none;
-    display: grid;
-    opacity: 0;
-
-    &.show {
-      opacity: 1;
-    }
-
-    & > svg {
-      animation: spin 2s infinite ease;
-      width: 10vmin;
-      height: 10vmin;
-    }
-  }
-</style>
-
-{/* ------------------------------------------- JS --------------------------------------------- */}
-
-<script is:inline>
-  document.addEventListener("astro:before-preparation", () => {
-    document.querySelector("#app-layout-spinner").classList.add("show");
-  });
-  document.addEventListener("astro:after-preparation", () => {
-    document.querySelector("#app-layout-spinner").classList.remove("show");
-  });
-</script>

src/components/AppLayout/components/Html.astro

@@ -1,8 +1,6 @@
 ---
 import UAParser from "ua-parser-js";
-import { ViewTransitions } from "astro:transitions";
 import { getI18n } from "src/i18n/i18n";
-import AppLayoutSpinner from "./AppLayoutSpinner.astro";
 import type {
   EndpointAudio,
   EndpointImage,
@@ -135,14 +133,11 @@ const { currentTheme } = Astro.locals;
         }
       </style>
     </noscript>
-    <ViewTransitions />
   </head>
 
   <body>
     <slot />
   </body>
-
-  <AppLayoutSpinner />
 </html>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
@@ -742,13 +737,9 @@ const { currentTheme } = Astro.locals;
 
 <script is:inline>
   Array.from(document.querySelectorAll(".when-no-js")).forEach((node) => node.remove());
-
-  document.addEventListener("astro:before-swap", ({ newDocument }) => {
-    Array.from(newDocument.querySelectorAll(".when-no-js")).forEach((node) => node.remove());
-  });
 </script>
 
-<script is:inline data-astro-rerun>
+<script is:inline>
   document.querySelectorAll("a").forEach((element) => {
     const href = element.getAttribute("href");
     if (!href || !href.startsWith("#")) return;

src/components/Lightbox.astro

@@ -188,29 +188,14 @@ const hasNavigation = previousImageHref || nextImageHref;
 {/* ------------------------------------------- JS --------------------------------------------- */}
 
 <script>
-  import { navigate } from "astro:transitions/client";
-
-  let queueCount = 0;
-
   document.addEventListener("keydown", async (e) => {
-    queueCount++;
+    const previousButton = document.getElementById("previous-button");
-    if (queueCount > 1) return;
+    const nextButton = document.getElementById("next-button");
 
-    const handle = async () => {
+    if (previousButton && e.key === "ArrowLeft") {
-      const previousHref = document.getElementById("previous-button")?.getAttribute("href");
+      previousButton.click();
-      const nextHref = document.getElementById("next-button")?.getAttribute("href");
+    } else if (nextButton && e.key === "ArrowRight") {
-
+      nextButton.click();
-      if (previousHref && e.key === "ArrowLeft") {
-        await navigate(previousHref);
-      } else if (nextHref && e.key === "ArrowRight") {
-        await navigate(nextHref);
-      }
-
-      queueCount--;
-    };
-
-    while (queueCount > 0) {
-      await handle();
     }
   });
 </script>