@wordup-md/nuxt-layer-shadcn-unocss 0.2.0

package/pages/admin/[...slug].vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+import { useUnpress } from '#imports'
+
+const { client, mountCms, login } = useUnpress()
+const config = useConfig()
+
+const isDev = import.meta.dev
+const isLoggedIn = computed(() => !!client.value)
+
+const path = 'content-doc.json'
+
+// const { data: tree, status, error, refresh, clear } = await useAsyncData<NavItem[]>(
+const { data: tree } = await useAsyncData<NavItem[]>(
+  'admin-docs',
+  () => $fetch(`/${path}`), {
+    transform: (data) => {
+      return data.map((item: NavItem) => ({
+        ...item,
+        '_path': `/admin/${item._path}`,
+        'navigation.redirect': item['navigation.redirect'] ? '/admin' + item['navigation.redirect'] : undefined,
+        'children': item.children?.map((child: NavItem) => ({
+          ...child,
+          '_path': `/admin/${child._path}`,
+          'navigation.redirect': child['navigation.redirect'] ? '/admin' + child['navigation.redirect'] : undefined,
+          'children': child.children?.map((child2: NavItem) => ({
+            ...child2,
+            '_path': `/admin/${child2._path}`,
+            'navigation.redirect': child2['navigation.redirect'] ? '/admin' + child2['navigation.redirect'] : undefined,
+          })),
+        })),
+      }))
+    },
+  },
+)
+
+const { slug } = useRoute().params
+
+if (isLoggedIn.value && slug?.length === 0 && tree.value) {
+  if (tree.value[0]['navigation.redirect']) {
+    await navigateTo(tree.value[0]['navigation.redirect'])
+  }
+  else {
+    await navigateTo(tree.value[0]._path)
+  }
+}
+
+const page = computed(() => {
+  if (slug.length > 2) {
+    const level0 = tree.value?.find(item => item._path === `/admin/${slug[0]}`)
+    const level1 = level0?.children?.find(item => item._path === `/admin/${slug[0]}/${slug[1]}`)
+    return level1?.children?.find(item => item._path === `/admin/${slug[0]}/${slug[1]}/${slug[2]}`)
+  }
+  else if (slug.length > 1) {
+    const level0 = tree.value?.find(item => item._path === `/admin/${slug[0]}`)
+    return level0?.children?.find(item => item._path === `/admin/${slug[0]}/${slug[1]}`)
+  }
+  else {
+    const page = tree.value?.find(item => item._path === `/admin/${slug[0]}`)
+
+    if (!page?.['navigation.redirect'] && !page?.content && page?.children?.length) {
+      return page.children.find(item => item._path === `/admin/${slug[0]}/index`)
+    }
+
+    return page
+  }
+})
+
+watch(page, async (newVal) => {
+  if (newVal?.['navigation.redirect']) {
+    await navigateTo(newVal['navigation.redirect'])
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <NuxtLayout>
+    <div class="h-full">
+      <div
+        v-if="isLoggedIn"
+        class="flex-1 items-start px-4 md:grid md:gap-6 md:px-8 lg:gap-10"
+        :class="[
+          config.main.padded && 'container',
+          'md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)]',
+        ]"
+      >
+        <aside
+          class="sticky top-[162px] z-30 w-full shrink-0 overflow-y-auto md:sticky md:top-[90px] md:block"
+        >
+          <LayoutAside
+            v-if="tree"
+            :level="1"
+            :navigation="tree"
+            :is-mobile="false"
+          />
+        </aside>
+
+        <main
+          class="relative container"
+          :class="[
+            config.toc.enable,
+            'lg:grid lg:grid-cols-[1fr_220px] lg:gap-14 lg:py-8',
+          ]"
+        >
+          <div
+            v-if="page"
+            class="mx-auto w-full min-w-0"
+          >
+            <div class="p-1 mb-4 rounded border border-red-500">
+              <LayoutBreadcrumb />
+            </div>
+
+            <LayoutTitle
+              v-if="config.main?.showTitle && (page.showTitle ?? true)"
+              :title="page?.title"
+              :description="page?.description"
+              :badges="page?.badges"
+            />
+
+            <MDC
+              v-if="page.content"
+              :value="page.content"
+              tag="article"
+            />
+          </div>
+        </main>
+      </div>
+
+      <div
+        v-else
+        class="col-span-3 mt-[20vh] flex items-center justify-center"
+      >
+        <div class="flex items-center justify-center gap-4">
+          <h3 class="scroll-m-20 py-3 text-2xl font-semibold">
+            Open administration
+          </h3>
+          <Icon name="lucide:arrow-right" />
+          <UiButton @click="isDev ? mountCms() : login()">
+            Connect & Open
+          </Uibutton>
+        </div>
+      </div>
+    </div>
+  </NuxtLayout>
+</template>

package/pages/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <NuxtLayout :class="page.header.position === 'over' && 'header-over'">
+    <ContentCms
+      :key="page._id"
+      :value="page"
+      class="content-grid"
+    />
+    <!-- <ContentRenderer :key="page._id" :value="page" class="content-grid" /> -->
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+const { page } = useContent()
+const config = useConfig()
+
+useSeoMeta({
+  title: `${page.value?.title ?? '404'} - ${config.value.site.name}`,
+  ogTitle: page.value?.title,
+  description: page.value?.description,
+  ogDescription: page.value?.description,
+  ogImage: config.value.site.ogImage,
+  twitterCard: 'summary_large_image',
+})
+</script>

package/plugins/injectCssHmr.ts

@@ -0,0 +1,26 @@
+// plugins/hmrListener.plugin.js
+
+export default defineNuxtPlugin(() => { // nuxtApp
+  // Check if HMR is enabled and available
+  // if (import.meta.hot) {
+  //   // Listen for specific module updates
+  //   import.meta.hot.on('vite:beforeUpdate', (payload) => {
+  //     console.log('Vite before update:', payload);
+  //   });
+
+  //   import.meta.hot.on('vite:afterUpdate', (payload) => {
+  //     console.log('Vite after update:', payload);
+  //   });
+
+  //   import.meta.hot.on('vite:error', (payload) => {
+  //     console.error('Vite error during update:', payload);
+  //   });
+
+  //   // Listen for any HMR event
+  //   import.meta.hot.on('*', (event, payload) => {
+  //     console.log(`Received HMR event: ${event}`, payload);
+  //   });
+  // } else {
+  //   console.warn('HMR is not enabled or not available.');
+  // }
+})

package/plugins/wordup.ts

@@ -0,0 +1,130 @@
+export default defineNuxtPlugin(() => {
+  // export default defineNuxtPlugin((nuxtApp) => {
+  // nuxtApp.hook('mdc-editor:config', ({ config, editor }: { config: any, editor: any }) => {
+  //   config.components.push({
+  //     displayName: 'Callout',
+  //     description: 'Insert a customizable callout',
+  //     group: 'Docs Components',
+  //     icon: 'i-lucide-megaphone',
+  //     previewHTML: `
+  //       <p class="text-skeleton pt2 px2.5">x xxx xxxx xxx xxx xx x xxx</p>
+  //       <p class="text-skeleton bg-teal-500 px2.5 py2">x xx xxx xx xxxx xx xx</p>
+  //       <p class="text-skeleton px2.5">xx x xxx xxx x xx xxx</p>
+  //     `,
+  //     handleMenu: true,
+  //     slashMenu: true,
+  //     transformable: true,
+  //     transform() {
+  //       return { type: 'containerComponent', attrs: { componentName: 'callout' } }
+  //     },
+  //     onSelect: () => editor.commands.insertContainerComponent({
+  //       name: 'callout',
+  //     }),
+  //   })
+
+  //   config.components.push({
+  //     displayName: 'Read More',
+  //     description: 'Insert a "Read More" block',
+  //     group: 'Docs Components',
+  //     icon: 'i-lucide-bookmark',
+  //     previewHTML: `
+  //       <p class="text-skeleton pt2 px2.5">x xxx xxxx xxx xxx xx x xxx</p>
+  //       <p class="text-skeleton bg-teal-500 px2.5 py2">x xx xxx xx xxxx xx xx</p>
+  //       <p class="text-skeleton px2.5">xx x xxx xxx x xx xxx</p>
+  //     `,
+  //     handleMenu: true,
+  //     slashMenu: true,
+  //     transformable: true,
+  //     transform() {
+  //       return { type: 'containerComponent', attrs: { componentName: 'read-more' } }
+  //     },
+  //     onSelect: () => editor.commands.insertContainerComponent({
+  //       name: 'read-more',
+  //     }),
+  //   })
+
+  //   config.components.push({
+  //     displayName: 'Steps',
+  //     description: 'Insert a steps',
+  //     group: 'Docs Components',
+  //     icon: 'i-lucide-arrow-down-0-1',
+  //     previewHTML: `
+  //       <p class="text-skeleton pt2 px2.5">x xxx xxxx xxx xxx xx x xxx</p>
+  //       <p class="text-skeleton bg-teal-500 px2.5 py2">x xx xxx xx xxxx xx xx</p>
+  //       <p class="text-skeleton px2.5">xx x xxx xxx x xx xxx</p>
+  //     `,
+  //     handleMenu: true,
+  //     slashMenu: true,
+  //     transformable: true,
+  //     transform() {
+  //       return { type: 'containerComponent', attrs: { componentName: 'steps' } }
+  //     },
+  //     onSelect: () => editor.commands.insertContainerComponent({
+  //       name: 'steps',
+  //     }),
+  //   })
+
+  //   config.components.push({
+  //     displayName: 'Card',
+  //     description: 'Insert a card',
+  //     group: 'Docs Components',
+  //     icon: 'i-lucide-square',
+  //     previewHTML: `
+  //       <p class="text-skeleton pt2 px2.5">x xxx xxxx xxx xxx xx x xxx</p>
+  //       <p class="text-skeleton bg-teal-500 px2.5 py2">x xx xxx xx xxxx xx xx</p>
+  //       <p class="text-skeleton px2.5">xx x xxx xxx x xx xxx</p>
+  //     `,
+  //     handleMenu: true,
+  //     slashMenu: true,
+  //     transformable: true,
+  //     transform() {
+  //       return { type: 'containerComponent', attrs: { componentName: 'card' } }
+  //     },
+  //     onSelect: () => editor.commands.insertContainerComponent({
+  //       name: 'card',
+  //     }),
+  //   })
+
+  //   config.components.push({
+  //     displayName: 'Card Group',
+  //     description: 'Insert a card group',
+  //     group: 'Page Components',
+  //     icon: 'i-lucide-layout-grid',
+  //     previewHTML: `
+  //       <p class="text-skeleton pt2 px2.5">x xxx xxxx xxx xxx xx x xxx</p>
+  //       <p class="text-skeleton bg-teal-500 px2.5 py2">x xx xxx xx xxxx xx xx</p>
+  //       <p class="text-skeleton px2.5">xx x xxx xxx x xx xxx</p>
+  //     `,
+  //     handleMenu: true,
+  //     slashMenu: true,
+  //     transformable: true,
+  //     transform() {
+  //       return { type: 'containerComponent', attrs: { componentName: 'card-group' } }
+  //     },
+  //     onSelect: () => editor.commands.insertContainerComponent({
+  //       name: 'card-group',
+  //     }),
+  //   })
+
+  //   config.components.push({
+  //     displayName: 'Div',
+  //     description: 'Insert a div',
+  //     group: 'Page Components',
+  //     icon: 'i-lucide-code',
+  //     previewHTML: `
+  //       <p class="text-skeleton pt2 px2.5">x xxx xxxx xxx xxx xx x xxx</p>
+  //       <p class="text-skeleton bg-teal-500 px2.5 py2">x xx xxx xx xxxx xx xx</p>
+  //       <p class="text-skeleton px2.5">xx x xxx xxx x xx xxx</p>
+  //     `,
+  //     handleMenu: true,
+  //     slashMenu: true,
+  //     transformable: true,
+  //     transform() {
+  //       return { type: 'containerComponent', attrs: { componentName: 'div' } }
+  //     },
+  //     onSelect: () => editor.commands.insertContainerComponent({
+  //       name: 'div',
+  //     }),
+  //   })
+  // })
+})