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

package/lib/uno-preset.ts

@@ -0,0 +1,143 @@
+import { definePreset } from 'unocss'
+import { builtinColors, presetShadcn } from 'unocss-preset-shadcn'
+
+type MyPresetOptions = {
+  colors?: typeof builtinColors
+}
+
+export default definePreset((options?: MyPresetOptions) => {
+  const colors = options?.colors ?? builtinColors
+
+  const shadcn = presetShadcn(colors.map(c => ({ color: c })), { componentLibrary: 'reka' })
+
+  return {
+    name: 'nuxt-layer-unocss-preset-shadcn',
+    theme: {
+      container: {
+        center: true,
+        maxWidth: {
+          '2xl': 'var(--breakpoint-container)',
+        },
+      },
+      colors: {
+        ...shadcn.theme?.colors,
+        info: {
+          DEFAULT: 'hsl(var(--info))',
+          foreground: 'hsl(var(--info-foreground))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+        },
+        danger: {
+          DEFAULT: 'hsl(var(--danger))',
+          foreground: 'hsl(var(--danger-foreground))',
+        },
+        new: {
+          DEFAULT: 'hsl(var(--new))',
+          foreground: 'hsl(var(--new-foreground))',
+        },
+      },
+      borderRadius: {
+        ...shadcn.theme?.borderRadius,
+      },
+      // animation: {
+      //   keyframes: {
+      //     'collapsible-down': '{from{height: 0}to{height:var(--reka-collapsible-content-height)}}',
+      //     'collapsible-up': '{from{height:var(--reka-collapsible-content-height)}to{height: 0}}',
+      //     'fadeIn': '{from{ opacity: 0 }to{ opacity: 1 }}',
+      //     'fadeOut': '{from{ opacity: 1 }to{ opacity: 0 }}',
+      //   },
+      //   durations: {
+      //     'collapsible-down': '0.2s',
+      //     'collapsible-up': '0.2s',
+      //     'fadeIn': '0.2s',
+      //     'fadeOut': '0.2s',
+      //   },
+      //   timingFns: {
+      //     'collapsible-down': 'ease-in-out',
+      //     'collapsible-up': 'ease-in-out',
+      //     'fadeIn': 'ease-out',
+      //     'fadeOut': 'ease-out',
+      //   },
+      // },
+    },
+    rules: [
+      ...(shadcn.rules ?? []),
+    ],
+    // variants: [
+    // ],
+    shortcuts: [
+      [/^step$/, () => {
+        return `
+          [counter-increment:step]
+          before:[content:counter(step)] before:absolute before:w-9 before:h-9 before:bg-muted before:rounded-full before:font-mono before:font-medium before:text-center before:text-base before:inline-flex before:items-center before:justify-center before:-indent-px before:border-4 before:border-background
+          before:-ml-[50px] before:-mt-1
+        `
+      }],
+    ],
+    preflights: [
+      {
+        getCSS: () => addForceLightAndDark((shadcn.preflights?.[0] as unknown as { getCSS: () => string }).getCSS() ?? ''),
+      },
+      {
+        getCSS: ({ theme }) => {
+          const breakpoints = generateBreakpointsCSSVars(theme.breakpoints!)
+
+          return `
+          :root {
+            ${breakpoints}
+            --breakpoint-container: 1200px;
+
+            --info: 200 90% 50%;
+            --info-foreground: 200 90% 50%;
+            --warning: 42.4 100% 50%;
+            --warning-foreground: 42.4 100% 50%;
+            --success: 94.5 100% 39.6%;
+            --success-foreground: 94.5 100% 39.6%;
+            --danger: 358.3 100% 64.9%;
+            --danger-foreground: 358.3 100% 64.9%;
+            --new: 81 96% 55%;
+            --new-foreground: 81 96% 15%;
+          }
+        `
+        },
+      },
+    ],
+  }
+})
+
+function addForceLightAndDark(css: string) {
+  const themeRegex = /^(\.theme-\w+)\s*{/gm
+  const darkThemeRegex = /^(\.dark\s+\.theme-(\w+))\s*{/gm
+
+  css = css.replace(themeRegex, (match, p1) => `${p1}, ${p1} .force-light {`)
+  css = css.replace(darkThemeRegex, (match, p1, p2) => `${p1}, .theme-${p2} .force-dark {`)
+
+  css += `
+    .force-light, .force-dark {
+      color: hsl(var(--foreground));
+      background: hsl(var(--background));
+    }
+    .force-light .shiki span {
+      color: var(--shiki-default);
+    }
+    .force-dark .shiki span {
+      color: var(--shiki-dark);
+    }
+  `
+  return css
+}
+
+function generateBreakpointsCSSVars(breakpoints: Record<string, string>) {
+  return Object.entries(breakpoints)
+    .map(([key, value]) => {
+      return `  --breakpoint-${key}: ${value};`
+    })
+    .filter(Boolean)
+    .join('\n')
+}

package/memory-bank/activeContext.md

@@ -0,0 +1,17 @@
+# Active Context
+
+## Current Work Focus
+- Establishing Memory Bank documentation and Cursor Rules for project continuity
+- Ensuring all core documentation files are present and up to date
+
+## Recent Changes
+- Scaffolded all required Memory Bank files
+- Defined project brief, product context, system patterns, and tech context
+
+## Next Steps
+- Create the progress.md file to track project status and known issues
+- Generate initial Cursor Rules in .cursor/rules as .mdc files
+
+## Active Decisions and Considerations
+- All documentation follows the structure outlined in custom instructions
+- Cursor Rules will reference Memory Bank files for project intelligence 

package/memory-bank/productContext.md

@@ -0,0 +1,21 @@
+# Product Context
+
+## Why This Project Exists
+This project was initiated to provide a modern, scalable, and maintainable web application foundation using Nuxt 3 and related technologies. It addresses the need for a robust, reusable component system and optimized developer workflows.
+
+## Problems It Solves
+- Reduces boilerplate and repetitive code in frontend projects
+- Provides a consistent, accessible, and customizable UI system
+- Simplifies state management and data fetching
+- Enhances performance and SEO with SSR and code-splitting
+
+## How It Should Work
+- Modular, atomic design for UI components
+- Auto-imports and composables for streamlined development
+- SSR and client-side rendering optimized for speed
+- Theming and accessibility built-in by default
+
+## User Experience Goals
+- Fast load times and smooth interactions
+- Intuitive navigation and clear information architecture
+- Fully accessible and responsive across devices 

package/memory-bank/progress.md

@@ -0,0 +1,16 @@
+# Progress
+
+## What Works
+- Memory Bank documentation structure established
+- Core project requirements, context, and patterns defined
+
+## What's Left to Build
+- Implement .cursor/rules directory and generate initial Cursor Rules
+- Continue feature development and component implementation
+
+## Current Status
+- Documentation up to date as of initial setup
+- Ready to proceed with Cursor Rules and further development
+
+## Known Issues
+- No outstanding issues at this stage 

package/memory-bank/projectbrief.md

@@ -0,0 +1,20 @@
+# Project Brief
+
+## Purpose
+This document defines the core requirements, goals, and scope of the project. It serves as the foundation for all other documentation and guides the project's direction.
+
+## Core Requirements
+- Build a modern, performant, and accessible web application using Nuxt 3, Vue 3, TypeScript, and related technologies.
+- Ensure maintainability, scalability, and a great developer experience.
+- Prioritize best practices in code quality, performance, and accessibility.
+
+## Goals
+- Deliver a robust, modular, and reusable component system.
+- Optimize for both SSR and client-side performance.
+- Provide a seamless and intuitive user experience.
+
+## Scope
+- Frontend architecture and UI components
+- Data fetching and state management
+- Server-side API integration
+- Theming, accessibility, and responsive design 

package/memory-bank/systemPatterns.md

@@ -0,0 +1,25 @@
+# System Patterns
+
+## System Architecture
+- Modular, atomic design for UI components (atoms, molecules, organisms, pages)
+- Nuxt 3 for SSR, routing, and module system
+- TypeScript for type safety and maintainability
+- Pinia for state management
+- VueUse for enhanced reactivity
+
+## Key Technical Decisions
+- Use of Composition API and <script setup lang="ts"> for all components
+- Auto-imports for composables and utilities
+- ShadcnUI and Unocss for UI and styling
+- Server API endpoints for backend operations
+
+## Design Patterns
+- DRY and modular code organization
+- Functional, declarative programming
+- Composables for shared logic
+- Dynamic imports and Suspense for async components
+
+## Component Relationships
+- Components organized by atomic design principles
+- Shared state via composables and Pinia stores
+- UI components consume composables for logic and state 

package/memory-bank/techContext.md

@@ -0,0 +1,29 @@
+# Tech Context
+
+## Technologies Used
+- Nuxt 3 (Vue 3, Vite)
+- TypeScript
+- Pinia (state management)
+- VueUse (utility functions)
+- ShadcnUI (UI components)
+- Unocss (utility-first CSS)
+
+## Development Setup
+- Node.js and pnpm for package management
+- ESLint and EditorConfig for code quality
+- Auto-imports for composables and utilities
+- Modular directory structure for components, composables, and pages
+
+## Technical Constraints
+- All code must be TypeScript
+- Use interfaces over types; avoid enums
+- No class-based components
+- SSR and client-side rendering must be supported
+
+## Dependencies
+- Nuxt 3
+- Vue 3
+- Pinia
+- VueUse
+- ShadcnUI
+- Unocss 

package/modules/inject-css.ts

@@ -0,0 +1,40 @@
+import { resolve } from 'node:path'
+import { existsSync, readFileSync } from 'node:fs'
+import { defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'inject-css-module',
+    configKey: 'injectCss',
+  },
+  defaults: {
+    cssPath: 'assets/style.css', // Default path to the CSS file
+  },
+  setup(options, nuxt) {
+    // Use the `modules:done` hook to ensure this runs last
+    nuxt.hook('modules:done', () => {
+      // Resolve the absolute path to the CSS file
+      const cssFilePath = resolve(nuxt.options.rootDir, options.cssPath)
+      const innerHTML = existsSync(cssFilePath) ? readFileSync(cssFilePath, 'utf-8') : ''
+
+      nuxt.options.app.head.style = nuxt.options.app.head.style || []
+      nuxt.options.app.head.style.push({
+        id: 'global-style',
+        innerHTML,
+        tagPosition: 'bodyClose', // Ensure it's added at the end of the head
+      })
+    })
+
+    // nuxt.hook('vite:extendConfig', (config, { isClient, isServer }) => {
+    //   config.plugins = config.plugins || []
+    //   config.plugins.push({
+    //     name: 'vite-hmr-listener',
+    //     handleHotUpdate({ file, server }) {
+    //       console.log('File updated:', file)
+    //       // You can add your custom logic here
+    //       return []
+    //     },
+    //   })
+    // })
+  },
+})

package/nuxt.config.ts

@@ -0,0 +1,124 @@
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/eslint',
+    '@unocss/nuxt',
+    'shadcn-nuxt',
+    '@vueuse/nuxt',
+    '@nuxt/content',
+    '@nuxt/image',
+    '@nuxt/icon',
+    '@nuxtjs/color-mode',
+    '@nuxtjs/i18n',
+    '@unpress/nuxt-module',
+    // '../../../unpress/packages/nuxt-module/src/module',
+    // 'nuxt-og-image',
+  ],
+
+  components: {
+    dirs: [
+      {
+        path: join(currentDir, './components'),
+        ignore: ['**/*.ts'],
+      },
+    ],
+  },
+
+  devtools: { enabled: true },
+
+  css: [
+    '@unocss/reset/tailwind.css',
+    join(currentDir, './assets/css/a11y.css'),
+    join(currentDir, './assets/css/mdc-editor.css'),
+  ],
+
+  colorMode: {
+    classSuffix: '',
+    disableTransition: true,
+  },
+
+  content: {
+    documentDriven: true,
+    highlight: {
+      theme: {
+        default: 'github-light',
+        dark: 'github-dark',
+      },
+      preload: ['json', 'js', 'ts', 'html', 'css', 'vue', 'diff', 'shell', 'markdown', 'yaml', 'bash', 'ini'],
+    },
+    navigation: {
+      fields: [
+        'description',
+        'icon',
+        'navBadges',
+        'navTruncate',
+        'badges',
+        'toc',
+        'sidebar',
+        'collapse',
+        'editLink',
+        'prevNext',
+        'breadcrumb',
+      ],
+    },
+    experimental: {
+      search: {
+        indexed: true,
+      },
+    },
+  },
+
+  build: {
+    transpile: ['shiki', 'ohash'],
+  },
+
+  routeRules: {
+    '/': { prerender: true },
+    // Admin dashboard renders only on client-side
+    // '/admin/**': { ssr: false },
+  },
+
+  sourcemap: {
+    server: true,
+    client: true,
+  },
+
+  compatibilityDate: '2025-01-10',
+
+  nitro: {
+    compressPublicAssets: {
+      gzip: true,
+      brotli: true,
+    },
+  },
+
+  eslint: {
+    config: {
+      stylistic: {
+        quotes: 'single',
+        semi: false,
+      },
+    },
+  },
+
+  i18n: {
+    defaultLocale: 'en',
+    bundle: {
+      optimizeTranslationDirective: false,
+    },
+    strategy: 'prefix_except_default',
+  },
+
+  icon: {
+    componentName: 'NuxtIcon',
+  },
+
+  shadcn: {
+    prefix: 'Ui',
+    componentDir: join(currentDir, './components/ui'),
+  },
+})

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@wordup-md/nuxt-layer-shadcn-unocss",
+  "type": "module",
+  "version": "0.2.0",
+  "author": "Emmanuel Salomon <emmanuel.salomon@gmail.com>",
+  "main": "./nuxt.config.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wordup-md/nuxt-layer-shadcn-unocss.git"
+  },
+  "homepage": "https://github.com/wordup-md/nuxt-layer-shadcn-unocss#readme",
+  "bugs": {
+    "url": "https://github.com/wordup-md/nuxt-layer-shadcn-unocss/issues"
+  },
+  "keywords": [
+    "wordup-md"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "dev:root": "nuxi dev",
+    "prepare": "nuxt prepare .playground",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "lint": "eslint .",
+    "build:json-doc": "tsx scripts/buildContentDoc-cli.ts",
+    "clean": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + && find . -name '.nuxt' -type d -prune -exec rm -rf '{}' + && find . -name '.output' -type d -prune -exec rm -rf '{}' + && find . -name 'dist' -prune -exec rm -rf '{}' +"
+  },
+  "devDependencies": {
+    "@nuxt/eslint": "latest",
+    "@nuxt/kit": "^3.17.2",
+    "@unocss/eslint-plugin": "^66.0.0",
+    "@unocss/extractor-mdc": "^66.0.0",
+    "@unocss/nuxt": "^66.0.0",
+    "@vueuse/core": "^13.1.0",
+    "@vueuse/nuxt": "^13.1.0",
+    "eslint": "^9.26.0",
+    "shadcn-nuxt": "^2.1.0",
+    "shiki": "^2.1.0",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3",
+    "unocss": "^66.0.0",
+    "unocss-preset-animations": "^1.2.1",
+    "unocss-preset-shadcn": "^0.5.0",
+    "vue": "latest",
+    "yaml": "^2.7.1"
+  },
+  "dependencies": {
+    "@iconify-json/lucide": "^1.2.39",
+    "@iconify-json/vscode-icons": "^1.2.20",
+    "@nuxt/content": "^2.13.4",
+    "@nuxt/icon": "^1.12.0",
+    "@nuxt/image": "^1.10.0",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@nuxtjs/i18n": "^9.5.4",
+    "@unpress/nuxt-module": "0.1.12-beta.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "nuxt": "3.17.2",
+    "nuxt-og-image": "^4.1.4",
+    "reka-ui": "^2.2.1",
+    "tailwind-merge": "^3.2.0"
+  },
+  "packageManager": "pnpm@10.4.1",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "sharp"
+    ]
+  }
+}

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

@@ -0,0 +1,109 @@
+<template>
+  <NuxtLayout>
+    <div
+      class="h-full flex-1 items-start px-4 md:grid md:gap-6 md:px-8 lg:gap-10"
+      :class="[
+        (page?.aside ?? true)
+          && 'md:grid-cols-[220px_minmax(0,1fr)] lg:grid-cols-[240px_minmax(0,1fr)]',
+      ]"
+    >
+      <aside
+        v-if="page?.aside ?? (page?.body && true)"
+        class="sticky hidden z-30 w-full shrink-0 overflow-y-auto top-[calc(var(--header-height)+var(--banner-height))] md:sticky md:block"
+      >
+        <LayoutAside :is-mobile="false" />
+      </aside>
+
+      <div
+        v-if="!page?.body"
+        class="col-span-3 mt-[20vh] flex items-center justify-center"
+      >
+        <h3 class="scroll-m-20 border-r px-4 py-3 text-2xl font-semibold">
+          404
+        </h3>
+        <span class="scroll-m-20 px-4"> This page could not be found. </span>
+      </div>
+
+      <main
+        v-else
+        class="relative mt-3"
+        :class="[
+          config.toc.enable
+            && (page.toc ?? true)
+            && 'lg:grid lg:grid-cols-[1fr_220px] lg:gap-14',
+        ]"
+      >
+        <article class="mx-auto w-full min-w-0">
+          <LayoutBreadcrumb
+            v-if="
+              page?.body
+                && config.main.breadCrumb
+                && (page.breadcrumb ?? true)
+            "
+            class="mt-4.5 mb-6"
+          />
+
+          <LayoutTitle
+            v-if="config.main?.showTitle && (page.showTitle ?? true)"
+            :title="page?.title"
+            :description="page?.description"
+            :badges="page?.badges"
+          />
+
+          <Alert
+            v-if="page?.body?.children?.length === 0"
+            title="Empty Page"
+            icon="lucide:circle-x"
+          >
+            Start writing in
+            <ProseCodeInline>content/{{ page?._file }}</ProseCodeInline> to
+            see this page taking shape.
+          </Alert>
+
+          <!-- <ContentRenderer
+              v-else
+              :key="page._id"
+              :value="page"
+              class="docs-content"
+            /> -->
+          <!-- ℹ️ .docs-content is only used for TOC -->
+          <ContentCms
+            v-else
+            :key="page._id"
+            :value="page"
+            class="docs-content"
+          />
+
+          <LayoutDocsFooter />
+        </article>
+
+        <div
+          v-if="config.toc.enable && (page.toc ?? true)"
+          class="text-sm hidden lg:block lg:sticky lg:top-[calc(var(--header-height)+var(--banner-height)+1.75rem)] h-min max-h-[calc(100vh-var(--header-height)-var(--banner-height)-6rem)]"
+        >
+          <div class="overflow-hidden">
+            <LayoutToc :is-small="false" />
+          </div>
+        </div>
+      </main>
+    </div>
+  </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,
+  twitterCard: 'summary_large_image',
+})
+
+// defineOgImageComponent(config.value.site.ogImageComponent, {
+//   title: page.value?.title,
+//   description: page.value?.description,
+// })
+</script>