mikkel/astro-personal-website
1
0
Fork 0
mirror of https://github.com/mikkelsvartveit/astro-personal-website.git synced 2025-12-22 19:22:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve view transitions on images

Browse source
This commit is contained in:
Mikkel Svartveit 2023-10-18 16:51:42 -07:00
parent db4c840dc5
commit dcccb29b7a
6 changed files with 45 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Navbar.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { slide, fade } from "svelte/transition"; import { slide, fade } from "svelte/transition";
export let sticky = true;
export let currentPath: string; export let currentPath: string;
$: currentPathTrimmed = currentPath.replace(/\/+$/, ""); $: currentPathTrimmed = currentPath.replace(/\/+$/, "");
@ -19,8 +20,8 @@
<svelte:window bind:scrollY={scrollPosition} /> <svelte:window bind:scrollY={scrollPosition} />
<header <header
class="sticky top-0 z-10 bg-gray-50 transition-shadow ease-in" class={sticky ? "sticky top-0 z-10 bg-gray-50 transition-shadow ease-in" : ""}
class:shadow={isScrolled} class:shadow={sticky && isScrolled}
> >
<nav <nav
class="mx-auto flex h-16 max-w-5xl flex-wrap items-center justify-between px-6" class="mx-auto flex h-16 max-w-5xl flex-wrap items-center justify-between px-6"

20
src/components/Photo.astro Normal file
View file

@ -0,0 +1,20 @@
---
import { Image } from "astro:assets";
interface Props {
photo: any;
class?: string;
}
const { photo, class: className } = Astro.props;
---
<Image
src={photo}
alt=""
height={1000}
densities={[1, 2]}
quality="mid"
class={"object-contain rounded " + (className ?? "")}
transition:name={photo.src}
/>

9
src/layouts/BaseLayout.astro
View file

@ -4,13 +4,18 @@ import RootLayout from "./RootLayout.astro";
interface Props { interface Props {
title?: string; title?: string;
noStickyNavbar?: boolean;
} }
const { title } = Astro.props; const { title, noStickyNavbar } = Astro.props;
--- ---
<RootLayout {title}> <RootLayout {title}>
<Navbar client:load currentPath={Astro.url.pathname} /> <Navbar
client:load
sticky={!noStickyNavbar}
currentPath={Astro.url.pathname}
/>
<main> <main>
<slot /> <slot />
</main> </main>

2
src/layouts/RootLayout.astro
View file

@ -12,7 +12,7 @@ const fullTitle = `${title ? title + " – " : ""}Mikkel Svartveit`;
--- ---
<!doctype html> <!doctype html>
<html lang="en" transition:animate="fade"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="/favicon.png" /> <link rel="icon" href="/favicon.png" />

19
src/pages/photography/[photo].astro
View file

@ -1,8 +1,8 @@
--- ---
import type { GetStaticPaths } from "astro"; import type { GetStaticPaths } from "astro";
import { getFileNameFromPath } from "./index.astro"; import { getFileNameFromPath } from "./index.astro";
import { Image } from "astro:assets";
import RootLayout from "@layouts/RootLayout.astro"; import RootLayout from "@layouts/RootLayout.astro";
import Photo from "@components/Photo.astro";
export const getStaticPaths = (async () => { export const getStaticPaths = (async () => {
const photos = await Astro.glob("../../assets/photos/*"); const photos = await Astro.glob("../../assets/photos/*");
@ -21,17 +21,12 @@ const { photo } = Astro.props;
--- ---
<RootLayout title="Photo" hideScrollbar> <RootLayout title="Photo" hideScrollbar>
<div class="bg-gray-900 m-screen h-screen" onclick=" <div
class="cursor-pointer bg-gray-900 w-full h-screen flex justify-center"
onclick="
history.back() history.back()
"> "
<Image >
src={photo.default} <Photo photo={photo.default} class="w-auto" />
alt=""
height={1000}
densities={[1, 2]}
class="h-screen w-screen object-contain"
loading="eager"
decoding="sync"
/>
</div> </div>
</RootLayout> </RootLayout>

16
src/pages/photography/index.astro
View file

@ -4,6 +4,7 @@ import ContainerLayout from "@layouts/ContainerLayout.astro";
import BaseLayout from "@layouts/BaseLayout.astro"; import BaseLayout from "@layouts/BaseLayout.astro";
import TextContentLayout from "@layouts/TextContentLayout.astro"; import TextContentLayout from "@layouts/TextContentLayout.astro";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import Photo from "@components/Photo.astro";
const photos = await Astro.glob("../../assets/photos/*"); const photos = await Astro.glob("../../assets/photos/*");
@ -21,7 +22,7 @@ export const getFileNameFromPath = (path: string) => {
}; };
--- ---
<BaseLayout title="Photography"> <BaseLayout title="Photography" noStickyNavbar>
<ContainerLayout> <ContainerLayout>
<TextContentLayout> <TextContentLayout>
<h1 <h1
@ -44,16 +45,11 @@ export const getFileNameFromPath = (path: string) => {
photos.sort(sortFiles).map((photo) => ( photos.sort(sortFiles).map((photo) => (
<a <a
href={`/photography/${getFileNameFromPath(photo.default.src)}`} href={`/photography/${getFileNameFromPath(photo.default.src)}`}
class="flex w-full py-2 duration-100 hover:-translate-y-1" class="flex w-full py-2 duration-100 hover:-translate-y-1 rounded-lg"
> >
<Image <div class="bg-gray-200 rounded">
src={photo.default} <Photo photo={photo.default} />
alt="" </div>
width={400}
densities={[1, 2]}
transition:name={getFileNameFromPath(photo.default.src)}
class="rounded bg-gray-200"
/>
</a> </a>
)) ))
} }