Added prettier
This commit is contained in:
DrMint
parent
f76ac860e5
commit
6c1956ce5c
|
|
@ -0,0 +1 @@
|
|||
src/shared/*
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
## CSS Component classes
|
||||
|
||||
- `pressable-icon`: used to make a SVG/Text look pressable
|
||||
- `pressable`: used to make a container look pressable
|
||||
- `pressable`: used to make a container look pressable
|
||||
|
||||
## CSS Global Variables
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@
|
|||
"script:download-payload-sdk": "bun run scripts/download-payload-sdk.ts",
|
||||
"script:download-currencies": "bun run scripts/download-currencies.ts",
|
||||
"script:download-wording-keys": "bun run scripts/download-wording-keys.ts",
|
||||
"precommit": "bun run script:download-wording-keys && bun run script:download-payload-sdk && bun run astro check"
|
||||
"prettier": "prettier --write --list-different --plugin=prettier-plugin-astro .",
|
||||
"precommit": "bun run script:download-wording-keys && bun run script:download-payload-sdk && bun run prettier && bun run astro check"
|
||||
},
|
||||
"engines": {
|
||||
"npm": ">=10.0.0",
|
||||
|
|
@ -38,6 +39,8 @@
|
|||
"bun-types": "^1.0.29",
|
||||
"npm-check-updates": "^16.14.15",
|
||||
"postcss-preset-env": "^9.4.0",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-astro": "^0.13.0",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
module.exports = {
|
||||
printWidth: 100,
|
||||
tabWidth: 2,
|
||||
useTabs: false,
|
||||
semi: true,
|
||||
singleQuote: false,
|
||||
quoteProps: "as-needed",
|
||||
jsxSingleQuote: false,
|
||||
trailingComma: "es5",
|
||||
bracketSpacing: true,
|
||||
bracketSameLine: true,
|
||||
arrowParens: "always",
|
||||
rangeStart: 0,
|
||||
rangeEnd: Infinity,
|
||||
requirePragma: false,
|
||||
insertPragma: false,
|
||||
proseWrap: "preserve",
|
||||
htmlWhitespaceSensitivity: "ignore",
|
||||
endOfLine: "lf",
|
||||
singleAttributePerLine: false,
|
||||
};
|
||||
|
|
@ -1,90 +1,91 @@
|
|||
.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-2);
|
||||
color: var(--color-base-1000);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--color-base-650);
|
||||
box-shadow: 0 20px 25px -5px var(--color-shadow-2),
|
||||
0 0 10px -6px var(--color-shadow-2);
|
||||
transition-property: transform, visibility, opacity;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tippy-box[data-placement^="top"] > .tippy-arrow {
|
||||
bottom: 0;
|
||||
}
|
||||
.tippy-box[data-placement^="top"] > .tippy-arrow:before {
|
||||
bottom: -8px;
|
||||
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: -8px;
|
||||
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: -8px;
|
||||
transform-origin: center left;
|
||||
}
|
||||
.tippy-box[data-placement^="right"] > .tippy-arrow {
|
||||
left: 0;
|
||||
}
|
||||
.tippy-box[data-placement^="right"] > .tippy-arrow:before {
|
||||
left: -8px;
|
||||
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: 1em;
|
||||
height: 1em;
|
||||
color: var(--color-base-650);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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-2);
|
||||
color: var(--color-base-1000);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--color-base-650);
|
||||
box-shadow:
|
||||
0 20px 25px -5px var(--color-shadow-2),
|
||||
0 0 10px -6px var(--color-shadow-2);
|
||||
transition-property: transform, visibility, opacity;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tippy-box[data-placement^="top"] > .tippy-arrow {
|
||||
bottom: 0;
|
||||
}
|
||||
.tippy-box[data-placement^="top"] > .tippy-arrow:before {
|
||||
bottom: -8px;
|
||||
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: -8px;
|
||||
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: -8px;
|
||||
transform-origin: center left;
|
||||
}
|
||||
.tippy-box[data-placement^="right"] > .tippy-arrow {
|
||||
left: 0;
|
||||
}
|
||||
.tippy-box[data-placement^="right"] > .tippy-arrow:before {
|
||||
left: -8px;
|
||||
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: 1em;
|
||||
height: 1em;
|
||||
color: var(--color-base-650);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,5 +55,4 @@
|
|||
"description": "Thousands of offcial artworks"
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,17 +22,9 @@ if (rates.ok) {
|
|||
const currencies = await fetch(currenciesUrl);
|
||||
|
||||
if (currencies.ok) {
|
||||
writeFileSync(
|
||||
`${OPEN_EXCHANGE_FOLDER}/currencies.json`,
|
||||
await currencies.text(),
|
||||
{
|
||||
encoding: "utf-8",
|
||||
}
|
||||
);
|
||||
writeFileSync(`${OPEN_EXCHANGE_FOLDER}/currencies.json`, await currencies.text(), {
|
||||
encoding: "utf-8",
|
||||
});
|
||||
} else {
|
||||
console.error(
|
||||
"Failed to get the currencies",
|
||||
currencies.status,
|
||||
currencies.statusText
|
||||
);
|
||||
console.error("Failed to get the currencies", currencies.status, currencies.statusText);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,34 +12,21 @@ interface Props {
|
|||
backgroundIllustration?: string | undefined;
|
||||
}
|
||||
|
||||
const {
|
||||
metaTitle,
|
||||
hideFooterLinks = false,
|
||||
parentPages,
|
||||
backgroundIllustration,
|
||||
} = Astro.props;
|
||||
const { metaTitle, hideFooterLinks = false, parentPages, backgroundIllustration } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<Html title={metaTitle}>
|
||||
<header>
|
||||
{
|
||||
backgroundIllustration && (
|
||||
<AppLayoutBackgroundImg src={backgroundIllustration} />
|
||||
)
|
||||
}
|
||||
{backgroundIllustration && <AppLayoutBackgroundImg src={backgroundIllustration} />}
|
||||
<Topbar parentPages={parentPages} />
|
||||
</header>
|
||||
<main><slot /></main>
|
||||
<Footer withLinks={!hideFooterLinks} />
|
||||
</Html>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
header {
|
||||
|
|
|
|||
|
|
@ -35,17 +35,11 @@ const {
|
|||
} = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<Html title={title}>
|
||||
<header>
|
||||
{
|
||||
backgroundIllustration && (
|
||||
<AppLayoutBackgroundImg src={backgroundIllustration} />
|
||||
)
|
||||
}
|
||||
{backgroundIllustration && <AppLayoutBackgroundImg src={backgroundIllustration} />}
|
||||
|
||||
<Topbar parentPages={parentPages} hideHomeButton={hideHomeButton} />
|
||||
{
|
||||
|
|
@ -53,11 +47,7 @@ const {
|
|||
<div id="header-content">
|
||||
<div id="header-left">
|
||||
<slot name="header-title">
|
||||
<AppLayoutTitle
|
||||
pretitle={pretitle}
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
/>
|
||||
<AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} />
|
||||
</slot>
|
||||
|
||||
<div class="prose">
|
||||
|
|
@ -75,9 +65,7 @@ const {
|
|||
<Footer withLinks={!hideFooterLinks} />
|
||||
</Html>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
{/* TODO: Not use CSS image if possible */}
|
||||
<style
|
||||
|
|
@ -108,11 +96,7 @@ const {
|
|||
background-size: var(--illustrationSize);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--illustrationPosition);
|
||||
mask-image: linear-gradient(
|
||||
to left,
|
||||
rgba(0, 0, 0, 1) 50%,
|
||||
transparent 80%
|
||||
);
|
||||
mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, transparent 80%);
|
||||
|
||||
@media (max-width: 60rem) {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -20,16 +20,12 @@ const styleNoScript = `
|
|||
</style>`;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<img id={uniqueId} src={src} alt={alt} class="when-no-print" />
|
||||
<noscript set:html={styleNoScript} />
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
img {
|
||||
|
|
@ -44,17 +40,11 @@ const styleNoScript = `
|
|||
object-fit: cover;
|
||||
object-position: 50% 0;
|
||||
width: 100%;
|
||||
mask-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0.3) 0%,
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- JS --------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- JS --------------------------------------------- */}
|
||||
|
||||
<script define:vars={{ uniqueId }}>
|
||||
const element = document.getElementById(uniqueId);
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@ interface Props {
|
|||
const { title, subtitle, pretitle } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<h1 class="high-contrast-text">
|
||||
{pretitle && <span id="pretitle">{pretitle} </span>}
|
||||
|
|
@ -18,9 +16,7 @@ const { title, subtitle, pretitle } = Astro.props;
|
|||
{subtitle && <span id="subtitle">{subtitle}</span>}
|
||||
</h1>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -17,18 +17,14 @@ const twitterLabel = `${t("footer.socials.twitter.title")} - ${t(
|
|||
"footer.socials.twitter.subtitle"
|
||||
)}`;
|
||||
|
||||
const githubLabel = `${t("footer.socials.github.title")} - ${t(
|
||||
"footer.socials.github.subtitle"
|
||||
)}`;
|
||||
const githubLabel = `${t("footer.socials.github.title")} - ${t("footer.socials.github.subtitle")}`;
|
||||
|
||||
const contactLabel = `${t("footer.socials.contact.title")} - ${t(
|
||||
"footer.socials.contact.subtitle"
|
||||
)}`;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<footer>
|
||||
{
|
||||
|
|
@ -80,8 +76,7 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
|
|||
id="common-creative"
|
||||
aria-label={t("footer.license.icons.tooltip")}
|
||||
title={t("footer.license.icons.tooltip")}
|
||||
class="pressable-icon"
|
||||
>
|
||||
class="pressable-icon">
|
||||
<Icon name="creative-commons-brands" />
|
||||
<Icon name="creative-commons-by-brands" />
|
||||
<Icon name="creative-commons-sa-brands" />
|
||||
|
|
@ -91,37 +86,25 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
|
|||
{
|
||||
withLinks && (
|
||||
<div id="socials" class="when-no-print">
|
||||
<a
|
||||
href="/discord"
|
||||
class="pressable-icon"
|
||||
aria-label={discordLabel}
|
||||
title={discordLabel}
|
||||
>
|
||||
<a href="/discord" class="pressable-icon" aria-label={discordLabel} title={discordLabel}>
|
||||
<Icon name="discord-brands" />
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/AccordsLibrary"
|
||||
class="pressable-icon"
|
||||
aria-label={twitterLabel}
|
||||
title={twitterLabel}
|
||||
>
|
||||
title={twitterLabel}>
|
||||
<Icon name="x-brands" />
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/Accords-Library"
|
||||
class="pressable-icon"
|
||||
aria-label={githubLabel}
|
||||
title={githubLabel}
|
||||
>
|
||||
title={githubLabel}>
|
||||
<Icon name="github-brands" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/contact"
|
||||
class="pressable-icon"
|
||||
aria-label={contactLabel}
|
||||
title={contactLabel}
|
||||
>
|
||||
<a href="/contact" class="pressable-icon" aria-label={contactLabel} title={contactLabel}>
|
||||
<Icon name="material-symbols:mail-outline" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -131,9 +114,7 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
|
|||
<div id="copyright" set:html={t("footer.disclaimer")} />
|
||||
</footer>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
footer {
|
||||
|
|
|
|||
|
|
@ -27,24 +27,15 @@ const { currentTheme } = Astro.locals;
|
|||
"light-theme": currentTheme === "light",
|
||||
"dark-theme": currentTheme === "dark",
|
||||
"texture-dots": !isIOS,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<title>{title}</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="/css/tippy.css" />
|
||||
<meta
|
||||
name="theme-color"
|
||||
media="(prefers-color-scheme: light)"
|
||||
content="#fdebd4"
|
||||
/>
|
||||
<meta
|
||||
name="theme-color"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
content="#27231e"
|
||||
/>
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdebd4" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27231e" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
|
||||
<style is:global>
|
||||
|
|
@ -71,9 +62,7 @@ const { currentTheme } = Astro.locals;
|
|||
</body>
|
||||
</html>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style is:global>
|
||||
html {
|
||||
|
|
@ -368,8 +357,7 @@ const { currentTheme } = Astro.locals;
|
|||
backdrop-filter: blur(10px);
|
||||
|
||||
transition-duration: 250ms;
|
||||
transition-property: padding-top, box-shadow, background-color, color,
|
||||
border-color, translate;
|
||||
transition-property: padding-top, box-shadow, background-color, color, border-color, translate;
|
||||
|
||||
&:hover {
|
||||
--foreground-color: var(--color-base-1000);
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@ const { parentPages = [], hideHomeButton = false } = Astro.props;
|
|||
const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<nav id="topbar" class="when-no-print">
|
||||
{
|
||||
|
|
@ -31,19 +29,14 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
<p>{t("home.title")}</p>
|
||||
</a>
|
||||
|
||||
{parentPages.length > 0 && (
|
||||
<ParentPagesButton parentPages={parentPages} />
|
||||
)}
|
||||
{parentPages.length > 0 && <ParentPagesButton parentPages={parentPages} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<div id="toolbar" class="hide-scrollbar">
|
||||
<a href={getLocalizedUrl("/search")}>
|
||||
<Button
|
||||
icon="material-symbols:search"
|
||||
ariaLabel={t("header.topbar.search.tooltip")}
|
||||
/>
|
||||
<Button icon="material-symbols:search" ariaLabel={t("header.topbar.search.tooltip")} />
|
||||
</a>
|
||||
<div class="separator"></div>
|
||||
|
||||
|
|
@ -68,9 +61,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
nav {
|
||||
|
|
|
|||
|
|
@ -16,9 +16,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
|
|||
const { currentCurrency } = Astro.locals;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<Tooltip trigger="click" class={className}>
|
||||
<div id="content" slot="tooltip-content">
|
||||
|
|
@ -27,8 +25,7 @@ const { currentCurrency } = Astro.locals;
|
|||
<a
|
||||
class:list={{ current: currentCurrency === id }}
|
||||
href={`?action-currency=${id}`}
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
data-astro-prefetch="tap">
|
||||
{`${id} (${formatCurrency(id)})`}
|
||||
</a>
|
||||
))
|
||||
|
|
@ -41,9 +38,7 @@ const { currentCurrency } = Astro.locals;
|
|||
/>
|
||||
</Tooltip>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#content {
|
||||
|
|
|
|||
|
|
@ -16,9 +16,7 @@ const { currentLocale } = Astro.locals;
|
|||
const { t } = await getI18n(currentLocale);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<Tooltip trigger="click" class={className}>
|
||||
<div id="content" slot="tooltip-content">
|
||||
|
|
@ -27,8 +25,7 @@ const { t } = await getI18n(currentLocale);
|
|||
<a
|
||||
class:list={{ current: currentLocale === id }}
|
||||
href={`?action-lang=${id}`}
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
data-astro-prefetch="tap">
|
||||
{formatLocale(id)}
|
||||
</a>
|
||||
))
|
||||
|
|
@ -41,9 +38,7 @@ const { t } = await getI18n(currentLocale);
|
|||
/>
|
||||
</Tooltip>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#content {
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ interface Props {
|
|||
}
|
||||
|
||||
const { parentPage } = Astro.props;
|
||||
const { getLocalizedMatch, getLocalizedUrl } = await getI18n(
|
||||
Astro.locals.currentLocale
|
||||
);
|
||||
const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
||||
|
||||
const translation = getLocalizedMatch(parentPage.translations);
|
||||
|
||||
|
|
@ -24,15 +22,11 @@ switch (parentPage.collection) {
|
|||
}
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<a href={href}><span>{parentPage.tag}</span>{translation.name}</a>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -14,18 +14,12 @@ const { parentPages } = Astro.props;
|
|||
const { t } = await getI18n(Astro.locals.currentLocale);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<Tooltip trigger="click">
|
||||
<div id="tooltip-content" slot="tooltip-content">
|
||||
<p>This content is part of these pages:</p>
|
||||
{
|
||||
parentPages.map((parentPage) => (
|
||||
<ParentPageLink parentPage={parentPage} />
|
||||
))
|
||||
}
|
||||
{parentPages.map((parentPage) => <ParentPageLink parentPage={parentPage} />)}
|
||||
</div>
|
||||
<div class="pressable-label">
|
||||
<Icon name="material-symbols:keyboard-return" />
|
||||
|
|
@ -39,9 +33,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
|
|||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#tooltip-content {
|
||||
|
|
|
|||
|
|
@ -7,24 +7,19 @@ const { currentLocale, currentTheme } = Astro.locals;
|
|||
const { t } = await getI18n(currentLocale);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<Tooltip trigger="click">
|
||||
<div id="content" slot="tooltip-content">
|
||||
<a
|
||||
class:list={{ current: currentTheme === "dark" }}
|
||||
href="?action-theme=dark">{t("global.theme.dark")}</a
|
||||
>
|
||||
<a
|
||||
class:list={{ current: currentTheme === "auto" }}
|
||||
href="?action-theme=auto">{t("global.theme.auto")}</a
|
||||
>
|
||||
<a
|
||||
class:list={{ current: currentTheme === "light" }}
|
||||
href="?action-theme=light">{t("global.theme.light")}</a
|
||||
>
|
||||
<a class:list={{ current: currentTheme === "dark" }} href="?action-theme=dark">
|
||||
{t("global.theme.dark")}
|
||||
</a>
|
||||
<a class:list={{ current: currentTheme === "auto" }} href="?action-theme=auto">
|
||||
{t("global.theme.auto")}
|
||||
</a>
|
||||
<a class:list={{ current: currentTheme === "light" }} href="?action-theme=light">
|
||||
{t("global.theme.light")}
|
||||
</a>
|
||||
</div>
|
||||
<Button
|
||||
class="when-light-theme"
|
||||
|
|
@ -38,9 +33,7 @@ const { t } = await getI18n(currentLocale);
|
|||
/>
|
||||
</Tooltip>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#content {
|
||||
|
|
|
|||
|
|
@ -18,9 +18,7 @@ interface Props {
|
|||
const { block } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
{
|
||||
isBlockLineBlock(block) ? (
|
||||
|
|
|
|||
|
|
@ -9,17 +9,13 @@ interface Props {
|
|||
const { block } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div>
|
||||
<RichText content={block.content} />
|
||||
</div>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ interface Props {
|
|||
const { block } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div id="line">
|
||||
<p>{block.blockName}</p>
|
||||
|
|
@ -20,9 +18,7 @@ const { block } = Astro.props;
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#line {
|
||||
|
|
|
|||
|
|
@ -4,34 +4,26 @@ import { Icon } from "astro-icon/components";
|
|||
interface Props {
|
||||
id?: string;
|
||||
title?: string | undefined;
|
||||
icon?: string | string[];
|
||||
icon?: string;
|
||||
class?: string;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
const { title, icon, class: className, ariaLabel, id } = Astro.props;
|
||||
|
||||
const icons =
|
||||
icon === undefined ? [] : typeof icon === "string" ? [icon] : icon;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<button
|
||||
id={id}
|
||||
class:list={["pressable", "high-contrast-text", { "with-title": !!title }, className]}
|
||||
aria-label={ariaLabel}
|
||||
title={ariaLabel}
|
||||
>
|
||||
{icons.map((cIcon) => <Icon name={cIcon} />)}
|
||||
title={ariaLabel}>
|
||||
{icon && <Icon name={icon} />}
|
||||
{title}
|
||||
</button>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
button {
|
||||
|
|
@ -52,8 +44,7 @@ const icons =
|
|||
cursor: pointer;
|
||||
|
||||
transition-duration: 250ms;
|
||||
transition-property: padding-top, box-shadow, background-color, color,
|
||||
border-color;
|
||||
transition-property: padding-top, box-shadow, background-color, color, border-color;
|
||||
|
||||
&.with-title > svg {
|
||||
width: 1.2em;
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ interface Props {
|
|||
const { wrapper: Wrapper, condition } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
{
|
||||
condition ? (
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@ interface Props {
|
|||
const { translators = [], transcribers = [], proofreaders = [] } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<Metadata
|
||||
icon="material-symbols:person-outline"
|
||||
|
|
|
|||
|
|
@ -13,24 +13,16 @@ interface Props {
|
|||
const { currentLang, getPartialUrl, availableLanguages } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div id="lang-selector" class="when-js when-no-print">
|
||||
<Tooltip trigger="click">
|
||||
<Button
|
||||
icon="material-symbols:translate"
|
||||
title={currentLang.toUpperCase()}
|
||||
/>
|
||||
<Button icon="material-symbols:translate" title={currentLang.toUpperCase()} />
|
||||
|
||||
<div id="tooltip-content" slot="tooltip-content">
|
||||
{
|
||||
availableLanguages.map((id) => (
|
||||
<MasoActor
|
||||
class:list={{ current: id === currentLang }}
|
||||
href={getPartialUrl(id)}
|
||||
>
|
||||
<MasoActor class:list={{ current: id === currentLang }} href={getPartialUrl(id)}>
|
||||
{formatLocale(id)}
|
||||
</MasoActor>
|
||||
))
|
||||
|
|
@ -42,9 +34,7 @@ const { currentLang, getPartialUrl, availableLanguages } = Astro.props;
|
|||
</p>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#lang-selector {
|
||||
|
|
|
|||
|
|
@ -9,17 +9,13 @@ interface Props {
|
|||
const { href, method = "get", class: className, id } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<maso-actor href={href} method={method} class={className} id={id}>
|
||||
<slot />
|
||||
</maso-actor>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
maso-actor {
|
||||
|
|
@ -27,9 +23,7 @@ const { href, method = "get", class: className, id } = Astro.props;
|
|||
}
|
||||
</style>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- JS --------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- JS --------------------------------------------- */}
|
||||
|
||||
<script>
|
||||
import { customElement } from "src/utils/customElements";
|
||||
|
|
|
|||
|
|
@ -1,14 +1,10 @@
|
|||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<maso-target>
|
||||
<slot />
|
||||
</maso-target>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- JS --------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- JS --------------------------------------------- */}
|
||||
|
||||
<script>
|
||||
import { customElement } from "src/utils/customElements";
|
||||
|
|
|
|||
|
|
@ -12,9 +12,7 @@ const { icon, title, values } = Astro.props;
|
|||
if (values.length === 0) return;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div id="container">
|
||||
<div id="title">
|
||||
|
|
@ -26,9 +24,7 @@ if (values.length === 0) return;
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#container {
|
||||
|
|
|
|||
|
|
@ -13,14 +13,8 @@ interface Props {
|
|||
const { content, context = defaultContext } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<ConditionalWrapper condition={context.depth === 1} wrapper={RTProse}>
|
||||
{
|
||||
content.root.children.map((node) => (
|
||||
<RTNode node={node} context={context} />
|
||||
))
|
||||
}
|
||||
{content.root.children.map((node) => <RTNode node={node} context={context} />)}
|
||||
</ConditionalWrapper>
|
||||
|
|
|
|||
|
|
@ -24,10 +24,10 @@ const { node, context } = Astro.props;
|
|||
<RTSection node={node} context={context} />
|
||||
) : isBlockNodeTranscriptBlock(node) ? (
|
||||
<RTTranscript node={node} context={context} />
|
||||
) :isBlockNodeSpacerBlock(node) ? (
|
||||
) : isBlockNodeSpacerBlock(node) ? (
|
||||
<RTSpacer node={node} context={context} />
|
||||
) : (
|
||||
<ErrorMessage
|
||||
<ErrorMessage
|
||||
title={`Unknown block type: ${node.fields.blockType}`}
|
||||
description="Please contact website technical administrator."
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
---
|
||||
import RichText from "components/RichText/RichText.astro";
|
||||
import type {
|
||||
RichTextSectionBlock,
|
||||
} from "src/shared/payload/payload-sdk";
|
||||
import type { RichTextSectionBlock } from "src/shared/payload/payload-sdk";
|
||||
import type { RichTextContext } from "src/utils/richText";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -42,10 +40,7 @@ const { node, context } = Astro.props;
|
|||
)
|
||||
}
|
||||
|
||||
<RichText
|
||||
content={node.fields.content}
|
||||
context={{ ...context, depth: context.depth + 1 }}
|
||||
/>
|
||||
<RichText content={node.fields.content} context={{ ...context, depth: context.depth + 1 }} />
|
||||
|
||||
<style>
|
||||
span {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ const { href, newTab } = Astro.props;
|
|||
<a
|
||||
href={href}
|
||||
target={newTab ? "_blank" : undefined}
|
||||
rel={newTab ? "noopener noreferrer" : undefined}
|
||||
>
|
||||
rel={newTab ? "noopener noreferrer" : undefined}>
|
||||
<slot />
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -22,9 +22,7 @@ const { node, context } = Astro.props;
|
|||
|
||||
<li>
|
||||
<Icon
|
||||
name={node.checked
|
||||
? "material-symbols:check-box"
|
||||
: "material-symbols:check-box-outline-blank"}
|
||||
name={node.checked ? "material-symbols:check-box" : "material-symbols:check-box-outline-blank"}
|
||||
/>
|
||||
{node.children.map((node) => <RTNode node={node} context={context} />)}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -25,9 +25,7 @@ interface Props {
|
|||
const { node, context } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
{
|
||||
isNodeParagraphNode(node) ? (
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@ interface Props {
|
|||
const { node, context } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
{
|
||||
node.children.length > 0 && (
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
---
|
||||
|
||||
{" "}
|
||||
---
|
||||
|
||||
 
|
||||
|
|
|
|||
|
|
@ -20,26 +20,11 @@ const { node } = Astro.props;
|
|||
|
||||
<ConditionalWrapper wrapper={RTBold} condition={Boolean(node.format & 1)}>
|
||||
<ConditionalWrapper wrapper={RTItalic} condition={Boolean(node.format & 2)}>
|
||||
<ConditionalWrapper
|
||||
wrapper={RTLineThrough}
|
||||
condition={Boolean(node.format & 4)}
|
||||
>
|
||||
<ConditionalWrapper
|
||||
wrapper={RTUnderline}
|
||||
condition={Boolean(node.format & 8)}
|
||||
>
|
||||
<ConditionalWrapper
|
||||
wrapper={RTInlineCode}
|
||||
condition={Boolean(node.format & 16)}
|
||||
>
|
||||
<ConditionalWrapper
|
||||
wrapper={RTSubscript}
|
||||
condition={Boolean(node.format & 32)}
|
||||
>
|
||||
<ConditionalWrapper
|
||||
wrapper={RTSuperscript}
|
||||
condition={Boolean(node.format & 64)}
|
||||
>
|
||||
<ConditionalWrapper wrapper={RTLineThrough} condition={Boolean(node.format & 4)}>
|
||||
<ConditionalWrapper wrapper={RTUnderline} condition={Boolean(node.format & 8)}>
|
||||
<ConditionalWrapper wrapper={RTInlineCode} condition={Boolean(node.format & 16)}>
|
||||
<ConditionalWrapper wrapper={RTSubscript} condition={Boolean(node.format & 32)}>
|
||||
<ConditionalWrapper wrapper={RTSuperscript} condition={Boolean(node.format & 64)}>
|
||||
{node.text}
|
||||
</ConditionalWrapper>
|
||||
</ConditionalWrapper>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
<span><slot /></span>
|
||||
|
||||
<style>
|
||||
|
||||
span {
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,9 +10,7 @@ interface Props {
|
|||
const { toc } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div id="container">
|
||||
<div id="title">
|
||||
|
|
@ -24,9 +22,7 @@ const { toc } = Astro.props;
|
|||
</ol>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#container {
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@ interface Props {
|
|||
const { entry } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<li data-prefix={entry.prefix}>
|
||||
<a href={`#${entry.prefix}`}>{entry.title}</a>
|
||||
|
|
@ -25,9 +23,7 @@ const { entry } = Astro.props;
|
|||
}
|
||||
</li>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -9,17 +9,9 @@ interface Props {
|
|||
}
|
||||
|
||||
const { icon, slug, values } = Astro.props;
|
||||
const { formatTag, formatTagsGroup } = await getI18n(
|
||||
Astro.locals.currentLocale
|
||||
);
|
||||
const { formatTag, formatTagsGroup } = await getI18n(Astro.locals.currentLocale);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<Metadata
|
||||
icon={icon}
|
||||
title={formatTagsGroup(slug)}
|
||||
values={values.map(formatTag)}
|
||||
/>
|
||||
<Metadata icon={icon} title={formatTagsGroup(slug)} values={values.map(formatTag)} />
|
||||
|
|
|
|||
|
|
@ -8,15 +8,11 @@ interface Props {
|
|||
const { tagGroups } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div>{tagGroups.map((tag) => <TagGroup {...tag} />)}</div>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -7,18 +7,14 @@ interface Props {
|
|||
const { class: className, trigger } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<tippy-tooltip class={className} trigger={trigger}>
|
||||
<template><slot name="tooltip-content" /></template>
|
||||
<slot />
|
||||
</tippy-tooltip>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- JS --------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- JS --------------------------------------------- */}
|
||||
|
||||
<script>
|
||||
import tippy from "tippy.js";
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
|
||||
|
||||
declare namespace App {
|
||||
interface Locals {
|
||||
currentLocale: string
|
||||
currentTheme: "dark" | "auto" | "light"
|
||||
currentCurrency: string
|
||||
currentLocale: string;
|
||||
currentTheme: "dark" | "auto" | "light";
|
||||
currentCurrency: string;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ export const getI18n = async (locale: string) => {
|
|||
template: string,
|
||||
values: Record<string, any>
|
||||
): string => {
|
||||
const limitMatchToBalanceCurlyBraces = (
|
||||
matchArray: RegExpMatchArray
|
||||
): string => {
|
||||
const limitMatchToBalanceCurlyBraces = (matchArray: RegExpMatchArray): string => {
|
||||
// Cut match as soon as curly braces are balanced.
|
||||
const match = matchArray[0];
|
||||
let curlyCount = 2;
|
||||
|
|
@ -29,9 +27,7 @@ export const getI18n = async (locale: string) => {
|
|||
};
|
||||
|
||||
Object.entries(values).forEach(([key, value]) => {
|
||||
if (
|
||||
!template.match(new RegExp(`{{ ${key}\\+|{{ ${key}\\?|{{ ${key} }}`))
|
||||
) {
|
||||
if (!template.match(new RegExp(`{{ ${key}\\+|{{ ${key}\\?|{{ ${key} }}`))) {
|
||||
console.warn(
|
||||
"Value",
|
||||
key,
|
||||
|
|
@ -44,9 +40,7 @@ export const getI18n = async (locale: string) => {
|
|||
if (typeof value === "number") {
|
||||
// Find "plural" tokens
|
||||
const matches = [
|
||||
...template.matchAll(
|
||||
new RegExp(`{{ ${key}\\+,[\\w\\s=>{},]+ }}`, "g")
|
||||
),
|
||||
...template.matchAll(new RegExp(`{{ ${key}\\+,[\\w\\s=>{},]+ }}`, "g")),
|
||||
].map(limitMatchToBalanceCurlyBraces);
|
||||
|
||||
const handlePlural = (match: string): string => {
|
||||
|
|
@ -59,23 +53,17 @@ export const getI18n = async (locale: string) => {
|
|||
if (!optionValue) continue;
|
||||
optionValue = optionValue.substring(0, optionValue.length - 1);
|
||||
if (option.startsWith("=")) {
|
||||
const optionConditionValue = Number.parseInt(
|
||||
optionCondition.substring(1)
|
||||
);
|
||||
const optionConditionValue = Number.parseInt(optionCondition.substring(1));
|
||||
if (value === optionConditionValue) {
|
||||
return optionValue;
|
||||
}
|
||||
} else if (option.startsWith(">")) {
|
||||
const optionConditionValue = Number.parseInt(
|
||||
optionCondition.substring(1)
|
||||
);
|
||||
const optionConditionValue = Number.parseInt(optionCondition.substring(1));
|
||||
if (value > optionConditionValue) {
|
||||
return optionValue;
|
||||
}
|
||||
} else if (option.startsWith("<")) {
|
||||
const optionConditionValue = Number.parseInt(
|
||||
optionCondition.substring(1)
|
||||
);
|
||||
const optionConditionValue = Number.parseInt(optionCondition.substring(1));
|
||||
if (value < optionConditionValue) {
|
||||
return optionValue;
|
||||
}
|
||||
|
|
@ -90,9 +78,9 @@ export const getI18n = async (locale: string) => {
|
|||
}
|
||||
|
||||
// Find "conditional" tokens
|
||||
const matches = [
|
||||
...template.matchAll(new RegExp(`{{ ${key}\\?,[\\w\\s{},]+ }}`, "g")),
|
||||
].map(limitMatchToBalanceCurlyBraces);
|
||||
const matches = [...template.matchAll(new RegExp(`{{ ${key}\\?,[\\w\\s{},]+ }}`, "g"))].map(
|
||||
limitMatchToBalanceCurlyBraces
|
||||
);
|
||||
|
||||
const handleConditional = (match: string): string => {
|
||||
match = match.substring(3, match.length - 3);
|
||||
|
|
|
|||
|
|
@ -5,13 +5,9 @@ import type { AstroCookies } from "astro";
|
|||
import { z } from "astro:content";
|
||||
import { defaultLocale } from "src/i18n/i18n";
|
||||
|
||||
const getAbsoluteLocaleUrl = (locale: string, url: string) =>
|
||||
`/${locale}${url}`;
|
||||
const getAbsoluteLocaleUrl = (locale: string, url: string) => `/${locale}${url}`;
|
||||
|
||||
const redirect = (
|
||||
redirectURL: string,
|
||||
headers: Record<string, string> = {}
|
||||
): Response => {
|
||||
const redirect = (redirectURL: string, headers: Record<string, string> = {}): Response => {
|
||||
return new Response(undefined, {
|
||||
headers: { ...headers, Location: redirectURL },
|
||||
status: 302,
|
||||
|
|
@ -29,8 +25,7 @@ const localeNegotiator = defineMiddleware(({ cookies, url, request }, next) => {
|
|||
const currentLocale = getCurrentLocale(url.pathname);
|
||||
const acceptedLocale = getBestAcceptedLanguage(request);
|
||||
const cookieLocale = getCookieLocale(cookies);
|
||||
const bestMatchingLocale =
|
||||
cookieLocale ?? acceptedLocale ?? currentLocale ?? defaultLocale;
|
||||
const bestMatchingLocale = cookieLocale ?? acceptedLocale ?? currentLocale ?? defaultLocale;
|
||||
|
||||
if (!currentLocale) {
|
||||
const redirectURL = getAbsoluteLocaleUrl(bestMatchingLocale, url.pathname);
|
||||
|
|
@ -38,13 +33,8 @@ const localeNegotiator = defineMiddleware(({ cookies, url, request }, next) => {
|
|||
}
|
||||
|
||||
if (currentLocale !== bestMatchingLocale) {
|
||||
const pathnameWithoutLocale = url.pathname.substring(
|
||||
currentLocale.length + 1
|
||||
);
|
||||
const redirectURL = getAbsoluteLocaleUrl(
|
||||
bestMatchingLocale,
|
||||
pathnameWithoutLocale
|
||||
);
|
||||
const pathnameWithoutLocale = url.pathname.substring(currentLocale.length + 1);
|
||||
const redirectURL = getAbsoluteLocaleUrl(bestMatchingLocale, pathnameWithoutLocale);
|
||||
return redirect(redirectURL);
|
||||
}
|
||||
|
||||
|
|
@ -60,18 +50,14 @@ const handleActionsSearchParams = defineMiddleware(async ({ url }, next) => {
|
|||
: url.pathname;
|
||||
const redirectURL = getAbsoluteLocaleUrl(actionLang, pathnameWithoutLocale);
|
||||
return redirect(redirectURL, {
|
||||
"Set-Cookie": `${CookieKeys.Languages}=${JSON.stringify([
|
||||
actionLang,
|
||||
])}; Path=/`,
|
||||
"Set-Cookie": `${CookieKeys.Languages}=${JSON.stringify([actionLang])}; Path=/`,
|
||||
});
|
||||
}
|
||||
|
||||
const actionCurrency = url.searchParams.get("action-currency");
|
||||
if (isValidCurrency(actionCurrency)) {
|
||||
return redirect(url.pathname, {
|
||||
"Set-Cookie": `${CookieKeys.Currency}=${JSON.stringify(
|
||||
actionCurrency
|
||||
)}; Path=/`,
|
||||
"Set-Cookie": `${CookieKeys.Currency}=${JSON.stringify(actionCurrency)}; Path=/`,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -81,9 +67,7 @@ const handleActionsSearchParams = defineMiddleware(async ({ url }, next) => {
|
|||
url.searchParams.delete("action-theme");
|
||||
if (verifiedActionTheme.data === "auto") {
|
||||
return redirect(url.pathname, {
|
||||
"Set-Cookie": `${CookieKeys.Theme}=; Path=/; Expires=${new Date(
|
||||
0
|
||||
).toUTCString()}`,
|
||||
"Set-Cookie": `${CookieKeys.Theme}=; Path=/; Expires=${new Date(0).toUTCString()}`,
|
||||
});
|
||||
}
|
||||
return redirect(url.pathname, {
|
||||
|
|
@ -94,26 +78,22 @@ const handleActionsSearchParams = defineMiddleware(async ({ url }, next) => {
|
|||
return next();
|
||||
});
|
||||
|
||||
const addContentLanguageResponseHeader = defineMiddleware(
|
||||
async ({ url }, next) => {
|
||||
const currentLocale = getCurrentLocale(url.pathname);
|
||||
const addContentLanguageResponseHeader = defineMiddleware(async ({ url }, next) => {
|
||||
const currentLocale = getCurrentLocale(url.pathname);
|
||||
|
||||
const response = await next();
|
||||
if (response.status === 200 && currentLocale) {
|
||||
response.headers.set("Content-Language", currentLocale);
|
||||
}
|
||||
return response;
|
||||
const response = await next();
|
||||
if (response.status === 200 && currentLocale) {
|
||||
response.headers.set("Content-Language", currentLocale);
|
||||
}
|
||||
);
|
||||
return response;
|
||||
});
|
||||
|
||||
const provideLocalsToRequest = defineMiddleware(
|
||||
async ({ url, locals, cookies }, next) => {
|
||||
locals.currentLocale = getCurrentLocale(url.pathname) ?? "en";
|
||||
locals.currentCurrency = getCookieCurrency(cookies) ?? "USD";
|
||||
locals.currentTheme = getCookieTheme(cookies) ?? "auto";
|
||||
return next();
|
||||
}
|
||||
);
|
||||
const provideLocalsToRequest = defineMiddleware(async ({ url, locals, cookies }, next) => {
|
||||
locals.currentLocale = getCurrentLocale(url.pathname) ?? "en";
|
||||
locals.currentCurrency = getCookieCurrency(cookies) ?? "USD";
|
||||
locals.currentTheme = getCookieTheme(cookies) ?? "auto";
|
||||
return next();
|
||||
});
|
||||
|
||||
export const onRequest = sequence(
|
||||
addContentLanguageResponseHeader,
|
||||
|
|
@ -139,9 +119,7 @@ const getBestAcceptedLanguage = (request: Request): string | undefined => {
|
|||
|
||||
acceptLanguage.languages(cache.locales.map(({ id }) => id));
|
||||
|
||||
return (
|
||||
acceptLanguage.get(request.headers.get("Accept-Language")) ?? undefined
|
||||
);
|
||||
return acceptLanguage.get(request.headers.get("Accept-Language")) ?? undefined;
|
||||
};
|
||||
|
||||
/* COOKIES */
|
||||
|
|
@ -170,31 +148,19 @@ export const getCookieLocale = (cookies: AstroCookies): string | undefined => {
|
|||
return undefined;
|
||||
};
|
||||
|
||||
export const getCookieCurrency = (
|
||||
cookies: AstroCookies
|
||||
): string | undefined => {
|
||||
export const getCookieCurrency = (cookies: AstroCookies): string | undefined => {
|
||||
const cookieValue = cookies.get(CookieKeys.Currency)?.value;
|
||||
return isValidCurrency(cookieValue) ? cookieValue : undefined;
|
||||
};
|
||||
|
||||
export const getCookieTheme = (
|
||||
cookies: AstroCookies
|
||||
): z.infer<typeof themeSchema> | undefined => {
|
||||
export const getCookieTheme = (cookies: AstroCookies): z.infer<typeof themeSchema> | undefined => {
|
||||
const cookieValue = cookies.get(CookieKeys.Theme)?.value;
|
||||
const result = themeSchema.safeParse(cookieValue);
|
||||
return result.success ? result.data : undefined;
|
||||
};
|
||||
|
||||
export const isValidCurrency = (
|
||||
currency: string | null | undefined
|
||||
): currency is string =>
|
||||
currency !== null &&
|
||||
currency != undefined &&
|
||||
cache.currencies.includes(currency);
|
||||
export const isValidCurrency = (currency: string | null | undefined): currency is string =>
|
||||
currency !== null && currency != undefined && cache.currencies.includes(currency);
|
||||
|
||||
export const isValidLocale = (
|
||||
locale: string | null | undefined
|
||||
): locale is string =>
|
||||
locale !== null &&
|
||||
locale != undefined &&
|
||||
cache.locales.map(({ id }) => id).includes(locale);
|
||||
export const isValidLocale = (locale: string | null | undefined): locale is string =>
|
||||
locale !== null && locale != undefined && cache.locales.map(({ id }) => id).includes(locale);
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout title="Oh nyo..." />
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@ interface Props {
|
|||
const { img, name, href } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<a href={href} aria-label={name} class="pressable">
|
||||
{
|
||||
|
|
@ -27,9 +25,7 @@ const { img, name, href } = Astro.props;
|
|||
}
|
||||
</a>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ interface Props {
|
|||
const { pretitle, subtitle, title, href } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<a href={href} class="pressable">
|
||||
<p class="pretitle">{pretitle}</p>
|
||||
|
|
@ -19,9 +17,7 @@ const { pretitle, subtitle, title, href } = Astro.props;
|
|||
<p>{subtitle}</p>
|
||||
</a>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -4,14 +4,10 @@ import CategoryCard from "./CategoryCard.astro";
|
|||
import { getI18n } from "src/i18n/i18n";
|
||||
|
||||
const folders = await payload.getRootFolders();
|
||||
const { getLocalizedUrl, getLocalizedMatch } = await getI18n(
|
||||
Astro.locals.currentLocale
|
||||
);
|
||||
const { getLocalizedUrl, getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
{
|
||||
folders.map(({ slug, translations, darkThumbnail, lightThumbnail }) => (
|
||||
|
|
|
|||
|
|
@ -10,9 +10,7 @@ interface Props {
|
|||
const { icon, subtitle, title, href } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<a href={href} class="pressable">
|
||||
<Icon name={icon} />
|
||||
|
|
@ -22,9 +20,7 @@ const { icon, subtitle, title, href } = Astro.props;
|
|||
</div>
|
||||
</a>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout title="WIP" />
|
||||
|
|
|
|||
|
|
@ -28,9 +28,7 @@ const { getLocalizedMatch } = await getI18n(lang);
|
|||
const translation = getLocalizedMatch(page.translations);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<MasoTarget>
|
||||
<div id="layout">
|
||||
|
|
@ -68,19 +66,14 @@ const translation = getLocalizedMatch(page.translations);
|
|||
page.translations.length > 1 && (
|
||||
<LanguageOverride
|
||||
currentLang={lang}
|
||||
availableLanguages={page.translations.map(
|
||||
({ language }) => language
|
||||
)}
|
||||
availableLanguages={page.translations.map(({ language }) => language)}
|
||||
getPartialUrl={(lang) =>
|
||||
getLocalizedUrl(`/api/pages/partial?lang=${lang}&slug=${slug}`)
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<Credits
|
||||
translators={translation.translators}
|
||||
proofreaders={translation.proofreaders}
|
||||
/>
|
||||
<Credits translators={translation.translators} proofreaders={translation.proofreaders} />
|
||||
</div>
|
||||
|
||||
<div class="when-not-large meta-container">
|
||||
|
|
@ -110,19 +103,14 @@ const translation = getLocalizedMatch(page.translations);
|
|||
page.translations.length > 1 && (
|
||||
<LanguageOverride
|
||||
currentLang={lang}
|
||||
availableLanguages={page.translations.map(
|
||||
({ language }) => language
|
||||
)}
|
||||
availableLanguages={page.translations.map(({ language }) => language)}
|
||||
getPartialUrl={(lang) =>
|
||||
getLocalizedUrl(`/api/pages/partial?lang=${lang}&slug=${slug}`)
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<Credits
|
||||
translators={translation.translators}
|
||||
proofreaders={translation.proofreaders}
|
||||
/>
|
||||
<Credits translators={translation.translators} proofreaders={translation.proofreaders} />
|
||||
</div>
|
||||
|
||||
<TableOfContent toc={translation.toc} />
|
||||
|
|
@ -130,9 +118,7 @@ const translation = getLocalizedMatch(page.translations);
|
|||
</div>
|
||||
</MasoTarget>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#layout {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout title="WIP" />
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout title="WIP" />
|
||||
|
|
|
|||
|
|
@ -2,17 +2,18 @@
|
|||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||
---
|
||||
|
||||
<AppLayout pretitle="Guide to" title="Rich Text Editor" description="Having troubles using the Rich Text Editor? Looking for tips and advanced techniques? You've come to the right place!">
|
||||
<AppLayout
|
||||
pretitle="Guide to"
|
||||
title="Rich Text Editor"
|
||||
description="Having troubles using the Rich Text Editor? Looking for tips and advanced techniques? You've come to the right place!">
|
||||
<div class="prose">
|
||||
<h2>Add indentation / spaces between words</h2>
|
||||
|
||||
<p>
|
||||
By default, additional spaces are collapsed. This means that if multiple
|
||||
spaces are adjacent, only one space is preserved. To create spaces that
|
||||
will not be collapsed, you can use tabs instead. Simply press the <kbd
|
||||
>Tab</kbd
|
||||
> key a few times on your keyboard to create additional spaces between words.
|
||||
Be mindful of the use of these spaces.
|
||||
By default, additional spaces are collapsed. This means that if multiple spaces are adjacent,
|
||||
only one space is preserved. To create spaces that will not be collapsed, you can use tabs
|
||||
instead. Simply press the <kbd>Tab</kbd> key a few times on your keyboard to create additional
|
||||
spaces between words. Be mindful of the use of these spaces.
|
||||
</p>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout title="WIP" />
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@ import ErrorMessage from "components/ErrorMessage.astro";
|
|||
import { getI18n } from "src/i18n/i18n";
|
||||
|
||||
const { slug } = Astro.params;
|
||||
const { getLocalizedMatch, getLocalizedUrl } = await getI18n(
|
||||
Astro.locals.currentLocale
|
||||
);
|
||||
const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
||||
|
||||
const folder = await fetchOr404(() => payload.getFolder(slug!));
|
||||
if (folder instanceof Response) {
|
||||
|
|
@ -21,9 +19,7 @@ const meta = getLocalizedMatch(folder.translations);
|
|||
// TODO: handle light and dark illustration for applayout
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout title={meta.name}>
|
||||
{
|
||||
|
|
@ -63,10 +59,7 @@ const meta = getLocalizedMatch(folder.translations);
|
|||
|
||||
case "pages":
|
||||
return (
|
||||
<a
|
||||
class="pressable"
|
||||
href={getLocalizedUrl(`/pages/${value.slug}`)}
|
||||
>
|
||||
<a class="pressable" href={getLocalizedUrl(`/pages/${value.slug}`)}>
|
||||
{value.slug}
|
||||
</a>
|
||||
);
|
||||
|
|
@ -85,9 +78,7 @@ const meta = getLocalizedMatch(folder.translations);
|
|||
</div>
|
||||
</AppLayout>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#main {
|
||||
|
|
|
|||
|
|
@ -9,9 +9,7 @@ interface Props {
|
|||
const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<a href={href} class="pressable">
|
||||
<Icon name={icon} />
|
||||
|
|
@ -20,9 +18,7 @@ const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
|
|||
</div>
|
||||
</a>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -10,14 +10,10 @@ interface Props {
|
|||
|
||||
const { title, folders } = Astro.props;
|
||||
|
||||
const { getLocalizedUrl, getLocalizedMatch } = await getI18n(
|
||||
Astro.locals.currentLocale
|
||||
);
|
||||
const { getLocalizedUrl, getLocalizedMatch } = await getI18n(Astro.locals.currentLocale);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div>
|
||||
{title && <h3>{title}</h3>}
|
||||
|
|
@ -34,9 +30,7 @@ const { getLocalizedUrl, getLocalizedMatch } = await getI18n(
|
|||
</section>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
|
|
|
|||
|
|
@ -10,16 +10,13 @@ import { getI18n } from "src/i18n/i18n";
|
|||
const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout
|
||||
title="Accord’s Library"
|
||||
backgroundIllustration="/img/bg-home2.webp"
|
||||
hideFooterLinks
|
||||
hideHomeButton
|
||||
>
|
||||
hideHomeButton>
|
||||
<div id="title" slot="header-title">
|
||||
<Icon name="accords" />
|
||||
<div>
|
||||
|
|
@ -30,10 +27,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
<div id="description" slot="header-description">
|
||||
<p set:html={t("home.description")} class="high-contrast-text" />
|
||||
<a href={getLocalizedUrl("/about")}>
|
||||
<Button
|
||||
title={t("home.aboutUsButton")}
|
||||
icon="material-symbols:left-click"
|
||||
/>
|
||||
<Button title={t("home.aboutUsButton")} icon="material-symbols:left-click" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
|
@ -175,9 +169,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
</div>
|
||||
</AppLayout>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
#description {
|
||||
|
|
|
|||
|
|
@ -12,13 +12,8 @@ if (page instanceof Response) {
|
|||
}
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppEmptyLayout
|
||||
parentPages={page.parentPages}
|
||||
backgroundIllustration={page.thumbnail?.url}
|
||||
>
|
||||
<AppEmptyLayout parentPages={page.parentPages} backgroundIllustration={page.thumbnail?.url}>
|
||||
<Page slug={page.slug} lang={Astro.locals.currentLocale} page={page} />
|
||||
</AppEmptyLayout>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ const { currentLocale, currentTheme, currentCurrency } = Astro.locals;
|
|||
const { t } = await getI18n(currentLocale);
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout title={t("settings.title")}>
|
||||
<div id="main">
|
||||
|
|
@ -21,8 +19,7 @@ const { t } = await getI18n(currentLocale);
|
|||
<a
|
||||
class:list={{ current: currentLocale === id }}
|
||||
href={`?action-lang=${id}`}
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
data-astro-prefetch="tap">
|
||||
{id}
|
||||
</a>
|
||||
))
|
||||
|
|
@ -35,22 +32,19 @@ const { t } = await getI18n(currentLocale);
|
|||
<a
|
||||
class:list={{ current: currentTheme === "dark" }}
|
||||
href="?action-theme=dark"
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
data-astro-prefetch="tap">
|
||||
{t("global.theme.dark")}
|
||||
</a>
|
||||
<a
|
||||
class:list={{ current: currentTheme === "auto" }}
|
||||
href="?action-theme=auto"
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
data-astro-prefetch="tap">
|
||||
{t("global.theme.auto")}
|
||||
</a>
|
||||
<a
|
||||
class:list={{ current: currentTheme === "light" }}
|
||||
href="?action-theme=light"
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
data-astro-prefetch="tap">
|
||||
{t("global.theme.light")}
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -63,8 +57,7 @@ const { t } = await getI18n(currentLocale);
|
|||
<a
|
||||
class:list={{ current: currentCurrency === id }}
|
||||
href={`?action-currency=${id}`}
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
data-astro-prefetch="tap">
|
||||
{id}
|
||||
</a>
|
||||
))
|
||||
|
|
@ -73,9 +66,7 @@ const { t } = await getI18n(currentLocale);
|
|||
</div>
|
||||
</AppLayout>
|
||||
|
||||
{
|
||||
/* ------------------------------------------- CSS -------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
.section {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout title="WIP" />
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||
---
|
||||
|
||||
{
|
||||
/* ------------------------------------------- HTML ------------------------------------------- */
|
||||
}
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout title="WIP" />
|
||||
|
|
|
|||
|
|
@ -169,4 +169,4 @@
|
|||
"ZAR": "South African Rand",
|
||||
"ZMW": "Zambian Kwacha",
|
||||
"ZWL": "Zimbabwean Dollar"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -174,4 +174,4 @@
|
|||
"ZMW": 22.954829,
|
||||
"ZWL": 322
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
export const customElement = (
|
||||
name: string,
|
||||
constructor?: (elem: HTMLElement) => void
|
||||
) => {
|
||||
export const customElement = (name: string, constructor?: (elem: HTMLElement) => void) => {
|
||||
class CustomElementClass extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
export const fetchOr404 = async <T>(
|
||||
promise: () => Promise<T>
|
||||
): Promise<T | Response> => {
|
||||
export const fetchOr404 = async <T>(promise: () => Promise<T>): Promise<T | Response> => {
|
||||
try {
|
||||
return await promise();
|
||||
} catch {
|
||||
|
|
|
|||
Loading…
Reference in New Issue