Removed client side navigation
This commit is contained in:
DrMint
parent
c73f586cc6
commit
84f86debe0
11
README.md
11
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`
|
||||
|
|
|
|||
96
TODO.md
96
TODO.md
|
|
@ -2,60 +2,68 @@
|
|||
|
||||
## Ongoing
|
||||
|
||||
- [Analytics] Add analytics
|
||||
- [Tooltips] Tooltip in under next element (example in timeline)
|
||||
- [Language override] Maso actor is not focusable with keyboard nav
|
||||
- [Feat] [Analytics] Add analytics
|
||||
- [Bugs] [Tooltips] Tooltip in under next element (example in timeline)
|
||||
- [Bugs] [Language override] Maso actor is not focusable with keyboard nav
|
||||
|
||||
## Short term
|
||||
|
||||
- [Timeline] Improve layout/spacing on mobile
|
||||
- Display if a content has a source language
|
||||
- [JSLess] Display if a content is available in more than one language
|
||||
- Number of audio players seems limited (on Chrome and Firefox)
|
||||
- [RichTextContent] Handle relationship
|
||||
- [Component] Make a metadata title component (combine with collectible custom info and table of content)
|
||||
- [RichTextContent] Add autolink block support
|
||||
- [Bugs] [Safari] Aspect ratio broken for home IPs card
|
||||
- [Bugs] [iOS] Notch area is light mode color
|
||||
- [Bugs] [iOS] Multi-parent page button is blue
|
||||
- [Bugs] [iOS] Video doesn't seem to start
|
||||
- [Bugs] TitleIcon is broken when there a lot of values https://v3.accords-library.com/en/pages/dod3-story-side-character-introduction
|
||||
- [Feat] Add languages to collectibles and pages previews
|
||||
- [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
|
||||
- [Timeline] Error if collectible not published?
|
||||
- [Timeline] display source language
|
||||
- [Timeline] Add details button in footer with credits + last updated / created
|
||||
- [Videos] see why no video on Firefox and no poster on Chrome https://v3.accords-library.com/en/videos/661b672825d380e548dbb8c8
|
||||
- [Videos] Display platform info + channel page
|
||||
- [JSLess] Provide JS-less alternative for timeline card footers
|
||||
- [JSLess] Provide JS-less alternative for parent pages
|
||||
- [Feat] Change icons to filled one
|
||||
- [Feat] Save cookies for longer than just the session
|
||||
- [Bugs] [Timeline] Error if collectible not published?
|
||||
- [Feat] [Timeline] display source language
|
||||
- [Feat] [Timeline] Add details button in footer with credits + last updated / created
|
||||
- [Bugs] [Videos] see why no video on Firefox and no poster on Chrome https://v3.accords-library.com/en/videos/661b672825d380e548dbb8c8
|
||||
- [Feat] [Videos] Display platform info + channel page
|
||||
- [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
|
||||
- [PWA] Rich install UI https://web.dev/patterns/web-apps/richer-install-ui/
|
||||
- Try using CSS instead of JS for parallax effect
|
||||
- More data caching between the CMS and Astro
|
||||
- [Folders] Support for nameless section
|
||||
- [Scripts] Can't run the scripts using node (ts-node?)
|
||||
- [Scans] Adapt size of obi based on cover/dustjacket
|
||||
- [Scans] Order of cover/dustjacket/obi should be based on the book's page order.
|
||||
- [Medias] Add Parent pages
|
||||
- Add proper localization for formatFilesize, formatInches, formatMillimeters, formatPounds, and formatGrams
|
||||
- [Timeline] Some filtering options (by source/languages)
|
||||
- The Chronicles
|
||||
- The Changelog
|
||||
- Grid view (all files)
|
||||
- Web archives
|
||||
- Contact page
|
||||
- About us page
|
||||
- Global search function
|
||||
- [Feat] [Payload] Endpoints should provide a simple text-based version of the content (for OG purposes)
|
||||
- [Feat] [WebManifest] Add shortcuts https://web.dev/patterns/web-apps/shortcuts
|
||||
- [Feat] [PWA] Rich install UI https://web.dev/patterns/web-apps/richer-install-ui/
|
||||
- [Feat] Try using CSS instead of JS for parallax effect
|
||||
- [Feat] More data caching between the CMS and Astro
|
||||
- [Feat] [Folders] Support for nameless section
|
||||
- [Feat] [Scripts] Can't run the scripts using node (ts-node?)
|
||||
- [Feat] [Scans] Order of cover/dustjacket/obi should be based on the book's page order.
|
||||
- [Feat] [Medias] Add Parent pages
|
||||
- [Feat] Add proper localization for formatFilesize, formatInches, formatMillimeters, formatPounds, and formatGrams
|
||||
- [Feat] [Timeline] Some filtering options (by source/languages)
|
||||
- [Feat] The Chronicles
|
||||
- [Feat] The Changelog
|
||||
- [Feat] Grid view (all files)
|
||||
- [Feat] Web archives
|
||||
- [Feat] Contact page
|
||||
- [Feat] About us page
|
||||
- [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
|
||||
- Anonymous comments
|
||||
- [Images] add images group (which could be named or not)
|
||||
- [Recorders] add list of contributions on recorders' pages
|
||||
- Check if cache and prefetching can be used / should be used
|
||||
- Detect unused wording keys
|
||||
- [Feat] Anonymous comments
|
||||
- [Feat] [Images] add images group (which could be named or not)
|
||||
- [Feat] [Recorders] add list of contributions on recorders' pages
|
||||
- [Feat] Detect unused wording keys
|
||||
|
||||
## Bonus
|
||||
|
||||
- Static HTML site export for archival
|
||||
- Secret Terminal mode
|
||||
- [Feat] Static HTML site export for archival
|
||||
- [Feat] Secret Terminal mode
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.80.tgz",
|
||||
"integrity": "sha512-JrDMmWeHxFFMp3BBSsjvDvSiYzJ0qdYmHAQYWY/L5fxVZcIoeoQvtQR0wM1iJN4UDIsnHwbpJQ/sqZ/cvph6sw==",
|
||||
"version": "1.1.81",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.81.tgz",
|
||||
"integrity": "sha512-DJhgiZQ935K2pG/ZhChLOA0tcQFZn8jCc1SVhiPY1cdjPslyamD569zaBm4Op5cAf6ouK8m6W85YVV8hXBLMgg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@iconify/types": "*"
|
||||
|
|
@ -8964,9 +8964,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/ua-parser-js": {
|
||||
"version": "1.0.37",
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",
|
||||
"integrity": "sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==",
|
||||
"version": "1.0.38",
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.38.tgz",
|
||||
"integrity": "sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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++;
|
||||
if (queueCount > 1) return;
|
||||
const previousButton = document.getElementById("previous-button");
|
||||
const nextButton = document.getElementById("next-button");
|
||||
|
||||
const handle = async () => {
|
||||
const previousHref = document.getElementById("previous-button")?.getAttribute("href");
|
||||
const nextHref = document.getElementById("next-button")?.getAttribute("href");
|
||||
|
||||
if (previousHref && e.key === "ArrowLeft") {
|
||||
await navigate(previousHref);
|
||||
} else if (nextHref && e.key === "ArrowRight") {
|
||||
await navigate(nextHref);
|
||||
}
|
||||
|
||||
queueCount--;
|
||||
};
|
||||
|
||||
while (queueCount > 0) {
|
||||
await handle();
|
||||
if (previousButton && e.key === "ArrowLeft") {
|
||||
previousButton.click();
|
||||
} else if (nextButton && e.key === "ArrowRight") {
|
||||
nextButton.click();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue