Accords-Library-Archive
/
astro.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Simplifies things

This commit is contained in:
DrMint 2023-09-22 13:16:40 +02:00
parent cd69584b66
commit 04caf4c60b
10 changed files with 160 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
TODO.md
View File

@ -1,2 +1,3 @@
- [ ] Check why I'm getting NS_BINDING_ABORTED on fonts when fetched in the network browser dev tool tab - 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 - Add a background when opening menus in mobile mode
- Strong is not bold...

BIN
bun.lockb
View File

Binary file not shown.

8
src/pages/_components/AppLayout/AppLayout.astro
View File

@ -1,10 +1,9 @@
--- ---
import Html from "pages/_components/Html.astro"; import Html from "pages/_components/Html.astro";
import MenuPanel from "./components/MenuPanel.astro";
import Navbar from "./components/Navbar.astro"; import Navbar from "./components/Navbar.astro";
import MenuPanelReduced from "./components/MenuPanelReduced.astro";
import { parseCookie } from "utils/astro"; import { parseCookie } from "utils/astro";
import { CookieNames } from "utils/cookies"; import { CookieNames } from "utils/cookies";
import MenuPanel from "./components/MenuPanel.astro";
interface Props { interface Props {
title: string; title: string;
@ -35,7 +34,7 @@ const isMenuPanelReduced = parseCookie<boolean>(
class:list={["texture-dots", { reduced: isMenuPanelReduced }]} class:list={["texture-dots", { reduced: isMenuPanelReduced }]}
> >
<div class="when-reduced"> <div class="when-reduced">
<MenuPanelReduced /> <MenuPanel isReduced />
</div> </div>
<div class="when-not-reduced"> <div class="when-not-reduced">
<MenuPanel /> <MenuPanel />
@ -131,8 +130,7 @@ const isMenuPanelReduced = parseCookie<boolean>(
transition: 0.2s width; transition: 0.2s width;
&.reduced { &.reduced {
width: auto; width: 6rem;
padding: 1rem;
} }
&.reduced > .when-not-reduced, &.reduced > .when-not-reduced,

128
src/pages/_components/AppLayout/components/MenuPanel.astro
View File

@ -1,12 +1,17 @@
--- ---
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
import { getLocalizedUrl } from "utils/urls"; import { getLocalizedUrl } from "utils/urls";
import NavOption from "pages/_components/NavOption.astro";
import HorizontalLine from "pages/_components/HorizontalLine.astro"; import HorizontalLine from "pages/_components/HorizontalLine.astro";
import ReduceToggleButton from "./ReduceToggleButton.astro"; import ReduceToggleButton from "./ReduceToggleButton.astro";
import ThemeToggleButton from "./ThemeToggleButton.astro"; import ThemeToggleButton from "./ThemeToggleButton.astro";
import NavOption from "pages/_components/NavOption.astro";
interface Props {
isReduced?: boolean;
}
const { locale = "en" } = Astro.params; const { locale = "en" } = Astro.params;
const { isReduced = false } = Astro.props;
--- ---
{ {
@ -21,10 +26,10 @@ const { locale = "en" } = Astro.params;
<Icon name="accords" /> <Icon name="accords" />
</a> </a>
<p id="title">Accord’s Library</p> <p id="title" class:list={{ hidden: isReduced }}>Accord’s Library</p>
<div id="buttons"> <div id="buttons" class:list={["when-js", { reduced: isReduced }]}>
<ReduceToggleButton icon="material-symbols:chevron-left-rounded" /> <ReduceToggleButton icon={isReduced ? "material-symbols:chevron-right": "material-symbols:chevron-left"} />
<ThemeToggleButton /> <ThemeToggleButton />
</div> </div>
@ -35,6 +40,7 @@ const { locale = "en" } = Astro.params;
icon="material-symbols:auto-stories" icon="material-symbols:auto-stories"
title="Library" title="Library"
subtitle="Browse all physical and digital media" subtitle="Browse all physical and digital media"
mode={isReduced ? "iconOnly" : "default"}
/> />
<NavOption <NavOption
@ -42,6 +48,7 @@ const { locale = "en" } = Astro.params;
icon="material-symbols:workspaces" icon="material-symbols:workspaces"
title="Content" title="Content"
subtitle="Explore all content and filter by type or category" subtitle="Explore all content and filter by type or category"
mode={isReduced ? "iconOnly" : "default"}
/> />
<NavOption <NavOption
@ -49,6 +56,7 @@ const { locale = "en" } = Astro.params;
icon="material-symbols:travel-explore" icon="material-symbols:travel-explore"
title="Wiki" title="Wiki"
subtitle="An encyclopedia for everything related to DrakeNieR" subtitle="An encyclopedia for everything related to DrakeNieR"
mode={isReduced ? "iconOnly" : "default"}
/> />
<NavOption <NavOption
@ -56,45 +64,64 @@ const { locale = "en" } = Astro.params;
icon="material-symbols:schedule" icon="material-symbols:schedule"
title="Chronicles" title="Chronicles"
subtitle="Experience all events and content in chronological order" subtitle="Experience all events and content in chronological order"
mode={isReduced ? "iconOnly" : "default"}
/> />
<HorizontalLine /> <HorizontalLine />
<NavOption href="/news" icon="material-symbols:newspaper" title="News" /> <NavOption
href="/news"
icon="material-symbols:newspaper"
title="News"
mode={isReduced ? "iconOnly" : "default"}
/>
<NavOption <NavOption
href="https://gallery.accords-library.com/posts/" href="https://gallery.accords-library.com/posts/"
icon="material-symbols:perm-media" icon="material-symbols:perm-media"
title="Gallery" title="Gallery"
mode={isReduced ? "iconOnly" : "default"}
/> />
<NavOption href="/archives" icon="material-symbols:save" title="Archives" /> <NavOption
href="/archives"
icon="material-symbols:save"
title="Archives"
mode={isReduced ? "iconOnly" : "default"}
/>
<NavOption href="/about-us" icon="material-symbols:info" title="About us" /> <NavOption
href="/about-us"
icon="material-symbols:info"
title="About us"
mode={isReduced ? "iconOnly" : "default"}
/>
<HorizontalLine /> <div class:list={{ hidden: isReduced }}>
<HorizontalLine />
<p> <p>
This website’s content is made available under <a This website’s content is made available under <a
href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a
> unless otherwise noted. > unless otherwise noted.
</p> </p>
<div id="common-creative"> <div id="common-creative">
<Icon name="creative-commons-brands" /> <Icon name="creative-commons-brands" />
<Icon name="creative-commons-by-brands" /> <Icon name="creative-commons-by-brands" />
<Icon name="creative-commons-sa-brands" /> <Icon name="creative-commons-sa-brands" />
</div> </div>
<p> <p>
Accord’s Library is not affiliated with or endorsed by SQUARE ENIX CO. LTD. 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. All game assets and promotional materials belongs to © SQUARE ENIX CO. LTD.
</p> </p>
<div id="social-links"> <div id="social-links">
<Icon name="github-brands" /> <Icon name="github-brands" />
<Icon name="x-brands" /> <Icon name="x-brands" />
<Icon name="discord-brands" /> <Icon name="discord-brands" />
</div>
</div> </div>
{ {
@ -102,6 +129,10 @@ const { locale = "en" } = Astro.params;
} }
<style> <style>
.hidden {
display: none;
}
#title { #title {
font-family: var(--font-headers); font-family: var(--font-headers);
font-size: 1.875rem; font-size: 1.875rem;
@ -130,6 +161,15 @@ const { locale = "en" } = Astro.params;
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
flex-wrap: wrap; flex-wrap: wrap;
&.reduced {
flex-direction: column;
}
& > #theme-toggle.dark > .when-light,
& > #theme-toggle.light > .when-dark {
display: none;
}
} }
#common-creative { #common-creative {
@ -144,10 +184,6 @@ const { locale = "en" } = Astro.params;
} }
} }
p {
text-align: center;
}
#social-links { #social-links {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
@ -160,3 +196,35 @@ const { locale = "en" } = Astro.params;
} }
} }
</style> </style>
{
/* -------------------------------------------- JS -------------------------------------------- */
}
<script>
import tippy, { createSingleton } from "tippy.js";
import { onLoad } from "utils/turbo";
onLoad(() => {
createSingleton(
tippy("#menu-panel > .when-reduced > [data-tippy-template]", {
content: (reference) => {
const templateQuery = reference.getAttribute("data-tippy-template")!;
const template = reference.querySelector(templateQuery)!;
const container = document.createElement("div");
container.append(template.cloneNode(true));
container.style.fontSize = "90%";
return container;
},
}),
{
allowHTML: true,
placement: "right",
delay: 250,
moveTransition: "transform 0.2s ease",
maxWidth: "18rem",
inertia: true,
}
);
});
</script>

159
src/pages/_components/AppLayout/components/MenuPanelReduced.astro
View File

@ -1,159 +0,0 @@
---
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<string>(
Astro.cookies.get(CookieNames.THEME_COLOR),
"theme-color-light"
);
---
{
/* ------------------------------------------- HTML ------------------------------------------- */
}
<a
id="accords-logo"
data-turbo-confirm="Do you want to leave this page?"
href={getLocalizedUrl("/", locale)}
>
<Icon name="accords" />
</a>
<div id="buttons">
<ReduceToggleButton icon="material-symbols:chevron-right-rounded" />
<button
class={themeColors === "theme-color-dark" ? "dark" : "light"}
id="theme-toggle"
>
<Icon
class="when-light"
name="material-symbols:light-mode"
width={24}
height={24}
/>
<Icon
class="when-dark"
name="material-symbols:dark-mode"
width={24}
height={24}
/>
</button>
</div>
<HorizontalLine />
<NavOptionIcon
href="/library"
icon="material-symbols:auto-stories"
title="Library"
subtitle="Browse all physical and digital media"
/>
<NavOptionIcon
href="/contents"
icon="material-symbols:workspaces"
title="Content"
subtitle="Explore all content and filter by type or category"
/>
<NavOptionIcon
href="/wiki"
icon="material-symbols:travel-explore"
title="Wiki"
subtitle="An encyclopedia for everything related to DrakeNieR"
/>
<NavOptionIcon
href="/chronicles"
icon="material-symbols:schedule"
title="Chronicles"
subtitle="Experience all events and content in chronological order"
/>
<HorizontalLine />
<NavOptionIcon href="/news" icon="material-symbols:newspaper" title="News" />
<NavOptionIcon
href="https://gallery.accords-library.com/posts/"
icon="material-symbols:perm-media"
title="Gallery"
/>
<NavOptionIcon href="/archives" icon="material-symbols:save" title="Archives" />
<NavOptionIcon href="/about-us" icon="material-symbols:info" title="About us" />
{
/* ------------------------------------------- CSS -------------------------------------------- */
}
<style>
#accords-logo {
width: 3rem;
aspect-ratio: 1/1;
color: var(--color-base-1000);
&:hover {
color: var(--color-base-600);
}
& > svg {
width: 100%;
height: 100%;
}
}
#buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex-wrap: wrap;
& > #theme-toggle.dark > .when-light,
& > #theme-toggle.light > .when-dark {
display: none;
}
}
</style>
{
/* -------------------------------------------- JS -------------------------------------------- */
}
<script>
import tippy, { createSingleton } from "tippy.js";
import { onLoad } from "utils/turbo";
onLoad(() => {
createSingleton(
tippy(".menu-panel-content > [data-tippy-template]", {
content: (reference) => {
const templateQuery = reference.getAttribute("data-tippy-template")!;
const template = reference.querySelector(templateQuery)!;
const container = document.createElement("div");
container.append(template.cloneNode(true));
container.style.fontSize = "90%";
return container;
},
}),
{
allowHTML: true,
placement: "right",
delay: 250,
moveTransition: "transform 0.2s ease",
maxWidth: "18rem",
inertia: true,
}
);
});
</script>

34
src/pages/_components/AppLayout/components/Navbar.astro
View File

@ -12,25 +12,29 @@ const { title, showSubPanel } = Astro.props;
/* ------------------------------------------- HTML ------------------------------------------- */ /* ------------------------------------------- HTML ------------------------------------------- */
} }
<button id="toggle-menu-panel"> <div>
<Icon <button id="toggle-menu-panel" class="when-js">
class="when-off" <Icon
name="material-symbols:menu-rounded" class="when-off"
width={24} name="material-symbols:menu-rounded"
height={24} width={24}
/> height={24}
<Icon />
class="when-on" <Icon
name="material-symbols:close-rounded" class="when-on"
width={24} name="material-symbols:close-rounded"
height={24} width={24}
/> height={24}
</button> />
</button>
</div>
<p>{title}</p> <p>{title}</p>
<div> <div>
{ {
showSubPanel && ( showSubPanel && (
<button id="toggle-sub-panel"> <button id="toggle-sub-panel" class="when-js">
<Icon <Icon
class="when-off" class="when-off"
name="material-symbols:tune-rounded" name="material-symbols:tune-rounded"

27
src/pages/_components/Html.astro
View File

@ -26,6 +26,16 @@ const themeColors = parseCookie(
<link href="/css/sanitize.min.css" rel="stylesheet" /> <link href="/css/sanitize.min.css" rel="stylesheet" />
<link href="/css/tippy.css" rel="stylesheet" /> <link href="/css/tippy.css" rel="stylesheet" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<noscript>
<style>
.when-js {
display: none !important;
}
.when-no-js {
display: initial !important;
}
</style>
</noscript>
</head> </head>
<body class={themeColors}> <body class={themeColors}>
@ -33,6 +43,10 @@ const themeColors = parseCookie(
</body> </body>
</html> </html>
<script>
Turbo.setProgressBarDelay(0);
</script>
{ {
/* ------------------------------------------- CSS -------------------------------------------- */ /* ------------------------------------------- CSS -------------------------------------------- */
} }
@ -376,8 +390,21 @@ const themeColors = parseCookie(
} }
.turbo-progress-bar { .turbo-progress-bar {
position: fixed;
display: block;
top: 0;
left: 0;
height: 5px; height: 5px;
background-color: #b07751; background-color: #b07751;
z-index: 2147483647;
transition:
width 1000ms ease-out,
opacity 500ms 500ms ease-in;
transform: translate3d(0, 0, 0);
}
.when-no-js {
display: none;
} }
:root { :root {

17
src/pages/_components/NavOption.astro
View File

@ -6,10 +6,11 @@ interface Props {
icon?: string; icon?: string;
title: string | null | undefined; title: string | null | undefined;
subtitle?: string | null | undefined; subtitle?: string | null | undefined;
mode?: "iconOnly" | "default";
} }
const { locale } = Astro.params; const { locale } = Astro.params;
const { href, icon, title, subtitle } = Astro.props; const { href, icon, title, subtitle, mode = "default" } = Astro.props;
const currentPath = new URL(Astro.request.url).pathname.slice( const currentPath = new URL(Astro.request.url).pathname.slice(
`/${locale}`.length `/${locale}`.length
@ -23,12 +24,12 @@ const isActive = currentPath.startsWith(href);
} }
<a <a
id="component"
href={getLocalizedUrl(href, locale)} href={getLocalizedUrl(href, locale)}
class:list={{ active: isActive }} class:list={{ active: isActive }}
data-tippy-template="#text-content"
> >
{icon && <Icon name={icon} />} {icon && <Icon name={icon} />}
<div id="text-content"> <div id="text-content" class:list={{ hidden: mode === "iconOnly" }}>
<p class="font-headers"> <p class="font-headers">
{title} {title}
</p> </p>
@ -41,7 +42,7 @@ const isActive = currentPath.startsWith(href);
} }
<style> <style>
#component { a {
padding: 1rem; padding: 1rem;
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: inherit;
@ -71,12 +72,8 @@ const isActive = currentPath.startsWith(href);
flex-shrink: 0; flex-shrink: 0;
} }
@container (max-width: 15rem) { & > #text-content.hidden {
width: 3.5rem; display: none;
& > #text-content {
display: none;
}
} }
} }

93
src/pages/_components/NavOptionIcon.astro
View File

@ -1,93 +0,0 @@
---
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 ------------------------------------------- */
}
<a
id="component"
href={getLocalizedUrl(href, locale)}
class:list={{ active: isActive }}
data-tippy-template="#text-content"
>
{icon && <Icon name={icon} />}
<div id="text-content">
<p class="font-headers">
{title}
</p>
{subtitle && <p>{subtitle}</p>}
</div>
</a>
{
/* ------------------------------------------- CSS -------------------------------------------- */
}
<style>
#component {
padding: 1rem;
color: inherit;
text-decoration: inherit;
display: flex;
width: 100%;
gap: 1.25rem;
border-radius: 1rem;
transition:
0.15s background-color,
0.15s box-shadow;
&:hover,
&.active {
box-shadow: inset 0 1px 4px -2px var(--color-shadow);
background-color: var(--color-base-250);
&:active {
box-shadow: inset 0 2px 4px 0 var(--color-shadow);
}
}
& > svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
& > #text-content {
display: none;
}
}
#text-content {
display: grid;
flex-grow: 1;
gap: 0.25rem;
& > .font-headers {
font-size: 150%;
}
& > :not(.font-headers) {
line-height: 1.5;
}
}
</style>

5
src/typings/turbo.d.ts vendored
View File

@ -1,6 +1,7 @@
// https://turbo.hotwired.dev/reference/drive // https://turbo.hotwired.dev/reference/drive
declare namespace Turbo { declare namespace Turbo {
const cache = { const cache: {
clear: () => null, clear: () => void;
}; };
const setProgressBarDelay: (delayInMs: number) => void;
} }