feat(match): new match template

.changeset/new-coins-speak.md

@@ -0,0 +1,5 @@
+---
+'anki-templates': minor
+---
+
+feat(match): new match template

.github/workflows/playwright.yml

@@ -4,8 +4,11 @@ on: [push, pull_request]
 
 jobs:
   test:
-    timeout-minutes: 60
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        entry: ['mcq', 'tf', 'basic', 'mcq_10', 'match']
     steps:
       - uses: actions/checkout@v4
       - name: Install pnpm
@@ -16,7 +19,7 @@ jobs:
           node-version: '23.6'
           cache: 'pnpm'
       - run: pnpm install
-      - run: pnpm run build --e2e
+      - run: pnpm run build --e2e --entry=${{matrix.entry}}
 
       - name: Install Playwright Browsers
         run: pnpm exec playwright install --with-deps
@@ -25,6 +28,6 @@ jobs:
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
-          name: playwright-report
+          name: playwright-report-${{matrix.entry}}
           path: playwright-report/
           retention-days: 30

build/config.ts

@@ -1,4 +1,4 @@
-import type { entries } from './entries';
+import type { entries } from './entries.ts';
 
 export interface BuildConfig {
   type_id: number;
@@ -19,7 +19,13 @@ export const items: ConfigItem[] = [
   {
     key: 'entry',
     len: 5,
-    variants: ['mcq', 'tf', 'basic', 'mcq_10'],
+    variants: [
+      'mcq',
+      'tf',
+      'basic',
+      'mcq_10',
+      'match',
+    ] as const satisfies (keyof typeof entries)[],
   },
   {
     key: 'locale',

build/entries.ts

@@ -140,6 +140,34 @@ const entries = {
       },
     ],
   }),
+  match: defineEntry({
+    fields: ['question', 'items', 'note', 'Tags'],
+    notes: [
+      {
+        config: {
+          field: 'native',
+        },
+        fields: {
+          question:
+            'This is the stem of the question. It supports various content formats in Anki, including bold, formulas, etc.',
+          items:
+            'Mammals::Tiger,,Elephant<br>Birds::Penguin,,Parrot<br>Reptiles::Cobra,,Crocodile',
+          note: 'note',
+        },
+      },
+      {
+        config: {
+          field: 'markdown',
+        },
+        fields: {
+          question: mdQuestion,
+          items:
+            'Mammals::Tiger,,Elephant<br>Birds::Penguin,,Parrot<br>Reptiles::Cobra,,Crocodile',
+          note: 'note',
+        },
+      },
+    ],
+  }),
 };
 
 export { entries };

package.json

@@ -77,6 +77,7 @@
     "@bytemd/plugin-math": "^1.21.0",
     "@bytemd/plugin-medium-zoom": "^1.21.0",
     "@bytemd/plugin-mermaid": "^1.21.0",
+    "@dnd-kit/core": "^6.3.1",
     "@formkit/auto-animate": "^0.8.2",
     "ahooks": "^3.8.1",
     "anki-storage": "^1.0.2",

playwright.config.ts

@@ -41,10 +41,6 @@ export default defineConfig<TestOptions>({
         name: `${build.config.name}:chromium`,
         use: { ...devices['Desktop Chrome'], build },
       },
-      {
-        name: `${build.config.name}:firefox`,
-        use: { ...devices['Desktop Firefox'], build },
-      },
       {
         name: `${build.config.name}:webkit`,
         use: { ...devices['Desktop Safari'], build },

src/components/tag.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import { FC, PropsWithChildren } from 'react';
+
+type Color = 'default' | 'yellow' | 'red' | 'green';
+
+const COLORS: Record<Color, string> = {
+  default: 'bg-indigo-100',
+  yellow: 'bg-yellow-100',
+  red: 'bg-red-100',
+  green: 'bg-green-100',
+};
+
+export const Tag: FC<
+  PropsWithChildren & { color?: Color; className?: string; size?: 'sm' | 'md' }
+> = ({ color = 'default', children, className, size = 'md' }) => {
+  return (
+    <div
+      className={clsx(
+        'rounded-md',
+        COLORS[color],
+        { sm: 'p-1 text-sm', md: 'p-2' }[size],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};

src/entries/basic.tsx

@@ -1,4 +1,4 @@
-import { CardShell } from '../components/card-shell';
+import { CardShell } from '@/components/card-shell';
 import { FIELD_ID } from '@/utils/const';
 import { isFieldEmpty } from '@/utils/field';
 import * as t from 'at/i18n';