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

package/.playground/content/test3.md

@@ -0,0 +1,187 @@
+---
+title: Test 3
+layout: editorial
+toc: false
+aside: false
+breadcrumb: false
+---
+
+## Basic
+
+::card
+test
+::
+
+## With title
+
+::card
+---
+to: https://shadcn-vue.com
+---
+
+### title
+
+Card content
+::
+
+::card
+---
+to: https://shadcn-vue.com
+---
+#title
+Card Title
+
+#content
+Card content
+::
+
+::card
+---
+icon: lucide:arrow-up-right
+to: https://shadcn-vue.com
+---
+Card content
+::
+
+::card
+---
+to: https://shadcn-vue.com
+---
+#title
+Card Title
+::
+
+## With image
+
+::card
+---
+icon: lucide:arrow-up-right
+media: /og-shadcn-docs-dark.png
+to: https://shadcn-vue.com
+---
+Content
+::
+
+::card
+---
+media: /og-nuxt.png
+to: https://shadcn-vue.com
+---
+#title
+Card Title
+
+#description
+Description
+
+#content
+Beautifully designed **Nuxt Content** template with **shadcn-vue**.\
+\_Customizable. Compatible. Open Source.\_
+
+#footer
+Footer
+::
+
+## Media position
+
+:/\:card-group
+
+::card
+---
+icon: lucide:sun
+media: /og-shadcn-docs-dark.png
+mediaPosition: right
+to: https://shadcn-vue.com
+---
+#title
+Card Title #test
+
+#descriptionn
+Description
+
+#content
+test #test lorem ipsum dolor sit **amet** !
+Donec vitae orci sed dolor rutrum auctor. Vestibulum fringilla pede sit amet augue. In auctor lobortis lacus. Praesent vestibulum dapibus nibh.
+::
+
+::card
+---
+class: border-none shadow-none
+icon: lucide:sun
+media: /og-nuxt.png
+mediaPosition: left
+to: https://shadcn-vue.com
+---
+#title
+Card Title #test uit auiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+
+#description
+Description group-hover/card\:scale-105 transition-all group-hover/card\:scale-105 transition-all
+
+#content
+test #test uiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+uiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+uiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+uiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+uiesrt auienrst auie auieeee st auitest anursit ast auirset rst auind pnets a
+::
+
+::card
+---
+class: h-100
+icon: lucide:sun
+media: https://static.vecteezy.com/system/resources/thumbnails/002/073/237/small_2x/helix-pattern-on-a-white-background-free-vector.jpg
+mediaPosition: cover
+to: https://shadcn-vue.com
+---
+#tsest
+
+#title
+Card Title #test uit auiesrt auienrst auie auieeee
+::
+
+::card
+---
+class: h-50 bg-blue-200
+icon: lucide:sun
+iconPosition: right
+mediaPosition: center
+title: Title Etiam feugiat lorem non metus.
+---
+auieaui
+::
+
+::card
+---
+icon: lucide:sun
+media: https://static.vecteezy.com/system/resources/thumbnails/002/073/237/small_2x/helix-pattern-on-a-white-background-free-vector.jpg
+mediaPosition: centere
+---
+#tsest
+
+#title
+Card Title #test uit auiesrt auienrst auie auieeee
+
+#media
+  :::hero
+  ---
+  actions:
+    - name: Get Started
+      to: /getting-started
+    - name: GitHub
+      variant: outline
+      to: https://github.com/ZTL-UwU/shadcn-docs-nuxt
+      leftIcon: lucide:github
+  announcement:
+    title: Release v1.0.0
+    icon: lucide:party-popper
+    to: /getting-started
+  ---
+  #title
+  Effortless and Beautiful :br Docs Template.
+  
+  #description
+  Beautifully designed Nuxt Content template with shadcn-vue. :br Customizable. Compatible. Open Source.
+  :::
+::
+
+\::

package/.playground/nuxt.config.ts

@@ -0,0 +1,52 @@
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtConfig({
+  extends: ['..'],
+  modules: [
+    '@nuxt/eslint',
+    '@unpress/nuxt-module',
+    // '../../../unpress/packages/nuxt-module/src/module',
+  ],
+
+  css: [
+    '~/assets/style.css',
+  ],
+
+  compatibilityDate: '2025-01-10',
+
+  // vite: {
+  //   server: {
+  //     fs: {
+  //       allow: [
+  //         // Always allow the project root
+  //         fileURLToPath(new URL('.', import.meta.url)),
+  //         // Allow the parent directory (for monorepos)
+  //         fileURLToPath(new URL('../../..', import.meta.url)),
+  //         // Add any other custom paths you need
+  //       ],
+  //     },
+  //   },
+  //   optimizeDeps: {
+  //     include: ['extend', 'debug'],
+  //   },
+  // },
+
+  eslint: {
+    config: {
+      // Use the generated ESLint config for lint root project as well
+      rootDir: fileURLToPath(new URL('..', import.meta.url)),
+    },
+  },
+
+  i18n: {
+    defaultLocale: 'fr',
+  },
+
+  unocss: {
+    nuxtLayers: true,
+  },
+
+  unpress: {
+    // autoMountIfDevMode: false,
+  },
+})

package/.playground/public/logo-dark.svg

@@ -0,0 +1,12 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_45_2)">
+<path d="M240 175L175 240" stroke="white" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M227 104L104 227" stroke="white" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="10" y="10" width="280" height="280" rx="40" stroke="white" stroke-width="20"/>
+</g>
+<defs>
+<clipPath id="clip0_45_2">
+<rect width="300" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/.playground/public/logo.svg

@@ -0,0 +1,12 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_36_19)">
+<path d="M240 175L175 240" stroke="black" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M227 104L104 227" stroke="black" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="10" y="10" width="280" height="280" rx="40" stroke="black" stroke-width="20"/>
+</g>
+<defs>
+<clipPath id="clip0_36_19">
+<rect width="300" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/.playground/uno.config.ts

@@ -0,0 +1,16 @@
+import { mergeConfigs } from '@unocss/core'
+import config from './.nuxt/uno.config.mjs'
+
+export default mergeConfigs([config, {
+  // your overrides
+  // presets: [
+  //   presetShadcn({
+  //     color: {
+  //       base: 'green',
+  //       // light: {
+  //       //   primary: '10 10% 100%',
+  //       // },
+  //     },
+  //   }),
+  // ],
+}])

package/README.md

@@ -0,0 +1,93 @@
+# Nuxt Layer Starter
+
+Fork of [shadcn-docs-nuxt](https://github.com/shadcn/shadcn-docs-nuxt) at v0.8.13
+`git diff --name-status 54b80e2e96bbc7249170150fb72e20078629a170`
+
+## Build your website using this layer
+
+- Create a new Nuxt project
+```bash
+npx create-nuxt-app <project-name>
+```
+
+- Install the layer
+```bash
+pnpm add @unpress/nuxt-layer-shadcn-unocss
+```
+
+- Extend the layer in your nuxt.config.ts
+```ts
+defineNuxtConfig({
+  extends: '@unpress/nuxt-layer-shadcn-unocss'
+})
+``` 
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Working on your layer
+
+Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
+
+The `.playground` directory should help you on trying your layer during development.
+
+Running `pnpm dev` will prepare and boot `.playground` directory, which imports your layer itself.
+
+## Distributing your layer
+
+Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
+
+To do so, you only have to check if `files` in `package.json` are valid, then run:
+
+```bash
+npm publish --access public
+```
+
+Once done, your users will only have to run:
+
+```bash
+npm install --save your-layer
+```
+
+Then add the dependency to their `extends` in `nuxt.config`:
+
+```ts
+defineNuxtConfig({
+  extends: 'your-layer'
+})
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Or statically generate it with:
+
+```bash
+pnpm generate
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```
+
+Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app.vue

@@ -0,0 +1,59 @@
+<template>
+  <NuxtLoadingIndicator
+    color="repeating-linear-gradient(to right, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.25) 100%)"
+    class="z-100"
+  />
+  <NuxtRouteAnnouncer />
+
+  <ViewModeSwitcher class="!top-[calc(var(--header-height)+var(--banner-height)+0.75rem)] [&>div]:shadow-xl [&>div]:border [&_span]:w-0 [&_span]:ml--2 [&_span]:hover:ml-0 [&_span]:transition-all">
+    <template #footer>
+      <div class="border-t my-0.5 mx-1" />
+      <div class="pb-0.5">
+        <nuxt-link
+          to="/admin"
+          class="flex items-center gap-2 py-1 transition hover:opacity-100 px-2 opacity-50 hover:bg-blue-500/10"
+          :class="$route.path.startsWith('/admin') && 'text-primary opacity-100'"
+        >
+          <div class="i-lucide-book" />
+          <span class="of-hidden">
+            {{ 'Docs' }}
+          </span>
+        </nuxt-link>
+      </div>
+    </template>
+  </ViewModeSwitcher>
+
+  <div class="app-default-layout grid grid-cols-1 min-h-dvh">
+    <LayoutHeader />
+
+    <NuxtPage />
+
+    <UiToaster />
+    <LayoutFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+const config = useConfig()
+const { themeClass, radius } = useThemes()
+
+useSeoMeta({
+  description: config.value.site.description,
+  ogDescription: config.value.site.description,
+  ogImage: config.value.site.ogImage,
+  twitterCard: 'summary_large_image',
+})
+
+useHead({
+  bodyAttrs: {
+    class: themeClass.value,
+    style: `--radius: ${radius.value}rem;--header-height: ${config.value.header.height};--banner-height: 0px;`,
+  },
+})
+</script>
+
+<style scoped>
+.app-default-layout {
+  grid-template-rows: auto 1fr auto;
+}
+</style>

package/assets/css/a11y.css

@@ -0,0 +1,48 @@
+body.is-a11y {
+  --foreground: 0 0% 0% !important;
+  --muted-foreground: 240 3.8% 16.1% !important;
+  /* --background: 0 0% 100% !important;
+  --card: 0 0% 100% !important;
+  --card-foreground: 240 10% 3.9% !important;
+  --popover: 0 0% 100% !important;
+  --popover-foreground: 240 10% 3.9% !important;
+  --primary: 240 5.9% 10% !important;
+  --primary-foreground: 0 0% 98% !important;
+  --secondary: 240 4.8% 95.9% !important;
+  --secondary-foreground: 240 5.9% 10% !important;
+  --muted: 240 4.8% 95.9% !important;
+  --accent: 240 4.8% 95.9% !important;
+  --accent-foreground: 240 5.9% 10% !important;
+  --destructive: 0 84.2% 60.2% !important;
+  --destructive-foreground: 0 0% 98% !important; */
+  --border: 240 5.9% 70% !important;
+  --input: 240 5.9% 30% !important;
+  /* --ring: 240 5.9% 10% !important;
+  --radius: 0.5rem !important; */
+
+  [class^="a11y"], [class*=" a11y"] {
+    color: var(--foreground) !important;
+  }
+}
+
+.dark body.is-a11y {
+  --background: 240 10% 3.9% !important;
+  --foreground: 0 0% 100% !important;
+  --muted-foreground: 240 5% 84.9% !important;
+  /*--card: 240 10% 3.9% !important;
+  --card-foreground: 0 0% 98% !important;
+  --popover: 240 10% 3.9% !important;
+  --popover-foreground: 0 0% 98% !important;
+  --primary: 0 0% 98% !important;
+  --primary-foreground: 240 5.9% 10% !important;
+  --secondary: 240 3.7% 15.9% !important;
+  --secondary-foreground: 0 0% 98% !important;
+  --muted: 240 3.7% 15.9% !important;
+  --accent: 240 3.7% 15.9% !important;
+  --accent-foreground: 0 0% 98% !important;
+  --destructive: 0 62.8% 30.6% !important;
+  --destructive-foreground: 0 0% 98% !important; */
+  --border: 240 3.7% 30.9% !important;
+  --input: 240 3.7% 60.9% !important;
+  /* --ring: 240 4.9% 83.9% !important; */
+}

package/assets/css/mdc-editor.css

@@ -0,0 +1,91 @@
+.EDITOR_CONTENT {
+  --mdc-editor-border-color: 220 13% 86%;
+  --mdc-editor-border-style: dashed;
+  --mdc-editor-border-width: 2px;
+  overflow: visible !important;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  & > p:not(:has(span)):not(:first-child) {
+    margin-top: 1.5rem;
+  }
+
+  & h2.prose-h2:first-child {
+    margin-top: 2.5rem;
+  }
+
+  & h3.prose-h3:first-child {
+    margin-top: 2rem;
+  }
+
+  & h4.prose-h4:first-child {
+    margin-top: 1.5rem;
+  }
+
+  & h5.prose-h5:first-child {
+    margin-top: 1.5rem;
+  }
+
+  & h6.prose-h6:first-child {
+    margin-top: 1.5rem;
+  }
+
+  & code {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    position: relative;
+    border-radius: 0.25rem;
+    padding: 0.2rem 0.3rem;
+
+    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+
+    --un-bg-opacity: 1;
+    background-color: hsl(var(--muted) / var(--un-bg-opacity)) /* hsl(var(--muted)) */;
+  }
+
+  & > div {
+    &:has(.LANGUAGE_WRAPPER) {
+      margin-top: 1.5rem;
+    }
+  }
+
+  & p a {
+    text-underline-offset: 4px;
+    text-decoration-line: underline;
+    font-weight: 600;
+  }
+
+  & .prosemirror-flat-list {
+    padding-top: 0.5rem;
+    margin-left: 1.5rem;
+
+    &:first-child,
+    :not(&) + & {
+      padding-top: 1.5rem;
+    }
+  }
+
+  /* CodeGroupEditor */
+  & .\[\&\:not\(\:first-child\)\]\:mt-5 {
+    margin-top: 1.25rem;
+  }
+  & div[data-node-view-root="true"]:first-child > div > .\[\&\:not\(\:first-child\)\]\:mt-5 {
+    margin-top: 0rem;
+  }
+}
+
+.animate-scroll-fade-in-up {
+  animation: fade-in-up linear;
+  animation-timeline: view();
+  animation-range: 0 25dvh;
+}
+
+.docs-content:not(.EDITOR_CONTENT) > * {
+  --una-enter-translate-y: 5dvh;
+  --una-enter-opacity: 0.5;
+  animation: una-in linear;
+  animation-timeline: view();
+  animation-range: 0 25dvh;
+}

package/components/A11yModeToggle.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+const isA11yMode = ref(false)
+
+function toggleA11yMode() {
+  document.body.classList.toggle('is-a11y')
+  isA11yMode.value = !isA11yMode.value
+}
+</script>
+
+<template>
+  <UiButton
+    variant="ghost"
+    size="icon"
+    :class="{ 'border-2 border-primary': isA11yMode }"
+    @click="toggleA11yMode()"
+  >
+    <NuxtIcon
+      name="lucide:glasses"
+      size="16"
+    />
+    <span class="sr-only">Toggle accessibility</span>
+  </UiButton>
+</template>

package/components/DarkModeToggle.vue

@@ -0,0 +1,26 @@
+<template>
+  <UiButton
+    variant="ghost"
+    size="icon"
+    @click="toggleDark"
+  >
+    <NuxtIcon
+      name="lucide:sun"
+      class="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+      size="18"
+    />
+    <NuxtIcon
+      name="lucide:moon"
+      class="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+      size="18"
+    />
+    <span class="sr-only">Toggle dark mode</span>
+  </UiButton>
+</template>
+
+<script setup lang="ts">
+const colorMode = useColorMode()
+function toggleDark() {
+  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+}
+</script>

package/components/LinkIcon.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    v-if="to"
+
+    class="absolute right-3 top-3 flex z-1 p-1 transition bg-background/50 rounded"
+    :class="{
+      'group-hover/card:translate-x-1 group-hover/card:translate-y--1': _external,
+      'group-hover/card:translate-x-1': !_external,
+    }"
+  >
+    <NuxtIcon
+      :name="_external ? 'lucide:arrow-up-right' : 'lucide:arrow-right'"
+      :size="size"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const {
+  to,
+  target,
+  external = undefined,
+  size = 20,
+} = defineProps<{
+  to?: string
+  target?: Target
+  external?: boolean
+  size?: number
+}>()
+
+const _external = computed(() => external ?? (target === '_blank' || to?.startsWith('http')))
+</script>