fix(page-drawer): sanitize links

significa · Nov 14, 2024 · a356413 · a356413
1 parent d82443e
commit a356413
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git a/src/components/blocks/careers-list.svelte b/src/components/blocks/careers-list.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import { storyblokEditable } from '$lib/actions/storyblok-editable';
-  import { t } from '$lib/i18n';
-  import { getAnchorFromCmsLink } from '$lib/utils/cms';
   import type { CareersListStoryblok } from '$types/bloks';
+
   import { Button } from '@significa/svelte-ui';
 
+  import { t } from '$lib/i18n';
+  import { sanitizeSlug } from '$lib/utils/paths';
+  import { getAnchorFromCmsLink } from '$lib/utils/cms';
+  import { storyblokEditable } from '$lib/actions/storyblok-editable';
+
   export let block: CareersListStoryblok;
 </script>
 
@@ -17,15 +20,16 @@
           <h2 class="text-5xl">{block.title}</h2>
           <ul class="mt-10">
             {#each $page.data.careers as career}
+              {@const href = sanitizeSlug(career.full_slug)}
               <li class="border-b first:border-t">
                 <a
                   class="flex w-full items-center justify-between py-4 text-xl transition-colors hover:text-foreground-secondary"
-                  href={career.full_slug}
+                  {href}
                 >
                   <span>{career.name}</span>
                   <Button
                     as="a"
-                    href={career.full_slug}
+                    {href}
                     variant="secondary"
                     arrow
                     size="sm"

diff --git a/src/components/blocks/open-positions.svelte b/src/components/blocks/open-positions.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
-  import { storyblokEditable } from '$lib/actions/storyblok-editable';
-  import type { OpenPositionsStoryblok } from '$types/bloks';
   import { page } from '$app/stores';
-  import { drawerLinks } from '$lib/actions/drawer-links';
+  import type { OpenPositionsStoryblok } from '$types/bloks';
+
   import { Button, Link } from '@significa/svelte-ui';
+
   import { t } from '$lib/i18n';
   import { theme } from '$lib/stores/theme';
+  import { sanitizeSlug } from '$lib/utils/paths';
+  import { drawerLinks } from '$lib/actions/drawer-links';
+  import { storyblokEditable } from '$lib/actions/storyblok-editable';
+
   import CareersAssetLight from '$components/illustrations/assets/careers-light.webp';
   import CareersAssetDark from '$components/illustrations/assets/careers-dark.webp';
 
@@ -30,10 +34,11 @@
         <div class="w-full flex-1">
           <ul use:drawerLinks>
             {#each $page.data.careers as career}
+              {@const href = sanitizeSlug(career.full_slug)}
               <li class="border-b first:border-t">
                 <a
                   class="flex w-full items-center justify-between py-7 text-2xl font-semibold transition-colors hover:text-foreground-secondary"
-                  href={career.full_slug}
+                  {href}
                 >
                   <span>{career.name}</span>
                   <Button size="sm" variant="secondary" arrow />

diff --git a/src/components/page-drawer.svelte b/src/components/page-drawer.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
-  import DynamicPage from '$components/pages/dynamic-page.svelte';
+  import clsx from 'clsx';
+  import { page } from '$app/stores';
+  import { setContext } from 'svelte';
+  import { browser } from '$app/environment';
+  import { fade, fly } from 'svelte/transition';
+
+  import { Button, Spinner } from '@significa/svelte-ui';
   import { bodyLock, escapeKey } from '@significa/svelte-ui/actions';
+
   import { t } from '$lib/i18n';
-  import { drawer } from '$lib/stores/drawer';
-  import { Button, Spinner } from '@significa/svelte-ui';
-  import { fade, fly } from 'svelte/transition';
-  import { browser } from '$app/environment';
-  import { page } from '$app/stores';
   import { fetchPage } from '$lib/content';
-  import { setContext } from 'svelte';
-  import clsx from 'clsx';
+  import { drawer } from '$lib/stores/drawer';
+
+  import DynamicPage from '$components/pages/dynamic-page.svelte';
 
   let isSticky = true;
   let expanding = false;
@@ -55,8 +58,11 @@
         icon="expand"
         on:click={() => {
           expanding = true;
-        }}>{t('expand')}</Button
+        }}
       >
+        {t('expand')}
+      </Button>
+
       <Button class="bg-background" variant="ghost" icon="close" on:click={drawer.close} />
     </header>
     <div>