revise: multiple revisions to the website

Author: claymcleod

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");
   }
 };

components/molecules/docs/CrateCard.vue

@@ -1,96 +1,84 @@
 <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>
   </div>
 </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;
       }
     }
 

components/molecules/docs/crate-card/kind.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;
+}