From 9b961abd7c4bba6f7b0b1759dbf2d1eca92a606e Mon Sep 17 00:00:00 2001
From: Adam Matthiesen <amatthiesen@outlook.com>
Date: Wed, 17 Jan 2024 19:12:15 -0800
Subject: [PATCH] fixes viewtransitions and header issues

---
 src/components/BaseHead.astro    | 86 --------------------------------
 src/components/PostPreview.astro |  2 +-
 src/layouts/default.astro        | 79 ++++++++++++++++++++++++++---
 3 files changed, 74 insertions(+), 93 deletions(-)
 delete mode 100644 src/components/BaseHead.astro

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
deleted file mode 100644
index e484bc02..00000000
--- a/src/components/BaseHead.astro
+++ /dev/null
@@ -1,86 +0,0 @@
----
-import { AstroFont } from "astro-font";
-import { ViewTransitions } from 'astro:transitions';
-import type { Settings } from "../api";
-
-export type Props = {
-  title: string;
-  description: string;
-  permalink?: string;
-  image?: string;
-  settings: Settings;
-};
-
-const { description, permalink, image, settings, title } = Astro.props as Props;
----
-
-<AstroFont
-	config={[
-		{
-			src: [],
-			name: "Inter",
-			preload: false,
-			display: "swap",
-			selector: "html",
-			fallback: "sans-serif",
-			googleFontsURL: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap',
-		},
-	]}
-/>
-
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-
-<title>{title}</title>
-<ViewTransitions />
-<meta name="title" content={title} />
-{description && <meta name="description" content={description} />}
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-<link rel="icon" type="image/png" sizes="32x32" href={settings.icon} />
-<link rel="shortcut icon" type="image/png" sizes="16x16" href={settings.icon} />
-<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-
-<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-<meta name="msapplication-TileColor" content="#da532c" />
-<meta name="msapplication-config" content="/browserconfig.xml" />
-<meta name="theme-color" content="#ffffff" />
-
-<!-- Open Graph Tags (Facebook) -->
-<meta property="og:type" content="website" />
-<meta property="og:title" content={title} />
-{permalink && <meta property="og:url" content={permalink} />}
-{description && <meta property="og:description" content={description} />}
-{image && <meta property="og:image" content={image} />}
-
-<!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:title" content={title} />
-{permalink && <meta property="twitter:url" content={permalink} />}
-{description && <meta property="twitter:description" content={description} />}
-{image && <meta property="twitter:image" content={image} />}
-
-<!-- Link to the global style, or the file that imports constructs -->
-<link
-  rel="preload"
-  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
-  as="style"
-/>
-<link
-  rel="preload"
-  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
-  as="script"
-/>
-<link
-  rel="preload stylesheet"
-  href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
-  as="style"
-  onload="this.onload=null;this.rel='stylesheet'"
-  crossorigin
-/>
-<script
-  async
-  defer
-  src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
->
-
-</script>
diff --git a/src/components/PostPreview.astro b/src/components/PostPreview.astro
index 57c45a97..6c7149f9 100644
--- a/src/components/PostPreview.astro
+++ b/src/components/PostPreview.astro
@@ -18,7 +18,7 @@ const { post, settings, index, isHome = false } = Astro.props as Props;
     isHome && post.feature_image && index == 0 ? "post-card-large" : ""
   }`}
 >
-  <a class="post-card-image-link" href={`/${post.slug}`}>
+  <a class="post-card-image-link" href={`/${post.slug}`} data-astro-reload>
     <img
       class="post-card-image"
       srcset={`
diff --git a/src/layouts/default.astro b/src/layouts/default.astro
index 93bd703d..6733bb13 100644
--- a/src/layouts/default.astro
+++ b/src/layouts/default.astro
@@ -1,6 +1,7 @@
 ---
 import type { Settings } from "../api";
-import BaseHead from "../components/BaseHead.astro";
+import { AstroFont } from "astro-font";
+import ViewTransitions from "astro/components/ViewTransitions.astro";
 import MainLayout from "../components/MainLayout.astro";
 export type Props = {
   content?: {
@@ -8,21 +9,87 @@ export type Props = {
     description: string|undefined;
   };
   bodyClass?: string;
+  permalink?: string;
+  image?: string;
   settings: Settings;
 };
 
-const { content, settings, bodyClass = "" } = Astro.props as Props;
+const { permalink, image, content, settings, bodyClass = "" } = Astro.props as Props;
 const ghostAccentColor = settings.accent_color;
 console.log(settings.accent_color)
 ---
 
 <html lang="en" data-color-scheme="light">
   <head>
-    <BaseHead
-      title={content?.title ? `${settings.title} | ${content.title}` : "" }
-      description={content?.description ?? "Description"}
-      settings={settings}
+    <AstroFont
+      config={[
+        {
+          src: [],
+          name: "Inter",
+          preload: false,
+          display: "swap",
+          selector: "html",
+          fallback: "sans-serif",
+          googleFontsURL: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap',
+        },
+      ]}
     />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>{content?.title ? `${content.title} | ${settings.title}` : "" }</title>
+    <ViewTransitions />
+    <meta name="title" content={settings.title} />
+    {content?.description && <meta name="description" content={content?.description} />}
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href={settings.icon} />
+    <link rel="shortcut icon" type="image/png" sizes="16x16" href={settings.icon} />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="msapplication-config" content="/browserconfig.xml" />
+    <meta name="theme-color" content="#ffffff" />
+
+    <!-- Open Graph Tags (Facebook) -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={settings.title} />
+    {permalink && <meta property="og:url" content={permalink} />}
+    {content?.description && <meta property="og:description" content={content?.description} />}
+    {image && <meta property="og:image" content={image} />}
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:title" content={settings.title} />
+    {permalink && <meta property="twitter:url" content={permalink} />}
+    {content?.description && <meta property="twitter:description" content={content?.description} />}
+    {image && <meta property="twitter:image" content={image} />}
+
+    <!-- Link to the global style, or the file that imports constructs -->
+    <link
+      rel="preload"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
+      as="style"
+    />
+    <link
+      rel="preload"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
+      as="script"
+    />
+    <link
+      rel="preload stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+      crossorigin
+    />
+    <script
+      async
+      defer
+      src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"
+    >
+
+    </script>
   </head>
   <body class={bodyClass}>
     <MainLayout settings={settings}>