diff options
| author | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-12 20:47:32 +0100 |
|---|---|---|
| committer | Joe Carstairs <65492573+Sycamost@users.noreply.github.com> | 2023-08-12 20:47:32 +0100 |
| commit | 8a5b11d8322b806ce277c399e51b7f40efcb2556 (patch) | |
| tree | 447694202ee9d70cab7e3ecb4ff49e9d6f7ebee7 /src | |
| parent | de86f122320be7a41cd94476c8a9424c7c766b19 (diff) | |
Text color and background colour is controlled by CSS vars
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Footer.astro | 4 | ||||
| -rw-r--r-- | src/components/Navbar.astro | 14 | ||||
| -rw-r--r-- | src/components/SwitchLanguageLink.astro | 28 | ||||
| -rw-r--r-- | src/layouts/Layout.astro | 2 |
4 files changed, 46 insertions, 2 deletions
diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 6ad0052..f5de8b8 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -2,8 +2,8 @@ --- -<footer> - <p class="btn btn--dark back-to-top-link"> +<footer class="dark"> + <p class="btn back-to-top-link"> <a href="#main">▴ Back til tap</a> </p> </footer> diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro new file mode 100644 index 0000000..8174efe --- /dev/null +++ b/src/components/Navbar.astro @@ -0,0 +1,14 @@ +--- +import type Locale from '../types/Locale'; +import SwitchLanguageLink from './SwitchLanguageLink.astro'; + +interface Props { + locale: Locale; +} + +const { locale } = Astro.props; +--- + +<nav class="dark"> + <SwitchLanguageLink currentLocale={locale} /> +</nav> diff --git a/src/components/SwitchLanguageLink.astro b/src/components/SwitchLanguageLink.astro new file mode 100644 index 0000000..77dfa18 --- /dev/null +++ b/src/components/SwitchLanguageLink.astro @@ -0,0 +1,28 @@ +--- +import tPage from '../i18n/translations/components/languageLinks'; +import tSite from '../i18n/translations/site'; +import translate from '../i18n/translate'; +import type Locale from '../types/Locale'; + +interface Props { + currentLocale: Locale; +} + +// This logic assumes that there are exactly two locales. +const { currentLocale } = Astro.props; +const otherLocale: Locale = currentLocale === 'sco' ? 'en-GB' : 'sco'; +const currentPath = Astro.url.pathname; +const currentLocaleInPath = new RegExp(`(?<=^/)(${currentLocale}/)?`); +const otherLocalePath = currentPath.replace(currentLocaleInPath, `${otherLocale}/`); + +const t = translate(currentLocale); +--- + +<a class="link" href={otherLocalePath}> + { + t(tPage, { + key: 'language-link-text', + language: t(tSite, { key: 'locale', locale: otherLocale }), + }) + } +</a> diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index ca567f6..f63b0ad 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,5 +1,6 @@ --- import Footer from '../components/Footer.astro'; +import Navbar from '../components/Navbar.astro'; import translate from '../i18n/translate'; import site from '../i18n/translations/site'; import type Locale from '../types/Locale'; @@ -26,6 +27,7 @@ const t = translate(locale); <title>{title} | {t(site, { key: 'title' })}</title> </head> <body> + <Navbar locale={locale} /> <slot /> <Footer /> </body> |