Add downloada links to projects pages

packages/website/src/lib/GhReleasesDownload.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import type { Endpoints } from "@octokit/types";
+
+    export let releaseData: Endpoints["GET /repos/{owner}/{repo}/releases/latest"]["response"]["data"];
+    // console.log(releaseData);
+</script>
+
+<div class="release">
+    {#if navigator}
+        {#if navigator.platform.startsWith("Win")}
+            {@const asset  =releaseData.assets.filter((a) => a.name.endsWith(".exe"))[0]}
+            {#if asset}
+                <a href={asset.browser_download_url}>Download for Windows</a>
+            {/if}
+        {:else if navigator.platform.startsWith("Mac")}
+        {@const asset  =releaseData.assets.filter((a) => a.name.endsWith(".dmg"))[0]}
+        {#if asset}
+            <a href={asset.browser_download_url}>Download for MacOS</a>
+        {/if}
+
+        {:else if navigator.platform.startsWith("Linux")}
+
+        {@const asset  =releaseData.assets.filter((a) => a.name.endsWith(".AppImage"))[0]}
+        {#if asset}
+            <a href={asset.browser_download_url}>Download AppImage</a>
+        {/if}
+        {/if}
+    {/if}
+    <p>Latest release: <a href={releaseData.html_url}>{releaseData.name}</a></p>
+</div>

packages/website/src/routes/projects/[slug]/+page.server.ts

@@ -1,5 +1,12 @@
 import { pages } from './projects'
 import { error } from '@sveltejs/kit'
+import TTLCache, { } from "@isaacs/ttlcache";
+import { parse } from "@tusbar/cache-control";
+const cache = new TTLCache({ max: 10000, ttl: 1000 })
+
+import type { Endpoints } from "@octokit/types";
+
+let repoRegex = new RegExp("https?://github\.com/(?<repo>[a-zA-Z0-9]+/[a-zA-Z0-9]+)/?")
 
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ params }) {
@@ -12,7 +19,30 @@ export async function load({ params }) {
         throw error(404, 'Post not found')
     }
 
+    let ghReleaseData: Endpoints["GET /repos/{owner}/{repo}/releases/latest"]["response"]["data"] | undefined;
+
+    let repo = (page.repo as string).match(repoRegex)?.groups?.repo
+    if (repo) {
+        if (!cache.has(repo)) {
+            // console.log("cache miss")
+            ghReleaseData = await fetch("https://api.github.com/repos/" + repo + "/releases/latest").then(async (res) => {
+                let json = await res.json()
+                let ttl = (parse(res.headers.get("cache-control") || undefined)?.maxAge || 60) * 1000
+                cache.set(repo, json, { ttl })
+                return json
+            })
+        } else {
+            // console.log("cache hit")
+            ghReleaseData = cache.get(repo) as typeof ghReleaseData
+        }
+        // .then((data) => {
+        //     // console.log(data)
+        // })
+
+    }
+
     return {
-        page
+        page,
+        ghReleaseData
     }
 }

packages/website/src/routes/projects/[slug]/+page.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
     // https://github.com/mattjennings/sveltekit-blog-template/blob/main/src/routes/post/%5Bslug%5D/%2Bpage.svelte
-    
+
     import SvelteSeo from "svelte-seo";
     export let data;
-    import { SITE_URL } from '$lib/metadata';
+    import { SITE_URL } from "$lib/metadata";
+    import GhReleasesDownload from "$lib/GhReleasesDownload.svelte";
+    // let GhReleasesDownload: Promise<any>;
+    // if (data.ghReleaseData) {
+    //     GhReleasesDownload = import("$lib/GhReleasesDownload.svelte").then((m) => m.default)
+    // }
+
+    // console.log(data.ghReleaseData)
 </script>
 
 <SvelteSeo
@@ -11,4 +18,14 @@
     canonical={SITE_URL + "/projects/" + data.post.slug}
 />
 <h1>{data.post.title}</h1>
-<svelte:component this={data.component} />
+<!-- {#await GhReleasesDownload}
+    
+{:then component} 
+    <svelte:component this={component} releaseData={data.ghReleaseData} />
+{/await} -->
+
+{#if data.ghReleaseData}
+    <GhReleasesDownload releaseData={data.ghReleaseData} />
+{/if}
+
+<svelte:component this={data.component} />

packages/website/src/routes/projects/[slug]/+page.ts

@@ -14,8 +14,10 @@ export async function load({ data }) {
         await import("Notes/Projects/" + data.page.filepath.name + ".md")
     // console.log(data.page.filepath)
 
+
     return {
         post: data.page,
+        ghReleaseData: data.ghReleaseData,
         component: component.default
     }
 }