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

package/components/content/CardGroup.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="group grid gap-4 md:grid-cols-2 [&:not(:first-child)]:mt-5">
+    <slot v-if="!data" />
+
+    <template v-else>
+      <Card
+        v-for="(item, index) in _data"
+        :key="index"
+        :title="item.title"
+        :description="item.description"
+        :to="item._path"
+        :icon="item.icon"
+
+        :media="item.cover"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content'
+
+const props = defineProps<{
+  data?: string
+}>()
+
+const _data = ref<ParsedContent[] | undefined>(undefined)
+
+if (props.data) {
+  const { data } = await useAsyncData('card-group-data-' + String(props.data), () =>
+    queryContent(props.data!).find(),
+  )
+  // Remove _dir.yaml ...
+  _data.value = data.value?.filter(item => !item._partial)
+}
+
+defineSlots()
+</script>

package/components/content/CodeCopy.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex">
+    <Transition
+      name="fade"
+      mode="out-in"
+    >
+      <div v-if="copied === false">
+        <NuxtIcon
+          name="lucide:copy"
+          class="block cursor-pointer self-center text-muted-foreground hover:text-primary"
+          @click="handleClick"
+        />
+      </div>
+      <div v-else>
+        <NuxtIcon
+          ref="checkIconRef"
+          name="lucide:check"
+          class="block cursor-pointer self-center text-muted-foreground hover:text-primary"
+        />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from '@/components/ui/toast/use-toast'
+
+const { code } = defineProps<{
+  code: string
+}>()
+
+const { toast } = useToast()
+
+const { copy } = useClipboard({ source: code })
+const copied = ref(false)
+
+async function handleClick() {
+  await copy(code)
+  copied.value = true
+
+  if (useConfig().value.main.codeCopyToast) {
+    toast({
+      description: useConfig().value.main.codeCopyToastText,
+    })
+  }
+}
+
+const checkIconRef = ref<HTMLElement>()
+onClickOutside(checkIconRef, () => {
+  copied.value = false
+})
+</script>

package/components/content/CodeGroup._vue

@@ -0,0 +1,27 @@
+<template>
+  <render />
+</template>
+
+<script setup lang="ts">
+import type { SetupContext } from 'vue';
+import Tabs from './Tabs.vue';
+
+const { inStack = false, sync } = defineProps<{
+  inStack?: boolean;
+  sync?: string;
+}>();
+
+const _slots: SetupContext['slots'] = useSlots();
+function render() {
+  const slots = _slots?.default?.() || [];
+  return h(
+    Tabs,
+    {
+      variant: 'card',
+      inStack,
+      sync,
+    },
+    () => slots,
+  );
+}
+</script>

package/components/content/CodeSnippet._vue

@@ -0,0 +1,78 @@
+<template>
+  <MDC
+    v-if="loadedCode"
+    :value="md"
+    class="[&:not(:first-child)]:mt-5"
+  />
+  <UiAlert
+    v-else
+    variant="destructive"
+  >
+    <UiAlertTitle>Error</UiAlertTitle>
+    <UiAlertDescription>
+      Cannot load code: <ProseCodeInline>{{ file || url }}</ProseCodeInline>
+    </UiAlertDescription>
+  </UiAlert>
+</template>
+
+<script setup lang="ts">
+const { file, url, language, title, highlights, meta, start, offset }
+  = defineProps<{
+    file?: string
+    url?: string
+    language: string
+    title?: string
+    highlights?: string
+    meta?: string
+    start?: number
+    offset?: number
+  }>()
+
+const loadedCode = ref('')
+
+const rawFiles = import.meta.glob(
+  [
+    '@/**/*.{abap,asc,ash,ampl,mod,g4,apib,apl,dyalog,asp,asax,ascx,ashx,asmx,aspx,axd,dats,hats,sats,as,adb,ada,ads,agda,als,apacheconf,vhost,cls,applescript,scpt,arc,ino,asciidoc,adoc,asc,aj,asm,a51,inc,nasm,aug,ahk,ahkl,au3,awk,auk,gawk,mawk,nawk,bat,cmd,befunge,bison,bb,decls,bmx,bsv,boo,b,bf,brs,bro,c,cats,h,idc,w,cs,cake,cshtml,csx,cpp,c++,cc,cp,cxx,h,h++,hh,hpp,hxx,inc,inl,ipp,tcc,tpp,c-objdump,chs,clp,cmake,cmake.in,cob,cbl,ccp,cobol,cpy,css,csv,capnp,mss,ceylon,chpl,ch,ck,cirru,clw,icl,dcl,click,clj,boot,cl2,cljc,cljs,cljs.hl,cljscm,cljx,hic,coffee,_coffee,cake,cjsx,cson,iced,cfm,cfml,cfc,lisp,asd,cl,l,lsp,ny,podsl,sexp,cp,cps,cl,coq,v,cppobjdump,c++-objdump,c++objdump,cpp-objdump,cxx-objdump,creole,cr,feature,cu,cuh,cy,pyx,pxd,pxi,d,di,d-objdump,com,dm,zone,arpa,d,darcspatch,dpatch,dart,diff,patch,dockerfile,djs,dylan,dyl,intr,lid,E,ecl,eclxml,ecl,sch,brd,epj,e,ex,exs,elm,el,emacs,emacs.desktop,em,emberscript,erl,es,escript,hrl,xrl,yrl,fs,fsi,fsx,fx,flux,f90,f,f03,f08,f77,f95,for,fpp,factor,fy,fancypack,fan,fs,for,eam.fs,fth,4th,f,for,forth,fr,frt,fs,ftl,fr,g,gco,gcode,gms,g,gap,gd,gi,tst,s,ms,gd,glsl,fp,frag,frg,fs,fsh,fshader,geo,geom,glslv,gshader,shader,vert,vrx,vsh,vshader,gml,kid,ebuild,eclass,po,pot,glf,gp,gnu,gnuplot,plot,plt,go,golo,gs,gst,gsx,vark,grace,gradle,gf,gml,graphql,dot,gv,man,1,1in,1m,1x,2,3,3in,3m,3qt,3x,4,5,6,7,8,9,l,me,ms,n,rno,roff,groovy,grt,gtpl,gvy,gsp,hcl,tf,hlsl,fx,fxh,hlsli,html,htm,html.hl,inc,st,xht,xhtml,mustache,jinja,eex,erb,erb.deface,phtml,http,hh,php,haml,haml.deface,handlebars,hbs,hb,hs,hsc,hx,hxsl,hy,bf,pro,dlm,ipf,ini,cfg,prefs,pro,properties,irclog,weechatlog,idr,lidr,ni,i7x,iss,io,ik,thy,ijs,flex,jflex,json,geojson,lock,topojson,json5,jsonld,jq,jsx,jade,j,java,jsp,js,_js,bones,es,es6,frag,gs,jake,jsb,jscad,jsfl,jsm,jss,njs,pac,sjs,ssjs,sublime-build,sublime-commands,sublime-completions,sublime-keymap,sublime-macro,sublime-menu,sublime-mousemap,sublime-project,sublime-settings,sublime-theme,sublime-workspace,sublime_metrics,sublime_session,xsjs,xsjslib,jl,ipynb,krl,sch,brd,kicad_pcb,kit,kt,ktm,kts,lfe,ll,lol,lsl,lslp,lvproj,lasso,las,lasso8,lasso9,ldml,latte,lean,hlean,less,l,lex,ly,ily,b,m,ld,lds,mod,liquid,lagda,litcoffee,lhs,ls,_ls,xm,x,xi,lgt,logtalk,lookml,ls,lua,fcgi,nse,pd_lua,rbxs,wlua,mumps,m,m4,m4,ms,mcr,mtml,muf,m,mak,d,mk,mkfile,mako,mao,md,markdown,mkd,mkdn,mkdown,ron,mask,mathematica,cdf,m,ma,mt,nb,nbp,wl,wlt,matlab,m,maxpat,maxhelp,maxproj,mxt,pat,mediawiki,wiki,m,moo,metal,minid,druby,duby,mir,mirah,mo,mod,mms,mmk,monkey,moo,moon,myt,ncl,nl,nsi,nsh,n,axs,axi,axs.erb,axi.erb,nlogo,nl,lisp,lsp,nginxconf,vhost,nim,nimrod,ninja,nit,nix,nu,numpy,numpyw,numsc,ml,eliom,eliomi,ml4,mli,mll,mly,objdump,m,h,mm,j,sj,omgrofl,opa,opal,cl,opencl,p,cls,scad,org,ox,oxh,oxo,oxygene,oz,pwn,inc,php,aw,ctp,fcgi,inc,php3,php4,php5,phps,phpt,pls,pck,pkb,pks,plb,plsql,sql,sql,pov,inc,pan,psc,parrot,pasm,pir,pas,dfm,dpr,inc,lpr,pp,pl,al,cgi,fcgi,perl,ph,plx,pm,pod,psgi,t,6pl,6pm,nqp,p6,p6l,p6m,pl,pl6,pm,pm6,t,pkl,l,pig,pike,pmod,pod,pogo,pony,ps,eps,ps1,psd1,psm1,pde,pl,pro,prolog,yap,spin,proto,asc,pub,pp,pd,pb,pbi,purs,py,bzl,cgi,fcgi,gyp,lmi,pyde,pyp,pyt,pyw,rpy,tac,wsgi,xpy,pytb,qml,qbs,pro,pri,r,rd,rsx,raml,rdoc,rbbas,rbfrm,rbmnu,rbres,rbtbar,rbuistate,rhtml,rmd,rkt,rktd,rktl,scrbl,rl,raw,reb,r,r2,r3,rebol,red,reds,cw,rpy,rs,rsh,robot,rg,rb,builder,fcgi,gemspec,god,irbrc,jbuilder,mspec,pluginspec,podspec,rabl,rake,rbuild,rbw,rbx,ru,ruby,thor,watchr,rs,rs.in,sas,scss,smt2,smt,sparql,rq,sqf,hqf,sql,cql,ddl,inc,prc,tab,udf,viw,sql,db2,ston,svg,sage,sagews,sls,sass,scala,sbt,sc,scaml,scm,sld,sls,sps,ss,sci,sce,tst,self,sh,bash,bats,cgi,command,fcgi,ksh,sh.in,tmux,tool,zsh,sh-session,shen,sl,slim,smali,st,cs,tpl,sp,inc,sma,nut,stan,ML,fun,sig,sml,do,ado,doh,ihlp,mata,matah,sthlp,styl,sc,scd,swift,sv,svh,vh,toml,txl,tcl,adp,tm,tcsh,csh,tex,aux,bbx,bib,cbx,cls,dtx,ins,lbx,ltx,mkii,mkiv,mkvi,sty,toc,tea,t,txt,fr,nb,ncl,no,textile,thrift,t,tu,ttl,twig,ts,tsx,upc,anim,asset,mat,meta,prefab,unity,uno,uc,ur,urs,vcl,vhdl,vhd,vhf,vhi,vho,vhs,vht,vhw,vala,vapi,v,veo,vim,vb,bas,cls,frm,frx,vba,vbhtml,vbs,volt,vue,owl,webidl,x10,xc,xml,ant,axml,ccxml,clixml,cproject,csl,csproj,ct,dita,ditamap,ditaval,dll.config,dotsettings,filters,fsproj,fxml,glade,gml,grxml,iml,ivy,jelly,jsproj,kml,launch,mdpolicy,mm,mod,mxml,nproj,nuspec,odd,osm,plist,pluginspec,props,ps1xml,psc1,pt,rdf,rss,scxml,srdf,storyboard,stTheme,sublime-snippet,targets,tmCommand,tml,tmLanguage,tmPreferences,tmSnippet,tmTheme,ts,tsx,ui,urdf,ux,vbproj,vcxproj,vssettings,vxml,wsdl,wsf,wxi,wxl,wxs,x3d,xacro,xaml,xib,xlf,xliff,xmi,xml.dist,xproj,xsd,xul,zcml,xsp-config,xsp.metadata,xpl,xproc,xquery,xq,xql,xqm,xqy,xs,xslt,xsl,xojo_code,xojo_menu,xojo_report,xojo_script,xojo_toolbar,xojo_window,xtend,yml,reek,rviz,sublime-syntax,syntax,yaml,yaml-tmlanguage,yang,y,yacc,yy,zep,zimpl,zmpl,zpl,desktop,desktop.in,ec,eh,edn,fish,mu,nc,ooc,rst,rest,rest.txt,rst.txt,wisp,prg,ch,prw}',
+    '!@/**/nuxt.config.ts',
+  ],
+  {
+    query: '?raw',
+    import: 'default',
+  },
+)
+
+if (file) {
+  const importer = rawFiles[file]
+  if (importer) {
+    loadedCode.value = (await importer()) as string
+  }
+}
+else if (url) {
+  try {
+    const data = await $fetch(url, { parseResponse: txt => txt })
+    if (data) {
+      loadedCode.value = data as string
+    }
+  }
+  catch {
+    // Do nothing
+  }
+}
+
+if (loadedCode.value && start && offset) {
+  const lines = loadedCode.value.split('\n')
+  loadedCode.value = lines
+    .slice(Number(start || 1) - 1, Number(start || 1) - 1 + Number(offset))
+    .join('\n')
+}
+
+const md = `
+::div
+\`\`\`\`${language} ${title && `[${title}]`} ${
+  highlights && `{${highlights}}`
+} ${meta || ''}
+${loadedCode.value}
+\`\`\`\`
+::
+`
+</script>

package/components/content/Collapsible.vue

@@ -0,0 +1,80 @@
+<template>
+  <UiCollapsible
+    v-if="variant === 'card'"
+    v-model:open="isOpen"
+    class="space-y-2"
+  >
+    <div class="flex items-center justify-between space-x-4">
+      <h4 class="text-sm font-semibold">
+        <ContentSlot
+          :use="$slots.title"
+          unwrap="p"
+        />
+        {{ title }}
+      </h4>
+      <UiCollapsibleTrigger as-child>
+        <UiButton
+          variant="ghost"
+          size="sm"
+          class="w-9 p-0"
+        >
+          <NuxtIcon name="lucide:chevrons-up-down" />
+          <span class="sr-only">Toggle</span>
+        </UiButton>
+      </UiCollapsibleTrigger>
+    </div>
+
+    <UiCollapsibleContent class="space-y-2">
+      <div class="rounded-md border px-4 py-3 font-mono text-sm">
+        <ContentSlot
+          :use="$slots.content"
+          unwrap="p"
+        />
+        <ContentSlot unwrap="p" />
+      </div>
+    </UiCollapsibleContent>
+  </UiCollapsible>
+
+  <UiCollapsible
+    v-else-if="variant === 'simple'"
+    v-model:open="isOpen"
+  >
+    <UiCollapsibleTrigger class="w-full text-left">
+      <div class="flex w-full gap-1">
+        <NuxtIcon
+          name="lucide:chevron-down"
+          class="self-center transition-all"
+          :class="[!isOpen && '-rotate-90']"
+        />
+        <span>
+          <ContentSlot
+            :use="$slots.title"
+            unwrap="p"
+          />
+          {{ title }}
+        </span>
+      </div>
+    </UiCollapsibleTrigger>
+    <UiCollapsibleContent>
+      <div class="ml-2 border-l py-2 pl-4">
+        <ContentSlot
+          :use="$slots.content"
+          unwrap="p"
+        />
+        <ContentSlot unwrap="p" />
+      </div>
+    </UiCollapsibleContent>
+  </UiCollapsible>
+</template>
+
+<script setup lang="ts">
+const { variant = 'simple', defaultOpen = false } = defineProps<{
+  variant?: 'simple' | 'card'
+  title?: string
+  defaultOpen?: boolean
+}>()
+
+defineSlots()
+
+const isOpen = ref(defaultOpen)
+</script>

package/components/content/Field.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="[&:not(:first-child)]:mt-4 [&:not(:first-child)]:pt-4 animate-scroll-fade-in-up">
+    <div class="mb-2">
+      <div class="flex items-center gap-2">
+        <Badge
+          type="primary"
+          size="lg"
+        >
+          {{ name }}
+        </Badge>
+
+        <span
+          v-if="required"
+          class="font-mono text-sm text-muted-foreground"
+        >
+          {{ $t(fieldRequiredText) }}
+        </span>
+
+        <span class="ml-auto font-mono text-sm text-muted-foreground text-right text-balance">
+          {{ type }}
+        </span>
+      </div>
+
+      <div
+        v-if="defaultValue"
+        class="text-muted-foreground text-right"
+      >
+        <span class="font-bold mr-1 text-sm text-muted-foreground">
+          default:
+        </span>
+        <ProseCodeInline>
+          {{ defaultValue }}
+        </ProseCodeInline>
+      </div>
+    </div>
+    <span class="text-sm text-muted-foreground">
+      <ContentSlot unwrap="p" />
+      {{ description }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  name: string
+  type?: string
+  required?: boolean
+  description?: string
+  defaultValue?: string
+}>()
+
+const { fieldRequiredText } = useConfig().value.main
+</script>

package/components/content/FieldGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="divide-y [&:not(:first-child)]:mt-6">
+    <slot />
+  </div>
+</template>

package/components/content/FileTree.vue

@@ -0,0 +1,110 @@
+<template>
+  <UiCard
+    class="relative overflow-hidden [&:not(:first-child)]:mt-5 [&:not(:last-child)]:mb-5"
+  >
+    <div
+      v-if="title"
+      class="flex items-center border-b p-3 font-mono text-sm"
+    >
+      <Icon
+        v-if="icon"
+        :name="icon"
+        class="mr-1.5"
+      />
+      <span>{{ title }}</span>
+    </div>
+
+    <div class="w-auto bg-muted/30 p-2">
+      <FileTreeRoot
+        :tree="parsedTree"
+        :show-arrow
+        :show-icon
+        :level="0"
+      />
+    </div>
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+type InputTreeItem =
+  | string
+  | {
+    [key: string]: InputTreeItem[]
+  }
+
+const {
+  tree,
+  autoSlash = true,
+  showArrow = false,
+  showIcon = true,
+} = defineProps<{
+  title?: string
+  icon?: string
+  autoSlash?: boolean
+  showArrow?: boolean
+  showIcon?: boolean
+  tree: InputTreeItem[]
+}>()
+
+const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon))
+
+function getIcon(filename: string, type: 'folder' | 'file') {
+  if (filename === '...') return
+  if (filename.endsWith('/')) return 'lucide:folder'
+
+  return (
+    iconMap.get(filename.split('.')[filename.split('.').length - 1])
+    || iconMap.get(filename.toLowerCase())
+    || (type === 'file' ? 'lucide:file' : 'lucide:folder')
+  )
+}
+
+function getItem(
+  key: string,
+  type: 'folder' | 'file',
+  children?: InputTreeItem[],
+): FileTreeItem {
+  let title = key
+  let highlighted = false
+  if (title.startsWith('^') && title.endsWith('^')) {
+    title = title.substring(1, title.length - 1)
+    highlighted = true
+  }
+
+  if (type === 'file') {
+    return {
+      title,
+      icon: getIcon(title, 'file'),
+      highlighted,
+    }
+  }
+  else {
+    return {
+      title: `${title}${autoSlash ? '/' : ''}`,
+      icon: getIcon(title, 'folder'),
+      children: children && getTree(children),
+      highlighted,
+    }
+  }
+}
+
+function getTree(tree: InputTreeItem[]) {
+  const res: FileTreeItem[] = []
+
+  for (const item of tree) {
+    if (typeof item === 'string') {
+      res.push(getItem(item, 'file'))
+    }
+    else if (typeof item === 'object') {
+      for (const key of Object.keys(item))
+        res.push(getItem(key, 'folder', item[key]))
+    }
+  }
+
+  return res
+}
+
+const parsedTree = computed(() => {
+  return getTree(tree)
+})
+</script>

package/components/content/FileTreeItem.vue

@@ -0,0 +1,64 @@
+<template>
+  <li>
+    <!-- Folder -->
+    <div v-if="tree.children">
+      <a
+        class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-left text-sm font-medium text-foreground/80 hover:bg-muted hover:text-primary"
+        :class="[tree.highlighted && 'underline underline-offset-4']"
+        @click="isOpen = !isOpen"
+      >
+        <NuxtIcon
+          v-if="showArrow"
+          name="lucide:chevron-down"
+          class="transition-transform"
+          :class="[!isOpen && '-rotate-90']"
+        />
+
+        <Icon
+          v-if="showIcon && tree.icon"
+          :name="tree.icon"
+          class="min-w-4"
+        />
+
+        <span :class="[tree.highlighted && 'font-bold text-primary']">
+          {{ tree.title }}
+        </span>
+      </a>
+      <div v-show="isOpen">
+        <FileTreeRoot
+          :show-icon
+          :show-arrow
+          :tree="tree.children"
+          :level="level + 1"
+        />
+      </div>
+    </div>
+    <!-- File -->
+    <div
+      v-else
+      class="flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-foreground/80 hover:bg-muted hover:text-primary"
+      :class="[tree.highlighted && 'underline underline-offset-4']"
+    >
+      <Icon
+        v-if="showIcon && tree.icon"
+        :name="tree.icon"
+        class="min-w-4"
+      />
+
+      <span :class="[tree.highlighted && 'font-bold text-primary']">
+        {{ tree.title }}
+      </span>
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+const { tree, level } = defineProps<{
+  showArrow: boolean
+  tree: FileTreeItem
+  showIcon: boolean
+  level: number
+}>()
+
+const isOpen = ref(true)
+</script>

package/components/content/FileTreeRoot.vue

@@ -0,0 +1,27 @@
+<template>
+  <ul
+    class="flex flex-col font-mono"
+    :class="[level > 0 && 'mx-3.5 border-l px-2']"
+  >
+    <template
+      v-for="link in tree"
+      :key="link._id"
+    >
+      <FileTreeItem
+        :show-icon
+        :show-arrow
+        :tree="link"
+        :level="level"
+      />
+    </template>
+  </ul>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  tree: FileTreeItem[]
+  level: number
+  showArrow: boolean
+  showIcon: boolean
+}>()
+</script>