diff --git a/apps/docs/content/1.getting-started/2.installation.md b/apps/docs/content/1.getting-started/2.installation.md index b376e90e..73bc485f 100644 --- a/apps/docs/content/1.getting-started/2.installation.md +++ b/apps/docs/content/1.getting-started/2.installation.md @@ -91,7 +91,7 @@ export default >{ This module is installed to provide dark mode support out of the box thanks to the Tailwind CSS dark mode `class` strategy. ::callout{icon="i-heroicons-light-bulb"} -You can read more about this in the [Theming](/getting-started/theming#dark-mode) section. +You can read more about this in the [Theming](/getting-started/installation) section. :: ## TypeScript @@ -143,7 +143,7 @@ export default defineAppConfig({ ``` ::callout{icon="i-heroicons-light-bulb"} -You can read more about components configuration in the [Theming](/getting-started/theming#appconfigts) section. +You can read more about components configuration in the [Theming](/getting-started/installation) section. :: You can write your `tailwind.config` in TypeScript as such: diff --git a/apps/docs/layouts/docs.vue b/apps/docs/layouts/docs.vue index b88fe6bb..a0859ed5 100644 --- a/apps/docs/layouts/docs.vue +++ b/apps/docs/layouts/docs.vue @@ -28,16 +28,7 @@ const { data: page } = await useAsyncData(route.path, () => queryContent(route.p
diff --git a/packages/mockline/README.md b/packages/mockline/README.md index 0b0cc000..6c151ccc 100644 --- a/packages/mockline/README.md +++ b/packages/mockline/README.md @@ -1,4 +1,4 @@ -![Mockline Social Preview](assets/social-preview.jpg) +![Mockline Social Preview](../../assets/social-preview.jpg)

@@ -102,7 +102,7 @@ To start contributing, you can follow these steps: - + Published under the [APACHE](https://github.com/mockline/mockline/blob/main/LICENSE) license. Made by [@HugoRCD](https://github.com/HugoRCD) and [community](https://github.com/mockline/mockline/graphs/contributors) 💛 @@ -117,6 +117,6 @@ Made by [@HugoRCD](https://github.com/HugoRCD) and [community](https://github.co --- -_🤖 auto updated with [automd](https://automd.unjs.io) (last updated: Wed May 22 2024)_ +_🤖 auto updated with [automd](https://automd.unjs.io) (last updated: Mon Jun 03 2024)_ diff --git a/packages/mockline/package.json b/packages/mockline/package.json index b1a0b38d..3e67f8ab 100644 --- a/packages/mockline/package.json +++ b/packages/mockline/package.json @@ -1,6 +1,6 @@ { "name": "mockline", - "version": "0.1.0", + "version": "0.1.1", "type": "module", "exports": { ".": { diff --git a/packages/mockline/playground/app.vue b/packages/mockline/playground/app.vue index eba67804..7e0fa7e1 100644 --- a/packages/mockline/playground/app.vue +++ b/packages/mockline/playground/app.vue @@ -1,13 +1,12 @@ - - diff --git a/packages/mockline/playground/content/1.intro.md b/packages/mockline/playground/content/1.getting-started/1.intro.md similarity index 100% rename from packages/mockline/playground/content/1.intro.md rename to packages/mockline/playground/content/1.getting-started/1.intro.md diff --git a/packages/mockline/playground/content/2.installation.md b/packages/mockline/playground/content/1.getting-started/2.installation.md similarity index 100% rename from packages/mockline/playground/content/2.installation.md rename to packages/mockline/playground/content/1.getting-started/2.installation.md diff --git a/packages/mockline/playground/content/2.components/1.buttons.md b/packages/mockline/playground/content/2.components/1.buttons.md new file mode 100644 index 00000000..aa8a285b --- /dev/null +++ b/packages/mockline/playground/content/2.components/1.buttons.md @@ -0,0 +1,7 @@ +--- +title: Button +description: 'Learn how to use the Button component in your application.' +--- + +## Button + diff --git a/packages/mockline/playground/content/2.components/2.switch.md b/packages/mockline/playground/content/2.components/2.switch.md new file mode 100644 index 00000000..898916b6 --- /dev/null +++ b/packages/mockline/playground/content/2.components/2.switch.md @@ -0,0 +1,7 @@ +--- +title: Switch +description: 'Learn how to use the Switch component in your application.' +--- + +## Switch + diff --git a/packages/mockline/playground/layouts/docs.vue b/packages/mockline/playground/layouts/docs.vue index 549fe441..743c6d2d 100644 --- a/packages/mockline/playground/layouts/docs.vue +++ b/packages/mockline/playground/layouts/docs.vue @@ -1,45 +1,15 @@ - - diff --git a/packages/mockline/playground/pages/[...slug].vue b/packages/mockline/playground/pages/[...slug].vue index 7aaf1aff..b781227f 100644 --- a/packages/mockline/playground/pages/[...slug].vue +++ b/packages/mockline/playground/pages/[...slug].vue @@ -1,4 +1,6 @@ diff --git a/packages/mockline/playground/pages/index.vue b/packages/mockline/playground/pages/index.vue index 1fb5eabf..0dc3c348 100644 --- a/packages/mockline/playground/pages/index.vue +++ b/packages/mockline/playground/pages/index.vue @@ -15,12 +15,12 @@ const components = ['button', 'nav-menu', 'page']

- + - + diff --git a/packages/mockline/src/runtime/components/content/ContentNavigationTree.vue b/packages/mockline/src/runtime/components/content/ContentNavigationTree.vue new file mode 100644 index 00000000..bb22281d --- /dev/null +++ b/packages/mockline/src/runtime/components/content/ContentNavigationTree.vue @@ -0,0 +1,42 @@ + + + diff --git a/packages/mockline/src/runtime/components/content/ContentToc.vue b/packages/mockline/src/runtime/components/content/ContentToc.vue index 1784954a..ea254571 100644 --- a/packages/mockline/src/runtime/components/content/ContentToc.vue +++ b/packages/mockline/src/runtime/components/content/ContentToc.vue @@ -1,19 +1,29 @@ diff --git a/packages/mockline/src/runtime/components/content/ContentTocLinks.vue b/packages/mockline/src/runtime/components/content/ContentTocLinks.vue new file mode 100644 index 00000000..c1798da1 --- /dev/null +++ b/packages/mockline/src/runtime/components/content/ContentTocLinks.vue @@ -0,0 +1,53 @@ + + + diff --git a/packages/mockline/src/runtime/components/layout/Aside.vue b/packages/mockline/src/runtime/components/layout/Aside.vue new file mode 100644 index 00000000..4202bf7d --- /dev/null +++ b/packages/mockline/src/runtime/components/layout/Aside.vue @@ -0,0 +1,13 @@ + + + diff --git a/packages/mockline/src/runtime/components/layout/Header.vue b/packages/mockline/src/runtime/components/layout/Header.vue new file mode 100644 index 00000000..c9baa52f --- /dev/null +++ b/packages/mockline/src/runtime/components/layout/Header.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/packages/mockline/src/runtime/components/layout/Main.vue b/packages/mockline/src/runtime/components/layout/Main.vue index 2f9bffc2..8bb75f57 100644 --- a/packages/mockline/src/runtime/components/layout/Main.vue +++ b/packages/mockline/src/runtime/components/layout/Main.vue @@ -9,7 +9,7 @@ export type MainProps = { const props = withDefaults(defineProps(), {}) const mainClasses = computed(() => twMerge( - 'min-h-[calc(100vh-var(--header-height))]', + 'min-h-[calc(100vh-var(--header-height))] selection:bg-primary-8 selection:text-primary-12', props.class )) diff --git a/packages/mockline/src/runtime/composables/useScrollspy.ts b/packages/mockline/src/runtime/composables/useScrollspy.ts new file mode 100644 index 00000000..6dbe3d2d --- /dev/null +++ b/packages/mockline/src/runtime/composables/useScrollspy.ts @@ -0,0 +1,52 @@ +import type { Ref } from 'vue' +import { ref, watch, onBeforeMount, onBeforeUnmount } from 'vue' + +type Scrollspy = { + visibleHeadings: Ref + activeHeadings: Ref + updateHeadings: (headings: Element[]) => void +} + +/** + * Scrollspy allows you to watch visible headings in a specific page. + * Useful for table of contents live style updates. + */ +export const useScrollspy = (): Scrollspy => { + const observer = ref() as Ref + const visibleHeadings = ref([]) as Ref + const activeHeadings = ref([]) as Ref + + const observerCallback = (entries: IntersectionObserverEntry[]): void => + entries.forEach((entry) => { + const id = entry.target.id + + if (entry.isIntersecting) { + visibleHeadings.value.push(id) + } else { + visibleHeadings.value = visibleHeadings.value.filter(t => t !== id) + } + }) + + const updateHeadings = (headings: Element[]): void => + headings.forEach((heading) => { + observer.value.observe(heading) + }) + + watch(visibleHeadings, (val: string[], oldVal: string[]) => { + if (val.length === 0) { + activeHeadings.value = oldVal + } else { + activeHeadings.value = val + } + }, { deep: true }) + + onBeforeMount(() => (observer.value = new IntersectionObserver(observerCallback))) + + onBeforeUnmount(() => observer.value?.disconnect()) + + return { + visibleHeadings, + activeHeadings, + updateHeadings + } +}