From c2da399a32f800aae54f038a6df6d61d3193a83c Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Wed, 4 Jun 2025 22:48:35 +0200 Subject: [PATCH 1/5] feat: update post-start hooks for npm commands and add mailpit service --- .ddev/config.yaml | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/.ddev/config.yaml b/.ddev/config.yaml index 0d722f1..fd8f86b 100644 --- a/.ddev/config.yaml +++ b/.ddev/config.yaml @@ -16,7 +16,10 @@ web_environment: corepack_enable: false nodejs_version: "18" +additional_services: + - mailpit hooks: post-start: - - exec: "npm install" - - exec: "npm run dev:css" + - exec-host: | + ddev npm install + ddev npm run dev:css -- --watch & From 5effa2d89c0e1f86440e9875f3ce16c2a1981d44 Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Wed, 4 Jun 2025 23:38:25 +0200 Subject: [PATCH 2/5] feat: update ToDo list with new tasks for social media icons and footer links --- .ddev/docker-compose.override.yaml | 9 --------- ToDo.md | 2 ++ 2 files changed, 2 insertions(+), 9 deletions(-) delete mode 100644 .ddev/docker-compose.override.yaml diff --git a/.ddev/docker-compose.override.yaml b/.ddev/docker-compose.override.yaml deleted file mode 100644 index 6852a6c..0000000 --- a/.ddev/docker-compose.override.yaml +++ /dev/null @@ -1,9 +0,0 @@ -version: '3.6' -services: - web: - # Install needed dependencies and run webpack in watch mode - command: /bin/sh -c "npm install && npm run build:css -- --watch" - volumes: - - ../packages/base:/var/www/html/packages/base - environment: - - NODE_ENV=development diff --git a/ToDo.md b/ToDo.md index 3255a91..9c28fe6 100644 --- a/ToDo.md +++ b/ToDo.md @@ -2,3 +2,5 @@ [x] unordered list design [x] check if marker design of ul and ol use em instead of rem for sizing [x] navbar should be sticky on mobile +[ ] disable social media icons +[ ] footer links zu datenschutz und impressum From e3c7a18505432dea3c29d75f22157718dbe38b30 Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Thu, 5 Jun 2025 00:13:52 +0200 Subject: [PATCH 3/5] feat: add TYPO3 project rules for LLM assistance --- .roo/rules/rules.md | 163 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 .roo/rules/rules.md diff --git a/.roo/rules/rules.md b/.roo/rules/rules.md new file mode 100644 index 0000000..865adb9 --- /dev/null +++ b/.roo/rules/rules.md @@ -0,0 +1,163 @@ +# TYPO3 Project Rules for LLM Assistance + +## Project Overview +This project is a TYPO3 installation with a custom site-package extension located in [`packages/base`](packages/base), providing layout, templates, and modular ContentBlocks for pages. The LLM should dynamically determine the TYPO3 version and related dependencies by examining project files. + +## Technology Stack +- PHP (version defined in [`composer.json`](composer.json)) +- TYPO3 (version defined in [`composer.json`](composer.json)) +- Composer ([`composer.json`](composer.json)) +- Deployer ([`build/deploy.php`](build/deploy.php), [`build/servers.yaml`](build/servers.yaml)) +- Webpack ([`webpack.config.js`](webpack.config.js)) +- PostCSS ([`postcss.config.js`](postcss.config.js)) with Tailwind CSS (version defined in [`package.json`](package.json)) and Autoprefixer +- SCSS (`packages/base/Resources/Public/Scss/`) +- JavaScript bundling (`packages/base/Resources/Public/JavaScript/`) +- PHPStan, Rector (`phpstan.neon`, `rector.php`) +- YAML and TypoScript for configuration + +## Project Structure +- [`config/`](config/): Global TYPO3 config and environment overrides +- [`data/`](data/): Database dumps and test fixtures +- [`packages/base/`](packages/base/): Site-package extension with design assets, Fluid templates, TypoScript, ContentBlocks +- [`public/`](public/): Document root +- Build files: [`webpack.config.js`](webpack.config.js), [`postcss.config.js`](postcss.config.js) +- Dependency manifests: [`package.json`](package.json), [`composer.json`](composer.json) + +## Development Guidelines +- Use DDEV for local environment management: `ddev start`, `ddev restart`, `ddev stop`, etc. +- Check versions in [`composer.json`](composer.json) and [`package.json`](package.json) before referencing dependencies; the LLM should examine these files to determine actual versions +- Manage PHP dependencies via Composer within DDEV: `ddev exec composer install`, `ddev exec composer update` +- Manage JS/CSS via npm within DDEV: `ddev exec npm install`, `ddev exec npm run dev` / `ddev exec npm run build` +- Follow TYPO3 extension conventions in [`packages/base`](packages/base): `ext_localconf.php`, `ext_tables.php`, `ext_emconf.php` +- Organize TypoScript under [`packages/base/Configuration/Sets/SitePackage/TypoScript/`](packages/base/Configuration/Sets/SitePackage/TypoScript/) +- Enforce static analysis and automated refactoring with PHPStan and Rector + +## Default Workflow +When handling any task, LLMs should follow this structured approach: + +1. **Information Gathering** + - Read the necessary code from the project using available tools + - Examine [`composer.json`](composer.json) and [`package.json`](package.json) to understand current dependencies and versions + - Use MCP servers to read documentation about libraries that are used and should be used + - Review relevant project files to understand the current implementation + - Gather context about the specific area of the codebase that will be affected + +2. **Planning** + - Analyze the gathered information to understand the task requirements + - Plan how the task should be implemented within the existing project structure + - Consider potential impacts on other parts of the codebase + - Identify which files need to be created, modified, or reviewed + - Determine the best approach that follows project conventions and best practices + +3. **Implementation** + - Execute the planned task using appropriate tools + - Follow the project's coding standards and conventions + - Test the implementation where possible + - Ensure all changes work within the existing project structure + +4. **Documentation Updates** + - Update project documentation (README files) if the task affects user-facing functionality + - Update these rules ([`.roo/rules/rules.md`](.roo/rules/rules.md)) if the task introduces new patterns, conventions, or important information that future LLMs should know + - Ensure any new features or changes are properly documented for future reference + +This workflow ensures thorough understanding, proper planning, clean implementation, and maintained documentation for all project changes. + +## ContentBlocks Usage +- Defined under [`packages/base/ContentBlocks/ContentElements/`](packages/base/ContentBlocks/ContentElements/) +- Element folder contains: + - `config.yaml` (block definition) + - `templates/frontend.html` (frontend rendering) + - `templates/backend-preview.html` (backend preview) + - `language/labels.xlf` (translations) +- To add a new block: + 1. Create a folder under `ContentElements/` + 2. Define `config.yaml` and labels + 3. Add Fluid templates in `templates/` + 4. Clear caches and verify in TYPO3 backend (`ddev exec vendor/bin/typo3cms cache:flush`) +- Content element restrictions: + - ContentBlocks are automatically registered via their YAML config files + - Availability is controlled through PageTSconfig using `TCEFORM.tt_content.CType.keepItems` + - The `keepItems` list in [`packages/base/Configuration/Sets/SitePackage/page.tsconfig`](packages/base/Configuration/Sets/SitePackage/page.tsconfig) determines which content elements editors can use + - To enable a new ContentBlock, add its CType to the `keepItems` list +- Clear caches after changes + +## Styling Guidelines +- All design work lives in the [`packages/base`](packages/base) extension +- SCSS structure in `Resources/Public/Scss/`: + - `abstracts/` (variables, mixins, functions) + - `base/` (resets, global styles) + - `components/` (UI modules: buttons, cards, nav, etc.) + - `layouts/` (page-specific styles) +- Include Tailwind directives in `main.scss`: + ```scss + @tailwind base; + @tailwind components; + @tailwind utilities; + ``` +- Customize Tailwind in [`tailwind.config.js`](tailwind.config.js) + +## Build Process +1. Compile SCSS → PostCSS (Tailwind + Autoprefixer) → CSS in `Resources/Public/Css/` (within DDEV: `ddev exec npm run build:css`) +2. Bundle JS via Webpack → `Resources/Public/JavaScript/` (within DDEV: `ddev exec npm run build:js`) +3. Run dev mode: `ddev exec npm run dev` +4. Run production build: `ddev exec npm run build` +5. Deploy via Deployer: `ddev exec vendor/bin/dep deploy` + +## File Editing Guidelines +- TypoScript: `packages/base/Configuration/Sets/SitePackage/TypoScript/` +- YAML: `packages/base/Configuration/**/*.yaml` +- Fluid templates: `packages/base/Resources/Private/**/*.html` +- SCSS: `packages/base/Resources/Public/Scss/**/*.scss` +- JavaScript: `packages/base/Resources/Public/JavaScript/**/*.js` +- Never read or commit the environment file: [`.env`](.env) + +## MCP Server Usage +- Use `brave_web_search` for general web searches via `use_mcp_tool` +- Use `resolve-library-id` + `get-library-docs` for official API docs: + - `/typo3/docs` for TYPO3 reference + - `/tailwindcss` for Tailwind CSS docs +- For NixOS/Home Manager queries: use `nixos_search`, `home_manager_search` + +## Version Management +- Always inspect [`composer.json`](composer.json) for PHP dependencies and TYPO3 version +- Always inspect [`package.json`](package.json) for frontend dependencies +- Use MCP servers (e.g., `resolve-library-id`, `get-library-docs`) to fetch documentation matching the exact versions found +- Never assume specific dependency versions in code examples; dynamically reference versions as discovered + +## Common Tasks +1. **Initial Setup** + ```bash + ddev start + ddev exec composer install + ddev exec npm install + ``` +2. **Development Build** + ```bash + ddev exec npm run dev + ``` +3. **Production Build** + ```bash + ddev exec npm run build + ``` +4. **Clear TYPO3 Cache** + ```bash + ddev exec vendor/bin/typo3cms cache:flush + ``` +5. **Add a ContentBlock** + - Create folder, config, templates, translations + - Add the new ContentBlock's CType to the `keepItems` list in [`packages/base/Configuration/Sets/SitePackage/page.tsconfig`](packages/base/Configuration/Sets/SitePackage/page.tsconfig) + - Clear caches and verify in backend +6. **DDEV Environment Management** + - Restart environment: `ddev restart` + - Stop environment: `ddev stop` +7. **Deploy** + ```bash + ddev exec vendor/bin/dep deploy production + ``` + +## Troubleshooting +- **Blank CSS/JS**: confirm build pipeline ran; check [`webpack.config.js`](webpack.config.js) +- **YAML Syntax Errors**: validate `config.yaml` with a linter +- **Fluid Rendering Issues**: clear caches; verify template paths +- **TypoScript Not Loading**: ensure correct path under `Configuration/Sets` +- **Cache Problems**: always flush caches after changes \ No newline at end of file From f36e0d7f723cd3bbca0c44a4f3a44c5a2e462578 Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Mon, 16 Jun 2025 12:31:33 +0200 Subject: [PATCH 4/5] fix: simplify DDEV command usage in setup instructions --- .roo/rules/rules.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.roo/rules/rules.md b/.roo/rules/rules.md index 865adb9..1e2a500 100644 --- a/.roo/rules/rules.md +++ b/.roo/rules/rules.md @@ -128,20 +128,20 @@ This workflow ensures thorough understanding, proper planning, clean implementat 1. **Initial Setup** ```bash ddev start - ddev exec composer install - ddev exec npm install + ddev composer install + ddev npm install ``` 2. **Development Build** ```bash - ddev exec npm run dev + ddev npm run dev ``` 3. **Production Build** ```bash - ddev exec npm run build + ddev npm run build ``` 4. **Clear TYPO3 Cache** ```bash - ddev exec vendor/bin/typo3cms cache:flush + ddev typo3cms cache:flush ``` 5. **Add a ContentBlock** - Create folder, config, templates, translations From c4d01f2a47acb1532f1d9eb93f6cf1cc41fbd3a9 Mon Sep 17 00:00:00 2001 From: Dominik Polakovics Date: Mon, 16 Jun 2025 12:44:31 +0200 Subject: [PATCH 5/5] feat: update image size handling in textimage component for better layout control --- package.json | 2 +- .../ContentElements/textimage/config.yaml | 6 +++-- .../textimage/templates/frontend.html | 26 ++++++++++++++----- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 9ee95d0..c0044c2 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "scripts": { "build:css": "NODE_ENV=production webpack --config webpack.config.js --mode production", - "dev:css": "webpack --config webpack.config.js --mode development" + "dev:css": "webpack --config webpack.config.js --mode development --watch" }, "devDependencies": { "autoprefixer": "^10.4.21", diff --git a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml index 25fb58d..56a3839 100644 --- a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml +++ b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml @@ -21,9 +21,11 @@ fields: - identifier: imagesize type: Select renderType: selectSingle - default: 2 + default: 3 items: - label: 25% value: 1 + - label: 33% + value: 2 - label: 50% - value: 2 \ No newline at end of file + value: 3 \ No newline at end of file diff --git a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html index d72920c..d40ff08 100644 --- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html +++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html @@ -5,10 +5,16 @@ - - - - + + + + + + + + + +
@@ -24,7 +30,11 @@ {f:uri.image(image:data.image.0, width:'768c', cropVariant:'default', fileExtension:'webp')} 768w, {f:uri.image(image:data.image.0, width:'1024c', cropVariant:'default', fileExtension:'webp')} 1024w" sizes="(max-width: 767px) 90vw, - {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" /> + {f:if(condition: '{data.imagesize} == 1', + then: '(min-width: 768px) 25vw', + else: f:if(condition: '{data.imagesize} == 2', + then: '(min-width: 768px) 33vw', + else: '(min-width: 768px) 50vw'))}" /> + {f:if(condition: '{data.imagesize} == 1', + then: '(min-width: 768px) 25vw', + else: f:if(condition: '{data.imagesize} == 2', + then: '(min-width: 768px) 33vw', + else: '(min-width: 768px) 50vw'))}" />