More robust relative path handling

10 files changed, 49 insertions, 10 deletions

diff --git a/src/components/LallansIssue.astro b/src/components/LallansIssue.astro
index c71755b..a07d345 100644
--- a/src/components/LallansIssue.astro
+++ b/src/components/LallansIssue.astro
@@ -1,6 +1,7 @@
 ---
 import translate from '$i18n/translate';
 import tSite from '$i18n/translations/site';
+import relativePath from '$lib/relativePath';
 import type LallansIssue from '$types/LallansIssue';
 import type Locale from '$types/Locale';
 import LallansIssueContributions from './LallansIssueContributions.astro';
@@ -25,7 +26,9 @@ const t = translate(locale);
 
     <div class="product__action-block">
       <img alt="" src={`/images/lallans/issue${issue.issueNumber}.jpg`} />
-      <PayPalButtons successPageUrl={`./${issue.issueNumber}/payment-success-confirmation`} />
+      <PayPalButtons
+        successPageUrl={relativePath(Astro.url.pathname, `payment-success-confirmation`)}
+      />
     </div>
   </div>
 </section>
diff --git a/src/components/LallansIssuesGallery.astro b/src/components/LallansIssuesGallery.astro
index bee50c8..c784156 100644
--- a/src/components/LallansIssuesGallery.astro
+++ b/src/components/LallansIssuesGallery.astro
@@ -1,5 +1,12 @@
 ---
 import { getAllLallansIssues } from '$data/lallans';
+import type Locale from '$types/Locale';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
 
 const issues = await getAllLallansIssues();
 ---
@@ -8,7 +15,10 @@ const issues = await getAllLallansIssues();
   {
     issues.map((issue) => (
       <li>
-        <a class="link link-gallery__container" href={`lallans/${issue.issueNumber}`}>
+        <a
+          class="link link-gallery__container"
+          href={`/${locale}/furthsettins/lallans/${issue.issueNumber}`}
+        >
           <div class="link-gallery__image">
             <img src={`/images/lallans/issue${issue.issueNumber}.jpg`} />
           </div>
diff --git a/src/components/Scotsoun.astro b/src/components/Scotsoun.astro
index 13c6fa9..1491ebc 100644
--- a/src/components/Scotsoun.astro
+++ b/src/components/Scotsoun.astro
@@ -5,6 +5,7 @@ import tComponent from '$i18n/translations/components/scotsoun';
 import type Locale from '$types/Locale';
 import type Scotsoun from '$types/Scotsoun';
 import PayPalButtons from './PayPalButtons.astro';
+import relativePath from '$lib/relativePath';
 
 interface Props {
   locale: Locale;
@@ -30,7 +31,9 @@ const t = translate(locale);
     </header>
     <div class="product__action-block">
       <img src={`/images/scotsoun/sscd${scotsoun.scotsounId}.jpg`} />
-      <PayPalButtons successPageUrl={`./${scotsoun.scotsounId}/payment-success-confirmation`} />
+      <PayPalButtons
+        successPageUrl={relativePath(Astro.url.pathname, `payment-success-confirmation`)}
+      />
     </div>
   </div>
 
diff --git a/src/components/ScotsounCdGallery.astro b/src/components/ScotsounCdGallery.astro
index 12bafb0..6f6c794 100644
--- a/src/components/ScotsounCdGallery.astro
+++ b/src/components/ScotsounCdGallery.astro
@@ -1,5 +1,12 @@
 ---
 import { getAllScotsoun } from '$data/scotsoun';
+import type Locale from '$types/Locale';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
 
 const scotsoun = await getAllScotsoun();
 ---
@@ -8,7 +15,10 @@ const scotsoun = await getAllScotsoun();
   {
     scotsoun.map((scotsounItem) => (
       <li>
-        <a class="link link-gallery__container" href={`scotsoun/${scotsounItem.scotsounId}`}>
+        <a
+          class="link link-gallery__container"
+          href={`/${locale}/furthsettins/scotsoun/${scotsounItem.scotsounId}`}
+        >
           <div class="link-gallery__image">
             <img src={`/images/scotsoun/sscd${scotsounItem.scotsounId}.jpg`} />
           </div>
diff --git a/src/lib/relativePath.ts b/src/lib/relativePath.ts
new file mode 100644
index 0000000..ad8582c
--- /dev/null
+++ b/src/lib/relativePath.ts
@@ -0,0 +1,12 @@
+export default function (currentPath: string, relativePath: string) {
+  if (relativePath.length > 2 && relativePath.slice(0, 3) === '../') {
+    throw new Error('Cannot calculate relative path because it goes up a directory.');
+  }
+
+  if (currentPath.at(-1) !== '/') {
+    currentPath = currentPath + '/';
+  }
+  relativePath = relativePath.replace(/^\.?\//, '');
+
+  return currentPath + relativePath;
+}
diff --git a/src/pages/[locale]/furthsettins/index.astro b/src/pages/[locale]/furthsettins/index.astro
index d7a9421..43ff28e 100644
--- a/src/pages/[locale]/furthsettins/index.astro
+++ b/src/pages/[locale]/furthsettins/index.astro
@@ -5,6 +5,7 @@ import translate from '$i18n/translate';
 import tFurthsettins from '$i18n/translations/pages/furthsettins';
 import tSite from '$i18n/translations/site';
 import type Locale from '$types/Locale';
+import relativePath from '$lib/relativePath';
 
 export async function getStaticPaths() {
   return localeStaticPaths;
@@ -20,7 +21,7 @@ const t = translate(locale);
 
     <ul class="link-gallery link-gallery--furthsettins">
       <li>
-        <a href="lallans" class="link link-gallery__container">
+        <a href={relativePath(Astro.url.pathname, 'lallans')} class="link link-gallery__container">
           <div class="link-gallery__image">
             <img src="/images/furthsettins/lallans.jpg" />
           </div>
@@ -28,7 +29,7 @@ const t = translate(locale);
         </a>
       </li>
       <li>
-        <a href="scotsoun" class="link link-gallery__container">
+        <a href={relativePath(Astro.url.pathname, 'scotsoun')} class="link link-gallery__container">
           <div class="link-gallery__image">
             <img src="/images/furthsettins/scotsoun.jpg" />
           </div>
diff --git a/src/pages/[locale]/furthsettins/lallans/[issueNumber]/payment-success-confirmation.astro b/src/pages/[locale]/furthsettins/lallans/[issueNumber]/payment-success-confirmation.astro
index 72f07fc..4a26146 100644
--- a/src/pages/[locale]/furthsettins/lallans/[issueNumber]/payment-success-confirmation.astro
+++ b/src/pages/[locale]/furthsettins/lallans/[issueNumber]/payment-success-confirmation.astro
@@ -23,7 +23,7 @@ const issueNumber = new Number(Astro.params.issueNumber).valueOf() as LallansIss
   <section>
     <h1>{t(tPage, { key: 'title' })}</h1>
     <p>{t(tPage, { key: 'payment-confirmation-message', issueNumber: `${issueNumber}` })}</p>
-    <a class="link" href="./">
+    <a class="link" href={`/${locale}/furthsettins/lallans/${issueNumber}`}>
       {t(tPage, { key: 'back-button-text', issueNumber: `${issueNumber}` })}
     </a>
   </section>
diff --git a/src/pages/[locale]/furthsettins/lallans/index.astro b/src/pages/[locale]/furthsettins/lallans/index.astro
index dffe141..65f7b63 100644
--- a/src/pages/[locale]/furthsettins/lallans/index.astro
+++ b/src/pages/[locale]/furthsettins/lallans/index.astro
@@ -17,6 +17,6 @@ const t = translate(locale);
 <Page locale={locale} title={t(tFurthsettins, { key: 'title' })}>
   <section class="section--full-width">
     <h1>Lallans</h1>
-    <LallansIssuesGallery />
+    <LallansIssuesGallery locale={locale} />
   </section>
 </Page>
diff --git a/src/pages/[locale]/furthsettins/scotsoun/[scotsounId]/payment-success-confirmation.astro b/src/pages/[locale]/furthsettins/scotsoun/[scotsounId]/payment-success-confirmation.astro
index e4f62cb..fe82cf7 100644
--- a/src/pages/[locale]/furthsettins/scotsoun/[scotsounId]/payment-success-confirmation.astro
+++ b/src/pages/[locale]/furthsettins/scotsoun/[scotsounId]/payment-success-confirmation.astro
@@ -23,7 +23,7 @@ const t = translate(locale);
   <section>
     <h1>{t(tPage, { key: 'title' })}</h1>
     <p>{t(tPage, { key: 'payment-confirmation-message', scotsounId })}</p>
-    <a class="link" href="./">
+    <a class="link" href={`/${locale}/furthsettins/scotsoun/${scotsounId}`}>
       {t(tPage, { key: 'back-button-text', scotsounId })}
     </a>
   </section>
diff --git a/src/pages/[locale]/furthsettins/scotsoun/index.astro b/src/pages/[locale]/furthsettins/scotsoun/index.astro
index cd2e1fe..feb86a3 100644
--- a/src/pages/[locale]/furthsettins/scotsoun/index.astro
+++ b/src/pages/[locale]/furthsettins/scotsoun/index.astro
@@ -17,6 +17,6 @@ const t = translate(locale);
 <Page locale={locale} title={t(tPage, { key: 'title' })}>
   <section class="section--full-width">
     <h1>Scotsoun</h1>
-    <ScotsounCdGallery />
+    <ScotsounCdGallery locale={locale} />
   </section>
 </Page>