fix: fluid layout (#789)

Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com>
nuxt-themes · Jan 27, 2023 · e190583 · e190583
1 parent 056a877
commit e190583
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 76 deletions.
diff --git a/.docs/.studio/app.config.json b/.docs/.studio/app.config.json
@@ -16,15 +16,17 @@
       "collapsed": false,
       "exclude": []
     },
+    "main": {
+      "padded": true,
+      "fluid": true
+    },
     "header": {
       "title": "",
       "logo": true,
       "showLinkIcon": true,
       "exclude": [],
-      "fixed": {
-        "initial": false,
-        "lg": true
-      }
+      "fixed": true,
+      "fluid": true
     },
     "github": {
       "dir": ".docs/content",
@@ -45,7 +47,8 @@
           "icon": "IconNuxtLabs",
           "label": "Nuxt"
         }
-      ]
+      ],
+      "fluid": true
     }
   },
   "prose": {

diff --git a/.docs/content/1.introduction/4.configuration.md b/.docs/content/1.introduction/4.configuration.md
@@ -30,9 +30,7 @@ export default defineAppConfig({
       edit: true,
       contributors: false
     },
-    layout: {
-      fluid: true
-    },
+    layout: 'default',
     aside: {
       level: 1,
       filter: [],
@@ -80,6 +78,7 @@ export default defineAppConfig({
 | `titleTemplate`              | `string`   | Docus            | Website title template                                              |
 | `description`                | `string`   | My Docus Project | Website description                                                 |
 | `url`                        | `string`   |                  | Website URL                                                         |
+| `layout`                     | `string`   | default          | Fallback layout to use (supports `default` or `docs`)               |
 | **Socials**                  |            |                  |                                                                     |
 | `socials`                    | `object`   | `{}`             | Social links                                                        |
 | `socials.github`             | `string`   |                  | The repository to use on GitHub links                               |
@@ -92,15 +91,17 @@ export default defineAppConfig({
 | `socials.[social].label`     | `string`   |                  | A label to use for the social                                       |
 | `socials.[social].icon`      | `string`   |                  | A icon to use for the social                                        |
 | `socials.[social].href`      | `string`   |                  | A link to use for the social                                        |
-| **Layout**                   |            |                  |                                                                     |
-| `layout`                     | `object`   |                  | Layout configuration                                                |
-| `layout.fluid`               | `boolean`  |                  | Enables the `fluid` layout mode.                                    |
 | **Header**                   |            |                  |                                                                     |
 | `header`                     | `object`   |                  | Header configuration                                                |
 | `header.logo`                | `boolean`  |                  | Whether or not to use `Logo.vue` as the header logo                 |
 | `header.title`               | `string`   |                  | If set to a string, will be used in the header                      |
 | `header.showLinkIcon`        | `boolean`  |                  | If set to `true` links icons will show in the header                |
 | `header.exclude`             | `string[]` |                  | An array of path to exclude out from the header navigation          |
+| `header.fluid`               | `boolean`  | `true`           | Make header `Container` fluid                                       |
+| **Main**                     |            |                  |                                                                     |
+| `main`                       | `object`   |                  | Main configuration                                                  |
+| `main.fluid`                 | `boolean`  | `true`           | Make main content `Container` fluid                                 |
+| `main.padded`                | `boolean`  | `true`           | Make main content `Container` padded                                |
 | **Aside**                    |            |                  |                                                                     |
 | `aside`                      | `object`   |                  | Aside configuration                                                 |
 | `aside.level`                | `string`   | 0                | Aside base level of nesting                                         |
@@ -119,6 +120,7 @@ export default defineAppConfig({
 | `footer.iconLinks[0].label`  | `string`   |                  | A label to use for the icon                                         |
 | `footer.iconLinks[0].href`   | `string`   |                  | A link to use for the icon                                          |
 | `footer.iconLinks[0].icon`   | `string`   |                  | The icon to use (can be a component name)                           |
+| `footer.fluid`               | `boolean`  | `true`           | Make footer `Container` fluid                                       |
 | **GitHub**                   |            |                  |                                                                     |
 | `github`                     | `object`   | `false`          | GitHub integration configuration                                    |
 | `github.dir`                 | `string`   |                  | Directory containing the files to be edited                         |

diff --git a/.docs/content/1.introduction/_dir.yml b/.docs/content/1.introduction/_dir.yml
@@ -1,2 +1,3 @@
 icon: ph:star-duotone
 navigation.redirect: /introduction/getting-started
+fluid: true
diff --git a/.docs/content/2.api/_dir.yml b/.docs/content/2.api/_dir.yml
@@ -1,2 +1,3 @@
 title: 'API'
-icon: heroicons-outline:bookmark-alt
+icon: heroicons-outline:bookmark-alt
+fluid: true
diff --git a/app.config.ts b/app.config.ts
@@ -1,8 +1,11 @@
 export default defineAppConfig({
   docus: {
     title: 'Docus',
+
     description: 'The best place to start your documentation.',
+
     image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
+
     socials: {
       twitter: '',
       github: '',
@@ -11,37 +14,41 @@ export default defineAppConfig({
       youtube: '',
       medium: ''
     },
-    layout: { fluid: false },
-    aside: {
-      level: 0,
-      collapsed: false,
-      exclude: []
-    },
+
+    layout: 'default',
+
     header: {
       title: '',
       logo: false,
       showLinkIcon: false,
-      fixed: {
-        initial: true,
-        lg: true
-      },
+      fixed: true,
+      fluid: false,
       exclude: []
     },
-    github: {
-      dir: undefined,
-      branch: undefined,
-      repo: undefined,
-      owner: undefined,
-      edit: false
+
+    aside: {
+      level: 0,
+      collapsed: false,
+      exclude: []
     },
+
     footer: {
       credits: {
         icon: 'IconDocus',
         text: 'Powered by Docus',
         href: 'https://docus.dev'
       },
       textLinks: [],
-      iconLinks: []
+      iconLinks: [],
+      fluid: false
+    },
+
+    github: {
+      dir: undefined,
+      branch: undefined,
+      repo: undefined,
+      owner: undefined,
+      edit: false
     }
   }
 })
diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue
@@ -9,7 +9,7 @@ const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value
 
 <template>
   <footer>
-    <Container :fluid="docus?.layout?.fluid" padded class="footer-container">
+    <Container :fluid="docus?.footer?.fluid" padded class="footer-container">
       <!-- Left -->
       <div class="left">
         <a v-if="docus?.footer?.credits" :href="docus?.footer?.credits?.href || '#'" rel="noopener" target="_blank">

diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
@@ -12,7 +12,7 @@ defineProps({
 
 <template>
   <header :class="{ 'has-dialog': hasDialog, 'has-doc-search': hasDocSearch }">
-    <Container :fluid="docus?.layout?.fluid || false">
+    <Container :fluid="docus?.header?.fluid ">
       <div class="section left">
         <AppHeaderDialog v-if="hasDialog" />
         <AppHeaderLogo />

diff --git a/components/app/AppHeaderNavigation.vue b/components/app/AppHeaderNavigation.vue
@@ -30,7 +30,7 @@ const isActive = (link: any) => (link.exact ? route.fullPath === link._path : ro
           :to="link.redirect? link.redirect : navBottomLink(link)"
           :class="{ active: isActive(link) }"
         >
-          <Icon v-if="link.icon && docus.header.showLinkIcon" :name="link.icon" />
+          <Icon v-if="link.icon && docus?.header?.showLinkIcon" :name="link.icon" />
           {{ link.title }}
         </NuxtLink>
       </li>

diff --git a/components/docs/DocsPageBottom.vue b/components/docs/DocsPageBottom.vue
@@ -5,27 +5,29 @@ const docus = useDocus()
 
 <template>
   <div v-if="page" class="docs-page-bottom">
-    <div class="edit-link">
-      <EditOnLink v-if="docus?.github?.edit" v-slot="{url}" :page="page">
-        <NuxtLink :to="url">
-          <Icon name="uil:edit" />
+    <div v-if="docus?.github?.edit" class="edit-link">
+      <Icon name="uil:edit" />
+      <EditOnLink v-slot="{ url }" :page="page">
+        <ProseA :to="url">
           <span>
             Edit this page on GitHub
           </span>
-        </NuxtLink>
+        </ProseA>
       </EditOnLink>
-      <!-- Need to be supported by @nuxt/content -->
-      <span v-if="page.mtime">Updated on: {{ new Intl.DateTimeFormat('en-US').format(Date.parse(page.mtime)) }}</span>
     </div>
+
+    <!-- Need to be supported by @nuxt/content -->
+    <span v-if="page?.mtime">Updated on <b>{{ new Intl.DateTimeFormat('en-US').format(Date.parse(page.mtime)) }}</b></span>
   </div>
 </template>
 
 <style scoped lang="ts">
 css({
   '.docs-page-bottom': {
     display: 'flex',
-    flexDirection: 'column-reverse',
+    alignItems: 'center',
     justifyContent: 'space-between',
+    flexDirection: 'row',
     gap: '{space.4}',
     marginTop: '{space.8}',
     fontSize: '{fontSize.sm}',
@@ -34,19 +36,10 @@ css({
       color: '{color.gray.400}'
     },
     '.edit-link': {
+      flex: 1,
       display: 'flex',
-      flexDirection: 'column',
-      flex: '1',
-      width: '100%',
-      '@md': {
-        width: '50%'
-      },
-      a: {
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: '{space.4}',
-      },
+      alignItems: 'center',
+      gap: '{space.2}'
     }
   }
 })

diff --git a/components/docs/DocsPageLayout.vue b/components/docs/DocsPageLayout.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 const { page, navigation } = useContent()
+const { layoutConfig } = useCurrentNavigation()
 const route = useRoute()
-const docus = useDocus()
 
 const fallbackValue = (value: string, fallback = true) => {
   if (typeof page.value?.[value] !== 'undefined') {
     return page.value[value]
   }
-
   return fallback
 }
 
@@ -56,7 +55,14 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Container :fluid="docus?.layout?.fluid" padded class="docs-page-content" :class="[docus?.layout?.fluid && 'fluid']">
+  <Container
+    :fluid="page?.fluid || layoutConfig?.fluid"
+    :padded="page?.padded || layoutConfig?.padded || true"
+    class="docs-page-content"
+    :class="{
+      fluid: page?.fluid || layoutConfig?.fluid
+    }"
+  >
     <!-- Aside -->
     <aside v-if="hasAside" ref="asideNav" class="aside-nav">
       <DocsAside />

diff --git a/composables/useCurrentNavigation.ts b/composables/useCurrentNavigation.ts
@@ -6,9 +6,12 @@ export const useCurrentNavigation = () => {
 
   const route = useRoute()
 
-  const asideConfig = computed(() => {
-    return navKeyFromPath(route.path, 'aside', navigation.value || [])
-  })
+  const asideConfig = computed(() => navKeyFromPath(route.path, 'aside', navigation.value || []))
+
+  const layoutConfig = computed(() => ({
+    fluid: navKeyFromPath(route.path, 'fluid', navigation.value || []),
+    padded: navKeyFromPath(route.path, 'padded', navigation.value || [])
+  }))
 
   const level = computed(() => {
     // Use `aside.level` key from file or navigation
@@ -59,5 +62,5 @@ export const useCurrentNavigation = () => {
     })
   })
 
-  return { tree, asideConfig }
+  return { tree, asideConfig, layoutConfig }
 }
diff --git a/layouts/page.vue b/layouts/page.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
 const { page } = useContent()
+const { layoutConfig } = useCurrentNavigation()
 </script>
 
 <template>
   <div class="page-layout">
-    <Container :fluid="page?.fluid" :padded="page?.padded">
+    <Container
+      :fluid="page?.fluid || layoutConfig?.fluid"
+      :padded="page?.padded || layoutConfig?.padded || true"
+    >
       <article>
         <slot />
       </article>

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -64,7 +64,7 @@ export default defineNuxtConfig({
       preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini']
     },
     navigation: {
-      fields: ['icon', 'titleTemplate', 'aside']
+      fields: ['icon', 'titleTemplate', 'aside', 'fluid', 'padded']
     }
   },
   colorMode: {