Add source links to showcases with GitHub logo

Author: max-lt

src/lib/components/Showcase.svelte

@@ -4,12 +4,13 @@
     description: string;
     url: string;
     screenshot: string;
+    source?: string;
   }
 
-  let { title, description, url, screenshot }: Props = $props();
+  let { title, description, url, screenshot, source }: Props = $props();
 </script>
 
-<div class="overflow-hidden rounded-xl border border-slate-100 bg-white shadow-[0_5px_20px_#0001]">
+<div class="overflow-hidden flex flex-col rounded-xl border border-slate-100 bg-white shadow-[0_5px_20px_#0001]">
   <div class="relative flex h-10 items-center justify-between border-b border-slate-100 px-4">
     <div class="flex items-center space-x-2">
       <div class="h-3 w-3 rounded-full bg-slate-200"></div>
@@ -30,29 +31,44 @@
     <img src={screenshot} alt={title} class="h-full w-full object-cover object-top" />
   </div>
 
-  <div class="border-t border-slate-100 p-4">
-    <p class="mb-3 text-sm text-slate-600">{description}</p>
-    <a
-      href={url}
-      target="_blank"
-      rel="noopener noreferrer"
-      class="inline-flex items-center gap-2 text-sm font-medium text-blue-500 transition-colors hover:text-blue-600"
-    >
-      View Live
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        class="h-4 w-4"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
-        />
-      </svg>
-    </a>
+  <div class="border-t border-slate-100 p-4 flex-1">
+    <div class=" justify-between flex flex-col h-full">
+      <p class="mb-3 text-sm text-slate-600">{description}</p>
+      <div class="flex items-center justify-between">
+        <a
+          href={url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 text-sm font-medium text-blue-500 transition-colors hover:text-blue-600"
+        >
+          View Live
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="h-4 w-4"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+            />
+          </svg>
+        </a>
+        {#if source}
+          <a
+            href={source}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 text-sm font-medium text-slate-500 transition-colors hover:text-slate-700"
+          >
+            Source
+            <img src="/github.svg" alt="github" class="h-4 w-4" />
+          </a>
+        {/if}
+      </div>
+    </div>
   </div>
 </div>

src/routes/+page.svelte

@@ -14,13 +14,15 @@
       title: 'time.workers.rocks',
       description: 'Application with SSR-rendered clocks. Clock hands are positioned at load time.',
       url: 'https://time.workers.rocks',
-      screenshot: 'https://cdn.optimage.cloud/jSskR2oYmZSZ/512/time.webp'
+      screenshot: 'https://cdn.optimage.cloud/jSskR2oYmZSZ/512/time.webp',
+      source: 'https://github.com/max-lt/world-time-app'
     },
     {
       title: 'httpbin.workers.rocks',
       description: 'A replica of the famous httpbin tool for testing HTTP requests.',
       url: 'https://httpbin.workers.rocks',
-      screenshot: 'https://cdn.optimage.cloud/jSskR2oYmZSZ/512/httpbin.webp'
+      screenshot: 'https://cdn.optimage.cloud/jSskR2oYmZSZ/512/httpbin.webp',
+      source: 'https://github.com/max-lt/httpbin'
     },
     {
       title: 'qr-code.workers.rocks',
@@ -38,7 +40,8 @@
       title: 'rock-paper-scissors.workers.rocks',
       description: 'Provably fair Rock Paper Scissors game',
       url: 'https://rock-paper-scissors.workers.rocks',
-      screenshot: 'https://cdn.optimage.cloud/jSskR2oYmZSZ/512/rock-paper-scissors.webp'
+      screenshot: 'https://cdn.optimage.cloud/jSskR2oYmZSZ/512/rock-paper-scissors.webp',
+      source: 'https://github.com/max-lt/rock-paper-scissors'
     },
     {
       title: 'ip-info.workers.rocks',
@@ -149,6 +152,7 @@
             description={showcase.description}
             url={showcase.url}
             screenshot={showcase.screenshot}
+            source={showcase.source}
           />
         {/each}
       </div>