-
Notifications
You must be signed in to change notification settings - Fork 156
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
improve templates; move toc into AppContent (#375)
- Loading branch information
Showing
10 changed files
with
228 additions
and
114 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -130,4 +130,4 @@ | |
| "peerDependencies": { | ||
| "vuex": "^3.6.2" | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 4 additions & 1 deletion
5
...Theme/components/organisms/PageBottom.vue → ...eme/components/organisms/EditOnGithub.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Oops, something went wrong.