astro4 page transitions

src/layouts/base.astro

@@ -1,4 +1,6 @@
 ---
+import { ViewTransitions } from 'astro:transitions';
+
 import * as config from '../config.yaml';
 import core from '../core.json';
 import '../styles/base.css';
@@ -19,6 +21,8 @@ function genHeading(str) {
 		<meta name="generator" content={Astro.generator} />
 		<meta name="description" content={description} />
 		<title>{title ? title + ' | ' + config.title : config.title}</title>
+
+		<ViewTransitions />
 		<link
 			rel="preload"
 			href="/fonts/archivo-regular-latin-ext.woff2"

src/pages/events.astro

@@ -63,7 +63,7 @@ for (const year of pastYears.reverse()) {
 		</p>
 	</div>
 
-	<script>
+	<script is:inline>
 		document.querySelectorAll('.event-header .header-base').forEach((el) => {
 			el.addEventListener('click', (ev) => {
 				if (ev.target.tagName === "BUTTON") {

src/pages/index.astro

@@ -117,7 +117,7 @@ for (const ev of events) {
 
 		<AboutFooter />
 	</div>
-	<script>
+	<script is:inline>
 		document.querySelectorAll('.w3pn-hp-grid > div').forEach(el => {
 			el.addEventListener('click', () => {
 			  window.location = el.getAttribute('data-url');