refactor(docs): Added missing pages

style(docs): Made UI improvements refactor(docs): Added nuxt-phosphor-icons as workspace dependency
oyedejioyewole · Dec 28, 2023 · ecd51ec · ecd51ec
1 parent 8fde1cc
commit ecd51ec
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 85 deletions.
diff --git a/docs/app.vue b/docs/app.vue
@@ -1,81 +1,9 @@
 <template>
-  <main>
-    <LazyIntroBanner />
-    <LazyContentDoc
-      class="mx-auto min-h-screen w-1/2 space-y-8 py-20"
-      id="documentation"
-    />
-  </main>
+  <NuxtPage />
 </template>
 
 <style lang="scss">
 body {
   @apply bg-background-100;
 }
-
-#documentation {
-  h1,
-  h2,
-  h3,
-  h4 {
-    a {
-      @apply text-copy-900 font-serif;
-    }
-  }
-  h1 {
-    @apply text-copy-900 font-serif text-6xl;
-  }
-
-  h2 {
-    @apply text-4xl;
-  }
-
-  h3 {
-    @apply text-3xl;
-  }
-
-  h4 {
-    @apply text-2xl font-bold;
-
-    code {
-      @apply bg-accent-500 rounded-lg p-3;
-    }
-  }
-
-  ol {
-    @apply list-inside list-decimal space-y-8 text-lg;
-
-    li {
-      @apply space-y-4;
-    }
-  }
-
-  ul {
-    @apply list-inside list-disc space-y-8 text-lg;
-
-    li {
-      @apply space-y-4;
-    }
-  }
-
-  p {
-    @apply text-accent-900  text-balance text-lg leading-loose tracking-wide;
-  }
-
-  pre {
-    @apply bg-accent-900 rounded-lg p-7 text-sm;
-
-    code {
-      @apply rounded-none bg-transparent;
-    }
-  }
-
-  code {
-    @apply bg-accent-500 rounded-lg px-3 py-1 text-sm;
-  }
-
-  a {
-    @apply text-accent-500 hover:underline;
-  }
-}
 </style>
diff --git a/docs/components/IntroBanner.vue b/docs/components/IntroBanner.vue
@@ -2,6 +2,7 @@
 import iconList from "#build/nuxt-phosphor-icons.mjs";
 
 const icons = ref<string[]>([]);
+const isCodeCopied = ref(false);
 
 for (let index = 0; index < 4; index++) {
   const icon = `${iconList[Math.floor(Math.random() * iconList.length)]}`;
@@ -14,11 +15,22 @@ setInterval(() => {
     () => `${iconList[Math.floor(Math.random() * iconList.length)]}`,
   );
 }, 5000);
+
+watch(isCodeCopied, (_new) => {
+  if (_new) setTimeout(() => (isCodeCopied.value = false), 3000);
+});
+
+const copyToClipboard = async (event: Event) => {
+  const codeElement = event.target as HTMLElement;
+  await navigator.clipboard.writeText(codeElement.innerText);
+
+  isCodeCopied.value = true;
+};
 </script>
 
 <template>
   <header class="grid h-screen place-content-center gap-y-20">
-    <h1 class="text-copy-900 text-center font-serif text-7xl">
+    <h1 class="text-center font-serif text-7xl text-copy-900">
       <span class="text-secondary-500">Phosphor Icons</span> meets
       <span class="text-primary-500">Nuxt</span>
     </h1>
@@ -27,26 +39,36 @@ setInterval(() => {
     <div
       class="will-change-content grid grid-cols-4 place-items-center gap-x-4"
     >
-      <div class="bg-accent-500 rounded-lg bg-opacity-20 p-20">
+      <div class="rounded-lg bg-accent-500 bg-opacity-20 p-20">
         <component :is="icons[0]" size="50" />
       </div>
-      <div class="bg-accent-500 rounded-lg bg-opacity-20 p-20">
+      <div class="rounded-lg bg-accent-500 bg-opacity-20 p-20">
         <component :is="icons[1]" size="50" />
       </div>
-      <div class="bg-accent-500 rounded-lg bg-opacity-20 p-20">
+      <div class="rounded-lg bg-accent-500 bg-opacity-20 p-20">
         <component :is="icons[2]" size="50" />
       </div>
-      <div class="bg-accent-500 rounded-lg bg-opacity-20 p-20">
+      <div class="rounded-lg bg-accent-500 bg-opacity-20 p-20">
         <component :is="icons[3]" size="50" />
       </div>
     </div>
 
     <!-- Try now -->
-    <button
-      class="bg-primary-500 text-copy-900 mx-auto w-[400px] rounded-lg py-3"
-      v-tooltip="'Copy'"
-    >
-      <code>pnpm add -D nuxt-phosphor-icons</code>
-    </button>
+    <div class="flex justify-between">
+      <button
+        class="flex w-3/4 items-center justify-center gap-x-4 rounded-lg bg-primary-500 py-3 text-copy-900"
+        v-tooltip="isCodeCopied ? 'Copied' : 'Copy'"
+        @click="copyToClipboard"
+      >
+        <LazyPhosphorIconCode size="25" />
+        <code>pnpm add -D nuxt-phosphor-icons</code>
+      </button>
+
+      <NuxtLink
+        to="/release-notes"
+        class="flex w-[200px] items-center justify-around rounded-full border border-secondary-500 p-3 text-secondary-500 transition hover:bg-secondary-500 hover:text-copy-900"
+        >Release Notes <LazyPhosphorIconArrowRight size="20"
+      /></NuxtLink>
+    </div>
   </header>
 </template>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -15,8 +15,8 @@ export default defineNuxtConfig({
     },
   },
   modules: [
-    "../src/module",
     "floating-vue/nuxt",
+    "nuxt-phosphor-icons",
     "@formkit/auto-animate/nuxt",
     "@nuxt/content",
     "@nuxtjs/google-fonts",

diff --git a/docs/package.json b/docs/package.json
@@ -16,6 +16,7 @@
     "@nuxtjs/google-fonts": "^3.1.3",
     "@nuxtjs/tailwindcss": "^6.10.1",
     "nuxt": "^3.9.0",
+    "nuxt-phosphor-icons": "workspace:^",
     "sass": "^1.69.5",
     "vue": "^3.3.13",
     "vue-router": "^4.2.5"

diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -0,0 +1,77 @@
+<template>
+  <main>
+    <LazyIntroBanner />
+    <LazyContentDoc
+      class="mx-auto min-h-screen w-1/2 space-y-8 py-20"
+      id="documentation"
+    />
+  </main>
+</template>
+
+<style lang="scss">
+#documentation {
+  h1,
+  h2,
+  h3,
+  h4 {
+    a {
+      @apply font-serif text-copy-900;
+    }
+  }
+  h1 {
+    @apply font-serif text-6xl text-copy-900;
+  }
+
+  h2 {
+    @apply text-4xl;
+  }
+
+  h3 {
+    @apply text-3xl;
+  }
+
+  h4 {
+    @apply text-2xl font-bold;
+
+    code {
+      @apply rounded-lg bg-accent-500 p-3;
+    }
+  }
+
+  ol {
+    @apply list-inside list-decimal space-y-8 text-lg;
+
+    li {
+      @apply space-y-4;
+    }
+  }
+
+  ul {
+    @apply list-inside list-disc space-y-8 text-lg;
+
+    li {
+      @apply space-y-4;
+    }
+  }
+
+  p {
+    @apply text-balance  text-lg leading-loose tracking-wide text-accent-900;
+  }
+
+  pre {
+    @apply rounded-lg bg-accent-900 p-7 text-sm;
+
+    code {
+      @apply rounded-none bg-transparent;
+    }
+  }
+
+  code {
+    @apply rounded-lg bg-accent-500 px-3 py-1 text-sm;
+  }
+
+  a {
+    @apply text-accent-500 hover:underline;
+  }
+}
+</style>
diff --git a/docs/pages/release-notes.vue b/docs/pages/release-notes.vue
@@ -0,0 +1,51 @@
+<template>
+  <main class="space-y-20 py-20">
+    <div class="mx-auto w-3/4">
+      <NuxtLink
+        to="/"
+        class="flex w-fit items-center gap-x-1 rounded-full border border-secondary-500 p-3 text-secondary-500 transition hover:bg-secondary-500 hover:text-copy-900"
+        ><LazyPhosphorIconArrowLeft size="20" /> Go back</NuxtLink
+      >
+    </div>
+    <LazyContentDoc
+      class="mx-auto min-h-screen w-1/2 space-y-8"
+      id="changelog"
+    />
+  </main>
+</template>
+
+<style lang="scss">
+#changelog {
+  a {
+    @apply text-accent-500 hover:underline;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    a {
+      @apply font-serif text-copy-900;
+    }
+  }
+  h1 {
+    @apply font-serif text-6xl text-copy-900;
+  }
+
+  h2 {
+    @apply text-4xl;
+  }
+
+  h3 {
+    @apply text-3xl;
+  }
+
+  p {
+    @apply text-balance  text-lg leading-loose tracking-wide text-accent-900;
+  }
+
+  ul {
+    @apply list-inside list-disc space-y-4 text-lg;
+  }
+}
+</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml