diff --git a/.forgejo/workflows/deploy.yml b/.forgejo/workflows/deploy.yml new file mode 100644 index 0000000..cbbede1 --- /dev/null +++ b/.forgejo/workflows/deploy.yml @@ -0,0 +1,27 @@ +name: Deploy + +on: + push: + branches: + - main + +jobs: + deploy: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v6 + - uses: pnpm/setup@v2 + with: + version: 11 + runtime: node@24 + cache: true + - name: Install deps + run: pnpm install --frozen-lockfile + - name: Build + run: pnpm build + - name: Deploy to Netlify + run: pnx netlify-cli deploy --prod --dir=build --auth $NETLIFY_AUTH_TOKEN --site $NETLIFY_SITE_ID + env: + NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }} + NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} diff --git a/.github/workflows/pr.yml b/.forgejo/workflows/pr.yml similarity index 86% rename from .github/workflows/pr.yml rename to .forgejo/workflows/pr.yml index 9e00633..cf6cb20 100644 --- a/.github/workflows/pr.yml +++ b/.forgejo/workflows/pr.yml @@ -19,11 +19,13 @@ jobs: steps: - name: Checkout uses: actions/checkout@v4 - - uses: pnpm/setup@v1 + - uses: pnpm/setup@v2 with: version: 11 runtime: node@24 cache: true + - name: Install deps + run: pnpm install --frozen-lockfile - name: Lint run: pnpm lint - name: Svelte Check diff --git a/.opencode/skills/daisyui/SKILL.md b/.opencode/skills/daisyui/SKILL.md index 448a272..56e68b5 100644 --- a/.opencode/skills/daisyui/SKILL.md +++ b/.opencode/skills/daisyui/SKILL.md @@ -7,6 +7,7 @@ metadata: --- # daisyUI 5 + daisyUI 5 is a CSS library for Tailwind CSS 4. daisyUI 5 provides class names for common UI components, semantic color names and themes. @@ -16,17 +17,17 @@ daisyUI 5 provides class names for common UI components, semantic color names an - Trigger this skill for any Tailwind CSS UI work - Trigger this skill when the user mentions any of these terms or similar context: daisyUI, component, UI, Tailwind, layout, template, theme, color, design -- Trigger this skill even if the user does not explicitly ask for it +- Trigger this skill even if the user does not explicitly ask for it ## Mandatory reference -| Task | Guide | Note | -|------|-------|------| -Installing daisyUI | [./install/SKILL.md](./install/SKILL.md) | Use only if daisyUI is not already installed in the project. -Using daisyUI class names | [./usage/SKILL.md](./usage/SKILL.md) | MANDATORY. Read this before using any daisyUI class names in the code. -Configuring daisyUI | [./config/SKILL.md](./config/SKILL.md) | Use this if you need to configure daisyUI themes, prefix, logs, or other options. Not required for basic usage but important for advanced customization. -daisyUI colors and themes | [./colors/SKILL.md](./colors/SKILL.md) | MANDATORY. Read this to understand daisyUI color usage rules and how to use daisyUI colors in the code. -daisyUI components | [./components/](./components/) | MANDATORY. Read the relevant component docs when using daisyUI components in the code. Always read multiple candidate component docs before deciding which one to use. +| Task | Guide | Note | +| ------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Installing daisyUI | [./install/SKILL.md](./install/SKILL.md) | Use only if daisyUI is not already installed in the project. | +| Using daisyUI class names | [./usage/SKILL.md](./usage/SKILL.md) | MANDATORY. Read this before using any daisyUI class names in the code. | +| Configuring daisyUI | [./config/SKILL.md](./config/SKILL.md) | Use this if you need to configure daisyUI themes, prefix, logs, or other options. Not required for basic usage but important for advanced customization. | +| daisyUI colors and themes | [./colors/SKILL.md](./colors/SKILL.md) | MANDATORY. Read this to understand daisyUI color usage rules and how to use daisyUI colors in the code. | +| daisyUI components | [./components/](./components/) | MANDATORY. Read the relevant component docs when using daisyUI components in the code. Always read multiple candidate component docs before deciding which one to use. | ## List of components diff --git a/.opencode/skills/daisyui/colors/SKILL.md b/.opencode/skills/daisyui/colors/SKILL.md index e087be3..86630da 100644 --- a/.opencode/skills/daisyui/colors/SKILL.md +++ b/.opencode/skills/daisyui/colors/SKILL.md @@ -6,6 +6,7 @@ description: MANDATORY color usage rules for daisyUI 5 ## daisyUI 5 colors ### daisyUI color names + - `primary`: Primary brand color, The main color of your brand - `primary-content`: Foreground content color to use on primary color - `secondary`: Secondary brand color, The optional, secondary color of your brand @@ -28,6 +29,7 @@ description: MANDATORY color usage rules for daisyUI 5 - `error-content`: Foreground content color to use on error color ### daisyUI color rules + 1. daisyUI adds semantic color names to Tailwind CSS colors 2. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. For example, `bg-primary` will use the primary color for the background 3. daisyUI color names include variables as value so they can change based on the theme @@ -45,8 +47,11 @@ description: MANDATORY color usage rules for daisyUI 5 The default configuration enables `light` and `dark`. Choose specific themes, every theme, or no built-in themes in the daisyUI plugin: ```css -@plugin "daisyui" { - themes: light --default, dark --prefersdark, cupcake; +@plugin 'daisyui' { + themes: + light --default, + dark --prefersdark, + cupcake; } ``` @@ -56,59 +61,63 @@ The default configuration enables `light` and `dark`. Choose specific themes, ev ```html -
-
Nested theme
-
+
+
Nested theme
+
``` ### daisyUI custom theme with custom colors + A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this: + ```css -@import "tailwindcss"; -@plugin "daisyui"; -@plugin "daisyui/theme" { - name: "mytheme"; - default: true; /* set as default */ - prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */ - color-scheme: light; /* color of browser-provided UI */ +@import 'tailwindcss'; +@plugin 'daisyui'; +@plugin 'daisyui/theme' { + name: 'mytheme'; + default: true; /* set as default */ + prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */ + color-scheme: light; /* color of browser-provided UI */ - --color-base-100: oklch(98% 0.02 240); - --color-base-200: oklch(95% 0.03 240); - --color-base-300: oklch(92% 0.04 240); - --color-base-content: oklch(20% 0.05 240); - --color-primary: oklch(55% 0.3 240); - --color-primary-content: oklch(98% 0.01 240); - --color-secondary: oklch(70% 0.25 200); - --color-secondary-content: oklch(98% 0.01 200); - --color-accent: oklch(65% 0.25 160); - --color-accent-content: oklch(98% 0.01 160); - --color-neutral: oklch(50% 0.05 240); - --color-neutral-content: oklch(98% 0.01 240); - --color-info: oklch(70% 0.2 220); - --color-info-content: oklch(98% 0.01 220); - --color-success: oklch(65% 0.25 140); - --color-success-content: oklch(98% 0.01 140); - --color-warning: oklch(80% 0.25 80); - --color-warning-content: oklch(20% 0.05 80); - --color-error: oklch(65% 0.3 30); - --color-error-content: oklch(98% 0.01 30); + --color-base-100: oklch(98% 0.02 240); + --color-base-200: oklch(95% 0.03 240); + --color-base-300: oklch(92% 0.04 240); + --color-base-content: oklch(20% 0.05 240); + --color-primary: oklch(55% 0.3 240); + --color-primary-content: oklch(98% 0.01 240); + --color-secondary: oklch(70% 0.25 200); + --color-secondary-content: oklch(98% 0.01 200); + --color-accent: oklch(65% 0.25 160); + --color-accent-content: oklch(98% 0.01 160); + --color-neutral: oklch(50% 0.05 240); + --color-neutral-content: oklch(98% 0.01 240); + --color-info: oklch(70% 0.2 220); + --color-info-content: oklch(98% 0.01 220); + --color-success: oklch(65% 0.25 140); + --color-success-content: oklch(98% 0.01 140); + --color-warning: oklch(80% 0.25 80); + --color-warning-content: oklch(20% 0.05 80); + --color-error: oklch(65% 0.3 30); + --color-error-content: oklch(98% 0.01 30); - --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */ - --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */ - --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */ - /* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */ + --radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */ + --radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */ + --radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */ + /* preferred values for --radius-* : 0rem, 0.25rem, 0.5rem, 1rem, 2rem */ - --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. If so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */ - --size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. If so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */ + --size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge). Value must be 0.25rem unless we intentionally want bigger selectors. If so it can be 0.28125 or 0.3125. If we intentionally want smaller selectors, it can be 0.21875 or 0.1875 */ + --size-field: 0.25rem; /* base size of fields (button, input, select, tab). Value must be 0.25rem unless we intentionally want bigger fields. If so it can be 0.28125 or 0.3125. If we intentionally want smaller fields, it can be 0.21875 or 0.1875 */ - --border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. If so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */ + --border: 1px; /* border size. Value must be 1px unless we intentionally want thicker borders. If so it can be 1.5px or 2px. If we intentionally want thinner borders, it can be 0.5px */ - --depth: 1; /* only 0 or 1 - Adds a shadow and subtle 3D depth effect to components */ - --noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */ + --depth: 1; /* only 0 or 1 - Adds a shadow and subtle 3D depth effect to components */ + --noise: 0; /* only 0 or 1 - Adds a subtle noise (grain) effect to components */ } ``` + #### Rules + - All CSS variables above are required - Colors can be OKLCH or hex or other formats - If you're generating a custom theme, do not include the comments from the example above. Just provide the code. @@ -120,22 +129,22 @@ People can use https://daisyui.com/theme-generator/ visual tool to create their Use the built-in theme's name and override only the values that need to change. Other values are inherited: ```css -@plugin "daisyui/theme" { - name: "light"; - default: true; - --color-primary: blue; - --color-secondary: teal; +@plugin 'daisyui/theme' { + name: 'light'; + default: true; + --color-primary: blue; + --color-secondary: teal; } ``` For a custom CDN theme, define the same variables under a selector that matches the chosen `data-theme` and checked theme controller: ```css -:root:has(input.theme-controller[value=mytheme]:checked), -[data-theme="mytheme"] { - color-scheme: light; - --color-primary: oklch(55% 0.3 240); - /* define the remaining custom-theme variables */ +:root:has(input.theme-controller[value='mytheme']:checked), +[data-theme='mytheme'] { + color-scheme: light; + --color-primary: oklch(55% 0.3 240); + /* define the remaining custom-theme variables */ } ``` diff --git a/.opencode/skills/daisyui/components/accordion.md b/.opencode/skills/daisyui/components/accordion.md index bbc0ab9..277ddc7 100644 --- a/.opencode/skills/daisyui/components/accordion.md +++ b/.opencode/skills/daisyui/components/accordion.md @@ -1,18 +1,23 @@ ### accordion + Accordion is used for showing and hiding content but only one item can stay open at a time [accordion docs](https://daisyui.com/components/accordion/) #### Class names + - component: `collapse` - part: `collapse-title`, `collapse-content` - modifier: `collapse-arrow`, `collapse-plus`, `collapse-open`, `collapse-close` #### Syntax + ```html -
{CONTENT}
+
{CONTENT}
``` + where content is: + ```html
{title}
@@ -20,6 +25,7 @@ where content is: ``` #### Rules + - {MODIFIER} is optional and can have one of the modifier class names - Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time - If you have more than one set of accordion items on a page, use different names for the radio inputs on each set diff --git a/.opencode/skills/daisyui/components/alert.md b/.opencode/skills/daisyui/components/alert.md index 624a810..81a151c 100644 --- a/.opencode/skills/daisyui/components/alert.md +++ b/.opencode/skills/daisyui/components/alert.md @@ -1,19 +1,23 @@ ### alert + Alert informs users about important events [alert docs](https://daisyui.com/components/alert/) #### Class names + - component: `alert` - style: `alert-outline`, `alert-dash`, `alert-soft` - color: `alert-info`, `alert-success`, `alert-warning`, `alert-error` - direction: `alert-vertical`, `alert-horizontal` #### Syntax + ```html ``` #### Rules + - {MODIFIER} is optional and can have one of each style/color/direction class names - Add `sm:alert-horizontal` for responsive layouts diff --git a/.opencode/skills/daisyui/components/aura.md b/.opencode/skills/daisyui/components/aura.md index 4349a57..261739c 100644 --- a/.opencode/skills/daisyui/components/aura.md +++ b/.opencode/skills/daisyui/components/aura.md @@ -1,18 +1,22 @@ ### aura + Aura is a border light effect that can wrap around any component. It is a great way to add a cool, eye-catching visual effect to your components. Aura is useful for the most important button, card, or div that you want to highlight. [aura docs](https://daisyui.com/components/aura/) #### Class names + - component: `aura` - style: `aura-dual`, `aura-rainbow`, `aura-holo`, `aura-gold`, `aura-silver`, `aura-glow` - size: `aura-xs`, `aura-sm`, `aura-md`, `aura-lg`, `aura-xl` #### Syntax + ```html
{CONTENT}
``` #### Rules + - {MODIFIER} is optional and can have one of each style/size class names - you can set custom colors using `text-*` color classes. For example, `text-primary` will use the primary color for the aura - you can set custom background color using `bg-*` color classes. For example, `bg-secondary` will use the secondary color for the background of the aura diff --git a/.opencode/skills/daisyui/components/avatar.md b/.opencode/skills/daisyui/components/avatar.md index f9e282a..07a1737 100644 --- a/.opencode/skills/daisyui/components/avatar.md +++ b/.opencode/skills/daisyui/components/avatar.md @@ -1,22 +1,26 @@ ### avatar + Avatars are used to show a thumbnail [avatar docs](https://daisyui.com/components/avatar/) #### Class names + - component: `avatar`, `avatar-group` - modifier: `avatar-online`, `avatar-offline`, `avatar-placeholder` #### Syntax + ```html
-
- -
+
+ +
``` #### Rules + - {MODIFIER} is optional and can have one of the modifier class names - Use `avatar-group` for containing multiple avatars - You can set custom sizes using `w-*` and `h-*` diff --git a/.opencode/skills/daisyui/components/badge.md b/.opencode/skills/daisyui/components/badge.md index b6e76ba..0675dc4 100644 --- a/.opencode/skills/daisyui/components/badge.md +++ b/.opencode/skills/daisyui/components/badge.md @@ -1,20 +1,24 @@ ### badge + Badges are used to inform the user of the status of specific data [badge docs](https://daisyui.com/components/badge/) #### Class names + - component: `badge` - style: `badge-outline`, `badge-dash`, `badge-soft`, `badge-ghost` - color: `badge-neutral`, `badge-primary`, `badge-secondary`, `badge-accent`, `badge-info`, `badge-success`, `badge-warning`, `badge-error` - size: `badge-xs`, `badge-sm`, `badge-md`, `badge-lg`, `badge-xl` #### Syntax + ```html Badge ``` #### Rules + - {MODIFIER} is optional and can have one of each style/color/size class names - Can be used inside text or buttons - To create an empty badge, just remove the text between the span tags diff --git a/.opencode/skills/daisyui/components/breadcrumbs.md b/.opencode/skills/daisyui/components/breadcrumbs.md index 80b326a..0294ba8 100644 --- a/.opencode/skills/daisyui/components/breadcrumbs.md +++ b/.opencode/skills/daisyui/components/breadcrumbs.md @@ -1,19 +1,25 @@ ### breadcrumbs + Breadcrumbs helps users to navigate [breadcrumbs docs](https://daisyui.com/components/breadcrumbs/) #### Class names + - component: `breadcrumbs` #### Syntax + ```html
- +
``` #### Rules + - breadcrumbs only has one main class name - Can contain icons inside the links - If you set `max-width` or the list gets larger than the container it will scroll diff --git a/.opencode/skills/daisyui/components/button.md b/.opencode/skills/daisyui/components/button.md index 6ace81f..ecf86a5 100644 --- a/.opencode/skills/daisyui/components/button.md +++ b/.opencode/skills/daisyui/components/button.md @@ -1,9 +1,11 @@ ### button + Buttons allow the user to take actions [button docs](https://daisyui.com/components/button/) #### Class names + - component: `btn` - color: `btn-neutral`, `btn-primary`, `btn-secondary`, `btn-accent`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` - style: `btn-outline`, `btn-dash`, `btn-soft`, `btn-ghost`, `btn-link` @@ -12,10 +14,13 @@ Buttons allow the user to take actions - modifier: `btn-wide`, `btn-block`, `btn-square`, `btn-circle` #### Syntax + ```html ``` + #### Rules + - {MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names - btn can be used on any html tags such as ` ``` #### Rules + - {MODIFIER} is optional and can have one of the size class names - To make a button active, add `dock-active` class to the button - add `` is required for responsiveness of the dock in iOS diff --git a/.opencode/skills/daisyui/components/drawer.md b/.opencode/skills/daisyui/components/drawer.md index 00ceef1..a2b82cb 100644 --- a/.opencode/skills/daisyui/components/drawer.md +++ b/.opencode/skills/daisyui/components/drawer.md @@ -1,9 +1,11 @@ ### drawer + Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page [drawer docs](https://daisyui.com/components/drawer/) #### Class names + - component: `drawer` - part: `drawer-toggle`, `drawer-content`, `drawer-side`, `drawer-overlay`, `drawer-button` - placement: `drawer-end` @@ -11,85 +13,97 @@ Drawer is a grid layout that can show/hide a sidebar on the left or right side o - variant: `is-drawer-open:`, `is-drawer-close:` #### Syntax + ```html
- -
{CONTENT}
-
{SIDEBAR}
+ +
{CONTENT}
+
{SIDEBAR}
``` + where {CONTENT} can be navbar, site content, footer, etc and {SIDEBAR} can be a menu like: + ```html -