Revamp: project pages, view transitions and more!

package.json

@@ -10,8 +10,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.3.2",
-    "astro": "^4.0.4",
+    "@astrojs/check": "^0.8.1",
+    "astro": "^4.11.5",
     "typescript": "^5.3.3"
   }
-}
+}

src/components/ButtonLink.astro

@@ -0,0 +1,44 @@
+---
+interface Props {
+  type?: "primary" | "secondary";
+  href: string;
+}
+
+const {type = "primary", href} = Astro.props
+---
+
+<a class:list={[ "button", type ]} href={href} data-cursor-big="" data-cursor-invert="">
+  <slot>
+</a>
+
+<style>
+  .button {
+    display: inline-block;
+    font-size: 1.25rem;
+    line-height: 100%;
+    padding: 1em 2em;
+    text-decoration: none;
+    border-radius: 100vmax;
+  }
+  .button.primary {
+    background-color: black;
+    color: white;
+  }
+  .button.secondary {
+    color: black;
+    outline: 2px solid black;
+    outline-offset: -2px;
+  }
+  .button.secondary:focus-visible {
+    outline-color: orange;
+    background-color: #eee;
+  }
+
+  @media screen and (max-width: 500px) {
+    .button {
+      width: 100%;
+      text-align: center;
+      padding: 0.5em 2em;
+    }
+  }
+</style>

src/components/Cursor.astro

@@ -44,52 +44,60 @@
 </style>
 
 <script>
-  const cursorElement = document.querySelector(".cursor") as HTMLElement;
-  let cursorX = window.innerWidth  / 2
-  let cursorY = window.innerHeight / 2
-  let ballX = window.innerWidth  / 2
-  let ballY = window.innerHeight / 2
-
-  let speed = 5
-  let deltaTime = 0
-  let prevTime = performance.now()
-
-  function animate(){
-    let distX = cursorX - ballX;
-    let distY = cursorY - ballY;
+  function init() {
+    const cursorElement = document.querySelector(".cursor") as HTMLElement;
+    let cursorX = window.innerWidth  / 2
+    let cursorY = window.innerHeight / 2
+    let ballX = window.innerWidth  / 2
+    let ballY = window.innerHeight / 2
+
+    let speed = 5
+    let deltaTime = 0
+    let prevTime = performance.now()
+
+    function animate(){
+      let distX = cursorX - ballX;
+      let distY = cursorY - ballY;
+
+      deltaTime = (performance.now() - prevTime) / 1000 //ms
+      ballX = ballX + (distX * speed * deltaTime);
+      ballY = ballY + (distY * speed * deltaTime);
+
+      //
+      let bodyWidth = document.body.offsetWidth;
+      let bodyHeight = document.body.offsetHeight;
+      if (ballX < 0) ballX = 0;
+      if (ballX > bodyWidth) ballX = bodyWidth;
+      if (ballY < 0) ballY = 0;
+      if (ballY > bodyHeight) ballY = bodyHeight;
+
+      cursorElement.style.left = ballX + "px";
+      cursorElement.style.top = ballY + "px";
+      prevTime = performance.now()
+      requestAnimationFrame(animate);
+    }
+    animate()
+
 
-    deltaTime = (performance.now() - prevTime) / 1000 //ms
-    ballX = ballX + (distX * speed * deltaTime);
-    ballY = ballY + (distY * speed * deltaTime);
-
-    //
-    let bodyWidth = document.body.offsetWidth;
-    let bodyHeight = document.body.offsetHeight;
-    if (ballX < 0) ballX = 0;
-    if (ballX > bodyWidth) ballX = bodyWidth;
-    if (ballY < 0) ballY = 0;
-    if (ballY > bodyHeight) ballY = bodyHeight;
-
-    cursorElement.style.left = ballX + "px";
-    cursorElement.style.top = ballY + "px";
-    prevTime = performance.now()
-    requestAnimationFrame(animate);
+    document.addEventListener("mousemove", e=>{
+      cursorX = e.pageX
+      cursorY = e.pageY
+      let hoverTarget = e.target as HTMLElement
+      if (hoverTarget.hasAttribute('data-cursor-big') || hoverTarget.parentElement?.hasAttribute('data-cursor-big')) {
+        cursorElement.classList.add("big")
+      } else {
+        cursorElement.classList.remove("big")
+      }
+      if (hoverTarget.hasAttribute('data-cursor-invert') || hoverTarget.parentElement?.hasAttribute('data-cursor-invert')) {
+        cursorElement.classList.add("invert")
+      } else {
+        cursorElement.classList.remove("invert")
+      }
+    })
   }
-  animate()
 
-  document.addEventListener("mousemove", e=>{
-    cursorX = e.pageX
-    cursorY = e.pageY
-    let hoverTarget = e.target as HTMLElement
-    if (hoverTarget.hasAttribute('data-cursor-big') || hoverTarget.parentElement?.hasAttribute('data-cursor-big')) {
-      cursorElement.classList.add("big")
-    } else {
-      cursorElement.classList.remove("big")
-    }
-    if (hoverTarget.hasAttribute('data-cursor-invert') || hoverTarget.parentElement?.hasAttribute('data-cursor-invert')) {
-      cursorElement.classList.add("invert")
-    } else {
-      cursorElement.classList.remove("invert")
-    }
+  init()
+  document.addEventListener('astro:after-swap', () => {
+    init()
   })
 </script>

src/components/Footer.astro

@@ -39,4 +39,9 @@
 <script>
   const yearElement = document.getElementById("copyright-year") as HTMLSpanElement
   yearElement.innerText = new Date().getFullYear().toString()
+
+  document.addEventListener('astro:after-swap', () => {
+    const yearElement = document.getElementById("copyright-year") as HTMLSpanElement
+    yearElement.innerText = new Date().getFullYear().toString()
+  })
 </script>

src/components/Hero.astro

@@ -98,7 +98,6 @@ import heroImage from '../assets/images/winter-wonderland.jpg'
     line-height: 100%;
     padding: 1em 2em;
     text-decoration: none;
-    color: inherit;
     border-radius: 100vmax;
   }
   .button.primary {

src/components/Navbar.astro

@@ -1,10 +1,10 @@
 ---
 
 ---
-<div class="container navigation">
+<div class="container navigation" transition:persist="navbar">
   <div class="content">
     <a class="logo" href="/" data-cursor-big="">
-      <img src="/favicon.pride.svg" alt="m logo">
+      <img src="/favicon.svg" alt="m logo">
       Myrstad
     </a>
     <input type="checkbox" id="navigation-toggle" aria-controls="navigation" aria-label="Åpne/lukke navigasjon">

src/components/ProjectCard.astro

@@ -10,17 +10,18 @@ interface Props {
 }
 
 const { style, image, title, href="#", alt} = Astro.props
+const slug = href.split("/")[href.split("/").length-1]
 ---
 
 <div class:list={["project", style]}>
   <div class="content">
     <a href={href} data-cursor-big="">
-      <h3>{title}</h3>
+      <h3 transition:name={`title-${slug}`}>{title}</h3>
     </a>
     <slot></slot>
   </div>
   <div class="image">
-    <Image src={image} alt={alt} width={1205} height={652} quality={100} />
+    <Image src={image} alt={alt} width={1205} height={652} quality={100} transition:name={`image-${slug}`} transition:animate={"none"} />
     <a href={href} class="button" data-cursor-big="">
       Se prosjektet -->
     </a>

src/components/Projects.astro

@@ -9,7 +9,7 @@ import tokiponaImage from '../assets/images/tokipona.png'
   <div class="container">
     <h2>Prosjekter</h2>
     <div class="items">
-      <ProjectCard title="Myrstadbloggen" style="left" image={myrstadbloggenImage} alt="Logo til myrstadbloggen" href="https://blog.mortenmyrstad.no/">
+      <ProjectCard title="Myrstadbloggen" style="left" image={myrstadbloggenImage} alt="Logo til myrstadbloggen" href="/prosjekt/myrstad-bloggen">
         Dette var årets sommerprosjekt, bygget med Astro, hvorfor ikke bruke sommeren til å lage en blogg? Og hvorfor ikke sjekke den ut?
       </ProjectCard>
       <ProjectCard title="Toki Pona Ordbok" style="right" image={tokiponaImage} alt="Illustrasjon av ordboken / appen" href="/toki-pona-project/">

src/content/config.ts

@@ -0,0 +1,28 @@
+// 1. Import utilities from `astro:content`
+import { z, defineCollection } from 'astro:content';
+
+// 2. Define a `type` and `schema` for each collection
+const projectsCollection = defineCollection({
+  type: 'content', // v2.5.0 and later
+  schema: ({ image }) => z.object({
+    title: z.string(),
+    description: z.string(),
+    image: z.object({
+      src: image(),
+      alt: z.string()
+    }),
+    projectLink: z.object({
+      href: z.string(),
+      text: z.string(),
+    }),
+    githubLink: z.object({
+      href: z.string(),
+      text: z.string(),
+    }),
+  }),
+});
+
+// 3. Export a single `collections` object to register your collection(s)
+export const collections = {
+  'projects': projectsCollection,
+};

src/content/projects/myrstad-bloggen.md

@@ -0,0 +1,21 @@
+---
+# layout: ../../layouts/ProjectLayout.astro
+title: Myrstad Bloggen
+description: Dette var årets sommerprosjekt, bygget med Astro, hvorfor ikke bruke sommeren til å lage en blogg? Og hvorfor ikke sjekke den ut?
+image:
+  src: "../../assets/images/myrstadbloggen.png"
+  alt: test for nå!
+projectLink:
+  href: https://blog.mortenmyrstad.no/
+  text: Se nettsiden -->
+githubLink:
+  href: https://github.com/Myrstad/myrstad-bloggen
+  text: Kildekode -->
+---
+
+## Dette er enn så lenge kun en test
+
+Men tusen hjertelig takk for at du leser denne nettsiden. Dette er nå enn så lenge for å teste på mobil, om cache-control fungerer som det skal på Firefox, og litt andre småting. Jeg har gjort store endringer! Git viser 19 filer er endret, dog mye av dette er "refactoring" er det en to-tre dagers arbeid for min del.
+
+Heldigvis fungerer alt som det skal (håper jeg). Så er det bare å sjekke ut bloggen, den er ikke aktiv, men jeg likte å jobbe på den. Både design og implementasjon!
+

src/layouts/BaseLayout.astro

@@ -0,0 +1,46 @@
+---
+import Cursor from '../components/Cursor.astro';
+import Navbar from '../components/Navbar.astro';
+import Footer from '../components/Footer.astro';
+
+import "../styles/global.css"
+import { ViewTransitions } from 'astro:transitions';
+
+interface Props {
+	title: string;
+	description: string;
+}
+
+const { title, description } = Astro.props;
+---
+
+<!doctype html>
+<html lang="no">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+		<!-- SEO & SOCIALS -->
+		<title>{title}</title>
+		<meta name="description" content={description} />
+		<meta name="theme-color" content="#D7E3F4">
+		<meta property="og:locale" content="no_NO">
+		<meta property="og:url" content="http://mortenmyrstad.no/" />
+		<meta property="og:type" content="website" />
+		<meta property="og:title" content={title} />
+		<meta property="og:description" content={description} />
+		<meta property="og:image" content="/images/website-socials.png" />
+		<meta name="twitter:card" content="summary_large_image"></meta>
+
+		<ViewTransitions />
+	</head>
+	<body>
+		<Cursor transition:persist></Cursor>
+		<Navbar transition:persist></Navbar>
+		<slot />
+		<Footer transition:persist></Footer>
+	</body>
+</html>