From c3f119d332dea3fc33494a44e077f00f6ad05eec Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Sun, 13 Aug 2023 09:07:24 +0100
Subject: Adds breadcrumbs
---
public/main.css | 34 ++++++++++++++++++++---
public/normalize.css | 4 +++
src/components/Breadcrumbs.astro | 36 +++++++++++++++++++++++++
src/components/Navbar.astro | 2 ++
src/components/SwitchLanguageLink.astro | 2 +-
src/i18n/translations/components/breadcrumbs.ts | 22 +++++++++++++++
src/lib/findAllIndicesOf.ts | 14 ++++++++++
7 files changed, 110 insertions(+), 4 deletions(-)
create mode 100644 src/components/Breadcrumbs.astro
create mode 100644 src/i18n/translations/components/breadcrumbs.ts
create mode 100644 src/lib/findAllIndicesOf.ts
diff --git a/public/main.css b/public/main.css
index 2ac149f..741ec58 100644
--- a/public/main.css
+++ b/public/main.css
@@ -37,6 +37,7 @@
--spacing-inline-lg: 5rem;
--spacing-inline-md: 3rem;
--spacing-inline-sm: 1.5rem;
+ --spacing-inline-xs: 0.5rem;
--base-font-size-min: 16px;
--base-font-size-max: 30px;
@@ -61,7 +62,7 @@
background-color: var(--background-color);
}
-@media screen and (min-width: var(--breakpoint-sm)) {
+@media (min-width: 40rem) {
:root {
--sm-to-lg: calc(var(--breakpoint-lg) - var(--breakpoint-sm));
--this-to-lg: calc(100vw - var(--base-font-size-min));
@@ -303,7 +304,7 @@ footer {
margin-inline: auto;
}
-@media (min-width: var(--breakpoint-sm)) {
+@media (min-width: 40rem) {
.back-to-top-link {
margin-inline-end: 0;
}
@@ -388,7 +389,34 @@ footer {
nav {
display: flex;
- justify-content: space-evenly;
+ flex-direction: column;
+ align-items: center;
padding-block-start: var(--spacing-block-sm);
padding-block-end: var(--spacing-block-md);
}
+
+@media (min-width: 40rem) {
+ nav {
+ flex-direction: row;
+ justify-content: space-evenly;
+ padding-inline: 0;
+ }
+}
+
+.breadcrumbs li {
+ list-style-type: none;
+}
+
+.breadcrumbs li::before {
+ content: '/'
+}
+
+@media (min-width: 40rem) {
+ .breadcrumbs {
+ display: flex;
+ }
+
+ .breadcrumbs li {
+ margin-inline: var(--spacing-inline-xs);
+ }
+}
\ No newline at end of file
diff --git a/public/normalize.css b/public/normalize.css
index 61d3fed..af905e9 100644
--- a/public/normalize.css
+++ b/public/normalize.css
@@ -354,6 +354,10 @@ template {
color: currentColor;
}
+ol {
+ padding: 0;
+}
+
li {
list-style: none;
}
diff --git a/src/components/Breadcrumbs.astro b/src/components/Breadcrumbs.astro
new file mode 100644
index 0000000..d29acee
--- /dev/null
+++ b/src/components/Breadcrumbs.astro
@@ -0,0 +1,36 @@
+---
+import findAllIndicesOf from '../lib/findAllIndicesOf';
+import translate from '../i18n/translate';
+import tBreadcrumbs from '../i18n/translations/components/breadcrumbs';
+import type Locale from '../types/Locale';
+import locales from '../i18n/locales';
+
+const path = Astro.url.pathname.replace(/(?!\/)$/, '/');
+const localeInPath = new RegExp(`/(?<=^/)(${locales.join('|')})`);
+const locale = path.match(localeInPath)?.[1] as Locale;
+if (!locale) {
+ return;
+}
+const pathWithoutLocale = path.replace(new RegExp(`^/${locale}`), '');
+console.log('Path without locale: %s', pathWithoutLocale);
+const slashIndices = findAllIndicesOf('/', pathWithoutLocale);
+console.log('Indices: (%s)', slashIndices.join(','));
+const parentRoutes = slashIndices.map((n) => pathWithoutLocale.slice(0, n + 1)).slice(0, -1);
+console.log('Parent routes: (%s)', parentRoutes.join(','));
+
+const t = translate(locale);
+---
+
+
+ {
+ /* parentRoutes.length > 1 && */ parentRoutes.map((route) => {
+ return (
+ -
+
+ {t(tBreadcrumbs, { key: route })}
+
+
+ );
+ })
+ }
+
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 8174efe..80829d3 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,5 +1,6 @@
---
import type Locale from '../types/Locale';
+import Breadcrumbs from './Breadcrumbs.astro';
import SwitchLanguageLink from './SwitchLanguageLink.astro';
interface Props {
@@ -11,4 +12,5 @@ const { locale } = Astro.props;
diff --git a/src/components/SwitchLanguageLink.astro b/src/components/SwitchLanguageLink.astro
index 77dfa18..e8dace3 100644
--- a/src/components/SwitchLanguageLink.astro
+++ b/src/components/SwitchLanguageLink.astro
@@ -18,7 +18,7 @@ const otherLocalePath = currentPath.replace(currentLocaleInPath, `${otherLocale}
const t = translate(currentLocale);
---
-
+
{
t(tPage, {
key: 'language-link-text',
diff --git a/src/i18n/translations/components/breadcrumbs.ts b/src/i18n/translations/components/breadcrumbs.ts
new file mode 100644
index 0000000..a0af6f9
--- /dev/null
+++ b/src/i18n/translations/components/breadcrumbs.ts
@@ -0,0 +1,22 @@
+import type { TranslationsDictionary } from '../../../types/TranslationsDictionary';
+
+// This maun be kept up til date bi haund. There is
+// nae compile-time check that aw routes hae been
+// translatit.
+const breadcrumbsTranslations = {
+ '/': {
+ sco: () => 'Hame',
+ 'en-GB': () => 'Home',
+ },
+ '/furthsettins/': {
+ sco: () => 'Furthsettins',
+ 'en-GB': () => 'Publications',
+ },
+ '/furthsettins/lallans/': {
+ sco: () => 'Lallans',
+ 'en-GB': () => 'Lallans',
+ },
+};
+
+type Raw = typeof breadcrumbsTranslations;
+export default breadcrumbsTranslations as TranslationsDictionary;
diff --git a/src/lib/findAllIndicesOf.ts b/src/lib/findAllIndicesOf.ts
new file mode 100644
index 0000000..8f1a100
--- /dev/null
+++ b/src/lib/findAllIndicesOf.ts
@@ -0,0 +1,14 @@
+export default function (searchFor: string, searchIn: string): number[] {
+ const indices: number[] = [];
+
+ let index = -1;
+ while (index !== searchIn.length - 1) {
+ index = searchIn.slice(index + 1).indexOf(searchFor) + index + 1;
+ if (index === -1) {
+ break;
+ }
+ indices.push(index);
+ }
+
+ return indices;
+}
--
cgit v1.2.3