revise: makes crate grid more responsive

Author: claymcleod

package.json

@@ -11,8 +11,8 @@
   },
   "dependencies": {
     "@iconify-json/carbon": "^1.2.3",
-    "@iconify-json/heroicons-outline": "^1.2.0",
     "@iconify-json/heroicons": "^1.2.1",
+    "@iconify-json/heroicons-outline": "^1.2.0",
     "@iconify-json/mdi": "^1.2.1",
     "@iconify-json/octicon": "^1.2.1",
     "@iconify-json/tabler": "^1.2.5",
@@ -22,12 +22,13 @@
     "@nuxt/ui": "^2.18.6",
     "@nuxtjs/color-mode": "^3.5.1",
     "@nuxtjs/tailwindcss": "^6.12.1",
+    "@vueuse/core": "^11.1.0",
     "change-case": "^5.4.4",
     "d3": "^7.9.0",
     "nuxt": "^3.13.2",
     "remark-gfm": "^4.0.0",
-    "vue-router": "latest",
-    "vue": "latest"
+    "vue": "latest",
+    "vue-router": "latest"
   },
   "packageManager": "[email protected]+sha512.4abf725084d7bcbafbd728bfc7bee61f2f791f977fd87542b3579dcb23504d170d46337945e4c66485cd12d588a0c0e570ed9c477e7ccdd8507cf05f3f92eaca",
   "devDependencies": {

pages/docs/index.vue

@@ -2,98 +2,101 @@
   <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 mx-10 px-16 overflow-auto">
+      <main class="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
             using these examples to sketch out what the website will look like here
             in the future. In fact... quite a few things don't seem to be working yet...
             we'll get to it!" :close-button="{
-              icon: 'i-heroicons-x-mark-20-solid',
-              color: 'gray',
-              variant: 'link',
-              padded: false,
-            }" @close="alertVisible = false" />
+          icon: 'i-heroicons-x-mark-20-solid',
+          color: 'gray',
+          variant: 'link',
+          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-3xl">
-            <p>The following crates have been formally ratified within the <code>rust-seq</code> stack.</p>
+            <p>
+              The following crates have been formally ratified within the
+              <code>rust-seq</code> stack.
+            </p>
           </div>
         </div>
 
-        <article class=" prose prose-slate dark:prose-invert max-w-6xl">
-          <div class="grid grid-cols-3 gap-4">
+        <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,
-              }" />
+          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,
-          }" />
+          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 
+          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: 'Sequence Algorithms',
+          icon: 'carbon:dna',
+        }" :socials="{
+          github: 'https://github.com/rust-seq/minimizer-queue',
+          zulip: true,
+        }" />
 
             <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,
-          }" />
+          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,
-          }" />
+          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,
-          }" />
+          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,
-          }" />
+          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>
@@ -104,6 +107,7 @@
 <script setup lang="ts">
 import CrateCard from "~/components/molecules/docs/CrateCard.vue";
 import { Kind } from "~/components/molecules/docs/crate-card/kind";
+import { useStorage } from '@vueuse/core'
 
-const alertVisible = ref(true);
+const alertVisible = useStorage("crates-page:alert-visible", true);
 </script>