feat: add github component (#78)

tconbeer · Apr 30, 2024 · 495653d · 495653d
1 parent 3810a09
commit 495653d
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 50 deletions.
diff --git a/src/docs/contributing/adapter-guide.md b/src/docs/contributing/adapter-guide.md
@@ -2,6 +2,7 @@
 title: Creating an Adapter
 menuOrder: 2100
 ---
+
 <script>
     import tx_manual from "$lib/assets/docs/tx-manual.png"
 </script>
@@ -65,10 +66,10 @@ A cursor must provide three methods: `columns`, `set_limit`, and `fetchall`.
 
 - `fetchall()` should return all of the data returned by the query, in one of several accepted formats. It will be called exactly once on each cursor. The acceptable formats are declared by the `AutoBackendType` of Harlequin's Data Table widget (source [here](https://github.com/tconbeer/textual-fastdatatable/blob/a64308ea7e2e6de24df2f1d9c6cc1d024b2a6395/src/textual_fastdatatable/backend.py#L20-L27)). They are:
 
-   1. A PyArrow [`Table`](https://arrow.apache.org/docs/python/generated/pyarrow.Table.html) or [`RecordBatch`](https://arrow.apache.org/docs/python/generated/pyarrow.RecordBatch.html).
-   1. A `Mapping` of `str` to `Sequence`, where keys represent column names and the sequences are the data in each column. For example: `{"col_a": [1, 2, 3], "col_b": ["a", "b", "c"]}`
-   1. A `Sequence` of `Iterable`s, like a `list` of `tuple`s, representing rows of data (or records). Such a sequence **MUST NOT** contain a header row.
-   1. A `pathlib.Path` or `str` path to a local Parquet file.
+  1.  A PyArrow [`Table`](https://arrow.apache.org/docs/python/generated/pyarrow.Table.html) or [`RecordBatch`](https://arrow.apache.org/docs/python/generated/pyarrow.RecordBatch.html).
+  1.  A `Mapping` of `str` to `Sequence`, where keys represent column names and the sequences are the data in each column. For example: `{"col_a": [1, 2, 3], "col_b": ["a", "b", "c"]}`
+  1.  A `Sequence` of `Iterable`s, like a `list` of `tuple`s, representing rows of data (or records). Such a sequence **MUST NOT** contain a header row.
+  1.  A `pathlib.Path` or `str` path to a local Parquet file.
 
 ### Adapter Options
 

diff --git a/src/lib/assets/icons/icons8-code-fork-16.png b/src/lib/assets/icons/icons8-code-fork-16.png
diff --git a/src/lib/assets/icons/icons8-github-30.png b/src/lib/assets/icons/icons8-github-30.png
diff --git a/src/lib/assets/icons/icons8-star-16.png b/src/lib/assets/icons/icons8-star-16.png
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
@@ -0,0 +1,24 @@
+export const config = {
+  isr: {
+    expiration: 60 * 60 * 4,
+  },
+};
+
+export async function load({ fetch }) {
+  const headers = new Headers({
+    Accept: "application/vnd.github+json",
+    "X-GitHub-Api-Version": "2022-11-28",
+  });
+  const options = {
+    headers: headers,
+  };
+  const endpoint = "https://api.github.com/repos/tconbeer/harlequin";
+  const request = new Request(endpoint, options);
+  const response = await fetch(request);
+  const body = await response.json();
+  const data = (({ forks_count, stargazers_count }) => ({
+    forks_count,
+    stargazers_count,
+  }))(body);
+  return data;
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -3,6 +3,9 @@
   import Header from "./header.svelte";
   import { title, subtitle, description } from "$lib/config";
   import "../app.css";
+  import type { LayoutData } from "./$types";
+
+  export let data: LayoutData;
 </script>
 
 <svelte:head>
@@ -11,7 +14,7 @@
 </svelte:head>
 
 <div class="mx-auto max-w-screen-lg px-6 selection:bg-pink">
-  <Header />
+  <Header {data} />
 
   <main>
     <slot />

diff --git a/src/routes/github.svelte b/src/routes/github.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import octocat from "$lib/assets/icons/icons8-github-30.png";
+  import star from "$lib/assets/icons/icons8-star-16.png";
+  import fork from "$lib/assets/icons/icons8-code-fork-16.png";
+  export let data;
+</script>
+
+<div
+  class="rounded-full py-1 transition-transform duration-200 hover:scale-105 hover:bg-green hover:shadow-lg active:translate-x-1 active:translate-y-1 sm:py-3 sm:pl-3 sm:pr-4"
+>
+  <a
+    href="https://github.com/tconbeer/harlequin"
+    target="_blank"
+    title="Go to repository"
+    class="text-inherit no-underline"
+  >
+    <div class="flex">
+      <img src={octocat} alt="GitHub icon" class="my-auto h-[30px] w-[30px]" />
+      <div>
+        <div class="text-sm">tconbeer/harlequin</div>
+        <div class="flex text-xs">
+          <img
+            src={star}
+            alt="GitHub stars"
+            class="h-[16px] w-[16px]"
+          />{data.stargazers_count.toLocaleString()}&nbsp;<img
+            src={fork}
+            alt="GitHub forks"
+            class="h-[16px] w-[16px]"
+          />{data.forks_count.toLocaleString()}
+        </div>
+      </div>
+    </div>
+  </a>
+</div>
diff --git a/src/routes/header.svelte b/src/routes/header.svelte
@@ -2,6 +2,9 @@
   import { title, subtitle } from "$lib/config";
   import hamburger from "$lib/assets/icons/icons8-database-50.png";
   import { navigating } from "$app/stores";
+  import Github from "./github.svelte";
+
+  export let data;
 
   let showMenu = false;
   $: if ($navigating) showMenu = false;
@@ -11,90 +14,87 @@
   }
 </script>
 
-<nav class="my-4 flex w-full flex-wrap justify-between">
-  <div>
+<nav class="my-4 block w-full justify-between md:flex">
+  <div class="flex justify-between">
     <div>
-      <a href="/" class="font-display text-4xl text-inherit">{title}</a>
-    </div>
-    <div class="mt-1">
-      <span class="relative">
-        <span
-          class="absolute -inset-1 block -skew-y-3 bg-pink"
-          aria-hidden="true"
-        />
-        <span class="relative text-sm text-black selection:bg-purple"
-          >{subtitle}</span
-        >
-      </span>
+      <div>
+        <a href="/" class="font-display text-4xl text-inherit">{title}</a>
+      </div>
+      <div class="mt-1">
+        <span class="relative">
+          <span
+            class="absolute -inset-1 block -skew-y-3 bg-pink"
+            aria-hidden="true"
+          />
+          <span class="relative text-sm text-black selection:bg-purple"
+            >{subtitle}</span
+          >
+        </span>
+      </div>
     </div>
-  </div>
 
-  <div
-    class="pt-4 transition-transform duration-700 sm:hidden {showMenu
-      ? 'rotate-180'
-      : 'rotate-0'} "
-  >
-    <button
-      on:click={toggleNavbar}
-      on:keypress={toggleNavbar}
-      aria-label="Click for nav menu."
+    <div
+      class="pt-4 transition-transform duration-700 md:hidden {showMenu
+        ? 'rotate-180'
+        : 'rotate-0'} "
     >
-      <img
-        src={hamburger}
-        class="h-8 w-8"
-        alt="A line drawing of a database, in lieu of a hamburger."
-      />
-    </button>
+      <button
+        on:click={toggleNavbar}
+        on:keypress={toggleNavbar}
+        aria-label="Click for nav menu."
+      >
+        <img
+          src={hamburger}
+          class="h-8 w-8"
+          alt="A line drawing of a database, in lieu of a hamburger."
+        />
+      </button>
+    </div>
   </div>
 
   <ul
-    class="mt-6 sm:mt-0 {showMenu
-      ? 'flex'
-      : 'hidden'} mx-auto gap-4 sm:mx-0 sm:flex sm:gap-8 sm:pt-2"
+    class="mt-4 md:mt-0 {showMenu
+      ? 'block md:flex'
+      : 'hidden md:flex'} mx-0 border-b border-t border-purple md:gap-8 md:border-none md:pt-2"
   >
-    <li class="hidden sm:block">
+    <li class="hidden lg:my-auto lg:block">
       <a
         href="/docs/getting-started"
         class="font-bold text-inherit no-underline decoration-green decoration-4 underline-offset-4 hover:underline"
         >Get Started</a
       >
     </li>
-    <li>
+    <li class="my-2 sm:my-auto">
       <a
         href="/docs/getting-started"
         class="text-inherit no-underline decoration-green decoration-4 underline-offset-4 hover:underline"
         >Docs</a
       >
     </li>
-    <li>
+    <li class="my-2 sm:my-auto">
       <a
         href="/blog"
         class="text-inherit no-underline decoration-green decoration-4 underline-offset-4 hover:underline"
         >Blog</a
       >
     </li>
-    <li>
+    <li class="my-2 sm:my-auto">
       <a
         href="/about"
         class="text-inherit no-underline decoration-green decoration-4 underline-offset-4 hover:underline"
         >About</a
       >
     </li>
-    <li>
+    <li class="my-2 sm:my-auto">
       <a
         href="https://github.com/sponsors/tconbeer"
         target="_blank"
         class="text-inherit no-underline decoration-green decoration-4 underline-offset-4 hover:underline"
         >Sponsor
       </a>
     </li>
-    <li>
-      <a
-        href="https://github.com/tconbeer/harlequin"
-        target="_blank"
-        class="text-inherit no-underline decoration-green decoration-4 underline-offset-4 hover:underline"
-        >GitHub
-      </a>
+    <li class="my-2 sm:my-auto">
+      <Github {data} />
     </li>
   </ul>
 </nav>