docs: main improvements (#94)

* docs: main improvements * docs: add border for home * chore: fixes * fix: container * Update 1.configuration.md
nuxt-themes · Feb 25, 2021 · 31eb2b0 · 31eb2b0 · vercel · Feb 25, 2021
1 parent 615da9c
commit 31eb2b0
Show file tree

Hide file tree

Showing 20 changed files with 699 additions and 197 deletions.
diff --git a/docs/components/ButtonLink.vue b/docs/components/ButtonLink.vue
@@ -0,0 +1,43 @@
+<template>
+  <NuxtLink v-if="isInternal" :to="href" class="button-link" :class="size"><slot /></NuxtLink>
+  <a v-else :href="href" class="button-link" :class="size" v-bind="linkAttrs"><slot /></a>
+</template>
+
+<script>
+export default {
+  props: {
+    href: {
+      type: String,
+      default: ''
+    },
+    blank: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isInternal () {
+      return this.href.startsWith('/') && this.href.startsWith('//') === false
+    },
+    linkAttrs () {
+      if (this.blank) {
+        return { rel: 'noopener', target: '_blank' }
+      }
+      return {}
+    }
+  }
+}
+</script>
+
+<style lang="postcss">
+a.button-link {
+  @apply flex-none w-full px-4 py-2.5 leading-4 text-base font-semibold text-white transition-colors duration-200 border border-transparent bg-primary-500 sm:w-auto hover:bg-primary-700 rounded focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none;
+  &.large {
+    @apply px-6 py-3 leading-6 text-lg rounded-md;
+  }
+}
+</style>
diff --git a/docs/components/IconLightHouse.vue b/docs/components/IconLightHouse.vue
@@ -0,0 +1,199 @@
+<template>
+  <svg
+    viewBox="0 0 30 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M15 28.75C22.5939 28.75 28.75 22.5939 28.75 15C28.75 7.40608 22.5939 1.25 15 1.25C7.40608 1.25 1.25 7.40608 1.25 15C1.25 22.5939 7.40608 28.75 15 28.75Z" fill="#0535C1" />
+    <mask
+      id="mask0"
+      mask-type="alpha"
+      maskUnits="userSpaceOnUse"
+      x="18"
+      y="9"
+      width="8"
+      height="6"
+    >
+      <path d="M24.0625 10.8853H23.2398C22.8912 9.89841 21.9517 9.19263 20.8464 9.19263C19.4449 9.19263 18.3074 10.3301 18.3074 11.7317C18.3074 13.1333 19.4449 14.2708 20.8464 14.2708H24.0625C24.9968 14.2708 25.7553 13.5125 25.7553 12.5781C25.7553 11.6437 24.9968 10.8853 24.0625 10.8853V10.8853Z" fill="white" />
+    </mask>
+    <g mask="url(#mask0)">
+      <path d="M24.0625 10.8853H23.2398C22.8912 9.89841 21.9517 9.19263 20.8464 9.19263C19.4449 9.19263 18.3074 10.3301 18.3074 11.7317C18.3074 13.1333 19.4449 14.2708 20.8464 14.2708H24.0625C24.9968 14.2708 25.7553 13.5125 25.7553 12.5781C25.7553 11.6437 24.9968 10.8853 24.0625 10.8853V10.8853Z" fill="#EAEAEA" />
+      <path d="M25.7553 12.5984V12.5781C25.7553 11.6437 24.9969 10.8853 24.0625 10.8853H23.2162V10.9276H24.0625C24.9902 10.9276 25.7434 11.6742 25.7553 12.5984V12.5984Z" fill="white" fill-opacity="0.2" />
+      <path d="M26.6271 14.2707H20.8464L23.2418 10.8853L26.6271 14.2707Z" fill="url(#paint0_linear)" />
+      <mask
+        id="mask1"
+        mask-type="alpha"
+        maskUnits="userSpaceOnUse"
+        x="20"
+        y="10"
+        width="6"
+        height="5"
+      >
+        <path d="M24.0625 10.8853H20.8464V14.2707H24.0625C24.9968 14.2707 25.7553 13.5123 25.7553 12.5779C25.7553 11.6435 24.9968 10.8853 24.0625 10.8853Z" fill="white" />
+      </mask>
+      <g mask="url(#mask1)">
+        <rect x="20.3385" y="8.68481" width="3.55481" height="5.41672" fill="url(#pattern0)" />
+        <path d="M20.8464 9.19263L22.2192 13.5276C22.678 13.0672 23.3855 12.4325 23.3855 11.7317C23.3855 10.3301 22.248 9.19263 20.8464 9.19263Z" fill="#E1E1E1" />
+      </g>
+      <path d="M20.8464 14.2708C22.2487 14.2708 23.3855 13.134 23.3855 11.7317C23.3855 10.3294 22.2487 9.19263 20.8464 9.19263C19.4441 9.19263 18.3074 10.3294 18.3074 11.7317C18.3074 13.134 19.4441 14.2708 20.8464 14.2708Z" fill="#EEEEEE" />
+      <path d="M20.8463 9.23484C22.2411 9.23484 23.3734 10.3606 23.3853 11.7536V11.7333C23.3853 10.3317 22.2478 9.19421 20.8463 9.19421C19.4447 9.19421 18.3072 10.3302 18.3072 11.7317V11.752C18.3191 10.3606 19.4514 9.23484 20.8463 9.23484Z" fill="white" fill-opacity="0.2" />
+      <path d="M24.0625 14.2286H20.8463C19.4514 14.2286 18.3191 13.1027 18.3072 11.7098V11.7302C18.3072 13.1317 19.4447 14.2692 20.8463 14.2692H24.0625C24.9969 14.2692 25.7553 13.5108 25.7553 12.5764V12.5561C25.7434 13.482 24.9901 14.2284 24.0625 14.2284V14.2286Z" fill="#212121" fill-opacity="0.1" />
+    </g>
+    <path d="M24.0625 10.8853H23.2398C22.8912 9.89841 21.9517 9.19263 20.8464 9.19263C19.4449 9.19263 18.3074 10.3301 18.3074 11.7317C18.3074 13.1333 19.4449 14.2708 20.8464 14.2708H24.0625C24.9968 14.2708 25.7553 13.5125 25.7553 12.5781C25.7553 11.6437 24.9968 10.8853 24.0625 10.8853V10.8853Z" fill="url(#paint1_radial)" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 7.03125H18.4375V13.2812H11.25V7.03125Z" fill="#FFF176" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.4688 16.5625H19.0626V25.1562H10.4688V16.5625Z" fill="white" />
+    <path d="M20 12.6563H21.25V15.1563H8.75V12.6563H10V7.65626L15 4.53125L20 7.65626V12.6563ZM17.5 12.6563V9.04189L15 7.47938L12.5 9.04189V12.6563H17.5Z" fill="#F4481E" />
+    <path d="M8.19482 26.9506L10.3125 12.6562H19.6874L21.8051 26.9506C19.7985 28.0958 17.4757 28.75 15 28.75C12.5242 28.75 10.2014 28.0958 8.19482 26.9506ZM17.799 16.9689L11.9178 18.8798L11.2029 23.7045L18.4482 21.3503L17.799 16.9689V16.9689Z" fill="#F4481E" />
+    <path d="M19.9881 15.1562L21.7353 26.9506C19.7288 28.0958 17.4059 28.75 14.9302 28.75C12.4545 28.75 10.1317 28.0958 8.125 26.9506L9.87234 15.1562H8.75V12.6562H10V7.65625L15 4.53125L20 7.65625V12.6562H21.25V15.1562H19.9881Z" fill="url(#paint2_linear)" />
+    <path d="M15 12.6562H10V7.65625L15 4.53125V12.6562Z" fill="url(#paint3_linear)" />
+    <path d="M15 28.75C12.6138 28.7513 10.2685 28.1312 8.19482 26.9506L9.76154 15.1562H15V28.75Z" fill="url(#paint4_linear)" />
+    <path d="M15 12.6562H8.75V15.1563H15V12.6562Z" fill="url(#paint5_linear)" />
+    <mask
+      id="mask2"
+      mask-type="alpha"
+      maskUnits="userSpaceOnUse"
+      x="4"
+      y="12"
+      width="10"
+      height="6"
+    >
+      <path d="M11.25 14.0625H10.3008C9.89844 12.9239 8.81453 12.1094 7.53906 12.1094C5.92187 12.1094 4.60938 13.4219 4.60938 15.0391C4.60938 16.6563 5.92187 17.9688 7.53906 17.9688H11.25C12.3281 17.9688 13.2031 17.0938 13.2031 16.0156C13.2031 14.9375 12.3281 14.0625 11.25 14.0625Z" fill="white" />
+    </mask>
+    <g mask="url(#mask2)">
+      <path d="M11.25 14.0625H10.3008C9.89844 12.9239 8.81453 12.1094 7.53906 12.1094C5.92187 12.1094 4.60938 13.4219 4.60938 15.0391C4.60938 16.6563 5.92187 17.9688 7.53906 17.9688H11.25C12.3281 17.9688 13.2031 17.0938 13.2031 16.0156C13.2031 14.9375 12.3281 14.0625 11.25 14.0625Z" fill="#FAFAFA" />
+      <path d="M13.2031 16.0391V16.0156C13.2031 14.9375 12.3281 14.0625 11.25 14.0625H10.2734V14.1114H11.25C12.3203 14.1114 13.1895 14.9727 13.2031 16.0391Z" fill="white" fill-opacity="0.2" />
+      <path d="M14.2091 17.9688H7.53906L10.3028 14.0625L14.2091 17.9688Z" fill="url(#paint6_linear)" />
+      <mask
+        id="mask3"
+        mask-type="alpha"
+        maskUnits="userSpaceOnUse"
+        x="7"
+        y="14"
+        width="7"
+        height="4"
+      >
+        <path d="M11.25 14.0625H7.53906V17.9688H11.25C12.3281 17.9688 13.2031 17.0938 13.2031 16.0156C13.2031 14.9375 12.3281 14.0625 11.25 14.0625Z" fill="white" />
+      </mask>
+      <g mask="url(#mask3)">
+        <rect x="6.95312" y="11.5234" width="4.10156" height="6.25" fill="url(#pattern1)" />
+        <path d="M7.53906 12.1094L9.12297 17.1114C9.65234 16.5802 10.4688 15.8477 10.4688 15.0391C10.4688 13.4219 9.15625 12.1094 7.53906 12.1094Z" fill="#E1E1E1" />
+      </g>
+      <path d="M7.53906 17.9688C9.15708 17.9688 10.4688 16.6571 10.4688 15.0391C10.4688 13.421 9.15708 12.1094 7.53906 12.1094C5.92104 12.1094 4.60938 13.421 4.60938 15.0391C4.60938 16.6571 5.92104 17.9688 7.53906 17.9688Z" fill="white" />
+      <path d="M7.53906 12.1583C9.14844 12.1583 10.4552 13.4571 10.4688 15.0645V15.0411C10.4688 13.4239 9.15625 12.1115 7.53906 12.1115C5.92187 12.1115 4.60938 13.4219 4.60938 15.0391V15.0625C4.62297 13.4571 5.92969 12.1583 7.53906 12.1583Z" fill="white" fill-opacity="0.2" />
+      <path d="M11.25 17.92H7.53906C5.92969 17.92 4.62297 16.621 4.60938 15.0137V15.0371C4.60938 16.6543 5.92187 17.9668 7.53906 17.9668H11.25C12.3281 17.9668 13.2031 17.0918 13.2031 16.0137V15.9902C13.1895 17.0585 12.3203 17.92 11.25 17.92Z" fill="#212121" fill-opacity="0.1" />
+    </g>
+    <path d="M11.25 14.0625H10.3008C9.89844 12.9239 8.81453 12.1094 7.53906 12.1094C5.92187 12.1094 4.60938 13.4219 4.60938 15.0391C4.60938 16.6563 5.92187 17.9688 7.53906 17.9688H11.25C12.3281 17.9688 13.2031 17.0938 13.2031 16.0156C13.2031 14.9375 12.3281 14.0625 11.25 14.0625Z" fill="url(#paint7_radial)" />
+    <path d="M15 1.39375C22.5703 1.39375 28.7094 7.51094 28.7484 15.0719C28.7484 15.0484 28.75 15.025 28.75 15C28.75 7.40625 22.5937 1.25 15 1.25C7.40625 1.25 1.25 7.40625 1.25 15C1.25 15.0234 1.25156 15.0469 1.25156 15.0719C1.29062 7.51094 7.42969 1.39375 15 1.39375Z" fill="white" fill-opacity="0.1" />
+    <path d="M28.7484 14.9281C28.7094 22.489 22.5703 28.6062 15 28.6062C7.42969 28.6062 1.29062 22.489 1.25156 14.9281C1.25156 14.9531 1.25 14.9765 1.25 15C1.25 22.5937 7.40625 28.75 15 28.75C22.5937 28.75 28.75 22.5937 28.75 15C28.75 14.9765 28.7484 14.9531 28.7484 14.9281Z" fill="#263238" fill-opacity="0.1" />
+    <path d="M15 28.75C22.5939 28.75 28.75 22.5939 28.75 15C28.75 7.40608 22.5939 1.25 15 1.25C7.40608 1.25 1.25 7.40608 1.25 15C1.25 22.5939 7.40608 28.75 15 28.75Z" fill="url(#paint8_radial)" />
+    <defs>
+      <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+        <use xlink:href="#image0" transform="scale(0.047619 0.03125)" />
+      </pattern>
+      <pattern id="pattern1" patternContentUnits="objectBoundingBox" width="1" height="1">
+        <use xlink:href="#image0" transform="scale(0.047619 0.03125)" />
+      </pattern>
+      <linearGradient
+        id="paint0_linear"
+        x1="23.7364"
+        y1="10.8929"
+        x2="23.7364"
+        y2="14.2614"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#212121" stop-opacity="0.04" />
+        <stop offset="0.66" stop-color="#212121" stop-opacity="0" />
+      </linearGradient>
+      <radialGradient
+        id="paint1_radial"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(18.8267 9.91722) scale(7.34123)"
+      >
+        <stop stop-color="white" stop-opacity="0.1" />
+        <stop offset="1" stop-color="white" stop-opacity="0" />
+      </radialGradient>
+      <linearGradient
+        id="paint2_linear"
+        x1="13.1099"
+        y1="9.4617"
+        x2="22.738"
+        y2="25.3267"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="white" stop-opacity="0.1" />
+        <stop offset="1" stop-color="white" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear"
+        x1="13.4468"
+        y1="9.87393"
+        x2="10.9581"
+        y2="8.66246"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#262626" stop-opacity="0.1" />
+        <stop offset="1" stop-color="#262626" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear"
+        x1="12.4502"
+        y1="16.9351"
+        x2="5.45552"
+        y2="25.089"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#262626" stop-opacity="0.1" />
+        <stop offset="1" stop-color="#262626" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint5_linear"
+        x1="15"
+        y1="13.9063"
+        x2="8.75"
+        y2="13.9063"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#262626" stop-opacity="0.1" />
+        <stop offset="1" stop-color="#262626" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="paint6_linear"
+        x1="10.8737"
+        y1="14.0713"
+        x2="10.8737"
+        y2="17.958"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#212121" stop-opacity="0.04" />
+        <stop offset="0.66" stop-color="#212121" stop-opacity="0" />
+      </linearGradient>
+      <radialGradient
+        id="paint7_radial"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(5.20781 12.9454) scale(8.47069)"
+      >
+        <stop stop-color="white" stop-opacity="0.1" />
+        <stop offset="1" stop-color="white" stop-opacity="0" />
+      </radialGradient>
+      <radialGradient
+        id="paint8_radial"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(5.23447 5.2606) scale(27.4926)"
+      >
+        <stop stop-color="white" stop-opacity="0.1" />
+        <stop offset="1" stop-color="white" stop-opacity="0" />
+      </radialGradient>
+      <image id="image0" width="21" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAAABGdBTUEAALGOfPtRkwAAA7ZJREFUSA2dlttvEkEYxdnlWqhQoEWrlRq1xqQv+qLP9f82fdamvmhjVBJbSnrjUtoCheWy/s6ERagsBSc5+WZnvzl75sxtrcDfYg2rXvTeuMOKF7123+gR2Nvb26FOpxNrt9uheDxuq0ez2XSXlpa6VDuFQqFHHIB7yUVqQRhuNBpZy7LyrutmiBHaA7Zt93i+5vksEonUer1eA3J9ROS+JcgbK5VKJej8EpIdCD4Q3xHf0rbN+01icjAYhLvdbn9jY8Mpl8t9X0ZeiNReX1+PO46zBdEOz+/BK7AJngq0PyZmg8GgjVpnbW2tl06n+7VaTVb8Y4dRmsvlYpDmUfgGVVvEVZITQzwQIVBbkvcRIPJeLBZz8F2qJ4hFGmD4YUIaPENVnpgEIaAJU04MLAP5nQNpMED5FapbKJ7w2ChNJpPkWB6xhi1VmiwzkUSR6yNSn0HpCqNxQQXiy2q12qF9pNYordfrLh7ZTEaaxOckyMM4MEuLqKIPBPl4lCgMIL8ElVAo1Gi1WlpyhtiQ8mBlMhl1kH+anCdAdTMSolc85VIdIt8FN1KLDU3PBo9UvgZIULK8vWuBR6ooYptc2SPFXUgvwuFwrVKpGBtGpHNaAIcpxgpqEqENUsa602w2eyO1455pKG08LZN0QnIdaPeMJoD6eFFfrYg8/V7T5xF1KZ+YCJevSf45+DWME7NK23iR2jBkWn4P6ZtkwrSCrAmlh4eHUlYn4YSvl6m3gZ9SXmkarDCIKtJPH5pQqudFLQig1Cimb5QJM0pHEyVGlQVWgclHodan/C/2+/3SysrKzfjwleT+hwVaWtq6LxTxNXKX1BCTMO8qINXSaLX7UlgR51APTiVdYBXA4+qUakJeB63b29v+VNIFLND+b0J6DH5AekbsTCOlfa5VoKXWhagKcUHQlaO7zJfUs0DJdL4ADhgvOkMb4Ihd+BXyIy5NqZ7YpuMdzCrgZL+mUTvsCvLxLSvCFjgF38FPVFaHtrk6EPwKPK6DiiZRChzUyEMN+xaUeN4nfuJm+U2eVJsbYCYpyV04rkg+h+Caeoq6ZrsE9njeBV+Y8YtisTgaiZ+n9OFM4+YkyE/5egqxTnrN9B74iO97iUSixJUt5aN7SgvXt4ydsSkI10mUym/Ud0W4vLx8fHBwIEK1j8pMUrKs1dVVG3UxPNMxp4n5DPYhLE0jFPMsT/XejUajbf5MdFjo2giisMyQK36E6mTOP1VmFPPzxvsIHluQO/f9T81Dqu/dzZt1cAf+AMymEnybyIybAAAAAElFTkSuQmCC" />
+    </defs>
+  </svg>
+
+</template>
diff --git a/docs/content/2.installation.md → docs/content/1.get-started/1.installation.md b/docs/content/2.installation.md → docs/content/1.get-started/1.installation.md
@@ -19,7 +19,7 @@ Docus is a pre-configured [Nuxt](https://nuxtjs.org) application, with [Tailwind
 
 Start your documentation in a new GitHub repository by using our [GitHub template](https://github.com/nuxtlabs/docus-starter):
 
-<external-link href="https://github.com/nuxtlabs/docus-starter/generate">Create a repo with the Docus starter</external-link>
+<button-link blank href="https://github.com/nuxtlabs/docus-starter/generate">Create a repo with the Docus starter</button-link>
 
 ### Download locally
 
@@ -35,7 +35,7 @@ This command will create a new folder named `docs/` and download the Docus start
 
 Vercel let's you setup the starter to your favorite Git provider (GitHub, GitLab and Bitbucket) as well as deploying for free.
 
-<external-link href="https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fnuxtlabs%2Fdocus-starter">Create and deploy using Vercel</external-link>
+<button-link blank href="https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fnuxtlabs%2Fdocus-starter">Create and deploy using Vercel</button-link>
 
 **See it in action**:
 

diff --git a/docs/content/1.get-started/2.configuration.md b/docs/content/1.get-started/2.configuration.md
@@ -0,0 +1,111 @@
+---
+title: Configuration
+category: Getting Started
+---
+
+## Theme
+
+You can create a `content/settings.json` file to configure the theme.
+
+```json [content/settings.json]
+{
+  "title": "Docus",
+  "url": "https://docus.dev",
+  // Optional
+  "layout": "docs",
+  "logo": "logo.svg",
+  "twitter": "@nuxt_js",
+  "github": "nuxtlabs/docus",
+  "algolia": {}
+}
+```
+### Properties
+
+| Key | Type | Description |
+|---------|------|-------------|
+| `title` | `String` | Documentation title |
+| `url` | `String` | Url of your deployed documentation. |
+| `logo` | `String` `Object` | Logo of the project, can be an `Object` to set a logo per [color mode](https://github.com/nuxt-community/color-mode-module). |
+| `layout` | `String` | The layout of your documentation (defaults to `docs`). Can be changed to `readme` to have a one-page doc. |
+| `twitter` | `String` | Twitter username `@username` you want to link. Example: `@nuxt_js`. |
+| `github` | `Object` or `String` | Can be a `String` to act as `github.repo` if no other config is needed. |
+| `repo` | `String` | GitHub repository of the project `owner/name` to display the last version, the releases page, the link at the top and the `Edit this page on GitHub link` on each page Example: `nuxt/content`. |
+| `github.url` | `String` | For GitHub Enterprise, in addition to `github.repo`, you have to assign an url. Example: `https://hostname`. Defaults to `https://github.com`. |
+| `github.apiUrl` | `String` | For GitHub Enterprise, in addition to `github.repo`, you have to assign an api url. Example: `https://hostname/api/v3/repos`. Defaults to `https://api.github.com`. |
+| `github.branch` | `String` | The default branch for the GitHub repository of your project, used in the `Edit this page on GitHub link` on each page (defaults to `main` if it cannot be detected). |
+| `github.dir` | `String` | The default dir of your project, used in the `Edit this page on GitHub link` on each page (defaults to `''`). Change it if docus is not at the root of your repository. |
+| `algolia` | `Object` | This option allows you to use [Algolia DocSearch](https://docsearch.algolia.com). In order to enable it, you need to provide at least the `apiKey` and the `indexName`, see example below. |
+
+### Algolia Search
+
+This option allows you to use [Algolia DocSearch](https://docsearch.algolia.com). In order to enable it, you need to provide at least the `apiKey` and the `indexName`:
+
+```json [settings.json]
+"algolia": {
+  "apiKey": "<API_KEY>",
+  "indexName": "<INDEX_NAME>",
+  "langAttribute": "language"
+}
+```
+
+If you use `i18n`, make sure the `<langAttribute>` is the same as the html lang selector in the config (defaults to `language`).
+
+Take a look at the [@nuxt/content](https://github.com/algolia/docsearch-configs/blob/master/configs/nuxtjs_content.json) docsearch config for an example.
+
+## Nuxt
+
+`docus` exports a function to setup the `nuxt.config.js` and allows you to add / override the [Nuxt config](https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build).
+
+You can checkout the [default nuxt.config.js](https://github.com/nuxt/docus/blob/main/theme/nuxt.config.js) from docus. We use [defu.arrayFn](https://github.com/nuxt-contrib/defu#array-function-merger) to merge the default configuration with the one provided.
+
+The theme design is based on a `primary` color to make it easy to override, you can specify it using `docus.colors.primary` in your `nuxt.config.js`, the color palette (50 to 900) is generated using [theme-colors](https://github.com/nuxt-contrib/theme-colors). Also the codeblocks color can be overriden in the same way with `docus.colors.code`.
+
+Example with custom configuration:
+
+```ts [nuxt.config.js]
+import withDocus from 'docus'
+
+export default withDocus({
+  docus: {
+    colors: {
+      primary: '#E24F55',
+      code: '#8B5CF6'
+    }
+  },
+  i18n: {
+    locales: () => [{
+      code: 'fr',
+      iso: 'fr-FR',
+      file: 'fr-FR.js',
+      name: 'Français'
+    }, {
+      code: 'en',
+      iso: 'en-US',
+      file: 'en-US.js',
+      name: 'English'
+    }],
+    defaultLocale: 'en'
+  },
+  buildModules: [
+    ['@nuxtjs/google-analytics', {
+      id: 'UA-12301-2'
+    }]
+  ]
+})
+```
+
+## TailwindCSS
+
+You can override the [default Tailwind config](https://github.com/nuxt/docus/blob/main/theme/tailwind.config.js) by creating your own `tailwind.config.js`.
+
+```js [tailwind.config.js]
+module.exports = {
+  theme: {
+    extend: {
+      // ...
+    }
+  }
+}
+```
+
+Like the [Nuxt config](#nuxt), we use [defu.arrayFn](https://github.com/nuxt-contrib/defu#array-function-merger) to merge both configurations.