From 3986c4ed6ae430dfdf4f14683d228f8468da1873 Mon Sep 17 00:00:00 2001
From: Clay McLeod <clay.l.mcleod@gmail.com>
Date: Sun, 13 Oct 2024 16:26:29 -0500
Subject: [PATCH] revise: multiple revisions to the website

---
 components/FrontPageCard.vue                  |   1 +
 components/molecules/docs/CrateCard.vue       |  75 +++----
 components/molecules/docs/crate-card/kind.ts  |   4 -
 components/molecules/docs/crate-card/types.ts |  25 +++
 pages/docs/index.vue                          | 210 ++++++++++++------
 pages/index.vue                               |  29 ++-
 6 files changed, 214 insertions(+), 130 deletions(-)
 delete mode 100644 components/molecules/docs/crate-card/kind.ts
 create mode 100644 components/molecules/docs/crate-card/types.ts

diff --git a/components/FrontPageCard.vue b/components/FrontPageCard.vue
index 1fc3a08..e4668ee 100644
--- a/components/FrontPageCard.vue
+++ b/components/FrontPageCard.vue
@@ -55,6 +55,7 @@ let cardClicked = () => {
   checked.value = !checked.value;
 
   if (checked.value) {
+    console.log(`Opening ${props.url}`);
     window.open(props.url, "_blank", "noopener,noreferrer");
   }
 };
diff --git a/components/molecules/docs/CrateCard.vue b/components/molecules/docs/CrateCard.vue
index 8981b70..0b57778 100644
--- a/components/molecules/docs/CrateCard.vue
+++ b/components/molecules/docs/CrateCard.vue
@@ -1,65 +1,66 @@
 <template>
-  <div class="card">
+  <div class="card relative">
+    <span v-if="crate.recentlyReleased && pingVisible" class="absolute top-1.5
+    right-1.5 flex h-2.5 w-2.5" :class="{
+      'opacity-0': !pingVisible,
+      'opacity-100': pingVisible
+    }" @click="pingVisible = false">
+      <UTooltip text="This crate was recently released.">
+        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-sky-500"></span>
+      </UTooltip>
+    </span>
     <div>
       <div class="header">
         <div class="title">
           In
-          <Icon :name="category.icon" />
-          {{ category.name }}
+          <Icon :name="crate.category.icon" />
+          {{ crate.category.name }}
 
           <div class="ml-1 font-normal text-xs font-mono">
             <div
               class="px-1 py-0.5 rounded-md text-green-900 dark:text-green-300 bg-green-300 dark:bg-green-900 border border-green-500"
-              v-if="kind === Kind.Library"
-            >
+              v-if="crate.kind === Kind.Library">
               lib
             </div>
             <div
               class="px-1 py-0.5 rounded-md text-purple-900 dark:text-purple-300 bg-purple-300 dark:bg-purple-900 border border-purple-500"
-              v-else-if="kind === Kind.Binary"
-            >
+              v-else-if="crate.kind === Kind.Binary">
               bin
             </div>
           </div>
         </div>
         <div class="flex gap-x-1.5">
-          <a
-            v-if="socials && socials.github"
+          <a v-if="crate.socials && crate.socials.github"
             class="flex items-center justify-center w-7 h-7 bg-gray-100 dark:bg-slate-950 border border-gray-200 rounded-full"
-            :href="socials.github"
-          >
+            :href="crate.socials.github">
             <Icon class="w-4 h-4" name="octicon:mark-github-16"></Icon>
           </a>
-          <a
-            v-if="socials && socials.docs"
+          <a v-if="crate.socials && crate.socials.docs"
             class="flex items-center justify-center w-7 h-7 bg-gray-100 dark:bg-slate-950 border border-gray-200 rounded-full"
-            :href="socials.docs"
-            :title="`Chat about ${name} in the rust-seq Zulip`"
-          >
+            :href="crate.socials.docs" :title="`Chat about ${crate.name} in the rust-seq Zulip`">
             <Icon class="w-4 h-4" name="heroicons-outline:book-open"></Icon>
           </a>
-          <a
-            v-if="socials && socials.zulip"
+          <a v-if="crate.socials && crate.socials.zulip"
             class="flex items-center justify-center w-7 h-7 bg-gray-100 dark:bg-slate-950 border border-gray-200 rounded-full"
             href="https://rustseq.zulipchat.com/join/coxb7c7b3bbahlfx7poeqqrd/"
-            :title="`Chat about ${name} in the rust-seq Zulip`"
-          >
+            :title="`Chat about ${crate.name} in the rust-seq Zulip`">
             <Icon class="w-4 h-4" name="tabler:brand-zulip"></Icon>
           </a>
         </div>
       </div>
       <div class="flex items-center justify-start gap-x-1">
-        <div class="crate">{{ organization }}/{{ name }}</div>
+        <div class="crate">{{ crate.organization }}/{{ crate.name }}</div>
       </div>
       <div class="description">
-        {{ description }}
+        {{ crate.description }}
       </div>
     </div>
     <div class="terminal">
       <div class="command">
-        <span class="prompt">$</span>
-        <span v-if="kind === Kind.Library"> cargo add {{ name }} </span>
-        <span v-if="kind === Kind.Binary"> cargo install {{ name }} </span>
+        <span class="prompt">$ </span>
+        <span v-if="crate.kind === Kind.Library">cargo add {{ crate.name }}</span>
+        <span v-if="crate.kind === Kind.Binary">cargo install {{ crate.name }}</span>
       </div>
       <Icon class="copy" name="heroicons-outline:clipboard-copy"></Icon>
     </div>
@@ -67,30 +68,17 @@
 </template>
 
 <script setup lang="ts">
-import { Kind } from "~/components/molecules/docs/crate-card/kind";
-
-interface Category {
-  name: string;
-  icon: string;
-}
-
-interface Socials {
-  github?: string;
-  docs?: string;
-  zulip: boolean;
-}
+import { type Crate, Kind } from "~/components/molecules/docs/crate-card/types";
+import { useStorage } from '@vueuse/core'
 
 interface Props {
-  name: string;
-  kind: Kind;
-  organization: string;
-  category: Category;
-  socials: Socials;
-  description: string;
+  crate: Crate;
 }
 
 // Define props with TypeScript
 const props = defineProps<Props>();
+
+const pingVisible = useStorage(`crates-page:ping-visible:${props.crate.organization}/${props.crate.name}`, true);
 </script>
 
 <style scope lang="postcss">
@@ -174,6 +162,7 @@ const props = defineProps<Props>();
       .prompt {
         @apply font-bold;
         @apply text-purple-700;
+        @apply select-none;
       }
     }
 
diff --git a/components/molecules/docs/crate-card/kind.ts b/components/molecules/docs/crate-card/kind.ts
deleted file mode 100644
index 3764e8b..0000000
--- a/components/molecules/docs/crate-card/kind.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum Kind {
-  Binary,
-  Library,
-}
diff --git a/components/molecules/docs/crate-card/types.ts b/components/molecules/docs/crate-card/types.ts
new file mode 100644
index 0000000..2fcff29
--- /dev/null
+++ b/components/molecules/docs/crate-card/types.ts
@@ -0,0 +1,25 @@
+export enum Kind {
+  Binary,
+  Library,
+}
+
+export interface Category {
+  name: string;
+  icon: string;
+}
+
+export interface Socials {
+  github?: string;
+  docs?: string;
+  zulip: boolean;
+}
+
+export interface Crate {
+  name: string;
+  kind: Kind;
+  organization: string;
+  category: Category;
+  socials: Socials;
+  description: string;
+  recentlyReleased?: boolean;
+}
diff --git a/pages/docs/index.vue b/pages/docs/index.vue
index 2009072..00a98c7 100644
--- a/pages/docs/index.vue
+++ b/pages/docs/index.vue
@@ -2,7 +2,7 @@
   <div class="flex w-full h-full">
     <MoleculesDocsLeftSidebar />
     <div class="flex w-full h-full pt-10 bg-white dark:bg-slate-950">
-      <main class="h-full w-full mx-4 px-4 md:mx-6 md:px-8 lg:mx-10 lg:px-16 overflow-auto">
+      <main class="flex flex-col space-y-6 h-full w-full mx-4 px-4 md:mx-6 md:px-8 lg:mx-10 lg:px-16 overflow-auto">
         <span v-if="alertVisible">
           <UAlert icon="i-heroicons-information-circle" color="orange" variant="subtle" title="Heads up!" description="These
             crates and/or categories haven't been officially adopted yet—we're just
@@ -15,8 +15,8 @@
           padded: false,
         }" @close="alertVisible = false" />
         </span>
-        <div class="prose dark:prose-invert max-w-6xl pt-4">
-          <h1 class="mb-2">Crates</h1>
+        <div class="max-w-6xl pt-4">
+          <h1 class="text-3xl font-bold mb-2">Crates</h1>
           <div class="max-w-3xl">
             <p>
               The following crates have been formally ratified within the
@@ -24,79 +24,15 @@
             </p>
           </div>
         </div>
-
+        <div class="flex space-x-4">
+          <UInput icon="i-heroicons-magnifying-glass-20-solid" size="lg" color="white" :trailing="false"
+            placeholder="Search..." v-model="filterText" />
+        </div>
         <article class="prose prose-slate dark:prose-invert max-w-full">
           <div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));">
-            <CrateCard name="noodles" organization="zaeleus" description="A
-              bioinformatics I/O library written natively in Rust that values
-              correctness and ergonomic APIs." :kind="Kind.Library" :category="{
-          name: 'File I/O',
-          icon: 'heroicons-outline:newspaper',
-        }" :socials="{
-          github: 'https://github.com/zaeleus/noodles',
-          docs: 'https://docs.rs/noodles',
-          zulip: true,
-        }" />
-
-            <CrateCard name="chainfile" organization="stjude-rust-labs" description="A
-          crate for lifting over single positions or intervals using UCSC chain
-          files." :kind="Kind.Library" :category="{
-          name: 'File I/O',
-          icon: 'heroicons-outline:newspaper',
-        }" :socials="{
-          github: 'https://github.com/stjude-rust-labs/chainfile',
-          docs: 'https://docs.rs/chainfile',
-          zulip: true,
-        }" />
-
-            <CrateCard name="minimizer-queue" organization="rust-seq" description="A
-          crate for fast computation of minimizers of
-          a sequence using a monotone queue." :kind="Kind.Library" :category="{
-          name: 'Sequence Algorithms',
-          icon: 'carbon:dna',
-        }" :socials="{
-          github: 'https://github.com/rust-seq/minimizer-queue',
-          zulip: true,
-        }" />
+            <CrateCard v-for="crate in shownCrates" :crate="crate" />
 
-            <CrateCard name="minimizer-iter" organization="rust-seq" description="A
-          crate for efficient iteration of the minimizers of a sequence." :kind="Kind.Library" :category="{
-          name: 'Sequence Algorithms',
-          icon: 'carbon:dna',
-        }" :socials="{
-          github: 'https://github.com/rust-seq/minimizer-iter',
-          zulip: true,
-        }" />
 
-            <CrateCard name="packed-seq" organization="rust-seq" description="A
-          crate for efficient (packed) representation of strings of small alphabets." :kind="Kind.Library" :category="{
-          name: 'Sequence Algorithms',
-          icon: 'carbon:dna',
-        }" :socials="{
-          github: 'https://github.com/rust-seq/packed-seq',
-          zulip: true,
-        }" />
-
-            <CrateCard name="foobar" organization="stjude-rust-labs" description="A
-          command line tool for performing common operations on next-generation sequencing
-          data—built on top of noodles." :kind="Kind.Binary" :category="{
-          name: 'Command Line Tools',
-          icon: 'heroicons-outline:command-line',
-        }" :socials="{
-          github: 'https://github.com/stjude-rust-labs/foobar',
-          zulip: true,
-        }" />
-
-            <CrateCard name="omics" organization="stjude-rust-labs" description="A
-          crate for lifting over single positions or intervals using UCSC chain
-          files." :kind="Kind.Library" :category="{
-          name: 'Foundational',
-          icon: 'heroicons:code-bracket-16-solid',
-        }" :socials="{
-          github: 'https://github.com/stjude-rust-labs/omics',
-          docs: 'https://docs.rs/omics',
-          zulip: true,
-        }" />
           </div>
         </article>
       </main>
@@ -106,8 +42,136 @@
 
 <script setup lang="ts">
 import CrateCard from "~/components/molecules/docs/CrateCard.vue";
-import { Kind } from "~/components/molecules/docs/crate-card/kind";
+import { type Crate, Kind } from "~/components/molecules/docs/crate-card/types";
 import { useStorage } from '@vueuse/core'
 
 const alertVisible = useStorage("crates-page:alert-visible", true);
+
+
+const crates: Crate[] = [
+  {
+    name: "noodles",
+    organization: "zaeleus",
+    description: "A bioinformatics I/O library written natively in Rust that values correctness and ergonomic APIs.",
+    kind: Kind.Library,
+    category: {
+      name: "File I/O",
+      icon: "heroicons-outline:newspaper"
+    },
+    socials: {
+      github: 'https://github.com/zaeleus/noodles',
+      docs: 'https://docs.rs/noodles',
+      zulip: true,
+    }
+  },
+  {
+    name: "chainfile",
+    organization: "stjude-rust-labs",
+    description: "A crate for lifting over single positions or intervals using UCSC chain files.",
+    kind: Kind.Library,
+    category: {
+      name: 'File I/O',
+      icon: 'heroicons-outline:newspaper',
+    },
+    socials: {
+      github: 'https://github.com/stjude-rust-labs/chainfile',
+      docs: 'https://docs.rs/chainfile',
+      zulip: true,
+    }
+  },
+  {
+    name: "minimizer-queue",
+    organization: "rust-seq",
+    description: "A crate for fast computation of minimizers of a sequence using a monotone queue.",
+    kind: Kind.Library,
+    category: {
+      name: 'Sequence Algorithms',
+      icon: 'carbon:dna'
+    },
+    socials: {
+      github: 'https://github.com/rust-seq/minimizer-queue',
+      zulip: true,
+    }
+  },
+  {
+    name: "minimizer-iter",
+    organization: "rust-seq",
+    description: "A crate for efficient iteration of the minimizers of a sequence.",
+    kind: Kind.Library,
+    category: {
+      name: 'Sequence Algorithms',
+      icon: 'carbon:dna'
+    },
+    socials: {
+      github: 'https://github.com/rust-seq/minimizer-iter',
+      zulip: true
+    }
+  },
+
+  {
+    name: "packed-seq",
+    organization: "rust-seq",
+    description: "A crate for efficient(packed) representation of strings of small alphabets.",
+    kind: Kind.Library,
+    category: {
+      name: 'Sequence Algorithms',
+      icon: 'carbon:dna',
+    },
+    socials: {
+      github: 'https://github.com/rust-seq/packed-seq',
+      zulip: true,
+    }
+  },
+  {
+    name: "foobar",
+    organization: "stjude-rust-labs",
+    description: "A command line tool for performing common operations on next - generation sequencing data—built on top of noodles.",
+    kind: Kind.Binary,
+    category: {
+      name: 'Command Line Tools',
+      icon: 'heroicons-outline:command-line',
+    }, socials: {
+      github: 'https://github.com/stjude-rust-labs/foobar',
+      zulip: true,
+    }
+  },
+  {
+    name: "omics",
+    organization: "stjude-rust-labs",
+    description: "A crate for lifting over single positions or intervals using UCSC chain files.",
+    kind: Kind.Library,
+    recentlyReleased: true,
+    category: {
+      name: 'Foundational',
+      icon: 'heroicons:code-bracket-16-solid',
+    },
+    socials: {
+      github: 'https://github.com/stjude-rust-labs/omics',
+      docs: 'https://docs.rs/omics',
+      zulip: true,
+    }
+  }
+];
+
+
+const filterText = ref("");
+
+const shownCrates = computed(() => {
+  let inner: Crate[] = crates;
+
+  let query = filterText.value.trim().toLowerCase();
+
+  if (query !== "") {
+    inner = inner.filter((crate) => {
+      return crate.name.toLowerCase().includes(query) ||
+        crate.description.toLowerCase().includes(query) ||
+        crate.category.name.toLowerCase().includes(query) ||
+        crate.organization.toLowerCase().includes(query) ||
+        crate.socials.docs?.toLowerCase().includes(query) ||
+        crate.socials.github?.toLowerCase().includes(query);
+    });
+  }
+
+  return inner;
+})
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 0218669..6b5d64f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -9,23 +9,32 @@
       </p>
 
       <div class="get-involved">
-        <FrontPageCard :step="1" title="Organizing and indexing what needs building." description="Though our RFC process, we nominate crates to be created
-          and decide who will build them." url="https://example.com" :overlay="{
-            title: 'Learn how we do it!',
-            description: 'Click here to learn about our RFC process.',
-          }">
+        <FrontPageCard :step="1" title="Organizing the community around what needs building." description="Though our RFC process, we nominate crates to be created
+          and decide who will build them." url="https://github.com/rust-seq/rfcs" :overlay="{
+          title: 'Learn how we do it!',
+          description: 'Click here to learn about our RFC process.',
+        }">
         </FrontPageCard>
-        <FrontPageCard :step="2" title="Bringing the community together on Zulip." description="Foo bar baz quux qil."
+        <FrontPageCard :step="2" title="Building a new foundation for omics
+        libraries and tools." description="Crates within the stack work together
+        to provide a robust and performant foundation." url="/docs/get-started/values" :overlay="{
+          title: 'Read the values!', description: 'Click here to learn about our development standards and process.',
+        }"></FrontPageCard>
+        <FrontPageCard :step="3" title="Bringing the community together on
+        Zulip." description="A cross-cutting group of developers and users
+        gather on Zulip to discuss making our vision a reality."
           url="https://rustseq.zulipchat.com/join/coxb7c7b3bbahlfx7poeqqrd" :overlay="{
-            title: 'Join us!',
-            description: 'Click here to join the Zulip server.',
-          }"></FrontPageCard>
+          title: 'Join us!',
+          description: 'Click here to join the Zulip server.',
+        }
+          "></FrontPageCard>
       </div>
     </main>
   </div>
 </template>
 
-<script lang="ts"></script>
+<script lang="ts">
+</script>
 
 <style scoped lang="postcss">
 main {