docs: polish homepage and logo

nuxt-modules · Apr 28, 2024 · 9977f25 · 9977f25
1 parent 9d78a9f
commit 9977f25
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 80 deletions.
diff --git a/docs/app.config.ts b/docs/app.config.ts
@@ -10,6 +10,15 @@ export default defineAppConfig({
         wrapper: 'border-t border-gray-200 dark:border-gray-800',
       },
     },
+    content: {
+      prose: {
+        code: {
+          icon: {
+            'nuxt.config': 'vscode-icons:file-type-nuxt'
+          }
+        }
+      }
+    }
   },
   header: {
     logo: {
@@ -20,7 +29,6 @@ export default defineAppConfig({
         src: '',
       },
     },
-    pkgVersion,
     search: true,
     colorMode: true,
     links: [{
@@ -31,7 +39,7 @@ export default defineAppConfig({
     }],
   },
   footer: {
-    credits: 'Copyright © 2024',
+    pkgVersion,
     colorMode: false,
     links: [{
       'icon': 'i-simple-icons-nuxtdotjs',
@@ -67,12 +75,12 @@ export default defineAppConfig({
         target: '_blank',
       }, {
         icon: 'i-simple-icons-nuxtdotjs',
-        label: 'Nuxt docs',
+        label: 'Nuxt documentation',
         to: 'https://nuxt.com/docs',
         target: '_blank',
       }, {
         icon: 'i-simple-icons-tailwindcss',
-        label: 'Tailwind CSS docs',
+        label: 'Tailwind CSS',
         to: 'https://tailwindcss.com',
         target: '_blank',
       }],

diff --git a/docs/components/AppFooter.vue b/docs/components/AppFooter.vue
@@ -5,7 +5,9 @@ const { footer } = useAppConfig()
 <template>
   <UFooter>
     <template #left>
-      {{ footer.credits }}
+      <span class="text-sm text-gray-500 dark:text-gray-400">
+        © 2024 | <NuxtLink to="https://github.com/nuxt-modules/tailwindcss/blob/main/LICENSE" target="_blank" class="text-gray-900 dark:text-white">MIT License</NuxtLink> | v{{ footer.pkgVersion }}
+      </span>
     </template>
 
     <template #right>

diff --git a/docs/components/AppHeader.vue b/docs/components/AppHeader.vue
@@ -7,16 +7,14 @@ const { header } = useAppConfig()
 </script>
 
 <template>
-  <UHeader>
+  <UHeader :ui="{ logo: 'items-center' }">
     <template #logo>
-      <TheLogo class="h-6" />
-      <span class="text-xs font-thin">v{{ header.pkgVersion }}</span>
+      <TheLogo class="h-12" />
+      <span>Nuxt</span>
+      <TailwindText class="h-3.5" />
     </template>
 
-    <template
-      v-if="header?.search"
-      #center
-    >
+    <template v-if="header?.search" #center>
       <UContentSearchButton class="hidden lg:flex" />
     </template>
 

diff --git a/docs/components/TailwindText.vue b/docs/components/TailwindText.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377.44 55.32">
+    <path
+      fill="#38bdf8"
+      d="M24.12,24.87H14.89V42.73c0,4.77,3.13,4.69,9.23,4.4v7.22C11.76,55.84,6.85,52.41,6.85,42.73V24.87H0V17.12H6.85v-10l8-2.38V17.12h9.23Zm35.19-7.75h8V54.35h-8V49c-2.83,3.94-7.22,6.33-13,6.33-10.12,0-18.53-8.57-18.53-19.58s8.41-19.58,18.54-19.58c5.8,0,10.2,2.38,13,6.25ZM47.55,47.65A11.5,11.5,0,0,0,59.31,35.74,11.5,11.5,0,0,0,47.55,23.83,11.5,11.5,0,0,0,35.79,35.74,11.5,11.5,0,0,0,47.55,47.65ZM80.76,11.54A5.2,5.2,0,0,1,75.62,6.4a5.14,5.14,0,1,1,10.27,0A5.19,5.19,0,0,1,80.76,11.54Zm-4,42.81V17.12h8V54.35Zm17.34,0V0h8V54.35Zm60.23-37.23h8.49L151.11,54.35h-7.89l-7.75-25.09-7.81,25.09h-7.89L108.08,17.12h8.49l7.22,25.69,7.81-25.69h7.67L147,42.81Zm18.47-5.58a5.2,5.2,0,0,1-5.14-5.14,5.14,5.14,0,1,1,10.27,0A5.19,5.19,0,0,1,172.78,11.54Zm-4,42.81V17.12h8V54.35Zm36.92-38.2c8.34,0,14.3,5.66,14.3,15.34V54.35h-8v-22c0-5.66-3.28-8.63-8.34-8.63-5.29,0-9.46,3.12-9.46,10.72v20h-8V17.12h8v4.77c2.46-3.87,6.48-5.74,11.54-5.74ZM258.1,2.23h8V54.35h-8V49c-2.83,3.94-7.23,6.33-13,6.33-10.13,0-18.54-8.57-18.54-19.58s8.41-19.58,18.54-19.58c5.8,0,10.2,2.38,13,6.25ZM246.33,47.65a11.5,11.5,0,0,0,11.76-11.91,11.76,11.76,0,1,0-23.52,0A11.5,11.5,0,0,0,246.33,47.65Zm46.76,7.67a19.26,19.26,0,0,1-19.66-19.58,19.2,19.2,0,0,1,19.66-19.58,18.39,18.39,0,0,1,16.6,9.6l-6.93,4c-1.63-3.5-5.28-5.73-9.75-5.73a11.36,11.36,0,0,0-11.54,11.69A11.35,11.35,0,0,0,293,47.42a10.9,10.9,0,0,0,9.9-5.73l6.93,4a18.73,18.73,0,0,1-16.75,9.68Zm30-27.92c0,6.77,20,2.68,20,16.45,0,7.45-6.48,11.47-14.52,11.47-7.45,0-12.81-3.35-15.19-8.71l6.92-4c1.2,3.35,4.17,5.36,8.27,5.36,3.57,0,6.33-1.19,6.33-4.17,0-6.63-20-2.91-20-16.23,0-7,6-11.39,13.62-11.39,6.11,0,11.17,2.83,13.78,7.74l-6.78,3.8a7.25,7.25,0,0,0-7-4.25c-2.9,0-5.43,1.27-5.43,3.95Zm34.32,0c0,6.77,20,2.68,20,16.45,0,7.45-6.48,11.47-14.52,11.47-7.45,0-12.81-3.35-15.19-8.71l6.92-4c1.2,3.35,4.17,5.36,8.27,5.36,3.57,0,6.33-1.19,6.33-4.17,0-6.63-20-2.91-20-16.23,0-7,6-11.39,13.62-11.39C369,16.16,374,19,376.62,23.9l-6.78,3.8a7.24,7.24,0,0,0-7-4.25c-2.91,0-5.44,1.27-5.44,3.95Z"
+    />
+  </svg>
+</template>
diff --git a/docs/components/TheLogo.vue b/docs/components/TheLogo.vue
@@ -1,60 +1,16 @@
 <template>
-  <svg
-    viewBox="0 0 1565 201"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 512 512">
     <path
-      d="M377 200C379.16 200 381 198.209 381 196V103C381 103 386 112 395 127L434 194C435.785 197.74 439.744 200 443 200H470V50H443C441.202 50 439 51.4941 439 54V148L421 116L385 55C383.248 51.8912 379.479 50 376 50H350V200H377Z"
-      fill="currentColor"
+      d="M281.4 397.7h156.9c5 0 9.8-1.8 14.1-4.2 4.3-2.5 8.8-5.6 11.3-9.9 2.5-4.3 4.2-9.2 4.2-14.1 0-5-1.7-9.8-4.2-14.1l-106-182.3c-2.5-4.3-5.6-7.4-9.9-9.9-4.3-2.5-10.5-4.2-15.5-4.2s-9.8 1.8-14.1 4.2c-4.3 2.5-7.4 5.6-9.9 9.9l-26.9 46.6-53.7-90.5c-2.5-4.3-5.6-8.8-9.9-11.3-4.3-2.5-9.1-2.8-14.1-2.8s-9.8.3-14.1 2.8c-4.3 2.5-8.8 7-11.3 11.3L46.8 355.3c-2.5 4.3-2.8 9.2-2.8 14.1 0 5 .3 9.8 2.8 14.1 2.5 4.3 7 7.4 11.3 9.9 4.3 2.5 9.1 4.2 14.1 4.2h98.9c39.2 0 67.7-17.6 87.6-50.9l48.1-83.4 25.4-43.8 77.7 132.9h-103l-25.5 45.3zm-111.6-45.3h-69.3l103.2-178.1 52.3 89-34.6 60.4c-13.2 21.7-28.3 28.7-51.6 28.7z"
+      style="fill: #00dc82"
     />
     <path
-      d="M726 92H739C742.314 92 745 89.3137 745 86V60H773V92H800V116H773V159C773 169.5 778.057 174 787 174H800V200H783C759.948 200 745 185.071 745 160V116H726V92Z"
-      fill="currentColor"
+      d="M315.8 141c-44.3 0-71.9 21.3-83 63.8 16.6-21.3 36-29.2 58.1-23.9 12.6 3 21.7 11.8 31.6 21.6 16.3 15.9 35.1 34.3 76.3 34.3 44.3 0 71.9-21.3 83-63.8-16.6 21.3-36 29.2-58.1 23.9-12.6-3-21.7-11.8-31.6-21.6-16.3-15.9-35.1-34.3-76.3-34.3zm-83 95.7c-44.3 0-71.9 21.3-83 63.8 16.6-21.3 36-29.2 58.1-23.9 12.6 3 21.7 11.8 31.6 21.6 16.3 15.9 35.1 34.3 76.3 34.3 44.3 0 71.9-21.3 83-63.8-16.6 21.3-36 29.2-58.1 23.9-12.6-3-21.7-11.8-31.6-21.6-16.3-15.9-35.1-34.3-76.3-34.3z"
+      style="fill: #38bdf8"
     />
     <path
-      d="M591 92V154C591 168.004 585.742 179.809 578 188C570.258 196.191 559.566 200 545 200C530.434 200 518.742 196.191 511 188C503.389 179.809 498 168.004 498 154V92H514C517.412 92 520.769 92.622 523 95C525.231 97.2459 526 98.5652 526 102V154C526 162.059 526.457 167.037 530 171C533.543 174.831 537.914 176 545 176C552.217 176 555.457 174.831 559 171C562.543 167.037 563 162.059 563 154V102C563 98.5652 563.769 96.378 566 94C567.96 91.9107 570.028 91.9599 573 92C573.411 92.0055 574.586 92 575 92H591Z"
-      fill="currentColor"
-    />
-    <path
-      d="M676 144L710 92H684C680.723 92 677.812 93.1758 676 96L660 120L645 97C643.188 94.1758 639.277 92 636 92H611L645 143L608 200H634C637.25 200 640.182 196.787 642 194L660 167L679 195C680.818 197.787 683.75 200 687 200H713L676 144Z"
-      fill="currentColor"
-    />
-    <path
-      d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z"
-      fill="#00DC82"
-    />
-    <path
-      d="M911.345 199.402H881.368V85.3584H840V59.5937H952.714V85.3584H911.345V199.402Z"
-      fill="#00DC82"
-    />
-    <path
-      d="M983.649 97.1423C992.043 97.1423 999.571 98.7401 1006.23 101.936C1012.89 104.998 1018.09 109.392 1021.82 115.118C1025.68 120.71 1027.62 127.234 1027.62 134.691V199.402H1000.04V185.421C998.305 190.082 994.841 193.876 989.645 196.806C984.582 199.602 978.587 201 971.659 201C965.264 201 959.535 199.735 954.472 197.205C949.542 194.542 945.679 190.947 942.881 186.42C940.083 181.76 938.684 176.567 938.684 170.841C938.684 160.988 942.015 153.265 948.676 147.673C955.471 141.948 964.398 139.085 975.456 139.085H992.443C994.841 139.085 996.706 138.419 998.038 137.088C999.371 135.623 1000.04 133.825 1000.04 131.695C1000.04 127.434 998.438 124.039 995.241 121.509C992.043 118.846 987.646 117.514 982.051 117.514C976.322 117.514 971.792 119.046 968.461 122.108C965.264 125.171 963.532 128.965 963.265 133.492H938.484C938.884 126.702 940.949 120.577 944.679 115.118C948.41 109.525 953.606 105.131 960.267 101.936C966.929 98.7401 974.723 97.1423 983.649 97.1423ZM978.653 180.828C985.315 180.828 990.511 178.697 994.241 174.436C998.105 170.176 1000.04 164.716 1000.04 158.059V156.661H979.653C975.389 156.661 971.925 157.859 969.26 160.256C966.596 162.653 965.264 165.782 965.264 169.643C965.264 172.972 966.529 175.701 969.061 177.832C971.592 179.829 974.79 180.828 978.653 180.828Z"
-      fill="#00DC82"
-    />
-    <path
-      d="M1074.66 199.402H1046.68V98.7401H1074.66V199.402ZM1045.88 84.3598V55H1075.46V84.3598H1045.88Z"
-      fill="#00DC82"
-    />
-    <path
-      d="M1124.46 199.402H1096.68V55H1124.46V199.402Z"
-      fill="#00DC82"
-    />
-    <path
-      d="M1195.37 199.402H1171.19L1138.42 98.7401H1166.4L1183.38 160.855L1201.17 98.7401H1226.55L1244.54 160.855L1261.52 98.7401H1289.3L1256.73 199.402H1232.35L1213.96 136.688L1195.37 199.402Z"
-      fill="#00DC82"
-    />
-    <path
-      d="M1329.74 199.402H1301.76V98.7401H1329.74V199.402ZM1300.96 84.3598V55H1330.54V84.3598H1300.96Z"
-      fill="#00DC82"
-    />
-    <path
-      d="M1350.16 199.402V98.7401H1378.14V112.721C1380.94 107.794 1385 104 1390.33 101.337C1395.66 98.5404 1401.79 97.1423 1408.72 97.1423C1416.18 97.1423 1422.71 98.8067 1428.3 102.135C1434.03 105.464 1438.43 110.124 1441.49 116.116C1444.69 122.108 1446.29 128.965 1446.29 136.688V199.402H1418.31V142.88C1418.31 136.755 1416.51 131.762 1412.91 127.9C1409.32 123.906 1404.65 121.908 1398.93 121.908C1392.8 121.908 1387.8 124.039 1383.94 128.3C1380.07 132.427 1378.14 137.753 1378.14 144.278V199.402H1350.16Z"
-      fill="#00DC82"
-    />
-    <path
-      d="M1509.64 201C1499.92 201 1491.39 198.87 1484.06 194.609C1476.87 190.348 1471.27 184.29 1467.27 176.434C1463.41 168.578 1461.48 159.457 1461.48 149.071C1461.48 138.685 1463.41 129.565 1467.27 121.709C1471.27 113.853 1476.87 107.794 1484.06 103.534C1491.26 99.2727 1499.65 97.1423 1509.24 97.1423C1515.37 97.1423 1520.83 98.2741 1525.63 100.538C1530.43 102.668 1534.29 105.597 1537.22 109.326V55H1565V199.402H1537.22V188.417C1534.42 192.279 1530.56 195.341 1525.63 197.605C1520.7 199.868 1515.37 201 1509.64 201ZM1514.24 177.033C1521.57 177.033 1527.5 174.503 1532.03 169.443C1536.56 164.25 1538.82 157.46 1538.82 149.071C1538.82 140.549 1536.56 133.759 1532.03 128.699C1527.63 123.506 1521.7 120.91 1514.24 120.91C1506.78 120.91 1500.78 123.506 1496.25 128.699C1491.86 133.759 1489.66 140.549 1489.66 149.071C1489.66 157.46 1491.92 164.25 1496.45 169.443C1500.98 174.503 1506.91 177.033 1514.24 177.033Z"
-      fill="#00DC82"
+      d="M221.4 323.8c39.2 0 17.6 56.3 37.5 23l48.1-83.4 25.4-43.8 77.7 132.9H306.9l-25.4 45.2h156.9c5 0 9.8-1.8 14.1-4.2 4.3-2.5 8.8-5.6 11.3-9.9 2.5-4.3 4.2-9.2 4.2-14.1 0-5-1.7-9.8-4.2-14.1l-106-182.3c-2.5-4.3-5.6-7.4-9.9-9.9-4.3-2.5-10.5-4.2-15.5-4.2s-9.8 1.8-14.1 4.2c-4.3 2.5-7.4 5.6-9.9 9.9l-26.9 46.6M256 263.4l-34.6 60.4"
+      style="fill: #00dc82"
     />
   </svg>
 </template>
diff --git a/docs/content/2.tailwind/2.viewer.md b/docs/content/2.tailwind/2.viewer.md
@@ -3,7 +3,7 @@ title: Viewer
 description: Visualize your Tailwind configuration with the viewer.
 ---
 
-By default, the module will expose a `/_tailwind/` route in development, so that you can quickly visualize your Tailwind configuration with easy copy-pasting (thanks to the awesome [tailwind-config-viewer](https://github.com/rogden/tailwind-config-viewer) package ✨).
+By default, the module will expose a route in development and in [Nuxt DevTools](https://devtools.nuxt.com/), so that you can visualize your Tailwind configuration, with the help of [`tailwind-config-viewer`](https://github.com/rogden/tailwind-config-viewer) ✨
 
 The viewer is available starting from version  `v3.4.0` of `@nuxtjs/tailwindcss`.
 
@@ -13,8 +13,10 @@ The viewer is available starting from version  `v3.4.0` of `@nuxtjs/tailwindcss`
   <source src="https://res.cloudinary.com/nuxt/video/upload/q_auto/v1608225750/nuxt-tailwind-viewer_ktowjm.ogv" type="video/ogg" />
 </video>
 
-When enabled, you will see the Tailwind viewer url in your terminal:
+When enabled, you will see the Tailwind Viewer URL in your terminal:
 
-<img src="/tailwind-viewer.png" width="530" height="246" style="margin: 0;" />
+```bash
+> Tailwind Viewer: http://localhost:3000/_tailwind/
+```
 
-Check out the [viewer option](/getting-started/configuration#viewer) to disable the viewer in development.
+Check out the [`viewer`](/getting-started/configuration#viewer) configuration options to disable the viewer or for further customisations.
diff --git a/docs/content/index.yml b/docs/content/index.yml
@@ -1,9 +1,9 @@
-title: 'Add Tailwind CSS to your Nuxt Applications.'
-description: 'Welcome to Nuxt UI Pro documentation template.'
+title: 'Tailwind CSS for Nuxt'
+description: 'Add Tailwind CSS to your Nuxt Applications.'
 navigation: false
 hero:
-  title: 'Add TailwindCSS to your [Nuxt Apps]{.text-primary}.'
-  description: 'Welcome to the Nuxt TailwindCSS module documentation to help you set up Tailwind CSS in your Nuxt application in seconds, with many goodies 🍬.'
+  title: '[Tailwind CSS]{.text-nowrap .text-tailwind} for your [Nuxt Apps]{.text-primary}.'
+  description: 'The Tailwind CSS module for Nuxt enables you to set up Tailwind CSS in your Nuxt application in seconds, with many goodies 🍬'
   orientation: horizontal
   links:
     - label: 'Get started'
@@ -17,7 +17,10 @@ hero:
       target: '_blank'
       size: lg
   code: |
-    ```ts [nuxt.config.ts]
+    ```bash
+    npx nuxi@latest module add tailwindcss
+    ```
+    ```ts [nuxt.config]
     export default defineNuxtConfig({
       modules: ['@nuxtjs/tailwindcss'],
       tailwindcss: {
@@ -31,21 +34,21 @@ features:
   title: 'Shipped with many features.'
   items:
     - title: 'Zero Configuration'
-      description: 'This module enables a quick and easy setup of Tailwind CSS in your Nuxt application.'
+      description: 'Enables using Tailwind CSS after simply installing, with support for Nuxt Layers.'
       to: '/getting-started/installation'
     - title: 'CSS Nesting'
       description: 'Supports CSS Nesting with postcss-nesting to use the latest CSS syntax.'
       to: 'https://drafts.csswg.org/css-nesting-1/'
       target: '_blank'
-    - title: 'Tailwind Viewer'
-      description: 'Discover your tailwind config visually with the viewer as well as the Nuxt Devtools integration.'
+    - title: 'Config Viewer'
+      description: 'Discover your configuration visually with the viewer as well as the Nuxt DevTools integration.'
       to: /tailwind/viewer
-    - title: 'Tailwind Config'
-      description: 'Reference your Tailwind config in your application using the #tailwind-config alias, supporting tree-shaking.'
+    - title: 'Referencing Config'
+      description: 'Reference your Tailwind configuration in your app with tree-shaking.'
       to: '/tailwind/config#referencing-in-the-application'
       target: '_blank'
     - title: 'Extendable'
-      description: 'The module supports the ability to extend the Tailwind config from Nuxt modules or layers.'
+      description: 'Allows other modules to extend the configuration using hooks.'
       to: '/tailwind/config#hooks'
     - title: 'Open Source'
       description: 'Boasting over 85+ contributors and over 500k+ monthly downloads.'

diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue
@@ -20,9 +20,9 @@ const { data: surround } = await useAsyncData(`${route.path}-surround`, () => qu
 )
 
 useSeoMeta({
-  titleTemplate: '%s - Nuxt Tailwind',
+  titleTemplate: '%s - Tailwind CSS module for Nuxt',
   title: page.value.title,
-  ogTitle: `${page.value.title} - Nuxt Tailwind`,
+  ogTitle: `${page.value.title} - Tailwind CSS module for Nuxt`,
   description: page.value.description,
   ogDescription: page.value.description,
 })

diff --git a/docs/public/favicon.ico b/docs/public/favicon.ico
diff --git a/docs/tailwind.config.ts b/docs/tailwind.config.ts
@@ -21,6 +21,7 @@ export default <Partial<Config>>{
           900: '#0A5331',
           950: '#052e16',
         },
+        tailwind: '#38bdf8'
       },
     },
   },