feat(astro): add view transitions

erkobridee · Jul 1, 2024 · d458417 · d458417
1 parent ac62173
commit d458417
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -18,6 +18,8 @@ So later on, I saw some cases where it's been using the pattern `#* -> src/*` (
 
 ## Astro
 
+- [[YouTube] Astro in 100 Seconds | Fireship](https://www.youtube.com/watch?v=dsTXcSeAZq8) ( 2021-07-15 )
+
 - [Astro Docs](https://docs.astro.build/en/getting-started/)
 
   - [Install and set up Astro](https://docs.astro.build/en/install-and-setup/)
@@ -30,6 +32,12 @@ So later on, I saw some cases where it's been using the pattern `#* -> src/*` (
 
     - [Configuring Markdown and MDX](https://docs.astro.build/en/guides/markdown-content/#configuring-markdown-and-mdx)
 
+  - [View Transitions | Astro Docs](https://docs.astro.build/en/guides/view-transitions/)
+
+    - [astro:after-swap](https://docs.astro.build/en/guides/view-transitions/#astroafter-swap)
+
+    - [Astro View Transitions | Chrome for Developers](https://developer.chrome.com/blog/astro-view-transitions?hl=en) - [live](https://live-transitions.pages.dev/), [source code](https://github.com/Charca/view-transitions-live)
+
   - [Deploy your Astro Site to GitHub Pages | Astro Docs](https://docs.astro.build/en/guides/deploy/github/)
 
     - [[GitHub] withastro/github-pages](https://github.com/withastro/github-pages) - Automatically deploy an Astro site to GitHub Pages

diff --git a/src/layouts/main.astro b/src/layouts/main.astro
@@ -2,6 +2,9 @@
 // Full Astro Component Syntax:
 // https://docs.astro.build/basics/astro-components/
 
+// https://docs.astro.build/en/reference/api-reference/#viewtransitions-
+import { ViewTransitions } from 'astro:transitions';
+
 import redefineUrl from '#utils/redefineUrl';
 
 interface IContent {
@@ -35,6 +38,7 @@ const styleFragment = `
     <title>{content.title}</title>
 
     <Fragment set:html={styleFragment} />
+    <ViewTransitions />
   </head>
   <body>
     <slot />

diff --git a/src/pages/search.astro b/src/pages/search.astro
@@ -29,13 +29,17 @@ import Link from '#components/Link.astro';
 </Layout>
 
 <script>
-  const urlSearchParams = new URLSearchParams(window.location.search);
-  const params = Object.fromEntries(urlSearchParams.entries());
-
-  console.log('URLSearchParams', params);
-
-  const searchParams = document.querySelector('div#search-params');
-  if (searchParams) {
-    searchParams.innerHTML = JSON.stringify(params, null, 2);
-  }
+  // https://raphaelferrand.com/posts/scripts-view-transitions-astrojs/
+  // https://docs.astro.build/en/guides/view-transitions/#astroafter-swap
+  document.addEventListener('astro:after-swap', () => {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+
+    console.log('URLSearchParams', params);
+
+    const searchParams = document.querySelector('div#search-params');
+    if (searchParams) {
+      searchParams.innerHTML = JSON.stringify(params, null, 2);
+    }
+  });
 </script>