diff --git a/.vscode/settings.json b/.vscode/settings.json index 8e0663d..9a4c2b9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,5 @@ { "editor.rulers": [100], - "editor.tabSize": 2 + "editor.tabSize": 2, + "typescript.preferences.importModuleSpecifier": "non-relative" } diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..0cdd348 --- /dev/null +++ b/TODO.md @@ -0,0 +1,2 @@ +- [ ] Check why I'm getting NS_BINDING_ABORTED on fonts when fetched in the network browser dev tool tab +- [ ] Add a background when opening menus in mobile mode \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index fa56309..85ca21b 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/public/css/global.css b/public/css/global.css deleted file mode 100644 index c3d0c93..0000000 --- a/public/css/global.css +++ /dev/null @@ -1,28 +0,0 @@ -/* -original light mode -color: #fff1e0; - color: #ffedd8; - color: #f0d1b3; - color: #c0845e; - color: #9c6644; - color: #1b1811; */ - -/* - original dark mode - color: #191914; - color: #26221e; - color: #2c2803; - color: #392d22; - color: #c0845e; - color: #ebeae7; */ - -/* new version using https://leonardocolor.io/theme.html */ - -:where(button) { - background-color: inherit; - color: inherit; - border: initial; - padding: initial; - margin: initial; - cursor: pointer; -} diff --git a/public/css/tippy.css b/public/css/tippy.css new file mode 100644 index 0000000..0d4fe75 --- /dev/null +++ b/public/css/tippy.css @@ -0,0 +1,88 @@ +.tippy-box[data-animation="fade"][data-state="hidden"] { + opacity: 0; +} +[data-tippy-root] { + max-width: calc(100vw - 10px); +} +.tippy-box { + position: relative; + background-color: var(--color-elevation-1); + color: var(--color-base-1000); + border-radius: 0.5rem; + box-shadow: 0 20px 25px -5px var(--color-shadow), + 0 0 10px -6px var(--color-shadow); + transition-property: transform, visibility, opacity; +} +.tippy-box[data-placement^="top"] > .tippy-arrow { + bottom: 0; +} +.tippy-box[data-placement^="top"] > .tippy-arrow:before { + bottom: -7px; + left: 0; + border-width: 8px 8px 0; + border-top-color: initial; + transform-origin: center top; +} +.tippy-box[data-placement^="bottom"] > .tippy-arrow { + top: 0; +} +.tippy-box[data-placement^="bottom"] > .tippy-arrow:before { + top: -7px; + left: 0; + border-width: 0 8px 8px; + border-bottom-color: initial; + transform-origin: center bottom; +} +.tippy-box[data-placement^="left"] > .tippy-arrow { + right: 0; +} +.tippy-box[data-placement^="left"] > .tippy-arrow:before { + border-width: 8px 0 8px 8px; + border-left-color: initial; + right: -7px; + transform-origin: center left; +} +.tippy-box[data-placement^="right"] > .tippy-arrow { + left: 0; +} +.tippy-box[data-placement^="right"] > .tippy-arrow:before { + left: -7px; + border-width: 8px 8px 8px 0; + border-right-color: initial; + transform-origin: center right; +} +.tippy-box[data-inertia][data-state="visible"] { + transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); +} +.tippy-arrow { + width: 16px; + height: 16px; + color: var(--color-elevation-1); +} +.tippy-arrow:before { + content: ""; + position: absolute; + border-color: transparent; + border-style: solid; +} +.tippy-content { + position: relative; + padding: 1rem 1.5rem; + z-index: 1; +} +.tippy-box[data-placement^="top"] { + transform-origin: bottom; +} +.tippy-box[data-placement^="bottom"] { + transform-origin: top; +} +.tippy-box[data-placement^="left"] { + transform-origin: right; +} +.tippy-box[data-placement^="right"] { + transform-origin: left; +} +.tippy-box[data-state="hidden"] { + transform: scale(0.8); + opacity: 0; +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..77470cb --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / \ No newline at end of file diff --git a/src/components/Button.astro b/src/components/Button.astro deleted file mode 100644 index 6d0c52b..0000000 --- a/src/components/Button.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -import { Icon } from "astro-icon/components"; -import { getLocalizedUrl } from "utils/urls"; -interface Props { - href: string; - isActive?: boolean; - text?: string; - icon?: string; -} - -const { locale } = Astro.params; -const { href, text, icon, isActive } = Astro.props; ---- - - - {text && text} - {icon && } - - - diff --git a/src/components/MenuPanel.astro b/src/components/MenuPanel.astro deleted file mode 100644 index f3cef9c..0000000 --- a/src/components/MenuPanel.astro +++ /dev/null @@ -1,262 +0,0 @@ ---- -import { Icon } from "astro-icon/components"; -import { getLocalizedUrl } from "utils/urls"; -import { CookieNames } from "utils/cookies"; -import NavOption from "./NavOption.astro"; - -const { locale = "en" } = Astro.params; -const isReduced = - Astro.cookies.get(CookieNames.MENU_PANEL_REDUCED)?.boolean() ?? false; -const themeColors = - Astro.cookies.get(CookieNames.THEME_COLOR)?.value ?? "theme-color-light"; ---- - -
- - -

Accord’s Library

- - - - - - - - - - - - - - - - - - - - - -

- This website’s content is made available under CC-BY-SA unless otherwise noted. -

- -
- - - -
- -

- Accord’s Library is not affiliated with or endorsed by SQUARE ENIX CO. LTD. - All game assets and promotional materials belongs to © SQUARE ENIX CO. LTD. -

- - -
- - - - diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro deleted file mode 100644 index 6b732de..0000000 --- a/src/components/Navbar.astro +++ /dev/null @@ -1,75 +0,0 @@ ---- -import { Icon } from "astro-icon/components"; -interface Props { - title: string; - showSubPanel: boolean; -} - -const { title, showSubPanel } = Astro.props; ---- - -
- -

{title}

-
- { - showSubPanel && ( - - ) - } -
-
- - diff --git a/src/env.d.ts b/src/env.d.ts new file mode 100644 index 0000000..5b0a7e0 --- /dev/null +++ b/src/env.d.ts @@ -0,0 +1,2 @@ +/// +/// \ No newline at end of file diff --git a/src/layouts/Html.astro b/src/layouts/Html.astro deleted file mode 100644 index ca61133..0000000 --- a/src/layouts/Html.astro +++ /dev/null @@ -1,159 +0,0 @@ ---- -import { CookieNames } from "utils/cookies"; -interface Props { - title: string; -} - -const { title } = Astro.props; -const themeColors = - Astro.cookies.get(CookieNames.THEME_COLOR)?.value ?? "theme-color-light"; ---- - - - - - - - - {title} - - - - - - - - - - - - - diff --git a/src/pages/[locale]/archives.astro b/src/pages/[locale]/archives.astro index ffd0a1a..acc7d95 100644 --- a/src/pages/[locale]/archives.astro +++ b/src/pages/[locale]/archives.astro @@ -1,7 +1,11 @@ --- -import AppLayout from "layouts/AppLayout.astro"; +import AppLayout from "pages/_components/AppLayout/AppLayout.astro"; --- +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} +
Besides physical medias, we also archive digital contents such as websites, diff --git a/src/pages/[locale]/contents.astro b/src/pages/[locale]/contents.astro new file mode 100644 index 0000000..1038adb --- /dev/null +++ b/src/pages/[locale]/contents.astro @@ -0,0 +1,15 @@ +--- +import AppLayout from "pages/_components/AppLayout/AppLayout.astro"; +--- + +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} + + +

Contents

+
+ All the contents (textual, audio, and video) from the Library or other + online sources. +
+ diff --git a/src/pages/[locale]/index.astro b/src/pages/[locale]/index.astro index b02acd5..cb8e7cd 100644 --- a/src/pages/[locale]/index.astro +++ b/src/pages/[locale]/index.astro @@ -1,8 +1,12 @@ --- import { Icon } from "astro-icon/components"; -import AppLayout from "layouts/AppLayout.astro"; +import AppLayout from "pages/_components/AppLayout/AppLayout.astro"; --- +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} +
+{ + /* ------------------------------------------- CSS -------------------------------------------- */ +} + diff --git a/src/pages/_components/AppLayout/components/MenuPanelReduced.astro b/src/pages/_components/AppLayout/components/MenuPanelReduced.astro new file mode 100644 index 0000000..a1d1597 --- /dev/null +++ b/src/pages/_components/AppLayout/components/MenuPanelReduced.astro @@ -0,0 +1,159 @@ +--- +import { Icon } from "astro-icon/components"; +import { getLocalizedUrl } from "utils/urls"; +import { CookieNames } from "utils/cookies"; +import NavOptionIcon from "pages/_components/NavOptionIcon.astro"; +import { parseCookie } from "utils/astro"; +import HorizontalLine from "pages/_components/HorizontalLine.astro"; +import ReduceToggleButton from "./ReduceToggleButton.astro"; + +const { locale = "en" } = Astro.params; + +const themeColors = parseCookie( + Astro.cookies.get(CookieNames.THEME_COLOR), + "theme-color-light" +); +--- + +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} + + + +
+ + + +
+ + + + + + + + + + + + + + + + + + + + + +{ + /* ------------------------------------------- CSS -------------------------------------------- */ +} + + + +{ + /* -------------------------------------------- JS -------------------------------------------- */ +} + + diff --git a/src/pages/_components/AppLayout/components/Navbar.astro b/src/pages/_components/AppLayout/components/Navbar.astro new file mode 100644 index 0000000..ed1d0ef --- /dev/null +++ b/src/pages/_components/AppLayout/components/Navbar.astro @@ -0,0 +1,93 @@ +--- +import { Icon } from "astro-icon/components"; +interface Props { + title: string; + showSubPanel: boolean; +} + +const { title, showSubPanel } = Astro.props; +--- + +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} + + +

{title}

+
+ { + showSubPanel && ( + + ) + } +
+ +{ + /* ------------------------------------------- CSS -------------------------------------------- */ +} + + + +{ + /* -------------------------------------------- JS -------------------------------------------- */ +} + + diff --git a/src/pages/_components/AppLayout/components/ReduceToggleButton.astro b/src/pages/_components/AppLayout/components/ReduceToggleButton.astro new file mode 100644 index 0000000..797c9b6 --- /dev/null +++ b/src/pages/_components/AppLayout/components/ReduceToggleButton.astro @@ -0,0 +1,45 @@ +--- +import { Icon } from "astro-icon/components"; + +interface Props { + icon: string; +} + +const { icon } = Astro.props; +--- + +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} + + + +{ + /* -------------------------------------------- JS -------------------------------------------- */ +} + + diff --git a/src/pages/_components/AppLayout/components/ThemeToggleButton.astro b/src/pages/_components/AppLayout/components/ThemeToggleButton.astro new file mode 100644 index 0000000..fe619cf --- /dev/null +++ b/src/pages/_components/AppLayout/components/ThemeToggleButton.astro @@ -0,0 +1,87 @@ +--- +import { Icon } from "astro-icon/components"; +import { parseCookie } from "utils/astro"; +import { CookieNames } from "utils/cookies"; + +const themeColors = parseCookie( + Astro.cookies.get(CookieNames.THEME_COLOR), + "theme-color-light" +); +--- + +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} + + + +{ + /* ------------------------------------------- CSS -------------------------------------------- */ +} + + + +{ + /* -------------------------------------------- JS -------------------------------------------- */ +} + + diff --git a/src/pages/_components/HorizontalLine.astro b/src/pages/_components/HorizontalLine.astro new file mode 100644 index 0000000..396ea05 --- /dev/null +++ b/src/pages/_components/HorizontalLine.astro @@ -0,0 +1,17 @@ +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} + +
+ +{ + /* ------------------------------------------- CSS -------------------------------------------- */ +} + + diff --git a/src/pages/_components/Html.astro b/src/pages/_components/Html.astro new file mode 100644 index 0000000..c857f3d --- /dev/null +++ b/src/pages/_components/Html.astro @@ -0,0 +1,388 @@ +--- +import { parseCookie } from "utils/astro"; +import { CookieNames } from "utils/cookies"; + +interface Props { + title: string; +} + +const { title } = Astro.props; +const themeColors = parseCookie( + Astro.cookies.get(CookieNames.THEME_COLOR), + "theme-color-light" +); +--- + +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} + + + + + + {title} + + + + + + + + + + + +{ + /* ------------------------------------------- CSS -------------------------------------------- */ +} + + diff --git a/src/components/NavOption.astro b/src/pages/_components/NavOption.astro similarity index 70% rename from src/components/NavOption.astro rename to src/pages/_components/NavOption.astro index f40b958..1dbd8df 100644 --- a/src/components/NavOption.astro +++ b/src/pages/_components/NavOption.astro @@ -18,35 +18,30 @@ const currentPath = new URL(Astro.request.url).pathname.slice( const isActive = currentPath.startsWith(href); --- +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} + {icon && } -
-

+

+

{title}

-

- {subtitle} -

+ {subtitle &&

{subtitle}

}
+{ + /* ------------------------------------------- CSS -------------------------------------------- */ +} + diff --git a/src/pages/_components/NavOptionIcon.astro b/src/pages/_components/NavOptionIcon.astro new file mode 100644 index 0000000..2fc3ae1 --- /dev/null +++ b/src/pages/_components/NavOptionIcon.astro @@ -0,0 +1,93 @@ +--- +import { Icon } from "astro-icon/components"; +import { getLocalizedUrl } from "utils/urls"; +interface Props { + href: string; + icon?: string; + title: string | null | undefined; + subtitle?: string | null | undefined; +} + +const { locale } = Astro.params; +const { href, icon, title, subtitle } = Astro.props; + +const currentPath = new URL(Astro.request.url).pathname.slice( + `/${locale}`.length +); + +const isActive = currentPath.startsWith(href); +--- + +{ + /* ------------------------------------------- HTML ------------------------------------------- */ +} + + + {icon && } +
+

+ {title} +

+ {subtitle &&

{subtitle}

} +
+ + +{ + /* ------------------------------------------- CSS -------------------------------------------- */ +} + + diff --git a/src/utils/Elementos.ts b/src/utils/Elementos.ts index 0cf95f2..90ee289 100644 --- a/src/utils/Elementos.ts +++ b/src/utils/Elementos.ts @@ -1,13 +1,13 @@ import type { Observable } from "./micro-observables"; export class Elementos { - readonly element: HTMLElement; + readonly element: NodeListOf; constructor(readonly selector: string) { - this.element = document.querySelector(selector)!; + this.element = document.querySelectorAll(selector)!; } onClick(listener: () => void) { - this.element.addEventListener("click", listener); + this.element.forEach((e) => e.addEventListener("click", listener)); } setClass( @@ -15,12 +15,14 @@ export class Elementos { observable: Observable ) { observable.subscribe((val) => { - if (typeof className === "string") { - this.element.classList.toggle(className, val); - } else { - this.element.classList.toggle(className.ifFalse, val === false); - this.element.classList.toggle(className.ifTrue, val === true); - } + this.element.forEach((e) => { + if (typeof className === "string") { + e.classList.toggle(className, val); + } else { + e.classList.toggle(className.ifFalse, val === false); + e.classList.toggle(className.ifTrue, val === true); + } + }); }); } } diff --git a/src/utils/astro.ts b/src/utils/astro.ts new file mode 100644 index 0000000..4176051 --- /dev/null +++ b/src/utils/astro.ts @@ -0,0 +1,8 @@ +import { type AstroCookies } from "astro"; + +type AstroCookie = ReturnType; + +export const parseCookie = (cookies: AstroCookie, defaultValue: T): T => { + const value: T | null = JSON.parse(cookies?.value ?? "null"); + return value ?? defaultValue; +}; diff --git a/src/utils/events.ts b/src/utils/events.ts new file mode 100644 index 0000000..a0de62f --- /dev/null +++ b/src/utils/events.ts @@ -0,0 +1,5 @@ +export const customEvents = { + mainPanel: { + reduce: { toggle: "mainPanel.reduce.toggle" }, + }, +}; diff --git a/src/utils/micro-observables/withPersistence.ts b/src/utils/micro-observables/withPersistence.ts index 124625a..a4dc90a 100644 --- a/src/utils/micro-observables/withPersistence.ts +++ b/src/utils/micro-observables/withPersistence.ts @@ -5,8 +5,10 @@ export const observableWithPersistence = ( cookieKey: string, defaultValue: T ): WritableObservable => { - const valueFromCookie = Cookies.get(cookieKey) as T | undefined; + const valueFromCookie: T | null = JSON.parse( + Cookies.get(cookieKey) ?? "null" + ); const obs = observable(valueFromCookie ?? defaultValue); - obs.subscribe((val) => Cookies.set(cookieKey, val as string)); + obs.subscribe((val) => Cookies.set(cookieKey, JSON.stringify(val))); return obs; };