diff --git a/AGENTS.md b/AGENTS.md index a5a5a9c3..b9dba487 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -3,7 +3,7 @@ ## Commands - **Dev server**: `pnpm dev` (requires Ruby for markdown caching) -- **Build**: `pnpm build` (runs `cache_markdown` + Astro build) +- **Build**: `pnpm build` - **Test**: `pnpm test` (runs Vitest in watch mode) - **Run single test**: `pnpm vitest run ` or `pnpm vitest ` (watch mode) - **All tests (CI)**: `pnpm ci` (runs all linters, tests, and build) @@ -15,8 +15,11 @@ - **Package manager**: pnpm (v8.15.4+) - **Framework**: Astro with TypeScript (strict mode), Tailwind CSS - **Imports**: Use `~/` alias for `src/` directory; Prettier organizes imports automatically -- **Formatting**: No semicolons, single quotes, no trailing commas (see `.prettierrc`) - **Types**: Use Zod schemas for runtime validation (see `SheetFrontmatter.ts`); TypeScript strict mode enabled - **Naming**: camelCase for variables/functions, PascalCase for components/types - **Error handling**: Distinguish operational (expected) vs unexpected errors; return error objects for operational errors - **Testing**: Vitest with globals enabled; use `it.each()` for repeated test cases; prefer object constants over helper functions + +## Markdown files + +Consult @_docs/writing-guidelines.md for formatting *.md files. diff --git a/_docs/writing-guidelines.md b/_docs/writing-guidelines.md index a53d4100..213756d7 100644 --- a/_docs/writing-guidelines.md +++ b/_docs/writing-guidelines.md @@ -43,21 +43,52 @@ H3 content length: 4. **Quick reference**: Dense information for experienced developers 5. **Learning path**: Logical progression for newcomers -## Examples +## H3 writing guidelines -- Place documentation links in the end. -- Prefer to write explanations *after* a pre/table. +- Place documentation links in the end. (see next for example) +- Prefer to write explanations *after* a pre/table. Example: -````markdonw -### Setting default props + ````markdown + ### Setting default props + + ```jsx + Hello.defaultProps = { + color: 'blue' + } + ``` + + Default properties are used if no properties are given. + + See: [defaultProps](https://reactjs.org/docs/react-component.html#defaultprops) + ```` -```jsx -Hello.defaultProps = { - color: 'blue' -} -``` +- When an example has multiple files, use H4 as filename markers. Example: -Default properties are used if no properties are given. - -See: [defaultProps](https://reactjs.org/docs/react-component.html#defaultprops) -```` + ````markdown + ### via Data Attributes + + #### index.html.erb + + ```html + Increment <%= @count.to_i %> + ``` + + #### counter_reflex.rb + + ```ruby + class CounterReflex < StimulusReflex::Reflex + def increment + @count = element.dataset[:count].to_i + element.dataset[:step].to_i + end + end + ``` + + Trigger reflexes without writing any javascript with the `data-reflex` attribute. + + ````