Develop

.github/workflows/pull-request.yaml

@@ -1,7 +1,7 @@
 name: 💜 Pull request
 on:
   pull_request:
-    branches: ['main', 'develop', 'develop/*']
+    branches: ["main", "develop", "develop/*"]
 
 jobs:
   linting:
@@ -13,11 +13,13 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version-file: ".nvmrc"
+          cache: "npm"
       - name: Install dependencies
         run: npm install
       - name: Run eslint
         run: npm run lint
+
   typechecking:
     name: 🕵 Typechecking
     needs: linting
@@ -28,11 +30,13 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version-file: ".nvmrc"
+          cache: "npm"
       - name: Install dependencies
         run: npm install
       - name: Run typechecking
         run: npm run typecheck
+
   testing:
     name: 🧪 Testing
     needs: linting
@@ -43,9 +47,9 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
+          node-version-file: ".nvmrc"
+          cache: "npm"
       - name: Install dependencies
         run: npm install
       - name: Run tests
         run: npm run test
-

app/assets/css/global.css

@@ -1,7 +1,7 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
-@custom-variant dark (&:is(.dark-mode *));
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --font-geist: "Geist", sans-serif;
@@ -119,7 +119,7 @@
   --chart-5: hsl(27 87% 67%);
 }
 
-.dark-mode {
+.dark {
   --background: hsl(240 10% 3.9%);
   --foreground: hsl(0 0% 98%);
   --muted: hsl(240 3.7% 15.9%);

app/components/atoms/Dragon.vue

@@ -33,7 +33,7 @@ function angle(cx: number, cy: number, ex: number, ey: number): number {
   <Motion
     ref="dragon"
     :initial="{ y: '50%', x: '25%', rotate: '-45deg' }"
-    :in-view="{
+    :while-in-view="{
       y: '0%',
       x: '0%',
       transition: {

app/components/atoms/Summary.vue

@@ -25,7 +25,7 @@ withDefaults(
         :key="item"
         as="li"
         :initial="{ transform: 'translateX(-50px)', opacity: 0 }"
-        :in-view="{ transform: 'translateX(0px)', opacity: 1 }"
+        :while-in-view="{ transform: 'translateX(0px)', opacity: 1 }"
         :transition="{ delay: index * 0.1 }"
         class="flex items-center gap-4"
       >

app/components/atoms/TitleText.vue

@@ -27,7 +27,7 @@ withDefaults(
     <Motion
       as="p"
       :initial="{ transform: 'translateX(-50px)', opacity: 0 }"
-      :in-view="{ transform: 'translateX(0px)', opacity: 1 }"
+      :while-in-view="{ transform: 'translateX(0px)', opacity: 1 }"
       :class="{ 'mx-auto': center }"
       class="max-w-prose text-muted-foreground"
     >
@@ -38,7 +38,7 @@ withDefaults(
       data-test-button
       as="div"
       :initial="{ transform: 'translateX(-50px)', opacity: 0 }"
-      :in-view="{ transform: 'translateX(0px)', opacity: 1 }"
+      :while-in-view="{ transform: 'translateX(0px)', opacity: 1 }"
       :transition="{ delay: 0.2 }"
       :class="[center ? 'justify-center' : 'justify-start']"
       class="flex mt-6"

app/components/atoms/YbugButton.vue

@@ -8,7 +8,7 @@ defineProps<{ type: 'menu' | 'footer' }>()
     :class="{
       'gap-2 w-full cursor-pointer': type === 'menu',
     }"
-    @click="($ybug as any)?.open('feedback')"
+    @click="$ybug?.open('feedback')"
   >
     <Icon
       name="tabler:bug"

app/components/form/Homebrew.vue

@@ -22,6 +22,19 @@ const props = withDefaults(
 
 const { t } = useI18n()
 
+type SupportedActionType = (typeof actionType)[number]
+type SupportedAction = Omit<Action, 'type'> & { type: SupportedActionType }
+
+function isSupportedActionType(type: Action['type']): type is SupportedActionType {
+  return (actionType as readonly Action['type'][]).includes(type)
+}
+
+function filterSupportedActions(actions?: Action[] | null): SupportedAction[] {
+  if (!actions) return []
+
+  return actions.filter((a): a is SupportedAction => isSupportedActionType(a.type))
+}
+
 const actionInputs = z.array(z.object({
   type: z.enum(actionType),
   name: z.string().min(3).max(30),
@@ -69,10 +82,10 @@ const form = useForm({
     ac: props.item?.ac || undefined,
     health: props.item?.health || undefined,
     link: props.item?.link || '',
-    actions: props.item?.actions || [],
-    reactions: props.item?.reactions || [],
-    legendary_actions: props.item?.legendary_actions || [],
-    special_abilities: props.item?.special_abilities || [],
+    actions: filterSupportedActions(props.item?.actions),
+    reactions: filterSupportedActions(props.item?.reactions),
+    legendary_actions: filterSupportedActions(props.item?.legendary_actions),
+    special_abilities: filterSupportedActions(props.item?.special_abilities),
   },
 })
 

app/components/ui/blur-reveal/BlurReveal.vue

@@ -9,11 +9,11 @@
       ref="childElements"
       as="div"
       :initial="getInitial()"
-      :in-view="getAnimate()"
+      :while-in-view="getAnimate()"
       :transition="{
         duration: props.duration,
         ease: 'easeInOut',
-        delay: props.delay * index,
+        delay: props.delay * Number(index),
       }"
     >
       <component :is="child" />

app/pages/index.vue

@@ -8,7 +8,6 @@ const dragon = ref<InstanceType<typeof Dragon>>()
 
 <template>
   <NuxtLayout no-padding>
-    <AnimationBlob />
     <Hero />
     <div class="flex flex-col pb-20 relative overflow-hidden">
       <div

app/types/declarations.d.ts

@@ -3,8 +3,23 @@ import type {
   ComponentCustomProperties as _ComponentCustomProperties,
 } from 'vue'
 
+interface YbugInstance {
+  boot(): void
+  show(type?: string): void
+  hide(type?: string): void
+  open(type?: string): void
+  destroy(): void
+  close(): void
+  on(event: string, callback: (...args: any[]) => void): void
+  log(key: string, value: any): void
+  setUser(user: Record<string, any>): void
+  init(settings: Record<string, any>): void
+}
+
 declare module '@vue/runtime-core' {
   // Empty interfaces are necessary for TypeScript to recognize auto-imported functions in Vue components
-  interface ComponentCustomProperties extends _ComponentCustomProperties {}
+  interface ComponentCustomProperties extends _ComponentCustomProperties {
+    $ybug: YbugInstance
+  }
   interface ComponentCustomOptions extends _ComponentCustomOptions {}
 }

eslint.config.mjs

@@ -6,6 +6,7 @@ export default withNuxt(
   {
     files: ['**/*.js', '**/*.ts', '**/*.vue'],
     rules: {
+      '@tanstack/query/exhaustive-deps': 'off',
       '@stylistic/space-before-function-paren': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
       '@typescript-eslint/no-explicit-any': 'off',

nuxt.config.ts

@@ -98,9 +98,30 @@ export default defineNuxtConfig({
 
   vite: {
     plugins: [
-      // @ts-expect-error - Temporary fix for tailwindcss plugin types mismatch
       tailwindcss(),
     ],
+    optimizeDeps: {
+      include: [
+        '@vue/devtools-core',
+        '@vue/devtools-kit',
+        'vue-dompurify-html',
+        'isomorphic-dompurify',
+        'markdown-it',
+        'ybug-vue',
+        'vue-tippy',
+        '@unhead/schema-org/vue',
+        '@tanstack/vue-query',
+        'class-variance-authority',
+        'c15t',
+        '@c15t/scripts/google-tag',
+        'reka-ui',
+        'clsx',
+        'tailwind-merge',
+        '@vee-validate/zod',
+        'vee-validate',
+        'zod',
+      ],
+    },
   },
 
   eslint: { config: { stylistic: true } },