fix: readme header (nuxt-modules#150)

* fix: header with no aside prop

* fix: handle header key in settings

* fix: add content dir to purge

* docs: add header key

* fix: weird spacing and aligning

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

docs/content/1.get-started/2.configuration.md

@@ -33,8 +33,10 @@ The theme design is based on a `primary` color to make it easy to override, you
 | `title` | `String` | Documentation title |
 | `description` | `String` | Brief summary about documentation, added for search engine optimization and social sharing |
 | `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. |
+| `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). To display the logo, see `header.logo` section. |
+| `header.logo` | `Boolean` | Defaults to `false`, set to `true` to display the logo in header. |
+| `header.title` | `Boolean` | Defaults to `true`, set to `false` to hide the title and only display the logo in header. |
 | `twitter` | `String` | Twitter username to link in the header. Example: `@nuxt_js`. |
 | `github` | `Object` or `String` | Can be a `String` to act as `github.repo` if no other config is needed. |
 | `github.repo` | `String` | GitHub repository for the project. This will enable displaying 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`. |

theme/components/templates/AsideNavigation.vue

@@ -5,7 +5,8 @@
     <div
       class="w-auto h-full overflow-auto bg-white dark:bg-gray-900 lg:bg-transparent"
     >
-      <div class="flex items-center w-full px-4 lg:hidden h-18 bg-gray-50 dark:bg-gray-800">
+      <!-- aside header -->
+      <div class="flex items-center w-full px-4 sm:px-6 lg:hidden h-18 bg-gray-50 dark:bg-gray-800">
         <button class="flex-1 focus:outline-none" @click.stop="menu = !menu">
           <IconArrowLeft class="w-5 h-5" />
         </button>
@@ -16,8 +17,10 @@
           <SocialIcons />
         </div>
       </div>
+
+      <!-- aside navigation -->
       <nav
-        class="max-w-sm py-4 pr-24 ml-4 overflow-y-auto text-base font-medium h-(full-18) lg:pr-0 lg:text-sm lg:pt-10 lg:pb-16"
+        class="max-w-sm py-4 pr-24 pl-4 sm:pl-6 overflow-y-auto text-base font-medium h-(full-18) lg:pr-0 lg:text-sm lg:pt-10 lg:pb-16"
       >
         <AsideTop />
         <ul>

theme/components/templates/Container.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <slot v-if="header" name="header"><Header /></slot>
+    <slot v-if="header" name="header"><Header :aside="aside" /></slot>
     <div class="lg:flex" :class="fluid ? '' : 'mx-auto max-w-8xl'">
       <slot v-if="aside" name="aside"><Aside /></slot>
       <div class="flex-auto w-full min-w-0 lg:static lg:max-h-full lg:overflow-visible">

theme/components/templates/Header.vue

@@ -3,16 +3,17 @@
     class="sticky top-0 z-40 w-full bg-white border-b border-gray-100 lg:z-50 app-header dark:border-gray-800 bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80"
     @click="scrollToTop"
   >
-    <div class="flex flex-none px-4 mx-auto max-w-8xl ">
+    <div class="flex flex-none px-4 mx-auto sm:px-6 max-w-8xl ">
       <!-- Left section -->
       <!-- Mobile menu button -->
       <button
-        class="flex items-center justify-center sm:p-2 lg:hidden focus:outline-none"
+        v-if="aside"
+        class="flex items-center justify-center lg:hidden focus:outline-none"
         @click.stop="menu = !menu"
       >
         <IconMenuAlt class="w-6 h-6 " />
       </button>
-      <div class="flex items-center justify-center flex-1 lg:flex-none">
+      <div :class="[aside ? 'justify-center' : 'justify-start']" class="flex items-center flex-1 lg:flex-none">
         <Logo :settings="settings" />
       </div>
 
@@ -51,6 +52,12 @@
 
 <script>
 export default {
+  props: {
+    aside: {
+      type: Boolean,
+      default: false
+    }
+  },
   computed: {
     settings () {
       return this.$docus.settings

theme/module.js

@@ -17,8 +17,12 @@ export default function docusModule () {
 
   this.addServerMiddleware({ path: '/api/docus/releases', handler: releases.handler })
 
+  // Inject content dir in private runtime config
+  const contentDir = options.content.dir || 'content'
+  options.publicRuntimeConfig.contentDir = contentDir
+
   // read docus settings
-  const settingsPath = resolve(options.srcDir, 'content/settings.json')
+  const settingsPath = resolve(options.srcDir, contentDir, 'settings.json')
   try {
     const userSettings = require(settingsPath)
     const settings = useDefaults(userSettings)
@@ -35,9 +39,6 @@ export default function docusModule () {
     }
   } catch (err) { /* settings not found */ }
 
-  // Inject content dir in private runtime config
-  options.publicRuntimeConfig.contentDir = options.content.dir || 'content'
-
   // Add layouts
   hook('build:before', () => {
     addLayout({ src: r('layouts/docs.vue'), filename: 'layouts/docs.vue' })
@@ -164,6 +165,8 @@ export default function docusModule () {
   // Configure TailwindCSS
   hook('tailwindcss:config', function (defaultTailwindConfig) {
     Object.assign(defaultTailwindConfig, defu(defaultTailwindConfig, tailwindConfig({ nuxt })))
+    // Add content/**/*.md to purge
+    defaultTailwindConfig.purge.content.push(resolve(options.srcDir, contentDir, '**/*.md'))
   })
   // Update i18n langDir to relative from `~` (https://github.com/nuxt-community/i18n-module/blob/4bfa890ff15b43bc8c2d06ef9225451da711dde6/src/templates/utils.js#L31)
   options.i18n.langDir = join(relative(options.srcDir, r('i18n')), '/')

theme/plugins/docus.js

@@ -39,7 +39,7 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
         ])
       },
       async fetchSettings () {
-        const { path, extension, ...settings } = await $content('settings').only(['title', 'url', 'logo', 'layout', 'twitter', 'github', 'algolia', 'colors']).fetch().catch((e) => {
+        const { path, extension, ...settings } = await $content('settings').only(['title', 'url', 'logo', 'layout', 'header', 'twitter', 'github', 'algolia', 'colors']).fetch().catch((e) => {
           // eslint-disable-next-line no-console
           console.warn('Please add a `settings.json` file inside the `content/` folder to customize this theme.')
         })

theme/utils/settings.js

@@ -9,6 +9,7 @@ const DEFAULT_SETTINGS = {
   title: 'Docus',
   description: '',
   layout: 'docs',
+  logo: null,
   url: '',
   github: {
     repo: '',