Adds breadcrumbs

7 files changed, 110 insertions, 4 deletions

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);
+---
+
+<ol class="breadcrumbs">
+  {
+    /* parentRoutes.length > 1 && */ parentRoutes.map((route) => {
+      return (
+        <li>
+          <a class="link" href={`/${locale}${route}`}>
+            {t(tBreadcrumbs, { key: route })}
+          </a>
+        </li>
+      );
+    })
+  }
+</ol>
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;
 
 <nav class="dark">
   <SwitchLanguageLink currentLocale={locale} />
+  <Breadcrumbs />
 </nav>
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);
 ---
 
-<a class="link" href={otherLocalePath}>
+<a class="link switch-language-link" href={otherLocalePath}>
   {
     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<Raw>;
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;
+}