Merge branch 'main' into feat/changelog-1

Author: WilcoSp

.github/workflows/ci.yml

@@ -154,6 +154,7 @@ jobs:
         run: pnpm build:test
         env:
           VALIDATE_HTML: true
+          NODE_OPTIONS: --max-old-space-size=6144
 
       - name: 🖥️ Test project (browser)
         run: pnpm test:browser:prebuilt
@@ -182,6 +183,8 @@ jobs:
 
       - name: 🏗️ Build project
         run: pnpm build:test
+        env:
+          NODE_OPTIONS: --max-old-space-size=6144
 
       - name: ♿ Accessibility audit (Lighthouse - ${{ matrix.mode }} mode)
         run: pnpm test:a11y:prebuilt

CONTRIBUTING.md

@@ -179,10 +179,11 @@ shared/                 # Shared between app and server
 └── types/              # TypeScript type definitions
 
 cli/                    # Local connector CLI (separate workspace)
+
 test/                   # Vitest tests
 ├── unit/               # Unit tests (*.spec.ts)
-└── nuxt/               # Nuxt component tests
-tests/                  # Playwright E2E tests
+├── nuxt/               # Nuxt component tests
+└── e2e/                # Playwright E2E tests
 ```
 
 > [!TIP]

app/app.vue

@@ -118,6 +118,10 @@ if (import.meta.client) {
     useEventListener(document, 'click', handleModalLightDismiss)
   }
 }
+
+// title and description will be inferred
+// this will be overridden by upstream pages that use different templates
+defineOgImage('Page.takumi')
 </script>
 
 <template>

app/components/CollapsibleSection.vue

@@ -4,6 +4,7 @@ import { LinkBase } from '#components'
 
 interface Props {
   title: string
+  subtitle?: string
   isLoading?: boolean
   headingLevel?: `h${number}`
   id: string
@@ -81,7 +82,8 @@ useHead({
     <div class="flex items-center justify-between mb-3 px-1">
       <component
         :is="headingLevel"
-        class="group text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-2"
+        class="group text-xs text-fg-subtle uppercase tracking-wider flex gap-2"
+        :class="subtitle ? 'items-start' : 'items-center'"
       >
         <button
           :id="buttonId"
@@ -101,9 +103,14 @@ useHead({
           />
         </button>
 
-        <LinkBase :to="`#${id}`">
-          {{ title }}
-        </LinkBase>
+        <span>
+          <LinkBase :to="`#${id}`">
+            {{ title }}
+          </LinkBase>
+          <span v-if="subtitle" class="block text-2xs normal-case tracking-normal">{{
+            subtitle
+          }}</span>
+        </span>
       </component>
 
       <!-- Actions slot for buttons or other elements -->

app/components/Modal.client.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
   modalTitle: string
+  modalSubtitle?: string
 }>()
 
 const dialogRef = useTemplateRef('dialogRef')
@@ -14,6 +15,12 @@ const modalTitleId = computed(() => {
   return id ? `${id}-title` : undefined
 })
 
+const modalSubtitleId = computed(() => {
+  if (!props.modalSubtitle) return undefined
+  const id = getCurrentInstance()?.attrs.id
+  return id ? `${id}-subtitle` : undefined
+})
+
 function handleModalClose() {
   dialogRef.value?.close()
 }
@@ -45,14 +52,20 @@ defineExpose({
       closedby="any"
       class="w-[calc(100%-2rem)] bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-fg focus-visible:outline focus-visible:outline-accent/70"
       :aria-labelledby="modalTitleId"
+      :aria-describedby="modalSubtitleId"
       v-bind="$attrs"
       @transitionend="onDialogTransitionEnd"
     >
       <!-- Modal top header section -->
       <div class="flex items-center justify-between mb-6">
-        <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
-          {{ modalTitle }}
-        </h2>
+        <div>
+          <h2 :id="modalTitleId" class="font-mono text-lg font-medium">
+            {{ modalTitle }}
+          </h2>
+          <p v-if="modalSubtitle" :id="modalSubtitleId" class="text-xs text-fg-subtle">
+            {{ modalSubtitle }}
+          </p>
+        </div>
         <ButtonBase
           type="button"
           :aria-label="$t('common.close')"