remove rel=prefetch attributes, added View Transitions to prefetch li…

…nks and have SPA navigation
tex0l · Feb 22, 2024 · f8e8698 · f8e8698
1 parent 0ae04cb
commit f8e8698
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/src/components/i18n/LanguagePicker.astro b/src/components/i18n/LanguagePicker.astro
@@ -17,6 +17,7 @@ const t = useTranslations(currentLang)
 </form>
 <script>
     import { languages } from '~/i18n'
+    import { navigate } from 'astro:transitions/client'
 
     const switchLang = (path: string, lang: string): string => {
         if (!Object.hasOwn(languages, lang)) throw new Error('Provided lang prefix is unknown')
@@ -35,7 +36,7 @@ const t = useTranslations(currentLang)
             change($event) {
                 const l = ($event.target as HTMLSelectElement).value
                 window.localStorage.setItem('i18n', l)
-                window.location.assign(switchLang(window.location.pathname, l))
+                navigate(switchLang(window.location.pathname, l))
             }
         }))
     })

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -1,4 +1,5 @@
 ---
+import { ViewTransitions } from "astro:transitions"
 interface Props {
   title?: string
   description?: string
@@ -19,6 +20,7 @@ const { lang } = Astro.params
     <link rel="sitemap" href="/sitemap-index.xml" />
     <meta name="generator" content={Astro.generator}/>
     <title>{title}</title>
+    <ViewTransitions />
     <slot name="head"/>
 </head>
 <body>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -40,7 +40,7 @@ const t = useTranslations(lang)
     after:z-30
 ">
             <div x-data="{ open: false }" class="w-full h-16 flex items-center -mt-4 sticky top-0 px-3 md:px-12 z-50 bg-white select-none">
-                <a href={localizePath('/')} rel="prefetch">
+                <a href={localizePath('/')}>
                     <div class="flex flex-row h-full items-center">
                         <span class="bg-gray-900 w-10 h-10 text-2xl text-white flex justify-center items-center rounded-md flex-shrink-0">TR</span>
                         <span class="text-gray-900 ml-6 text-xl font-bold">Timothée Rebours</span>
@@ -49,14 +49,14 @@ const t = useTranslations(lang)
                 <div class="flex-grow"></div>
                 <div class="hidden md:block md:md:text-xl md:space-x-6 md:flex-shrink-0">
                     <LanguagePicker class="p-2 rounded border-2 border-gray-500/25 bg-white"/>
-                    <span><a href={localizePath('/about-me')} rel="prefetch">{t('layout.about-me')}</a></span>
-                    <span><a href={localizePath('/blog')} rel="prefetch">{t('layout.blog')}</a></span>
+                    <span><a href={localizePath('/about-me')}>{t('layout.about-me')}</a></span>
+                    <span><a href={localizePath('/blog')}>{t('layout.blog')}</a></span>
                 </div>
                 <Icon @click.prevent.throttle="open = !open" name="carbon:menu" class="z-20 inline h-6 w-6 cursor-pointer md:hidden"/>
                 <div class="z-10 fixed top-0 left-0 right-0 h-full bg-white md:hidden flex justify-center flex-col items-center space-y-10 capitalize text-4xl font-semibold" x-show="open">
                     <LanguagePicker class="p-2 rounded border-2 border-gray-500/25 bg-white"/>
-                    <span><a href={localizePath('/about-me')} rel="prefetch">{t('layout.about-me')}</a></span>
-                    <span><a href={localizePath('/blog')} rel="prefetch">{t('layout.blog')}</a></span>
+                    <span><a href={localizePath('/about-me')}>{t('layout.about-me')}</a></span>
+                    <span><a href={localizePath('/blog')}>{t('layout.blog')}</a></span>
                 </div>
             </div>
         </div>

diff --git a/src/pages/[lang]/blog/index.astro b/src/pages/[lang]/blog/index.astro
@@ -40,7 +40,7 @@ const formatDate = useFormatDate(lang)
 
         {renderedBlogPosts.map(post => (
                 <div class="flex flex-col max-w-sm hover:scale-105 rounded-md overflow-hidden shadow-xl hover:shadow-2xl transition shadow transform duration-300">
-                    <a href={localizePath(`/blog/${slugify(post.id)}`)} rel="prefetch">
+                    <a href={localizePath(`/blog/${slugify(post.id)}`)}>
                         <div class="width-full aspect-video overflow-hidden flex items-center justify-center">
                             {(post.data.image != null) ? (<Image src={post.data.image} alt={post.data.alt} width="400"/>) : (<div class="flex-grow"></div>)}
                         </div>