From 84f86debe00f242f6fe6df0f4739b45f7c6e6bbe Mon Sep 17 00:00:00 2001 From: DrMint <29893320+DrMint@users.noreply.github.com> Date: Sat, 1 Jun 2024 10:27:26 +0200 Subject: [PATCH] Removed client side navigation --- README.md | 11 ++- TODO.md | 96 ++++++++++--------- package-lock.json | 16 ++-- package.json | 6 +- .../components/AppLayoutSpinner.astro | 66 ------------- .../AppLayout/components/Html.astro | 11 +-- src/components/Lightbox.astro | 27 ++---- 7 files changed, 78 insertions(+), 155 deletions(-) delete mode 100644 src/components/AppLayout/components/AppLayoutSpinner.astro diff --git a/README.md b/README.md index c80d0f6..e66bf5d 100644 --- a/README.md +++ b/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` diff --git a/TODO.md b/TODO.md index 7f2177c..44f6689 100644 --- a/TODO.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 43fb1e6..3766658 100644 --- a/package-lock.json +++ b/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", - "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", diff --git a/package.json b/package.json index 858c134..fa31bbe 100644 --- a/package.json +++ b/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", diff --git a/src/components/AppLayout/components/AppLayoutSpinner.astro b/src/components/AppLayout/components/AppLayoutSpinner.astro deleted file mode 100644 index e296494..0000000 --- a/src/components/AppLayout/components/AppLayoutSpinner.astro +++ /dev/null @@ -1,66 +0,0 @@ ---- -import { Icon } from "astro-icon/components"; -import { getI18n } from "src/i18n/i18n"; - -const { t } = await getI18n(Astro.locals.currentLocale); ---- - -{/* ------------------------------------------- HTML ------------------------------------------- */} - -

{t("global.loading")}

- -{/* ------------------------------------------- CSS -------------------------------------------- */} - - - -{/* ------------------------------------------- JS --------------------------------------------- */} - - diff --git a/src/components/AppLayout/components/Html.astro b/src/components/AppLayout/components/Html.astro index 01223be..07ab651 100644 --- a/src/components/AppLayout/components/Html.astro +++ b/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; } - - - {/* ------------------------------------------- CSS -------------------------------------------- */} @@ -742,13 +737,9 @@ const { currentTheme } = Astro.locals; -