revise: various changes to front page

Author: claymcleod

.github/workflows/deploy-preview.yml

@@ -15,7 +15,7 @@ jobs:
           node-version: "latest"
       - run: npm install -g pnpm
       - run: pnpm install
-      - run: sed -i "s|/docs|/docs/branches/${GITHUB_HEAD_REF}|g" nuxt.config.ts; cat nuxt.config.ts
+      - run: sed -i "s|baseURL: \"/\"|baseURL: \"/docs/branches/${GITHUB_HEAD_REF}\"|g" nuxt.config.ts
       - run: pnpm nuxt build --preset github_pages
       - run: |
           mkdir -p dist/branches/${{ github.head_ref }}

components/ContextMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <nav>
-    <div id="links">
+    <div class="links">
       <NuxtLink
         class="flex flex-col space-y-1.5 items-center justify-center"
         to="/"
@@ -17,17 +17,19 @@
       </NuxtLink>
     </div>
 
-    <ColorMode />
+    <div class="links">
+      <ColorMode />
+      <a href="https://github.com/rust-seq/docs">
+        <Icon class="mx-auto w-6 h-6" name="mdi:github"></Icon>
+      </a>
+    </div>
   </nav>
 </template>
 
 <style scoped lang="postcss">
 nav {
-  #links {
-    @apply flex;
-    @apply flex-col;
-    @apply justify-start;
-    @apply items-center;
+  .links {
+    @apply flex flex-col justify-start items-center space-y-4;
   }
 
   @apply flex;
@@ -53,8 +55,6 @@ nav {
   @apply dark:border-slate-900;
 
   a {
-    margin-bottom: 20px;
-
     .label {
       @apply text-xs;
       @apply font-bold;

components/FrontPageCard.vue

@@ -2,7 +2,7 @@
   <div
     class="front-page-card relative group"
     :class="checked ? 'checked' : ''"
-    @click="checked = !checked"
+    @click="cardClicked"
   >
     <div class="relative checkbox">
       <span
@@ -34,10 +34,13 @@
       </p>
     </div>
     <div v-if="!checked" class="overlay opacity-0 group-hover:opacity-100">
-      <span>Learn how we do it</span>
+      <div class="overlay-content not-prose">
+        <h3>{{ overlay.title }}</h3>
+        <p>{{ overlay.description }}</p>
+      </div>
       <Icon
-        class="w-7 h-7 bg-white transition-opacity duration-300 ease-out"
-        name="heroicons:check-20-solid"
+        class="w-8 h-8 bg-white transition-opacity duration-300 ease-out"
+        name="icon-park-outline:double-right"
       ></Icon>
     </div>
   </div>
@@ -46,14 +49,29 @@
 <script setup lang="ts">
 const checked = ref(false);
 
+interface Overlay {
+  title: string;
+  description: string;
+}
+
 interface Props {
   title: string;
   description: string;
   step: number;
+  url: string;
+  overlay: Overlay;
 }
 
 // Define props with TypeScript
 const props = defineProps<Props>();
+
+let cardClicked = () => {
+  checked.value = !checked.value;
+
+  if (checked.value) {
+    window.open(props.url, "_blank", "noopener,noreferrer");
+  }
+};
 </script>
 
 <style scoped lang="postcss">
@@ -80,15 +98,18 @@ const props = defineProps<Props>();
   @apply text-pretty;
 
   .overlay {
-    @apply flex items-center justify-center space-x-2 absolute inset-0;
+    @apply flex items-center justify-between space-x-2 absolute inset-0 px-10;
     @apply bg-gradient-to-r from-cyan-500 to-blue-500;
     @apply h-full w-full;
     @apply rounded-md;
     @apply transition-opacity duration-300 ease-in-out;
-    @apply text-white text-2xl font-bold;
 
-    * {
-      @apply text-inherit;
+    h3 {
+      @apply text-white text-2xl font-bold;
+    }
+
+    p {
+      @apply text-white text-lg;
     }
   }
 

components/molecules/docs/CrateCard.vue

@@ -10,30 +10,40 @@
           <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="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="kind === Kind.Binary"
+            >
               bin
             </div>
           </div>
         </div>
         <div class="flex gap-x-1.5">
-          <a v-if="socials && socials.github"
+          <a
+            v-if="socials && 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="socials.github"
+          >
             <Icon class="w-4 h-4" name="octicon:mark-github-16"></Icon>
           </a>
-          <a v-if="socials && socials.docs"
+          <a
+            v-if="socials && 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="socials.docs"
+            :title="`Chat about ${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="socials && 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" :title="`Chat about ${name} in the rust-seq Zulip`">
+            href="https://rustseq.zulipchat.com/join/coxb7c7b3bbahlfx7poeqqrd/"
+            :title="`Chat about ${name} in the rust-seq Zulip`"
+          >
             <Icon class="w-4 h-4" name="tabler:brand-zulip"></Icon>
           </a>
         </div>
@@ -48,12 +58,8 @@
     <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 v-if="kind === Kind.Library"> cargo add {{ name }} </span>
+        <span v-if="kind === Kind.Binary"> cargo install {{ name }} </span>
       </div>
       <Icon class="copy" name="heroicons-outline:clipboard-copy"></Icon>
     </div>

content/docs/get-started/1.overview.md

@@ -26,6 +26,6 @@ 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/
+[zulip-chat]: https://rustseq.zulipchat.com/join/coxb7c7b3bbahlfx7poeqqrd/
 [github-discussions]: https://github.com/orgs/rust-seq/discussions
 [github-organization]: https://github.com/rust-seq

nuxt.config.ts

@@ -6,7 +6,7 @@ export default defineNuxtConfig({
   css: ["~/assets/css/main.postcss"],
   devtools: { enabled: true },
   app: {
-    baseURL: "/docs",
+    baseURL: "/",
   },
   modules: [
     "nuxt-lucide-icons",

pages/index.vue

@@ -14,12 +14,22 @@
           title="Organizing the community around what needs built."
           description="Though our RFC process, we outline crates that need to be created
           along with who will create them."
+          url="https://example.com"
+          :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."
+          url="https://rustseq.zulipchat.com/join/coxb7c7b3bbahlfx7poeqqrd"
+          :overlay="{
+            title: 'Join us!',
+            description: 'Click here to join the Zulip server.',
+          }"
         ></FrontPageCard>
       </div>
     </main>