feat: add links to entire article header

components/PageHero.tsx

@@ -47,29 +47,25 @@ function Title(
   { children, link }: { children: ComponentChildren; link?: string },
 ) {
   const ctx = useContext(HeroContext);
+
+  const OuterTag = link ? "a" : "div";
+
   return (
-    <div
+    <OuterTag
+      href={link}
       class={`${
         ctx.image ? "noisy-gradient" : ""
       } after:opacity-90 flex gap-4 items-center ${ctx.image ? "pt-12" : ""}`}
     >
       <h2
-        class="relative text-4xl font-bold z-10"
+        class="flex gap-2 items-center text-4xl font-bold z-10"
         style={{ color: ctx.image ? "#1F1F1F" : "white" }}
       >
         {children}
         {link &&
-          (
+          <IconExternalLink />}
-            <a
-              href={link}
-              target="__blank"
-              class="p-2 inline-flex"
-            >
-              <IconExternalLink />
-            </a>
-          )}
       </h2>
-    </div>
+    </OuterTag>
   );
 }
 

lib/cache/image.ts

@@ -178,6 +178,6 @@ export async function setImage(
         ? { suffix: opts.suffix }
         : { width: opts.width, height: opts.height }),
     }),
-    { expires: 60 * 60 * 24 },
+    { expires: 60 * 60 * 24 * 7 /* 1 week */ },
   );
 }

routes/_layout.tsx

@@ -1,10 +1,10 @@
-import { LayoutProps } from "$fresh/server.ts";
+import { PageProps } from "$fresh/server.ts";
 import { resources } from "@lib/resources.ts";
 import { CSS, KATEX_CSS } from "https://deno.land/x/gfm@0.2.5/mod.ts";
-import { Head, Partial } from "$fresh/runtime.ts";
+import { Head } from "$fresh/runtime.ts";
 import { Emoji } from "@components/Emoji.tsx";
 
-export default function MyLayout({ Component }: LayoutProps) {
+export default function MyLayout({ Component }: PageProps) {
   return (
     <div
       class="md:grid mx-auto"
@@ -14,7 +14,7 @@ export default function MyLayout({ Component }: LayoutProps) {
         <style>{CSS}</style>
         <style>{KATEX_CSS}</style>
       </Head>
-      <aside class="p-4 hidden md:block" f-client-nav>
+      <aside class="p-4 hidden md:block">
         <nav class="min-h-fit rounded-3xl p-3 grid gap-3 fixed t-0">
           {Object.values(resources).map((m) => {
             return (
@@ -32,9 +32,7 @@ export default function MyLayout({ Component }: LayoutProps) {
         class="py-5"
         style={{ fontFamily: "Work Sans" }}
       >
-        <Partial name="content">
+        <Component />
-          <Component />
-        </Partial>
       </main>
     </div>
   );