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

package/.cursor/rules/active-context-rule.mdc

@@ -0,0 +1,8 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+# Active Context Rule
+
+The [activeContext.md](mdc:memory-bank/activeContext.md) file tracks the current work focus, recent changes, next steps, and active decisions. It is updated frequently to reflect the project's current state and guide ongoing development.

package/.cursor/rules/memory-bank-overview.mdc

@@ -0,0 +1,17 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+# Memory Bank Overview
+
+The Memory Bank is the project's documentation backbone, ensuring continuity and clarity across sessions. It consists of the following core files:
+
+- [projectbrief.md](mdc:memory-bank/projectbrief.md): Defines core requirements, goals, and project scope. Source of truth for all documentation.
+- [productContext.md](mdc:memory-bank/productContext.md): Explains why the project exists, the problems it solves, and user experience goals.
+- [systemPatterns.md](mdc:memory-bank/systemPatterns.md): Documents system architecture, key technical decisions, design patterns, and component relationships.
+- [techContext.md](mdc:memory-bank/techContext.md): Details technologies used, development setup, technical constraints, and dependencies.
+- [activeContext.md](mdc:memory-bank/activeContext.md): Tracks current work focus, recent changes, next steps, and active decisions.
+- [progress.md](mdc:memory-bank/progress.md): Monitors what works, what's left to build, current status, and known issues.
+
+These files are interlinked and should be updated as the project evolves. See each file for detailed context.

package/.cursor/rules/product-context-rule.mdc

@@ -0,0 +1,8 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+# Product Context Rule
+
+The [productContext.md](mdc:memory-bank/productContext.md) file explains why the project exists, the problems it solves, and the intended user experience. It provides essential context for understanding the project's purpose and how it should function from a user's perspective.

package/.cursor/rules/progress-rule.mdc

@@ -0,0 +1,8 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+# Progress Rule
+
+The [progress.md](mdc:memory-bank/progress.md) file monitors what works, what's left to build, the current status, and known issues. It provides a snapshot of project progress and helps prioritize future work.

package/.cursor/rules/projectbrief-rule.mdc

@@ -0,0 +1,8 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+# Project Brief Rule
+
+The [projectbrief.md](mdc:memory-bank/projectbrief.md) file is the foundation of all project documentation. It defines the core requirements, goals, and scope, serving as the source of truth for project direction and decision-making. All other Memory Bank files build upon the context established here.

package/.cursor/rules/system-patterns-rule.mdc

@@ -0,0 +1,8 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+# System Patterns Rule
+
+The [systemPatterns.md](mdc:memory-bank/systemPatterns.md) file documents the system architecture, key technical decisions, design patterns, and component relationships. It serves as a reference for how the project is structured and the rationale behind major technical choices.

package/.cursor/rules/tech-context-rule.mdc

@@ -0,0 +1,8 @@
+---
+description:
+globs:
+alwaysApply: false
+---
+# Tech Context Rule
+
+The [techContext.md](mdc:memory-bank/techContext.md) file details the technologies used, development setup, technical constraints, and dependencies. It provides a technical overview for onboarding and maintaining consistency across the project.

package/.cursorrules

@@ -0,0 +1,52 @@
+You have extensive expertise in Vue 3, Nuxt 3, TypeScript, Node.js, Vite, Vue Router, Pinia, VueUse, ShadcnUI and Unocss. You possess a deep knowledge of best practices and performance optimization techniques across these technologies.
+
+Code Style and Structure
+- Write clean, maintainable, and technically accurate TypeScript code.
+- Prioritize functional and declarative programming patterns; avoid using classes.
+- Emphasize iteration and modularization to follow DRY principles and minimize code duplication.
+- Prefer Composition API <script setup lang="ts"> style.
+- Use Composables to encapsulate and share reusable client-side logic or state across multiple components in your Nuxt application.
+
+Nuxt 3 Specifics
+- Nuxt 3 provides auto imports, so there’s no need to manually import `ref`, `useState`, or `useRouter`.
+- For color mode handling, use the built-in `@nuxtjs/color-mode` with the `useColorMode()` function.
+- Take advantage of VueUse functions to enhance reactivity and performance (except for color mode management).
+- Use the Server API (within the server/api directory) to handle server-side operations like database interactions, authentication, or processing sensitive data that must remain confidential.
+- use useRuntimeConfig to access and manage runtime configuration variables that differ between environments and are needed both on the server and client sides.
+
+Fetching Data
+1. Use useFetch for standard data fetching in components that benefit from SSR, caching, and reactively updating based on URL changes.
+2. Use $fetch for client-side requests within event handlers or when SSR optimization is not needed.
+3. Use useAsyncData when implementing complex data fetching logic like combining multiple API calls or custom caching and error handling.
+4. Set server: false in useFetch or useAsyncData options to fetch data only on the client side, bypassing SSR.
+5. Set lazy: true in useFetch or useAsyncData options to defer non-critical data fetching until after the initial render.
+
+Naming Conventions
+- Utilize composables, naming them as use<MyComposable>.
+- Use **PascalCase** for component file names (e.g., `components/MyComponent.vue`).
+- Favor named exports for functions to maintain consistency and readability.
+
+TypeScript Usage
+- Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.
+- Avoid enums; use maps instead for better type safety and flexibility.
+- Use functional components with TypeScript interfaces.
+
+UI and Styling
+- Use ShadcnUI and Unocss for components and styling.
+- Implement responsive design with Unocss; use a mobile-first approach.
+- Build UI components using atomic design principles, organizing them from smallest to largest (e.g., atoms, molecules, organisms, pages).
+
+Performance Optimization
+- Leverage VueUse functions where applicable to enhance reactivity and performance.
+- Wrap asynchronous components in Suspense with a fallback UI.
+- Use dynamic loading for non-critical components.
+- Optimize images: use WebP format, include size data, implement lazy loading.
+- Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.
+- Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.
+- Implement proper error boundaries or try-catch mechanisms to handle errors gracefully, especially in asynchronous operations.
+
+Accessibility
+- Use ShadcnUI components with the `aria-*` attributes set automatically.
+- Implement keyboard navigation for components that support it.
+- Use semantic HTML elements and ARIA roles to structure content.
+- Ensure proper color contrast and text readability.

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace = true

package/.playground/app.config.ts

@@ -0,0 +1,189 @@
+export default defineAppConfig({
+  shadcnDocs: {
+    site: {
+      name: 'shadcn-docs',
+      description: 'Beautifully designed Nuxt Content template built with shadcn-vue and unocss.',
+      ogImage: '/hero.png',
+      ogImageComponent: 'ShadcnDocs',
+      ogImageColor: 'dark',
+      umami: {
+        enable: false,
+        src: 'https://cloud.umami.is/script.js',
+        dataWebsiteId: '',
+      },
+    },
+    theme: {
+      color: 'orange',
+      radius: 0.5,
+    },
+    banner: {
+      enable: true,
+      showClose: true,
+      content: 'Welcome to **shadcn-docs-nuxt**',
+      to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt',
+      target: '_blank',
+      border: true,
+    },
+    header: {
+      title: 'shadcn-docs',
+      showTitle: true,
+      logo: {
+        light: '/logo.svg',
+        dark: '/logo-dark.svg',
+      },
+      border: true,
+      darkModeToggle: true,
+      nav: [{
+        title: 'Docs',
+        links: [{
+          title: 'Getting Started',
+          to: '/getting-started',
+          description: 'Start building your document with shadcn-docs-nuxt',
+          icon: 'lucide:rocket',
+        }, {
+          title: 'Development',
+          to: '/development',
+          description: 'Discover the configurations and exposed APIs.',
+          target: '_self',
+          icon: 'lucide:code',
+        }],
+      }, {
+        title: 'Credits',
+        links: [{
+          title: 'shadcn-ui',
+          to: 'https://ui.shadcn.com/',
+          description: 'For the beautiful component design & docs design',
+          target: '_blank',
+        }, {
+          title: 'shadcn-vue',
+          to: 'https://www.shadcn-vue.com/',
+          description: 'For the vue port of shadcn-ui & some docs component source',
+          target: '_blank',
+        }, {
+          title: 'Docus',
+          to: 'https://docus.dev/',
+          description: 'For inspiration & some docs component source',
+          target: '_blank',
+        }, {
+          title: 'Nuxt Content',
+          to: 'https://content.nuxt.com/',
+          description: 'Content made easy for Vue Developers',
+          target: '_blank',
+        }],
+      }, {
+        title: 'Use This Template',
+        to: '/getting-started/introduction',
+        target: '_self',
+        showLinkIcon: true,
+      }],
+      links: [{
+        icon: 'lucide:twitter',
+        to: 'https://x.com/unpress_dev',
+        target: '_blank',
+      }],
+    },
+    aside: {
+      useLevel: true,
+      collapse: false,
+      collapseLevel: 1,
+      folderStyle: 'default',
+    },
+    main: {
+      // padded: true,
+      breadCrumb: {
+        showIcon: true,
+      },
+      showTitle: true,
+      codeCopyToast: true,
+      editLink: {
+        enable: true,
+        pattern: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt/edit/main/content/:path',
+        text: 'Edit this page',
+        icon: 'lucide:square-pen',
+        placement: ['docsFooter', 'toc'],
+      },
+      codeIcon: {
+        'package.json': 'vscode-icons:file-type-node',
+        'tsconfig.json': 'vscode-icons:file-type-tsconfig',
+        '.npmrc': 'vscode-icons:file-type-npm',
+        '.editorconfig': 'vscode-icons:file-type-editorconfig',
+        '.eslintrc': 'vscode-icons:file-type-eslint',
+        '.eslintrc.cjs': 'vscode-icons:file-type-eslint',
+        '.eslintignore': 'vscode-icons:file-type-eslint',
+        'eslint.config.js': 'vscode-icons:file-type-eslint',
+        'eslint.config.mjs': 'vscode-icons:file-type-eslint',
+        'eslint.config.cjs': 'vscode-icons:file-type-eslint',
+        '.gitignore': 'vscode-icons:file-type-git',
+        'yarn.lock': 'vscode-icons:file-type-yarn',
+        '.env': 'vscode-icons:file-type-dotenv',
+        '.env.example': 'vscode-icons:file-type-dotenv',
+        '.vscode/settings.json': 'vscode-icons:file-type-vscode',
+        'nuxt': 'vscode-icons:file-type-nuxt',
+        '.nuxtrc': 'vscode-icons:file-type-nuxt',
+        '.nuxtignore': 'vscode-icons:file-type-nuxt',
+        'nuxt.config.js': 'vscode-icons:file-type-nuxt',
+        'nuxt.config.ts': 'vscode-icons:file-type-nuxt',
+        'nuxt.schema.ts': 'vscode-icons:file-type-nuxt',
+        'tailwind.config.js': 'vscode-icons:file-type-tailwind',
+        'tailwind.config.ts': 'vscode-icons:file-type-tailwind',
+        'vue': 'vscode-icons:file-type-vue',
+        'ts': 'vscode-icons:file-type-typescript',
+        'tsx': 'vscode-icons:file-type-typescript',
+        'mjs': 'vscode-icons:file-type-js',
+        'cjs': 'vscode-icons:file-type-js',
+        'js': 'vscode-icons:file-type-js',
+        'jsx': 'vscode-icons:file-type-js',
+        'md': 'vscode-icons:file-type-markdown',
+        'mdc': 'vscode-icons:file-type-markdown',
+        'py': 'vscode-icons:file-type-python',
+        'npm': 'vscode-icons:file-type-npm',
+        'pnpm': 'vscode-icons:file-type-pnpm',
+        'npx': 'vscode-icons:file-type-npm',
+        'yarn': 'vscode-icons:file-type-yarn',
+        'bun': 'vscode-icons:file-type-bun',
+        'yml': 'vscode-icons:file-type-yaml',
+        'json': 'vscode-icons:file-type-json',
+        'terminal': 'lucide:terminal',
+      },
+    },
+    footer: {
+      credits: 'Made with ❤️ by [**Emmanuel Salomon**](https://github.com/ManUtopiK/) with [Unpress](https://unpress.dev)',
+      links: [
+        {
+          title: 'shadcn-vue',
+          icon: 'https://www.shadcn-vue.com/favicon.ico',
+          to: 'https://www.shadcn-vue.com/',
+          target: '_blank',
+        },
+        {
+          icon: 'lucide:github',
+          to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt',
+          target: '_blank',
+        },
+      ],
+    },
+    toc: {
+      enable: true,
+      title: 'On This Page',
+      links: [{
+        title: 'Star on GitHub',
+        icon: 'lucide:star',
+        to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt',
+        target: '_blank',
+        showLinkIcon: true,
+      }, {
+        title: 'Create Issues',
+        icon: 'lucide:circle-dot',
+        to: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt/issues',
+        target: '_blank',
+        showLinkIcon: true,
+      }],
+      carbonAds: {
+        enable: false,
+      },
+    },
+    search: {
+      inAside: false,
+    },
+  },
+})

package/.playground/assets/style.css

@@ -0,0 +1,15 @@
+@unocss;
+
+/* .app__header {
+  background-color: transparent !important;
+  border: none !important;
+  color: white !important;
+} */
+.bg-funky {
+  position: relative;
+}
+.bg-funky:before {
+  --at-apply: absolute inset-0 rounded-inherit content-[''];
+  --at-apply: origin-bottom-left rotate--1 translate-x--1 translate-y--2 -z-1;
+  --at-apply: bg-gradient-to-br from-primary to-primary/50;
+}

package/.playground/components/content/MdcExample.vue

@@ -0,0 +1,81 @@
+<template>
+  <UiCard class="divide-y overflow-hidden [&:not(:first-child)]:mt-5">
+    <!-- <div
+      v-for="(slot, i) in $slots.default?.() ?? []"
+      :key="i"
+    >
+      <button @click="console.log(slot)">
+        {{ i }}
+
+        {{ slot?.props?.language === 'mdc' }}
+      </button>
+      <component
+        :is="slot"
+        :in-stack="true"
+      />
+    </div> -->
+
+    <div class="p-4">
+      <!-- <MdcEditor v-model="md" /> -->
+      a{{ md }}
+    </div>
+
+    <MdcEditor
+      v-model="code"
+      editor-content-class="![&>div]:mt-0 [&_pre]:p-3 [&_pre]:bg-muted [&_code]:min-h-32"
+    />
+    <!-- <pre
+      class="language-mdc shiki shiki-themes github-light github-dark"
+    >
+      <code
+        ref="editableCode"
+        contenteditable="true"
+        @input="updateCode"
+      >{{ md }}</code>
+    </pre> -->
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+import type { SetupContext } from 'vue'
+
+defineSlots()
+
+const _slots: SetupContext['slots'] = useSlots()
+
+const extractMdc = () => {
+  const slots = _slots?.default?.() ?? []
+
+  for (const slot of slots) {
+    if (slot.props?.language === 'mdc') {
+      console.log(slot)
+      return slot.props.code || ''
+    }
+  }
+  return ''
+}
+
+const _md = extractMdc()
+const md = ref(_md)
+
+const code = computed({
+  get() {
+    return '```mdc\n' + md.value + '\n```'
+  },
+  set(value) {
+    md.value = value.replace('```mdc\n', '').replace('\n```', '')
+  },
+})
+
+// const updateCode = (event: Event) => {
+//   md.value = (event.target as HTMLTextAreaElement).innerText
+//   console.log('Code updated:', md.value)
+// }
+// function render() {
+//   const slots = _slots?.default?.() || []
+//   const code = slots[0]
+//   console.log(code)
+//   code.props.contenteditable = 'true'
+//   return code
+// }
+</script>