-
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
288 additions
and
81 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
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 |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| { | ||
| "name": "mockline", | ||
| "version": "0.1.0", | ||
| "version": "0.1.1", | ||
| "type": "module", | ||
| "exports": { | ||
| ".": { | ||
|
|
||
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 |
|---|---|---|
| @@ -1,19 +1,18 @@ | ||
| <script setup lang="ts"> | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="bg-canvas text-gray-12 min-h-screen"> | ||
| <Html class="bg-canvas text-gray-12 min-h-screen"> | ||
| <NuxtLoadingIndicator /> | ||
| <NuxtLayout> | ||
| <NuxtPage /> | ||
| </NuxtLayout> | ||
| <MToasts | ||
| position="top-center" | ||
| close-button | ||
| :toast-options="{ | ||
| style: { | ||
| borderColor: 'var(--canvas-5)', | ||
| backgroundColor: 'var(--canvas-2)' | ||
| } | ||
| }" | ||
| /> | ||
| </div> | ||
| </Html> | ||
| </template> |
File renamed without changes.
File renamed without changes.
7 changes: 7 additions & 0 deletions
7
packages/mockline/playground/content/2.components/1.buttons.md
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,7 @@ | ||
| --- | ||
| title: Button | ||
| description: 'Learn how to use the Button component in your application.' | ||
| --- | ||
|
|
||
| ## Button | ||
|
|
7 changes: 7 additions & 0 deletions
7
packages/mockline/playground/content/2.components/2.switch.md
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,7 @@ | ||
| --- | ||
| title: Switch | ||
| description: 'Learn how to use the Switch component in your application.' | ||
| --- | ||
|
|
||
| ## Switch | ||
|
|
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 |
|---|---|---|
| @@ -1,45 +1,15 @@ | ||
| <script setup lang="ts"> | ||
| import { withoutTrailingSlash } from 'ufo' | ||
| const route = useRoute() | ||
| const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne()) | ||
| const [prev, next] = await queryContent() | ||
| .where({ | ||
| _extension: 'md', | ||
| _path: { | ||
| $exists: true, | ||
| }, | ||
| navigation: { | ||
| $ne: false | ||
| }, | ||
| }) | ||
| .only(['title', '_path']) | ||
| .findSurround(withoutTrailingSlash(route.path)) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <div class="bg-canvas-3 flex items-center justify-between p-4"> | ||
| <NuxtLink to="/" class="i-custom-mockline size-6" /> | ||
| <MThemeToggle /> | ||
| </div> | ||
| <Header :height="16"> | ||
| <template #left> | ||
| <NuxtLink to="/" class="i-custom-mockline size-6" /> | ||
| </template> | ||
| <template #right> | ||
| <MThemeToggle /> | ||
| </template> | ||
| </Header> | ||
| <Main> | ||
| <Page> | ||
| <template #right> | ||
| <div class="flex flex-col gap-2"> | ||
| <h3 class="text-gray-12 text-2xl font-bold"> | ||
| Table of Contents | ||
| </h3> | ||
| <MContentToc :links="page?.body?.toc?.links" /> | ||
| </div> | ||
| </template> | ||
| <div> | ||
| <slot /> | ||
| </div> | ||
| <MContentSurround :next :prev /> | ||
| </Page> | ||
| <slot /> | ||
| </Main> | ||
| </div> | ||
| </template> |
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
42 changes: 42 additions & 0 deletions
42
packages/mockline/src/runtime/components/content/ContentNavigationTree.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <script setup lang="ts"> | ||
| import { computed } from 'vue' | ||
| export type NavigationTree = { | ||
| title: string | ||
| _path: string | ||
| children: NavigationTree[] | ||
| } | ||
| export type NavigationTreeGroup = { | ||
| title: string | ||
| children: NavigationTree[] | ||
| } | ||
| export type NavigationTreeProps = { | ||
| links: NavigationTreeGroup[] | ||
| class?: string | ||
| } | ||
| const props = withDefaults(defineProps<NavigationTreeProps>(), { | ||
| links: () => [] | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <nav v-if="links?.length" class="space-y-3"> | ||
| <template v-for="(link, index) in links" :key="index"> | ||
| <div> | ||
| <h3 class="truncate text-sm/6 font-semibold"> | ||
| {{ link.title }} | ||
| </h3> | ||
| <ul class="flex flex-col gap-1"> | ||
| <li v-for="(child, index) in link.children" :key="index"> | ||
| <NuxtLink :to="child._path" class="text-gray-11 hover:text-primary-11 text-sm/6" :class="$route.path === child._path ? 'text-primary' : ''"> | ||
| {{ child.title }} | ||
| </NuxtLink> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> | ||
| </nav> | ||
| </template> |
32 changes: 21 additions & 11 deletions
32
packages/mockline/src/runtime/components/content/ContentToc.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,29 @@ | ||
| <script setup lang="ts"> | ||
| import type { PropType } from 'vue' | ||
| import type { TocLink } from '@nuxt/content/dist/runtime/types' | ||
| const props = defineProps({ | ||
| links: { | ||
| type: Array as PropType<TocLink[]>, | ||
| default: () => [] | ||
| }, | ||
| export type ContentTocProps = { | ||
| title?: string | ||
| links: TocLink[] | ||
| } | ||
| withDefaults(defineProps<ContentTocProps>(), { | ||
| title: 'Table of Contents', | ||
| links: () => [] | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <ul class="list-none"> | ||
| <li v-for="link in links" :key="link.id"> | ||
| <span>{{ link.text }}</span> | ||
| </li> | ||
| </ul> | ||
| <nav class="sticky top-[--header-height] max-h-[calc(100vh-var(--header-height))] overflow-y-auto"> | ||
| <div> | ||
| <slot name="top" /> | ||
|
|
||
| <button v-if="links?.length" tabindex="-1" class="group flex w-full items-center gap-1.5 lg:cursor-text lg:select-text"> | ||
| <span class="truncate text-sm/6 font-semibold">{{ title }}</span> | ||
| </button> | ||
|
|
||
| <MContentTocLinks :links /> | ||
|
|
||
| <slot name="bottom" /> | ||
| </div> | ||
| </nav> | ||
| </template> |
53 changes: 53 additions & 0 deletions
53
packages/mockline/src/runtime/components/content/ContentTocLinks.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <script setup lang="ts"> | ||
| import type { TocLink } from '@nuxt/content/dist/runtime/types' | ||
| import { useScrollspy } from '#mockline/composables/useScrollSpy' | ||
| import { useNuxtApp, useRouter } from '#imports' | ||
| const { activeHeadings, updateHeadings } = useScrollspy() | ||
| export type ContentTocProps = { | ||
| title?: string | ||
| links: TocLink[] | ||
| active?: string | ||
| } | ||
| withDefaults(defineProps<ContentTocProps>(), { | ||
| title: 'Table of Contents', | ||
| links: () => [] | ||
| }) | ||
| const nuxtApp = useNuxtApp() | ||
| const router = useRouter() | ||
| nuxtApp.hooks.hookOnce('page:finish', () => { | ||
| updateHeadings([ | ||
| ...document.querySelectorAll('h2'), | ||
| ...document.querySelectorAll('h3') | ||
| ]) | ||
| }) | ||
| const emit = defineEmits(['move']) | ||
| const scrollToHeading = (id: string): void => { | ||
| const encodedId = encodeURIComponent(id) | ||
| router.push(`#${encodedId}`) | ||
| emit('move', id) | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <ul v-if="links?.length"> | ||
| <li v-for="link in links" :key="link.text" :class="link.depth === 3 ? 'ml-3' : ''"> | ||
| <a | ||
| class="block truncate text-sm/6" | ||
| :class="activeHeadings.includes(link.id) ? 'text-primary' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'" | ||
| :href="`#${link.id}`" | ||
| @click.prevent="scrollToHeading(link.id)" | ||
| > | ||
| {{ link.text }} | ||
| </a> | ||
|
|
||
| <MContentTocLinks v-if="link.children" :links="link.children" /> | ||
| </li> | ||
| </ul> | ||
| </template> |
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,13 @@ | ||
| <script setup lang="ts"> | ||
| </script> | ||
|
|
||
| <template> | ||
| <aside class="sticky top-[--header-height] overflow-y-auto"> | ||
| <div class="relative"> | ||
| <slot /> | ||
|
|
||
| <slot name="bottom" /> | ||
| </div> | ||
| </aside> | ||
| </template> |
Oops, something went wrong.