lint:fix all

2025-07-29 00:32:57 +08:00
parent 7d2f57df97
commit 1745a54eb6
34 changed files with 820 additions and 606 deletions
--- a/app/components/content/ButtonLink.vue
+++ b/app/components/content/ButtonLink.vue
@@ -1,25 +1,34 @@
 <template>
  <div class="flex flex-row items-center mt-2 mb-2">
-  <NuxtLink :to="to || href" :target="(blank && '_blank') || target">
-    <UButton :variant="variant" :size="size" :icon="icon" :trailing-icon="trailingIcon" class="min-h-10 max-h-12">
-      <slot/>
-    </UButton>
-  </NuxtLink>
-</div>
+    <NuxtLink
+      :to="to || href"
+      :target="(blank && '_blank') || target"
+    >
+      <UButton
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+        :trailing-icon="trailingIcon"
+        class="min-h-10 max-h-12"
+      >
+        <slot />
+      </UButton>
+    </NuxtLink>
+  </div>
 </template>

 <script setup lang="ts">
-type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;
+type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined

 defineProps<{
-  variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  color?: 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white' | 'black';
-  icon?: string;
-  to?: string;
-  href?: string;
-  target?: Target;
-  trailingIcon?: string;
-  blank?: boolean;
-}>();
+  variant?: 'solid' | 'outline' | 'ghost' | 'link' | 'soft'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white' | 'black'
+  icon?: string
+  to?: string
+  href?: string
+  target?: Target
+  trailingIcon?: string
+  blank?: boolean
+}>()
 </script>
--- a/app/components/content/ColorModeSwitch.vue
+++ b/app/components/content/ColorModeSwitch.vue
@@ -7,7 +7,7 @@ const isLight = computed({
  },
  set(_isLight) {
    colorMode.preference = _isLight ? 'light' : 'dark'
-  },
+  }
 })
 </script>

@@ -24,7 +24,7 @@ const isLight = computed({
        :ui="{
          base: 'w-70 h-35 rounded-lg rotate-90 data-[state=checked]:bg-[var(--ui-color-neutral-200)]',
          thumb: 'data-[state=checked]:translate-x-35 data-[state=checked]:rtl:-translate-x-35 rounded-lg size-34',
-          icon: 'rotate-270 size-8',
+          icon: 'rotate-270 size-8'
        }"
        @click="isDark = !isDark"
      />
--- a/app/components/content/ECard.vue
+++ b/app/components/content/ECard.vue
@@ -1,14 +1,19 @@
 <template>
-      <UPageCard :title="title"  :description="description" :spotlight="spotlight" :icon="icon" class="">
-        <slot/>
-        <NuxtImg
-        v-if="img"
-        :src="img"
-        class="w-full"
-      />
-      <span> {{ content }} </span>
-      </UPageCard>
-      
+  <UPageCard
+    :title="title"
+    :description="description"
+    :spotlight="spotlight"
+    :icon="icon"
+    class=""
+  >
+    <slot />
+    <NuxtImg
+      v-if="img"
+      :src="img"
+      class="w-full"
+    />
+    <span> {{ content }} </span>
+  </UPageCard>
 </template>

  <!-- ::card
@@ -21,20 +26,18 @@ Image Card
 #content
 Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
 :: -->
-  
-  <script setup lang="ts">

-  const {
-content="",
+<script setup lang="ts">
+const {
+  content = ''

-} =defineProps<{
-    title?: string;
-    content?: string;
-    img?: string;
-    icon?: string;
-    description?: string;
-    spotlight?:boolean;
-    slot?:string;
-  }>();
-  </script>
-  
+} = defineProps<{
+  title?: string
+  content?: string
+  img?: string
+  icon?: string
+  description?: string
+  spotlight?: boolean
+  slot?: string
+}>()
+</script>
--- a/app/components/content/ETabs.vue
+++ b/app/components/content/ETabs.vue
@@ -1,6 +1,14 @@
 <template>
-  <UTabs :items="tabItems" class="w-full" :unmount-on-hide="false" variant="link">
-    <template v-for="item in tabItems" #[item.slot]="{ item: slotItem }">
+  <UTabs
+    :items="tabItems"
+    class="w-full"
+    :unmount-on-hide="false"
+    variant="link"
+  >
+    <template
+      v-for="item in tabItems"
+      #[item.slot]="{ item: slotItem }"
+    >
      <div class="mt-4">
        <component :is="getSlotContent(slotItem)" />
      </div>
@@ -38,4 +46,4 @@ function getSlotContent(item: TabsItem) {
  if (!item.slot) return null
  return slotContents.value[item.slot]
 }
-</script>
+</script>
--- a/app/components/content/FileTree.vue
+++ b/app/components/content/FileTree.vue
@@ -1,9 +1,16 @@
 <template>
  <UPage class="mt-4 mb-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-300 dark:border-gray-700">
-    <div v-if="title" class="flex items-center font-mono text-base m-3 text-gray-700 dark:text-gray-300 rounded-xl ">
-      
-      <Icon v-if="icon" :name="icon" class="mr-2" size="20" />
-      
+    <div
+      v-if="title"
+      class="flex items-center font-mono text-base m-3 text-gray-700 dark:text-gray-300 rounded-xl "
+    >
+      <Icon
+        v-if="icon"
+        :name="icon"
+        class="mr-2"
+        size="20"
+      />
+
      <span>{{ title }}</span>
    </div>

@@ -23,7 +30,7 @@
            />
          </div>
        </div>
-        
+
        <!-- 服务端渲染时的占位符 -->
        <template #fallback>
          <div class="space-y-1">
@@ -33,8 +40,11 @@
              class="file-tree-item"
            >
              <div class="flex items-center py-1 px-2">
-                <div class="flex items-center" :style="{ marginLeft: '0px' }">
-                  <Icon 
+                <div
+                  class="flex items-center"
+                  :style="{ marginLeft: '0px' }"
+                >
+                  <Icon
                    v-if="showIcon"
                    :name="item.icon || 'lucide-file'"
                    class="mr-2 text-gray-500 w-4 h-4"
@@ -45,7 +55,7 @@
                      'text-yellow-500': item.icon?.includes('json')
                    }"
                  />
-                  <span 
+                  <span
                    class="text-sm font-mono"
                    :class="{
                      'font-semibold': item.isFolder,
@@ -61,38 +71,38 @@
        </template>
      </ClientOnly>
    </div>
-</UPage>
+  </UPage>
 </template>

 <script setup lang="ts">
 type InputTreeItem = string | {
-  [key: string]: InputTreeItem[];
-};
+  [key: string]: InputTreeItem[]
+}

-type FileTreeItemDiff = 'none' | 'addition' | 'deletion';
+type FileTreeItemDiff = 'none' | 'addition' | 'deletion'

 interface FileTreeItem {
-  title: string;
-  icon?: string;
-  children?: FileTreeItem[];
-  highlighted?: boolean;
-  diff?: FileTreeItemDiff;
-  isFolder?: boolean;
+  title: string
+  icon?: string
+  children?: FileTreeItem[]
+  highlighted?: boolean
+  diff?: FileTreeItemDiff
+  isFolder?: boolean
 }

 const {
  tree,
  autoSlash = true,
  showArrow = false,
-  showIcon = true,
+  showIcon = true
 } = defineProps<{
-  title?: string;
-  icon?: string;
-  autoSlash?: boolean;
-  showArrow?: boolean;
-  showIcon?: boolean;
-  tree: InputTreeItem[];
-}>();
+  title?: string
+  icon?: string
+  autoSlash?: boolean
+  showArrow?: boolean
+  showIcon?: boolean
+  tree: InputTreeItem[]
+}>()

 // 默认图标映射
 const defaultIcons = {
@@ -103,38 +113,38 @@ const defaultIcons = {
  json: 'simple-icons-json',
  folder: 'lucide-folder',
  file: 'lucide-file'
-};
+}

 function getIcon(filename: string, type: 'folder' | 'file'): string {
-  if (filename === '...') return 'lucide-more-horizontal';
-  if (filename.endsWith('/')) return defaultIcons.folder;
+  if (filename === '...') return 'lucide-more-horizontal'
+  if (filename.endsWith('/')) return defaultIcons.folder
+
+  const parts = filename.split('.')
+  const extension = parts.length > 1 ? parts[parts.length - 1]?.toLowerCase() || '' : ''

-  const parts = filename.split('.');
-  const extension = parts.length > 1 ? parts[parts.length - 1]?.toLowerCase() || '' : '';
-  
  // 根据扩展名返回对应图标
  switch (extension) {
-    case 'vue': return defaultIcons.vue;
-    case 'ts': return defaultIcons.ts;
-    case 'js': return defaultIcons.js;
-    case 'md': return defaultIcons.md;
-    case 'json': return defaultIcons.json;
-    default: return type === 'file' ? defaultIcons.file : defaultIcons.folder;
+    case 'vue': return defaultIcons.vue
+    case 'ts': return defaultIcons.ts
+    case 'js': return defaultIcons.js
+    case 'md': return defaultIcons.md
+    case 'json': return defaultIcons.json
+    default: return type === 'file' ? defaultIcons.file : defaultIcons.folder
  }
 }

 function getItem(key: string, type: 'folder' | 'file', children?: InputTreeItem[]): FileTreeItem {
-  let title = key;
-  let highlighted = false;
-  
+  let title = key
+  let highlighted = false
+
  if (title.startsWith('^') && title.endsWith('^')) {
-    title = title.substring(1, title.length - 1);
-    highlighted = true;
+    title = title.substring(1, title.length - 1)
+    highlighted = true
  }

-  let diff: FileTreeItemDiff = 'none';
-  if (title.startsWith('+')) diff = 'addition';
-  else if (title.startsWith('-')) diff = 'deletion';
+  let diff: FileTreeItemDiff = 'none'
+  if (title.startsWith('+')) diff = 'addition'
+  else if (title.startsWith('-')) diff = 'deletion'

  if (type === 'file') {
    return {
@@ -143,7 +153,7 @@ function getItem(key: string, type: 'folder' | 'file', children?: InputTreeItem[
      highlighted,
      diff,
      isFolder: false
-    };
+    }
  } else {
    return {
      title: `${title}${autoSlash ? '/' : ''}`,
@@ -152,35 +162,35 @@ function getItem(key: string, type: 'folder' | 'file', children?: InputTreeItem[
      highlighted,
      diff,
      isFolder: true
-    };
+    }
  }
 }

 function getTree(tree: InputTreeItem[]): FileTreeItem[] {
-  const res: FileTreeItem[] = [];
+  const res: FileTreeItem[] = []

  for (const item of tree) {
    if (typeof item === 'string') {
-      res.push(getItem(item, 'file'));
+      res.push(getItem(item, 'file'))
    } else if (typeof item === 'object' && item !== null) {
      for (const key of Object.keys(item)) {
-        const children = (item as Record<string, InputTreeItem[]>)[key];
+        const children = (item as Record<string, InputTreeItem[]>)[key]
        if (children) {
-          res.push(getItem(key, 'folder', children));
+          res.push(getItem(key, 'folder', children))
        }
      }
    }
  }

-  return res;
+  return res
 }

 const parsedTree = computed(() => {
-  return getTree(tree);
-});
+  return getTree(tree)
+})

 // 使用 provide/inject 来管理展开状态
-const expandedState = ref(new Set<string>());
+const expandedState = ref(new Set<string>())

-provide('expandedState', expandedState);
+provide('expandedState', expandedState)
 </script>
--- a/app/components/content/FileTreeItem.vue
+++ b/app/components/content/FileTreeItem.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="file-tree-item">
-    <div 
+    <div
      class="flex items-center py-1 px-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
      :class="{
        'bg-blue-50 dark:bg-blue-900/20': item.highlighted,
@@ -10,18 +10,24 @@
      @click="toggleFolder"
    >
      <!-- 缩进 -->
-      <div class="flex items-center" :style="{ marginLeft: level * 16 + 'px' }">
+      <div
+        class="flex items-center"
+        :style="{ marginLeft: level * 16 + 'px' }"
+      >
        <!-- 箭头（仅文件夹且有子项时显示） -->
-        <Icon 
+        <Icon
          v-if="showArrow && item.isFolder && item.children && item.children.length > 0"
          :name="isExpanded ? 'lucide-chevron-down' : 'lucide-chevron-right'"
          class="mr-1 text-gray-400 w-4 h-4 transition-transform"
          :class="{ 'rotate-90': isExpanded }"
        />
-        <div v-else-if="showArrow" class="w-4 mr-1"></div>
-        
+        <div
+          v-else-if="showArrow"
+          class="w-4 mr-1"
+        />
+
        <!-- 图标 -->
-        <Icon 
+        <Icon
          v-if="showIcon"
          :name="item.icon || 'lucide-file'"
          class="mr-2 text-gray-500 w-4 h-4"
@@ -32,9 +38,9 @@
            'text-yellow-500': item.icon?.includes('json')
          }"
        />
-        
+
        <!-- 标题 -->
-        <span 
+        <span
          class="text-sm font-mono"
          :class="{
            'font-semibold': item.isFolder,
@@ -47,7 +53,10 @@
    </div>

    <!-- 子项 -->
-    <div v-if="item.children && item.children.length > 0 && isExpanded" class="ml-4">
+    <div
+      v-if="item.children && item.children.length > 0 && isExpanded"
+      class="ml-4"
+    >
      <FileTreeItem
        v-for="child in item.children"
        :key="child.title"
@@ -61,48 +70,48 @@
 </template>

 <script setup lang="ts">
-type FileTreeItemDiff = 'none' | 'addition' | 'deletion';
+type FileTreeItemDiff = 'none' | 'addition' | 'deletion'

 interface FileTreeItem {
-  title: string;
-  icon?: string;
-  children?: FileTreeItem[];
-  highlighted?: boolean;
-  diff?: FileTreeItemDiff;
-  isFolder?: boolean;
+  title: string
+  icon?: string
+  children?: FileTreeItem[]
+  highlighted?: boolean
+  diff?: FileTreeItemDiff
+  isFolder?: boolean
 }

 const props = defineProps<{
-  item: FileTreeItem;
-  level: number;
-  showArrow: boolean;
-  showIcon: boolean;
-}>();
+  item: FileTreeItem
+  level: number
+  showArrow: boolean
+  showIcon: boolean
+}>()

-const expandedState = inject('expandedState', ref(new Set<string>()));
-const itemKey = computed(() => `${props.item.title}-${props.level}`);
+const expandedState = inject('expandedState', ref(new Set<string>()))
+const itemKey = computed(() => `${props.item.title}-${props.level}`)

 const isExpanded = computed({
  get: () => expandedState.value.has(itemKey.value),
  set: (value: boolean) => {
    if (value) {
-      expandedState.value.add(itemKey.value);
+      expandedState.value.add(itemKey.value)
    } else {
-      expandedState.value.delete(itemKey.value);
+      expandedState.value.delete(itemKey.value)
    }
  }
-});
+})

 // 初始化时展开所有文件夹
 onMounted(() => {
  if (props.item.isFolder && props.item.children && props.item.children.length > 0) {
-    isExpanded.value = true;
+    isExpanded.value = true
  }
-});
+})

 function toggleFolder() {
  if (props.item.isFolder && props.item.children && props.item.children.length > 0) {
-    isExpanded.value = !isExpanded.value;
+    isExpanded.value = !isExpanded.value
  }
 }
-</script> 
+</script>
--- a/app/components/content/Playground.vue
+++ b/app/components/content/Playground.vue
@@ -7,7 +7,10 @@
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
      class="w-full h-full min-h-[600px] overflow-hidden rounded-md"
    />
-    <USkeleton v-else class="w-full min-h-[600px] rounded-md" />
+    <USkeleton
+      v-else
+      class="w-full min-h-[600px] rounded-md"
+    />
  </div>
 </template>

@@ -19,31 +22,31 @@ const {
  branch = 'main',
  dir = '',
  file,
-  title = 'Playground',
+  title = 'Playground'
 } = defineProps<{
-  provider: 'stackblitz' | 'codesandbox';
-  id?: string;
-  repo?: string;
-  branch?: string;
-  dir?: string;
-  file: string;
-  title?: string;
-}>();
+  provider: 'stackblitz' | 'codesandbox'
+  id?: string
+  repo?: string
+  branch?: string
+  dir?: string
+  file: string
+  title?: string
+}>()

-const url = ref('');
-const colorMode = useColorMode();
+const url = ref('')
+const colorMode = useColorMode()

 onMounted(() => {
  if (provider === 'stackblitz') {
    if (repo)
-      url.value = `https://stackblitz.com/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}&theme=${colorMode.value}`;
+      url.value = `https://stackblitz.com/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}&theme=${colorMode.value}`
    else if (id)
-      url.value = `https://stackblitz.com/edit/${id}?embed=1&file=${file}&theme=${colorMode.value}`;
+      url.value = `https://stackblitz.com/edit/${id}?embed=1&file=${file}&theme=${colorMode.value}`
  } else if (provider === 'codesandbox') {
    if (repo)
-      url.value = `https://codesandbox.io/p/sandbox/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}`;
+      url.value = `https://codesandbox.io/p/sandbox/github/${repo}/tree/${branch}/${dir}?embed=1&file=${file}`
    else if (id)
-      url.value = `https://codesandbox.io/embed/${id}?view=editor+%2B+preview&module=${file}`;
+      url.value = `https://codesandbox.io/embed/${id}?view=editor+%2B+preview&module=${file}`
  }
-});
+})
 </script>
--- a/app/components/content/ProseH1.vue
+++ b/app/components/content/ProseH1.vue
@@ -1,5 +1,8 @@
 <template>
-  <h1 :id class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+  <h1
+    :id
+    class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
+  >
    <NuxtLink
      v-if="generate"
      :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>

 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()

-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)))
 </script>
--- a/app/components/content/ProseH2.vue
+++ b/app/components/content/ProseH2.vue
@@ -1,5 +1,8 @@
 <template>
-  <h2 :id class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10">
+  <h2
+    :id
+    class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10"
+  >
    <NuxtLink
      v-if="id && generate"
      :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>

 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()

-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
 </script>
--- a/app/components/content/ProseH3.vue
+++ b/app/components/content/ProseH3.vue
@@ -1,5 +1,8 @@
 <template>
-  <h3 :id class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8">
+  <h3
+    :id
+    class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8"
+  >
    <NuxtLink
      v-if="id && generate"
      :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>

 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()

-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h3)))
 </script>
--- a/app/components/content/ProseH4.vue
+++ b/app/components/content/ProseH4.vue
@@ -1,5 +1,8 @@
 <template>
-  <h4 :id class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+  <h4
+    :id
+    class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+  >
    <NuxtLink
      v-if="id && generate"
      :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>

 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()

-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h4)))
 </script>
--- a/app/components/content/ProseH5.vue
+++ b/app/components/content/ProseH5.vue
@@ -1,5 +1,8 @@
 <template>
-  <h5 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+  <h5
+    :id
+    class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+  >
    <NuxtLink
      v-if="id && generate"
      :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>

 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()

-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h5)))
 </script>
--- a/app/components/content/ProseH6.vue
+++ b/app/components/content/ProseH6.vue
@@ -1,5 +1,8 @@
 <template>
-  <h6 :id class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+  <h6
+    :id
+    class="scroll-m-20 text-lg font-semibold tracking-tight [&:not(:first-child)]:mt-6"
+  >
    <NuxtLink
      v-if="id && generate"
      :to="`#${id}`"
@@ -11,8 +14,8 @@
 </template>

 <script setup lang="ts">
-const { id } = defineProps<{ id?: string }>();
+const { id } = defineProps<{ id?: string }>()

-const { headings } = useRuntimeConfig().public.mdc;
-const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)));
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h6)))
 </script>
--- a/app/components/content/ReadMore.vue
+++ b/app/components/content/ReadMore.vue
@@ -1,10 +1,20 @@
 <template>
  <UPage>
-    <NuxtLink v-if="to" :to="to">
-      <UAlert :icon :title :color="color" :variant="variant" :description="to"
-        class="mt-2 mb-3 text-black dark:text-white" :ui="{
+    <NuxtLink
+      v-if="to"
+      :to="to"
+    >
+      <UAlert
+        :icon
+        :title
+        :color="color"
+        :variant="variant"
+        :description="to"
+        class="mt-2 mb-3 text-black dark:text-white"
+        :ui="{
          icon: iconSize
-        }">
+        }"
+      >
        <slot />
      </UAlert>
    </NuxtLink>
@@ -12,20 +22,18 @@
 </template>

 <script setup lang="ts">
-
 const {
  variant = 'subtle',
  title,
  icon = 'lucide:bookmark',
-  color = 'primary',
+  color = 'primary'
 } = defineProps<{
-  color?: 'primary' | 'error' | 'secondary' | 'success' | 'info' | 'warning' | 'neutral';
-  description?: string;
-  title?: string;
-  to?: string;
-  icon?: string;
-  iconSize?: string;
-  variant?: 'subtle' | 'solid' | 'outline' | 'soft';
-}>();
-
+  color?: 'primary' | 'error' | 'secondary' | 'success' | 'info' | 'warning' | 'neutral'
+  description?: string
+  title?: string
+  to?: string
+  icon?: string
+  iconSize?: string
+  variant?: 'subtle' | 'solid' | 'outline' | 'soft'
+}>()
 </script>
--- a/app/components/content/SmartIcon.vue
+++ b/app/components/content/SmartIcon.vue
@@ -1,6 +1,10 @@
 <template>
  <!-- Iconify Icons -->
-  <Icon v-if="checkIcon(name)" :name :size />
+  <Icon
+    v-if="checkIcon(name)"
+    :name
+    :size
+  />
  <!-- Emojis -->
  <span
    v-else-if="/(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(name)"
@@ -16,17 +20,17 @@
 </template>

 <script setup lang="ts">
-import { stringToIcon, validateIconName } from '@iconify/utils';
+import { stringToIcon, validateIconName } from '@iconify/utils'

 const { size = 16 } = defineProps<{
-  name: string;
-  size?: number;
-}>();
+  name: string
+  size?: number
+}>()

 function checkIcon(name: string): boolean {
  if (name.includes('http'))
-    return false;
+    return false

-  return validateIconName(stringToIcon(name));
+  return validateIconName(stringToIcon(name))
 }
 </script>
--- a/app/components/content/Stack.vue
+++ b/app/components/content/Stack.vue
@@ -1,13 +1,12 @@
 <template>
  <UPageCard class="divide-y overflow-hidden rounded-xl [&:not(:first-child)]:mt-4  dark:divide-gray-700 shadow-sm ">
-      <div
-        v-for="(slot, i) in slotItems"
-        :key="i"
-        class=""
-      >
-        <component :is="slot" />
-      </div>
-
+    <div
+      v-for="(slot, i) in slotItems"
+      :key="i"
+      class=""
+    >
+      <component :is="slot" />
+    </div>
  </UPageCard>
 </template>