From acd0f000cac3da235f95364b3e50de9d567dfa0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=20Sch=C3=B6nmann?=
 <102795185+tom-bywild@users.noreply.github.com>
Date: Thu, 5 Jan 2023 10:22:55 +0100
Subject: [PATCH] chore: update stats UI (#126)

* feat: add 1h range

* chore: update label generation

* chore: update crane-link

* chore: update breadcrumbs
---
 web/scripts/generate-trends.ts                |  2 +-
 web/src/lib/blocks/views/Hero.svelte          |  6 +-
 web/src/lib/page/views/BasePageInit.svelte    |  5 +-
 web/src/lib/statistics/models/github.ts       | 37 +++++++++-
 .../github/stars/[range]/+page.server.ts      |  2 +-
 .../github/stars/[range]/+page.svelte         | 68 ++++++++-----------
 6 files changed, 77 insertions(+), 43 deletions(-)

diff --git a/web/scripts/generate-trends.ts b/web/scripts/generate-trends.ts
index c2e91a47..93c96db0 100644
--- a/web/scripts/generate-trends.ts
+++ b/web/scripts/generate-trends.ts
@@ -11,7 +11,7 @@ import path from 'node:path';
 // @ts-ignore Issue w/ node types.
 const cwd = process.cwd();
 const base = path.join(cwd, 'static', 'data', 'stats');
-const ranges = ['6h', '12h', '24h', '48h', '72h', '1w', '2w', '1m'];
+const ranges = ['1h', '6h', '12h', '24h', '48h', '72h', '1w', '2w', '1m'];
 
 /**
  * Simple parser for CLI arguments.
diff --git a/web/src/lib/blocks/views/Hero.svelte b/web/src/lib/blocks/views/Hero.svelte
index db55a16b..fee17964 100644
--- a/web/src/lib/blocks/views/Hero.svelte
+++ b/web/src/lib/blocks/views/Hero.svelte
@@ -12,6 +12,9 @@
   export let textVariant: 'dense' | 'fit' | undefined = undefined;
   export let variant: 'prominent' | undefined = undefined;
 
+  let cn: string | undefined = undefined;
+  export { cn as class };
+
   const isSingleLongTitle = checkForSingleLongTitle(title);
 
   const defaultVariant = `
@@ -37,7 +40,8 @@
       'h-full': height === 'full',
       'flex-1': height === 'flex',
       fixed: isFixed
-    }
+    },
+    cn
   )}
 >
   <h1
diff --git a/web/src/lib/page/views/BasePageInit.svelte b/web/src/lib/page/views/BasePageInit.svelte
index d4711c4d..5c7f2b32 100644
--- a/web/src/lib/page/views/BasePageInit.svelte
+++ b/web/src/lib/page/views/BasePageInit.svelte
@@ -6,10 +6,13 @@
 
   export let title: string;
   export let path: string;
+  export let withBreadcrumb = true;
 </script>
 
 <BaseMeta {title} {path} />
-<BreadcrumbMeta items={[{ name: title, href: path }]} />
+{#if withBreadcrumb}
+  <BreadcrumbMeta items={[{ name: title, href: path }]} />
+{/if}
 <ColorScheme scheme="dark" />
 
 <SearchInit />
diff --git a/web/src/lib/statistics/models/github.ts b/web/src/lib/statistics/models/github.ts
index e27c590f..5a930023 100644
--- a/web/src/lib/statistics/models/github.ts
+++ b/web/src/lib/statistics/models/github.ts
@@ -1,6 +1,41 @@
 import type { GithubTrendItem } from '../types/github';
 
-export const githubTrendRanges = ['6h', '12h', '24h', '48h', '72h', '1w', '2w', '1m'];
+export const githubTrendRanges = [
+  '1h',
+  '6h',
+  '12h',
+  '24h',
+  '48h',
+  '72h',
+  '1w',
+  '2w',
+  '1m'
+] as const;
+
+export function mapRangeToLabel(source: string) {
+  switch (source) {
+    case '1h':
+      return '1 hour';
+    case '6h':
+      return '6 hours';
+    case '12h':
+      return '12 hours';
+    case '24h':
+      return '24 hours';
+    case '48h':
+      return '48 hours';
+    case '72h':
+      return '72 hours';
+    case '1w':
+      return '1 week';
+    case '2w':
+      return '2 weeks';
+    case '1m':
+      return '1 month';
+    default:
+      return source;
+  }
+}
 
 export async function fetchReposByStars(params: {
   range: typeof githubTrendRanges[number];
diff --git a/web/src/routes/statistics/github/stars/[range]/+page.server.ts b/web/src/routes/statistics/github/stars/[range]/+page.server.ts
index 45b75042..5c69c28e 100644
--- a/web/src/routes/statistics/github/stars/[range]/+page.server.ts
+++ b/web/src/routes/statistics/github/stars/[range]/+page.server.ts
@@ -9,7 +9,7 @@ export const load: PageServerLoad = async ({ params, setHeaders }) => {
   });
 
   // @ts-expect-error Range not picked up by type inference.
-  const range: string = params.range;
+  const range: typeof githubTrendRanges[number] = params.range;
 
   if (!githubTrendRanges.includes(range)) {
     throw error(401, `Invalid range: ${range}`);
diff --git a/web/src/routes/statistics/github/stars/[range]/+page.svelte b/web/src/routes/statistics/github/stars/[range]/+page.svelte
index 9eb915d2..83656bcc 100644
--- a/web/src/routes/statistics/github/stars/[range]/+page.svelte
+++ b/web/src/routes/statistics/github/stars/[range]/+page.svelte
@@ -9,6 +9,8 @@
   import CommonControls from '$lib/controls/views/CommonControls.svelte';
   import Link from '$lib/display/views/Link.svelte';
   import BasePageInit from '$lib/page/views/BasePageInit.svelte';
+  import BreadcrumbMeta from '$lib/seo/views/BreadcrumbMeta.svelte';
+  import { mapRangeToLabel } from '$lib/statistics/models/github';
   import clsx from 'clsx';
   import type { PageServerData } from './$types';
 
@@ -16,35 +18,24 @@
   const { items, ranges } = data;
 
   let selectedRange = data.selectedRange;
-
-  const mapRangeToLabel = (source: string) => {
-    switch (source) {
-      case '6h':
-        return '6 hours';
-      case '12h':
-        return '12 hours';
-      case '24h':
-        return '24 hours';
-      case '48h':
-        return '48 hours';
-      case '72h':
-        return '72 hours';
-      case '1w':
-        return '1 week';
-      case '2w':
-        return '2 weeks';
-      case '1m':
-        return '1 month';
-      default:
-        return source;
-    }
-  };
 </script>
 
 <BasePageInit
+  withBreadcrumb={false}
   title="Trending R packages by Github stars for the last {mapRangeToLabel(selectedRange)}"
   path="/statistics/github/stars/{selectedRange}"
 />
+<BreadcrumbMeta
+  items={[
+    { name: 'Statistics', href: '/statistics' },
+    { name: 'Github statistics', href: '/github/statistics' },
+    { name: 'Trending R packages by Github stars', href: '/statistics/github/stars' },
+    {
+      name: `Trending R packages by Github stars for the last ${mapRangeToLabel(selectedRange)}`,
+      href: `/statistics/github/stars/${selectedRange}`
+    }
+  ]}
+/>
 <CommonControls variant="translucent" />
 
 <main>
@@ -56,9 +47,10 @@
     subtitleSize="xl"
     height="50"
     variant="prominent"
+    theme="gradient-dark-zinc"
   />
 
-  <SheetContent offset="50" class=" text-neutral-50 space-y-20 lg:space-y-40 pb-60 bg-zinc-900">
+  <SheetContent offset="50" class=" text-neutral-50 space-y-20 lg:space-y-52 pb-60 bg-zinc-900">
     <Section withSpacingY="md" withPaddingX maxWidth="xl" class="mx-auto">
       <div class="text-lg flex items-center justify-center gap-x-2">
         Trends for last
@@ -90,13 +82,13 @@
 
       <SubGrid size="1" class="gap-8">
         {#each items as { original, trend, crane }}
-          <SubGridItem
-            withBorder
-            withSpaceY="md"
-            withValueSpaceY="xs"
-            key={original.name}
-            emphasis="key"
-          >
+          <SubGridItem withBorder withSpaceY="md" withValueSpaceY="xs" key="" emphasis="key">
+            <Link
+              slot="key"
+              title={original.name}
+              href={crane.packageSlug ? `/package/${crane.packageSlug}` : original.html_url}
+              >{original.name}
+            </Link>
             <p class="flex items-center space-x-2">
               <span class="text-sm"
                 >by
@@ -143,14 +135,14 @@
               </span>
             </p>
 
-            <div class="flex items-center space-x-2 text-neutral-200">
+            <div class="flex items-center space-x-3 pt-2 text-neutral-200">
               {#if crane.packageSlug}
-                <SubGridIcon
-                  meta={{
-                    url: `/package/${crane.packageSlug}`,
-                    icon: 'carbon:data-view-alt'
-                  }}
-                />
+                <Link
+                  href="/package/{crane.packageSlug}"
+                  class="rounded border border-neutral-500 px-2 py-1 text-xs"
+                >
+                  Available on <strong>CRAN/E</strong>
+                </Link>
               {/if}
               <SubGridIcon
                 meta={{