docs: add playground

eslint.config.mjs

@@ -11,7 +11,7 @@ const gitignorePath = fileURLToPath(new URL(".gitignore", import.meta.url));
 
 export default defineConfig(
   includeIgnoreFile(gitignorePath, "Imported .gitignore patterns"),
-  globalIgnores(["scripts/", "eslint.config.mjs"]),
+  globalIgnores(["scripts/", "eslint.config.mjs", "playground/"]),
   eslint.configs.recommended,
   tseslint.configs.recommendedTypeChecked,
   eslintConfigPrettier,

playground/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

playground/.nuxtrc

@@ -0,0 +1 @@
+setups.@nuxt/test-utils="3.23.0"

playground/.prettierignore

@@ -0,0 +1,7 @@
+# Ignore artifacts
+.nuxt
+.output
+node_modules
+playwright-report
+pnpm-lock.yaml
+pnpm-workspace.yaml

playground/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

playground/.prototools

@@ -0,0 +1,2 @@
+node = "22.17.1"
+pnpm = "10.27.0"

playground/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

playground/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

playground/app/app.config.ts

@@ -0,0 +1,13 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: "royal",
+      secondary: "blue",
+      success: "emerald",
+      info: "sky",
+      warning: "amber",
+      error: "rose",
+      neutral: "gray",
+    },
+  },
+});

playground/app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <UApp :toaster="{ position: 'top-right' }">
+    <NuxtPage />
+  </UApp>
+</template>

playground/app/assets/css/main.css

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme static {
+  --color-royal-50: #7997fa;
+  --color-royal-100: #6282ea;
+  --color-royal-200: #5777df;
+  --color-royal-300: #4061d0;
+  --color-royal-400: #3858c1;
+  --color-royal-500: #3451b2;
+  --color-royal-600: #2c469c;
+  --color-royal-700: #253c87;
+  --color-royal-800: #1e3270;
+  --color-royal-900: #18285a;
+  --color-royal-950: #111c40;
+}

playground/app/components/recipe/CookwareItem.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { Cookware } from "cooklang-parser";
+
+defineProps<{
+  cookware: Cookware;
+}>();
+</script>
+
+<template>
+  <li class="cookware-item">
+    <span v-if="cookware.quantity" class="font-bold">
+      <RecipeSingleQuantity :quantity="cookware.quantity" />
+    </span>
+    {{ " " }}
+    <span class="cookware-name">{{ cookware.name }}</span>
+  </li>
+</template>