feat: add ViewTransitions from Astro

Integrate ViewTransitions API from Astro v3. resolve #96
2026-08-14 11:29:33 +08:00 · 2023-09-14 14:00:08 +06:30
parent e486687610
commit cbdaa59bae
11 changed files with 103 additions and 35 deletions
@@ -1,6 +1,7 @@
 ---
 import { SITE } from "@config";
 import "@styles/base.css";
+import { ViewTransitions } from "astro:transitions";

 const googleSiteVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION;

@@ -26,7 +27,7 @@ const socialImageURL = new URL(
 ).href;
 ---

-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
@@ -77,6 +78,8 @@ const socialImageURL = new URL(
      )
    }

+    <ViewTransitions />
+
    <script is:inline src="/toggle-theme.js"></script>
  </head>
  <body>
@@ -1,18 +1,37 @@
 ---
 import Breadcrumbs from "@components/Breadcrumbs.astro";

-export interface Props {
+interface StringTitleProp {
  pageTitle: string;
  pageDesc?: string;
 }

-const { pageTitle, pageDesc } = Astro.props;
+interface ArrayTitleProp {
+  pageTitle: [string, string];
+  titleTransition: string;
+  pageDesc?: string;
+}
+
+export type Props = StringTitleProp | ArrayTitleProp;
+
+const { props } = Astro;
 ---

 <Breadcrumbs />
 <main id="main-content">
-  <h1>{pageTitle}</h1>
-  <p>{pageDesc}</p>
+  {
+    "titleTransition" in props ? (
+      <h1>
+        {props.pageTitle[0]}
+        <span transition:name={props.titleTransition}>
+          {props.pageTitle[1]}
+        </span>
+      </h1>
+    ) : (
+      <h1>{props.pageTitle}</h1>
+    )
+  }
+  <p>{props.pageDesc}</p>
  <slot />
 </main>

@@ -13,7 +13,8 @@ export interface Props {

 const { post } = Astro.props;

-const { title, author, description, ogImage, canonicalURL, pubDatetime, tags } = post.data;
+const { title, author, description, ogImage, canonicalURL, pubDatetime, tags } =
+  post.data;

 const { Content } = await post.render();

@@ -21,7 +22,13 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.png`, Astro.url.origin)
  .href;
 ---

-<Layout title={title} author={author} description={description} ogImage={ogUrl} canonicalURL={canonicalURL}>
+<Layout
+  title={title}
+  author={author}
+  description={description}
+  ogImage={ogUrl}
+  canonicalURL={canonicalURL}
+>
  <Header />
  <div class="mx-auto flex w-full max-w-3xl justify-start px-2">
    <button
@@ -36,7 +43,7 @@ const ogUrl = new URL(ogImage ? ogImage : `${title}.png`, Astro.url.origin)
    </button>
  </div>
  <main id="main-content">
-    <h1 class="post-title">{title}</h1>
+    <h1 transition:name={title} class="post-title">{title}</h1>
    <Datetime datetime={pubDatetime} size="lg" className="my-2" />
    <article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
      <Content />
@@ -4,7 +4,7 @@ import Layout from "@layouts/Layout.astro";
 import Main from "@layouts/Main.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
-import Card from "@components/Card";
+import Card from "@components/Card.astro";
 import LinkButton from "@components/LinkButton.astro";
 import slugify from "@utils/slugify";
 import type { CollectionEntry } from "astro:content";