From 8b48a70de3c7523b98500e1faf3d456be572b97c Mon Sep 17 00:00:00 2001
From: Sergey Bedritsky <sergey.bedritsky@gmail.com>
Date: Tue, 8 Jun 2021 13:28:01 +0300
Subject: [PATCH] improve templates; move toc into AppContent (#375)

---
 docs/content/2.usage/4.template.md            |   4 +-
 package.json                                  |   2 +-
 .../components/organisms/AppPage.vue          |   6 +-
 .../{PageBottom.vue => EditOnGithub.vue}      |   5 +-
 .../components/organisms/PageContent.vue      |  17 ++-
 .../components/organisms/PageMobileToc.vue    |  88 +++++++++++++++
 .../components/organisms/PageToc.vue          | 106 +++---------------
 .../components/organisms/PageTocList.vue      |  76 +++++++++++++
 .../components/templates/Docs.vue             |  12 +-
 .../components/templates/Releases.vue         |  26 +++--
 10 files changed, 228 insertions(+), 114 deletions(-)
 rename src/defaultTheme/components/organisms/{PageBottom.vue => EditOnGithub.vue} (89%)
 create mode 100644 src/defaultTheme/components/organisms/PageMobileToc.vue
 create mode 100644 src/defaultTheme/components/organisms/PageTocList.vue

diff --git a/docs/content/2.usage/4.template.md b/docs/content/2.usage/4.template.md
index c3571da8f..5009b7edb 100644
--- a/docs/content/2.usage/4.template.md
+++ b/docs/content/2.usage/4.template.md
@@ -28,13 +28,13 @@ A wrapper component that contains everything about the page, including page cont
 
 Display table of contents of the document. This component does not show on [fullscreen document](/usage/content#front-matter). This component shows inside the page on the right side of document content.
 
-### `<PageBottom>`
+### `<EditOnGithub>`
 
 Display information about the document, including the last modified date and a link to edit the document. This component shows inside the page and under the document content.
 
 ### `<PagePrevNext>`
 
-Display links to the next and previous pages. This component shows inside the `<AppPage>` and under the `<PageBottom>`.
+Display links to the next and previous pages. This component shows inside the `<AppPage>` and under the `<EditOnGithub>`.
 
 ### `<AlgoliaSearchBox>`
 
diff --git a/package.json b/package.json
index e04e5e990..646ca5f20 100755
--- a/package.json
+++ b/package.json
@@ -130,4 +130,4 @@
   "peerDependencies": {
     "vuex": "^3.6.2"
   }
-}
+}
\ No newline at end of file
diff --git a/src/defaultTheme/components/organisms/AppPage.vue b/src/defaultTheme/components/organisms/AppPage.vue
index 9656fc0ee..3f57bd79a 100644
--- a/src/defaultTheme/components/organisms/AppPage.vue
+++ b/src/defaultTheme/components/organisms/AppPage.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="flex flex-col w-full pt-0 xl:flex-row xl:pt-10">
-    <article class="flex-auto order-last min-w-0 px-4 sm:px-6 mt-4 xl:order-first sm:px-6 xl:mt-0">
+    <article class="flex-auto order-last min-w-0 mt-4 xl:order-first xl:mt-0">
       <slot />
+      <div v-if="$scopedSlots['prev-next']" class="px-4 sm:px-6">
+        <hr class="mt-10 mb-8 border-gray-100 dark:border-gray-800 dark:border-opacity-50" />
+        <slot name="prev-next" />
+      </div>
     </article>
 
     <slot name="toc" />
diff --git a/src/defaultTheme/components/organisms/PageBottom.vue b/src/defaultTheme/components/organisms/EditOnGithub.vue
similarity index 89%
rename from src/defaultTheme/components/organisms/PageBottom.vue
rename to src/defaultTheme/components/organisms/EditOnGithub.vue
index 270706977..22710762f 100644
--- a/src/defaultTheme/components/organisms/PageBottom.vue
+++ b/src/defaultTheme/components/organisms/EditOnGithub.vue
@@ -1,5 +1,8 @@
 <template>
-  <div v-if="link" class="flex flex-col justify-between text-gray-500 dark:text-gray-500 mt-8 mb-4 sm:flex-row">
+  <div
+    v-if="link"
+    class="flex flex-col justify-between text-gray-500 dark:text-gray-500 mt-8 mb-4 px-4 sm:px-6 sm:flex-row"
+  >
     <a :href="link" target="_blank" rel="noopener" class="flex items-center mb-2 text-sm sm:mb-0 hover:underline">
       <IconEdit class="w-3 h-3 mr-1" />
       <span>
diff --git a/src/defaultTheme/components/organisms/PageContent.vue b/src/defaultTheme/components/organisms/PageContent.vue
index cc54bd655..d8039ae85 100644
--- a/src/defaultTheme/components/organisms/PageContent.vue
+++ b/src/defaultTheme/components/organisms/PageContent.vue
@@ -1,9 +1,6 @@
 <template>
   <div>
-    <section
-      class="mb-4 mt-4 xl:mt-0"
-      :class="{ 'border-b border-gray-100 dark:border-gray-800 dark:border-opacity-50 pb-4': page.description }"
-    >
+    <section class="xl:mb-4 mt-4 xl:mt-0 px-4 sm:px-6">
       <div class="flex items-center justify-between">
         <InjectComponent
           v-if="page.icon"
@@ -39,9 +36,17 @@
       <p v-if="page.description" class="mt-4 text-lg font-medium text-gray-500 dark:text-gray-400">
         {{ page.description }}
       </p>
+      <hr
+        v-if="$scopedSlots['mobile-toc'] || page.description"
+        class="mt-4 border-gray-100 dark:border-gray-800 dark:border-opacity-50"
+      />
     </section>
-    <NuxtContent :document="page" class="docus-content" />
-    <PageBottom :page="page" />
+
+    <slot name="mobile-toc" />
+
+    <div class="px-4 sm:px-6 mt-4">
+      <NuxtContent :document="page" class="docus-content" />
+    </div>
   </div>
 </template>
 
diff --git a/src/defaultTheme/components/organisms/PageMobileToc.vue b/src/defaultTheme/components/organisms/PageMobileToc.vue
new file mode 100644
index 000000000..2416daea6
--- /dev/null
+++ b/src/defaultTheme/components/organisms/PageMobileToc.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    v-if="toc.length"
+    class="
+      sticky
+      z-10
+      left-0
+      flex-none
+      w-full
+      text-sm
+      bg-white
+      border-b border-gray-200 border-opacity-50 border-dashed
+      xl:hidden
+      dark:border-gray-800
+      blur-header
+      bg-opacity-80
+      dark:bg-gray-900 dark:bg-opacity-80
+      lg:left-60
+      pl-4
+      sm:pl-6
+      top-header
+    "
+  >
+    <!-- mobile ToC title + button -->
+    <button
+      class="
+        relative
+        z-10
+        flex
+        items-center
+        w-full
+        py-3
+        text-sm
+        font-semibold
+        text-gray-900
+        focus:outline-none
+        xl:hidden
+        dark:text-gray-100
+      "
+      @click="showMobileToc = !showMobileToc"
+    >
+      <span class="mr-2">{{ title || $t('toc.title') }}</span>
+      <IconChevronRight
+        class="w-4 h-4 text-gray-500 transition-transform duration-100 transform"
+        :class="[showMobileToc ? 'rotate-90' : 'rotate-0']"
+      />
+    </button>
+
+    <div
+      :class="[showMobileToc ? 'flex' : 'hidden xl:flex']"
+      class="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-header) -mt-10 pt-10 pb-4 top-header"
+    >
+      <PageTocTop />
+
+      <h5 class="items-center hidden mb-2 xl:flex">
+        <span class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ title || $t('toc.title') }}</span>
+      </h5>
+
+      <PageTocList :toc="toc" @click.native="showMobileToc = false" />
+
+      <PageTocBottom />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    toc: {
+      type: Array,
+      default: () => []
+    },
+    title: {
+      type: String,
+      default: null
+    }
+  },
+  setup() {
+    const showMobileToc = ref(false)
+
+    return {
+      showMobileToc
+    }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/organisms/PageToc.vue b/src/defaultTheme/components/organisms/PageToc.vue
index 4ee9119b8..596e781c9 100644
--- a/src/defaultTheme/components/organisms/PageToc.vue
+++ b/src/defaultTheme/components/organisms/PageToc.vue
@@ -2,7 +2,8 @@
   <div
     v-if="toc.length"
     class="
-      sticky
+      hidden
+      xl:sticky
       z-10
       left-0
       flex-none
@@ -27,34 +28,20 @@
       xl:block xl:top-0
     "
   >
-    <!-- mobile ToC title + button -->
-    <button
+    <div
       class="
-        relative
-        z-10
-        flex
-        items-center
-        w-full
-        py-3
-        text-sm
-        font-semibold
-        text-gray-900
-        focus:outline-none
-        xl:hidden
-        dark:text-gray-100
+        hidden
+        xl:flex
+        flex-col
+        justify-between
+        overflow-y-auto
+        sticky
+        max-h-(screen-header)
+        -mt-10
+        pt-10
+        pb-4
+        top-header
       "
-      @click="showMobileToc = !showMobileToc"
-    >
-      <span class="mr-2">{{ title || $t('toc.title') }}</span>
-      <IconChevronRight
-        class="w-4 h-4 text-gray-500 transition-transform duration-100 transform"
-        :class="[showMobileToc ? 'rotate-90' : 'rotate-0']"
-      />
-    </button>
-
-    <div
-      :class="[showMobileToc ? 'flex' : 'hidden xl:flex']"
-      class="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-header) -mt-10 pt-10 pb-4 top-header"
     >
       <PageTocTop />
 
@@ -62,50 +49,15 @@
         <span class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ title || $t('toc.title') }}</span>
       </h5>
 
-      <ul class="font-medium ml-4">
-        <li v-for="link of toc" :key="link.id" @click="showMobileToc = false">
-          <a
-            :href="`#${link.id}`"
-            class="block py-1 transition-colors duration-100 transform"
-            :class="{
-              'text-gray-900 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
-                activeHeadings.includes(link.id) || isActiveParent(link),
-              'text-gray-500 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
-                !activeHeadings.includes(link.id) && !isActiveParent(link)
-            }"
-            @click.prevent="scrollToHeading(link.id, '--docs-scroll-margin-block')"
-          >
-            {{ link.text }}
-          </a>
+      <PageTocList :toc="toc" />
 
-          <ul v-if="link.children" class="overflow-x-hidden font-medium">
-            <li v-for="childLink in link.children" :key="childLink.id">
-              <a
-                :href="`#${childLink.id}`"
-                :class="{
-                  'text-gray-900 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
-                    activeHeadings.includes(childLink.id),
-                  'text-gray-500 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
-                    !activeHeadings.includes(childLink.id)
-                }"
-                class="block py-1 pl-3 transition-colors duration-100 transform"
-                @click.prevent="scrollToHeading(childLink.id, '--docs-scroll-margin-block')"
-              >
-                {{ childLink.text }}
-              </a>
-            </li>
-          </ul>
-        </li>
-      </ul>
       <PageTocBottom />
     </div>
   </div>
 </template>
 
 <script>
-import { defineComponent, onMounted, ref } from '@nuxtjs/composition-api'
-import { useScrollspy } from '../../composables'
-import { scrollToHeading } from '../../utils'
+import { defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   props: {
@@ -117,32 +69,6 @@ export default defineComponent({
       type: String,
       default: null
     }
-  },
-  setup() {
-    const showMobileToc = ref(false)
-    const { activeHeadings, visibleHeadings, updateHeadings } = useScrollspy()
-
-    onMounted(() =>
-      setTimeout(() => {
-        updateHeadings([
-          ...document.querySelectorAll('.docus-content h1'),
-          ...document.querySelectorAll('.docus-content h2'),
-          ...document.querySelectorAll('.docus-content h3')
-        ])
-      }, 200)
-    )
-
-    const isActiveParent = link => {
-      return link.children && link.children.some(child => activeHeadings.value.includes(child.id))
-    }
-
-    return {
-      visibleHeadings,
-      activeHeadings,
-      showMobileToc,
-      scrollToHeading,
-      isActiveParent
-    }
   }
 })
 </script>
diff --git a/src/defaultTheme/components/organisms/PageTocList.vue b/src/defaultTheme/components/organisms/PageTocList.vue
new file mode 100644
index 000000000..3b82ca938
--- /dev/null
+++ b/src/defaultTheme/components/organisms/PageTocList.vue
@@ -0,0 +1,76 @@
+<template>
+  <ul class="font-medium ml-4">
+    <li v-for="link of toc" :key="link.id" @click="$emit('click')">
+      <a
+        :href="`#${link.id}`"
+        class="block py-1 transition-colors duration-100 transform"
+        :class="{
+          'text-gray-900 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
+            activeHeadings.includes(link.id) || isActiveParent(link),
+          'text-gray-500 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
+            !activeHeadings.includes(link.id) && !isActiveParent(link)
+        }"
+        @click.prevent="scrollToHeading(link.id, '--docs-scroll-margin-block')"
+      >
+        {{ link.text }}
+      </a>
+
+      <ul v-if="link.children" class="overflow-x-hidden font-medium">
+        <li v-for="childLink in link.children" :key="childLink.id">
+          <a
+            :href="`#${childLink.id}`"
+            :class="{
+              'text-gray-900 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
+                activeHeadings.includes(childLink.id),
+              'text-gray-500 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
+                !activeHeadings.includes(childLink.id)
+            }"
+            class="block py-1 pl-3 transition-colors duration-100 transform"
+            @click.prevent="scrollToHeading(childLink.id, '--docs-scroll-margin-block')"
+          >
+            {{ childLink.text }}
+          </a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script>
+import { defineComponent, onMounted } from '@nuxtjs/composition-api'
+import { useScrollspy } from '../../composables'
+import { scrollToHeading } from '../../utils'
+
+export default defineComponent({
+  props: {
+    toc: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup() {
+    const { activeHeadings, visibleHeadings, updateHeadings } = useScrollspy()
+
+    onMounted(() =>
+      setTimeout(() => {
+        updateHeadings([
+          ...document.querySelectorAll('.docus-content h1'),
+          ...document.querySelectorAll('.docus-content h2'),
+          ...document.querySelectorAll('.docus-content h3')
+        ])
+      }, 200)
+    )
+
+    const isActiveParent = link => {
+      return link.children && link.children.some(child => activeHeadings.value.includes(child.id))
+    }
+
+    return {
+      visibleHeadings,
+      activeHeadings,
+      scrollToHeading,
+      isActiveParent
+    }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/templates/Docs.vue b/src/defaultTheme/components/templates/Docs.vue
index a69226abc..fdb96db46 100644
--- a/src/defaultTheme/components/templates/Docs.vue
+++ b/src/defaultTheme/components/templates/Docs.vue
@@ -1,10 +1,16 @@
 <template>
   <AppPage>
-    <PageContent :page="page" />
+    <PageContent :page="page">
+      <template #mobile-toc>
+        <PageMobileToc :title="page.toc.title" :toc="page.toc.links" />
+      </template>
+    </PageContent>
 
-    <hr class="mt-10 mb-8 border-gray-100 dark:border-gray-800 dark:border-opacity-50" />
+    <EditOnGithub :page="page" />
 
-    <PagePrevNext :prev="prev" :next="next" />
+    <template #prev-next>
+      <PagePrevNext :prev="prev" :next="next" />
+    </template>
 
     <template #toc>
       <PageToc v-if="!page.hideToc" :title="page.toc.title" :toc="page.toc.links" />
diff --git a/src/defaultTheme/components/templates/Releases.vue b/src/defaultTheme/components/templates/Releases.vue
index 5259ff47b..e5818314b 100644
--- a/src/defaultTheme/components/templates/Releases.vue
+++ b/src/defaultTheme/components/templates/Releases.vue
@@ -1,10 +1,18 @@
 <template>
   <AppPage>
-    <h1 class="flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
-      <span class="flex-1">Releases</span>
-    </h1>
+    <section class="mt-4 xl:mt-0 px-4 sm:px-6">
+      <h1 class="flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
+        {{ page.title }}
+      </h1>
+      <p v-if="page.description" class="mt-4 text-lg font-medium text-gray-500 dark:text-gray-400">
+        {{ page.description }}
+      </p>
+      <hr class="mt-4 border-gray-100 dark:border-gray-800 dark:border-opacity-50" />
+    </section>
 
-    <AppPage>
+    <PageMobileToc title="Versions" :toc="toc" />
+
+    <div class="px-4 sm:px-6">
       <div v-for="release of releases" :key="release.name">
         <div class="flex items-baseline justify-between">
           <ProseH2 :id="release.name">
@@ -16,13 +24,11 @@
         </div>
         <NuxtContent :document="release" class="docus-content" />
       </div>
+    </div>
 
-      <hr class="mt-10 mb-4 border-gray-200 dark:border-gray-800" />
-
-      <template #toc>
-        <PageToc :toc="toc" title="Versions" />
-      </template>
-    </AppPage>
+    <template #toc>
+      <PageToc :toc="toc" title="Versions" />
+    </template>
   </AppPage>
 </template>