revise: further improvements to the baseline crates page

Author: claymcleod

assets/css/main.css

@@ -0,0 +1,19 @@
+@import url("https://fonts.googleapis.com/css2?family=");
+@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&Space+Grotesk:[email protected]&display=swap");
+
+/* Prose Code */
+* {
+  @apply prose-code:rounded-md;
+  @apply prose-code:px-2;
+  @apply prose-code:py-1;
+
+  @apply prose-code:text-slate-900;
+  @apply prose-code:bg-slate-100;
+  @apply dark:prose-code:text-slate-100;
+  @apply dark:prose-code:bg-slate-800;
+}
+
+code::before,
+code::after {
+  content: none !important;
+}

assets/css/main.postcss

@@ -14,6 +14,4 @@ enum Mode {
   Dark = "dark",
   System = "system",
 }
-
-colorMode.preference = Mode.System;
 </script>

assets/fonts/HankenGrotesk.ttf

@@ -0,0 +1,75 @@
+<template>
+  <div class="card">
+    <div class="header">
+      <div class="title">
+        In
+        <Icon :name="category.icon" />
+        {{ category.name }}
+
+        <div class="ml-1 font-normal text-xs font-mono">
+          <div
+            class="px-1 py-0.5 rounded-md text-green-900 bg-green-300 border border-green-500"
+            v-if="kind === Kind.Library"
+          >
+            lib
+          </div>
+          <div
+            class="px-1 py-0.5 rounded-md text-purple-900 bg-purple-300 border border-purple-500"
+            v-else-if="kind === Kind.Binary"
+          >
+            bin
+          </div>
+        </div>
+      </div>
+      <div class="flex gap-x-1.5">
+        <a
+          v-if="socials && socials.github"
+          class="flex items-center justify-center w-7 h-7 bg-gray-100 border border-gray-200 rounded-full"
+          :href="socials.github"
+        >
+          <Icon class="w-4 h-4" name="octicon:mark-github-16"></Icon>
+        </a>
+        <a
+          v-if="socials && socials.zulip"
+          class="flex items-center justify-center w-7 h-7 bg-gray-100 border border-gray-200 rounded-full"
+          href="https://rustseq.zulipchat.com"
+          :title="`Chat about ${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>
+    <div class="description">
+      {{ description }}
+    </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;
+  zulip: boolean;
+}
+
+interface Props {
+  name: string;
+  kind: Kind;
+  organization: string;
+  category: Category;
+  socials: Socials;
+  description: string;
+}
+
+// Define props with TypeScript
+const props = defineProps<Props>();
+</script>

components/global/ColorMode.vue renamed to components/ColorMode.vue

@@ -9,7 +9,9 @@
       <div class="header">Get Started</div>
       <RouterLink to="/docs/get-started/overview">Overview</RouterLink>
       <RouterLink to="/docs/get-started/values">Values</RouterLink>
-      <RouterLink to="/docs/get-started/stack">Stack</RouterLink>
+
+      <div class="header">Writing Crates</div>
+      <RouterLink to="/docs/writing-crates/checklist">Checklist</RouterLink>
     </div>
   </div>
 </template>
@@ -98,6 +100,10 @@
       @apply dark:text-gray-200;
     }
 
+    .header:not(:first-child) {
+      @apply mt-5;
+    }
+
     a {
       @apply transition;
       @apply block;

components/global/ContextMenu.vue renamed to components/ContextMenu.vue

@@ -0,0 +1,4 @@
+export enum Kind {
+  Binary,
+  Library,
+}

components/molecules/docs/CrateCard.vue

@@ -15,8 +15,17 @@ related initiatives:
   (e.g., common continuous integration/continuous delivery pipelines that can be
   leveraged by tool authors).
 - Improving awareness of ongoing efforts generally within the community via
-  common discussion channels (i.e., the [`rust-seq` Zulip chat] and the
-  [`rust-seq` GitHub discussions]).
+  common discussion channels (i.e., the [`rust-seq` Zulip chat][zulip-chat] and
+  the [`rust-seq` GitHub discussions][github-discussions]).
 
-[`rust-seq` Zulip chat]: https://rustseq.zulipchat.com/join/e23ago52gswtbnp3azlidfem/
-[`rust-seq` GitHub discussions]: https://github.com/orgs/rust-seq/discussions
+## Stack
+
+The `rust-seq` stack is developed in a distributed manner across multiple
+organizations in the community. This means that some crates will be available on
+the `rust-seq` [GitHub][github-organization] while others may be available under
+different organizations. Officially ratified crates are indexed on [this
+page](/docs).
+
+[zulip-chat]: https://rustseq.zulipchat.com/
+[github-discussions]: https://github.com/orgs/rust-seq/discussions
+[github-organization]: https://github.com/rust-seq