feat: documentation updates, own hero

Intevel · Aug 12, 2023 · dd4dfd6 · dd4dfd6 · vercel · Aug 12, 2023
1 parent e5ba1c1
commit dd4dfd6
Show file tree

Hide file tree

Showing 8 changed files with 740 additions and 19 deletions.
diff --git a/docs/app.config.ts b/docs/app.config.ts
@@ -11,7 +11,7 @@ export default defineAppConfig({
       logo: true
     },
     github: {
-      owner: 'directus-community',
+      owner: 'intevel',
       repo: 'nuxt-directus'
     }
   }

diff --git a/docs/components/content/Logo.vue b/docs/components/content/Logo.vue
@@ -1,18 +1,54 @@
-
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="128"
-    height="32"
-    viewBox="0 0 655 400"
-    fill="none"
-    class="h-8 text-[#000000] dark:text-white"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M523.601 252.423C520.562 251.663 518.03 250.904 515.75 249.891C514.066 249.142 512.658 248.255 511.424 247.23C510.604 246.548 510.253 245.475 510.354 244.414C511.576 231.693 510.232 220.473 511.445 207.858C516.51 156.708 548.672 172.914 577.543 164.558C594.121 159.889 610.699 150.699 616.757 132.622C617.749 129.663 616.876 126.445 614.814 124.102C595.903 102.602 574.966 83.6047 552.218 67.324C475.953 13.0326 376.837 -9.51171 285.815 3.67573C282.367 4.17531 280.559 7.99477 282.443 10.9256C293.971 28.8624 309.18 43.5413 326.621 54.3456C329.791 56.309 328.517 60.5504 324.879 59.7348C316.325 57.8172 305.335 54.0776 294.999 46.7845C294.003 46.0817 292.719 45.9047 291.587 46.3562C286.966 48.1987 280.294 50.8554 274.779 53.2355C271.605 54.6056 270.959 58.6986 273.572 60.9629C319.29 100.587 385.799 106.61 437.877 74.9015C441.05 72.9698 446.129 76.9392 445.108 80.5098C443.471 86.2295 441.559 94.0919 439.523 104.8C426.608 170.129 389.38 165.064 343.29 148.606C251.192 115.23 198.943 143.731 152.491 87.3124C149.263 83.3922 143.589 82.0331 139.749 85.3568C130.16 93.658 124.485 105.775 124.485 118.726C124.485 134.067 132.404 147.207 144.143 155.073C145.611 156.057 147.562 155.641 148.658 154.254C151.519 150.634 153.859 148.235 156.773 146.717C159.962 145.056 161.517 149.618 158.825 152.001C148.959 160.736 146.127 171.14 139.68 191.652C129.55 223.81 133.855 256.728 86.4978 265.337C61.4264 266.603 61.9329 283.568 52.8161 308.89C42.2354 339.452 28.3803 352.989 2.73808 379.696C-0.768963 383.349 -1.0697 389.189 2.78449 392.474C13.0273 401.202 23.5906 401.682 34.3291 397.261C60.9199 386.12 81.4329 351.683 100.68 329.4C122.206 304.585 173.868 315.22 212.868 290.912C233.901 278.016 246.539 261.544 242.497 236.869C241.846 232.894 246.394 230.506 248.044 234.18C251.175 241.155 253.228 248.596 254.082 256.283C254.305 258.299 256.107 259.79 258.132 259.676C300.326 257.304 354.891 303.838 405.884 316.429C408.985 317.194 411.19 313.613 409.437 310.942C406.21 306.03 403.468 300.932 401.283 295.723C399.028 290.311 397.319 285.06 396.11 279.992C395.165 276.028 400.957 274.963 402.934 278.527C416.012 302.097 442.148 324.23 478.523 326.868C490.932 327.881 504.608 326.361 518.789 322.057C535.757 316.993 551.458 310.409 570.198 313.954C584.127 316.486 597.042 323.576 605.146 335.477C616.518 352.059 640.522 356.452 653.316 339.122C655.058 336.764 655.204 333.611 654.053 330.915C625.882 264.892 554.348 260.357 523.601 252.423Z"
-      fill="currentColor"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1028" viewBox="0 0 1024 1028" fill="none">
+    <g clip-path="url(#clip0_1255_4057)">
+      <rect width="1024" height="1028" fill="#6644FF" />
+      <path d="M0 856.177V0H1024V1028H987.478C944.858 1005.08 881.857 978.413 792.583 956.099C706.535 934.591 579.091 924.288 443.621 913.336C289.815 900.902 125.662 887.631 0 856.177Z" fill="#754DFC" />
+      <path d="M0 630.724V0H1024V864.167C987.48 836.871 914.997 793.6 788.518 757.39C703.262 732.982 576.241 718.365 441.22 702.828C288.002 685.197 124.482 666.38 0 630.724Z" fill="#8555F8" />
+      <path d="M0 385.079V0H1024V661.623C992.243 634.157 920.217 583.508 783.219 539.058C698.867 511.689 572.433 492.648 438.037 472.408C285.691 449.465 123.114 424.981 0 385.079Z" fill="#945EF5" />
+      <path d="M1024 0V470.993C995.948 444.51 924.692 389.046 780.011 339.296C696.15 310.459 570.068 289.215 436.045 266.632C284.289 241.062 122.352 213.776 0 171.81V0H1024Z" fill="#A366F1" />
+      <path d="M170.96 0H1024V278.073C1008.47 260.248 941.186 192.346 771.386 130.624C688.04 100.328 562.349 76.8867 428.741 51.9689C343.042 35.9861 254.087 19.396 170.96 0Z" fill="#B36EEE" />
+      <g filter="url(#filter0_dd_1255_4057)">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M751.713 578.4C748 577.472 744.906 576.544 742.122 575.306C740.063 574.391 738.343 573.308 736.836 572.055C735.835 571.222 735.405 569.911 735.529 568.615C737.022 553.073 735.38 539.364 736.862 523.951C743.05 461.46 782.345 481.259 817.617 471.05C837.872 465.345 858.126 454.117 865.527 432.032C866.739 428.417 865.672 424.486 863.154 421.622C840.049 395.355 814.469 372.145 786.676 352.254C693.499 285.923 572.404 258.379 461.196 274.491C456.983 275.101 454.775 279.768 457.077 283.348C471.161 305.263 489.743 323.197 511.052 336.397C514.925 338.796 513.368 343.978 508.923 342.981C498.473 340.639 485.045 336.07 472.417 327.159C471.2 326.301 469.632 326.084 468.249 326.636C462.603 328.887 454.451 332.133 447.714 335.041C443.836 336.715 443.046 341.715 446.238 344.482C502.095 392.893 583.352 400.252 646.98 361.511C650.856 359.151 657.062 364.001 655.813 368.363C653.814 375.352 651.478 384.958 648.991 398.04C633.211 477.856 587.728 471.669 531.417 451.56C418.895 410.784 355.06 445.604 298.306 376.675C294.363 371.885 287.431 370.225 282.74 374.285C271.024 384.427 264.09 399.231 264.09 415.055C264.09 433.797 273.766 449.851 288.108 459.461C289.902 460.664 292.286 460.156 293.624 458.461C297.119 454.039 299.978 451.107 303.538 449.253C307.434 447.224 309.335 452.797 306.045 455.709C293.991 466.38 290.532 479.092 282.655 504.152C270.278 543.441 275.538 583.659 217.679 594.177C187.048 595.724 187.667 616.452 176.528 647.388C163.601 684.728 146.674 701.267 115.345 733.897C111.061 738.359 110.693 745.495 115.402 749.508C127.916 760.172 140.822 760.758 153.942 755.357C186.429 741.745 211.491 699.671 235.006 672.447C261.306 642.129 324.424 655.122 372.073 625.423C397.77 609.668 413.21 589.543 408.273 559.396C407.477 554.54 413.034 551.622 415.049 556.111C418.875 564.633 421.383 573.723 422.426 583.116C422.699 585.578 424.9 587.4 427.374 587.261C478.926 584.363 545.591 641.216 607.891 656.599C611.681 657.535 614.375 653.158 612.232 649.896C608.291 643.894 604.94 637.666 602.271 631.301C599.515 624.689 597.427 618.274 595.951 612.082C594.796 607.24 601.872 605.938 604.288 610.292C620.266 639.089 652.198 666.13 696.639 669.353C711.8 670.591 728.508 668.734 745.835 663.475C766.565 657.288 785.748 649.244 808.644 653.576C825.661 656.669 841.441 665.331 851.342 679.872C865.235 700.13 894.563 705.498 910.194 684.325C912.321 681.444 912.5 677.592 911.094 674.298C876.675 593.634 789.279 588.093 751.713 578.4Z" fill="white" />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_dd_1255_4057"
+        x="52"
+        y="222"
+        width="920"
+        height="608.703"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+        <feOffset dy="12" />
+        <feGaussianBlur stdDeviation="30" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0.0901961 0 0 0 0 0.160784 0 0 0 0 0.25098 0 0 0 0.1 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1255_4057" />
+        <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+        <feOffset dy="16" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0.0901961 0 0 0 0 0.160784 0 0 0 0 0.25098 0 0 0 0.1 0" />
+        <feBlend mode="normal" in2="effect1_dropShadow_1255_4057" result="effect2_dropShadow_1255_4057" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_1255_4057" result="shape" />
+      </filter>
+      <clipPath id="clip0_1255_4057">
+        <rect width="1024" height="1028" fill="white" />
+      </clipPath>
+    </defs>
   </svg>
 </template>
+
+<style lang="ts" scoped>
+css({
+  svg: {
+    width: 'auto',
+    height: '2rem',
+    color: '#18181B',
+    '@dark': {
+      color: '{color.white}'
+    }
+  }
+})
+</style>
diff --git a/docs/components/content/new-hero.vue b/docs/components/content/new-hero.vue
@@ -0,0 +1,144 @@
+<!-- eslint-disable vue/require-default-prop -->
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+defineProps({
+  cta: {
+    type: Array as PropType<string[]>,
+    required: false
+  },
+  secondary: {
+    type: Array as PropType<string[]>,
+    required: false
+  },
+  video: {
+    type: Array as PropType<string[]>,
+    required: false
+  }
+})
+</script>
+
+<template>
+  <section class="block-hero">
+    <div class="layout">
+      <div class="content">
+        <p v-if="$slots.announce" class="announce">
+          <ContentSlot :use="$slots.announce" unwrap="p" />
+        </p>
+
+        <h1 v-if="$slots.title" class="title">
+          <ContentSlot :use="$slots.title" unwrap="p" />
+        </h1>
+
+        <p v-if="$slots.description" class="description">
+          <ContentSlot :use="$slots.description" unwrap="p" />
+        </p>
+
+        <div class="actions">
+          <template v-if="!$slots.actions">
+            <ButtonLink v-if="cta" class="cta" bold size="medium" :href="(cta[1] as any)">
+              {{ cta[0] }}
+            </ButtonLink>
+
+            <a v-if="secondary" :href="(secondary[1] as any)" class="secondary">
+              {{ secondary[0] }}
+            </a>
+          </template>
+          <ContentSlot v-else :use="$slots.actions" unwrap="p" />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="ts">
+css({
+  '.block-hero': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+    width: '100%',
+    padding: '{space.20} 0',
+    '@sm': {
+      padding: '{space.24} 0',
+    },
+    '@lg': {
+      paddingTop: '{space.32}',
+      paddingBottom: '{space.14}',
+    },
+    '.layout': {
+      display: 'grid',
+      gap: '{space.8}',
+    },
+    '.content': {
+      '@lg': {
+        gridColumn: 'span 2 / span 2'
+      },
+      '.announce': {
+        marginBottom: '{space.2}',
+        textAlign: 'center',
+        '@lg': {
+          textAlign: 'center'
+        }
+      },
+      '.title': {
+        color: '{elements.text.primary.color.static}',
+        fontWeight: '{fontWeight.bold}',
+        letterSpacing: '{letterSpacing.tight}',
+        textAlign: 'center',
+        fontSize: '{text.4xl.fontSize}',
+        lineHeight: '{text.4xl.lineHeight}',
+        '@sm': {
+          fontSize: '{text.5xl.fontSize}',
+          lineHeight: '{text.5xl.lineHeight}',
+        },
+        '@lg': {
+          fontSize: '{text.6xl.fontSize}',
+          lineHeight: '{text.6xl.lineHeight}',
+          textAlign: 'center'
+        }
+      },
+      '.description': {
+        marginTop: '{space.4}',
+        fontSize: '{text.lg.fontSize}',
+        lineHeight: '{text.lg.lineHeight}',
+        textAlign: 'center',
+        color: '{elements.text.secondary.color.static}',
+        '@lg': {
+          textAlign: 'center'
+        }
+      },
+      '.extra': {
+        marginTop: '{space.6}'
+      },
+      '.actions': {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '{space.4}',
+        marginTop: '{space.6}',
+        '@sm': {
+          marginTop: '{space.10}',
+          flexDirection: 'row',
+          gap: '{space.6}'
+        },
+        '@lg': {
+          justifyContent: 'flex-center'
+        },
+        '.cta': {
+          marginBottom: 0
+        },
+        '.secondary': {
+          fontWeight: '{fontWeight.medium}',
+          color: '{elements.text.secondary.color.static}',
+          '&:hover': {
+            color: '{elements.text.secondary.color.hover}'
+          }
+        }
+      }
+    }
+  }
+})
+</style>
diff --git a/docs/content/0.index.md b/docs/content/0.index.md
@@ -5,15 +5,14 @@ navigation: false
 layout: page
 ---
 
-::block-hero
+::new-hero
 ---
 cta:
   - Get Started
   - /getting-started/setup
 secondary:
   - Star on GitHub →
   - https://github.com/directus-community/nuxt-directus
-snippet: npm i -D nuxt-directus
 ---
 
 #title
@@ -31,3 +30,47 @@ Nuxt Directus
     - Nuxt DevTools integration
   ::
 ::
+
+::card-grid
+  ::card{icon=🛠}
+  #title
+  Nuxt DevTools integration
+  #description
+  [Nuxt DevTools](https://devtools.nuxtjs.org/) integration for easy debugging.
+  ::
+
+  ::card{icon=📁}
+  #title
+  Static Support
+  #description
+  Easy usage with `useAsyncData` for building static sites.
+  ::
+
+  ::card{icon=🤏}
+  #title
+  Handy composables
+  #description
+  [Composables](/guide/composables) for easy integration
+  ::
+
+  ::card{icon=👕}
+  #title
+  TypeScript
+  #description
+  Fully-Typed API and Composables
+  ::
+
+  ::card{icon=🔐}
+  #title
+  Authentication
+  #description
+  Handle authentication with ease
+  ::
+
+  ::card{icon=📦}
+  #title
+  RESTful
+  #description
+  Use the RESTful API of Directus
+  ::
+::
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -1,3 +1,12 @@
 export default defineNuxtConfig({
-  extends: '@nuxt-themes/docus'
+  extends: '@nuxt-themes/docus',
+  modules: ['@nuxtjs/plausible'],
+  plausible: {
+    apiHost: 'https://plausible.conner.host',
+    domain: 'nuxt-directus.site',
+    trackLocalhost: false,
+    autoOutboundTracking: true,
+    autoPageviews: true,
+    hashMode: true
+  }
 })
diff --git a/docs/package.json b/docs/package.json
@@ -14,6 +14,7 @@
   "devDependencies": {
     "@nuxt-themes/docus": "^1.8.1",
     "@nuxthq/studio": "^0.7.2",
+    "@nuxtjs/plausible": "^0.2.1",
     "@types/uuid": "^9.0.1",
     "nuxt": "^3.2.0"
   },