From 59bbd296bb60301bd7c33d53473ec12d3253cd17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ya=C3=ABl=20GUILLOUX?= <yael.guilloux@gmail.com>
Date: Fri, 6 Jan 2023 11:56:12 +0100
Subject: [PATCH] feat(fluid): fix fluid ; make it fully facultative

---
 components/docs/DocsPageBottom.vue |  2 +-
 components/docs/DocsPageLayout.vue | 16 +++++++++-------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/docs/DocsPageBottom.vue b/components/docs/DocsPageBottom.vue
index d0f79d361..bfe9cb82e 100644
--- a/components/docs/DocsPageBottom.vue
+++ b/components/docs/DocsPageBottom.vue
@@ -6,7 +6,7 @@ const docus = useDocus()
 <template>
   <div v-if="page" class="docs-page-bottom">
     <div class="edit-link">
-      <EditOnLink v-if="docus?.socials.github && docus?.github?.edit" :page="page" />
+      <EditOnLink v-if="docus?.socials?.github && docus?.github?.edit" :page="page" />
       <span v-if="page.mtime">Updated on: {{ new Intl.DateTimeFormat('en-US').format(Date.parse(page.mtime)) }}</span>
     </div>
   </div>
diff --git a/components/docs/DocsPageLayout.vue b/components/docs/DocsPageLayout.vue
index 9fcc5aa95..f79cc70a1 100644
--- a/components/docs/DocsPageLayout.vue
+++ b/components/docs/DocsPageLayout.vue
@@ -32,7 +32,7 @@ const asideScroll = useState('asideScroll', () => {
   }
 })
 
-function watchScrollHeight() {
+function watchScrollHeight () {
   if (!asideNav.value) { return }
   if (asideNav.value.scrollHeight === 0) {
     setTimeout(watchScrollHeight, 0)
@@ -56,17 +56,19 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <!-- TODO: update Elements Container with 'fluid' class -->
-  <Container :fluid="docus.layout.fluid" padded class="docs-page-content" :class="[docus.layout.fluid && 'fluid']">
+  <Container :fluid="docus?.layout?.fluid" padded class="docs-page-content" :class="[docus?.layout?.fluid && 'fluid']">
     <!-- Aside -->
     <aside v-if="hasAside" ref="asideNav" class="aside-nav">
       <DocsAside />
     </aside>
 
     <!-- Page Body -->
-    <article class="page-body" :class="{
-      'with-toc': hasToc,
-    }">
+    <article
+      class="page-body"
+      :class="{
+        'with-toc': hasToc,
+      }"
+    >
       <slot v-if="hasBody" />
       <Alert v-else type="info">
         Start writing in <ProseCodeInline>content/{{ page._file }}</ProseCodeInline> to see this page taking shape.
@@ -182,7 +184,7 @@ css({
   },
   '.toc': {
     position: 'sticky',
-    top: 0, 
+    top: 0,
     display: 'flex',
     mx: 'calc(0px - {space.4})',
     overflow: 'auto',