From 9703e54ca4264b0437e06c45bbcc53a7a7d1e106 Mon Sep 17 00:00:00 2001 From: satnaing Date: Thu, 14 Sep 2023 14:00:08 +0630 Subject: [PATCH] feat: add ViewTransitions from Astro Integrate ViewTransitions API from Astro v3. resolve #96 --- public/toggle-theme.js | 21 ++++++++++++++------- src/components/Card.astro | 22 ++++++++++++++++++++++ src/components/Header.astro | 35 +++++++++++++++++++++-------------- src/components/Search.tsx | 4 ++-- src/components/Tag.astro | 1 + src/layouts/Layout.astro | 5 ++++- src/layouts/Main.astro | 27 +++++++++++++++++++++++---- src/layouts/PostDetails.astro | 13 ++++++++++--- src/layouts/Posts.astro | 2 +- src/pages/index.astro | 2 +- src/pages/tags/[tag].astro | 6 ++++-- 11 files changed, 103 insertions(+), 35 deletions(-) create mode 100644 src/components/Card.astro diff --git a/public/toggle-theme.js b/public/toggle-theme.js index bea85d781..146af33ec 100644 --- a/public/toggle-theme.js +++ b/public/toggle-theme.js @@ -50,14 +50,21 @@ function reflectPreference() { reflectPreference(); window.onload = () => { - // set on load so screen readers can get the latest value on the button - reflectPreference(); + function setThemeFeature() { + // set on load so screen readers can get the latest value on the button + reflectPreference(); + + // now this script can find and listen for clicks on the control + document.querySelector("#theme-btn")?.addEventListener("click", () => { + themeValue = themeValue === "light" ? "dark" : "light"; + setPreference(); + }); + } - // now this script can find and listen for clicks on the control - document.querySelector("#theme-btn")?.addEventListener("click", () => { - themeValue = themeValue === "light" ? "dark" : "light"; - setPreference(); - }); + setThemeFeature(); + + // Runs on view transitions navigation + document.addEventListener("astro:after-swap", setThemeFeature); }; // sync with system changes diff --git a/src/components/Card.astro b/src/components/Card.astro new file mode 100644 index 000000000..97fdeacd4 --- /dev/null +++ b/src/components/Card.astro @@ -0,0 +1,22 @@ +--- +import Datetime from "@components/Datetime"; +import type { BlogFrontmatter } from "@content/_schemas"; + +export interface Props { + href?: string; + frontmatter: BlogFrontmatter; + secHeading?: boolean; +} + +const { href, frontmatter, secHeading = true } = Astro.props; + +const { title, pubDatetime, description } = frontmatter; +--- + +
  • + + {secHeading ?

    {title}

    :

    {title}

    } +     + +

    {description}

    +
    • diff --git a/src/components/Header.astro b/src/components/Header.astro index 1878d708f..06dbefeaf 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -189,19 +189,26 @@ const { activeNav } = Astro.props; diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 3e72f3160..fdf972672 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -67,9 +67,9 @@ export default function SearchBar({ searchList }: Props) { searchParams.set("q", inputVal); const newRelativePathQuery = window.location.pathname + "?" + searchParams.toString(); - history.replaceState(null, "", newRelativePathQuery); + history.replaceState(history.state, "", newRelativePathQuery); } else { - history.replaceState(null, "", window.location.pathname); + history.replaceState(history.state, "", window.location.pathname); } }, [inputVal]); diff --git a/src/components/Tag.astro b/src/components/Tag.astro index b3caa0859..bfb4ade60 100644 --- a/src/components/Tag.astro +++ b/src/components/Tag.astro @@ -14,6 +14,7 @@ const { name, size = "sm" } = Astro.props; > + @@ -77,6 +78,8 @@ const socialImageURL = new URL( ) } + + diff --git a/src/layouts/Main.astro b/src/layouts/Main.astro index 7946fa47c..0695b4670 100644 --- a/src/layouts/Main.astro +++ b/src/layouts/Main.astro @@ -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; ---
    -

    {pageTitle}

    -

    {pageDesc}

    + { + "titleTransition" in props ? ( +

    + {props.pageTitle[0]} + + {props.pageTitle[1]} + +

    + ) : ( +

    {props.pageTitle}

    + ) + } +

    {props.pageDesc}

    diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro index 908122c9c..c2770ca58 100644 --- a/src/layouts/PostDetails.astro +++ b/src/layouts/PostDetails.astro @@ -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; --- - +
    -

    {title}

    +

    {title}

    diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro index c9cc585c7..e1b7cf0e0 100644 --- a/src/layouts/Posts.astro +++ b/src/layouts/Posts.astro @@ -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"; diff --git a/src/pages/index.astro b/src/pages/index.astro index 06bca6d18..f01a9baa7 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,7 +5,7 @@ import Header from "@components/Header.astro"; import Footer from "@components/Footer.astro"; import LinkButton from "@components/LinkButton.astro"; import Hr from "@components/Hr.astro"; -import Card from "@components/Card"; +import Card from "@components/Card.astro"; import Socials from "@components/Socials.astro"; import getSortedPosts from "@utils/getSortedPosts"; import slugify from "@utils/slugify"; diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro index 664cfc415..8253fba27 100644 --- a/src/pages/tags/[tag].astro +++ b/src/pages/tags/[tag].astro @@ -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 getUniqueTags from "@utils/getUniqueTags"; import getPostsByTag from "@utils/getPostsByTag"; import slugify from "@utils/slugify"; @@ -41,9 +41,11 @@ const sortTagsPost = getSortedPosts(tagPosts);
    +

    {`Tag:${tag}`}

      { sortTagsPost.map(({ data }) => (