diff --git a/.ddev/config.yaml b/.ddev/config.yaml index fd8f86b..0d722f1 100644 --- a/.ddev/config.yaml +++ b/.ddev/config.yaml @@ -16,10 +16,7 @@ web_environment: corepack_enable: false nodejs_version: "18" -additional_services: - - mailpit hooks: post-start: - - exec-host: | - ddev npm install - ddev npm run dev:css -- --watch & + - exec: "npm install" + - exec: "npm run dev:css" diff --git a/.ddev/docker-compose.override.yaml b/.ddev/docker-compose.override.yaml new file mode 100644 index 0000000..6852a6c --- /dev/null +++ b/.ddev/docker-compose.override.yaml @@ -0,0 +1,9 @@ +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/.roo/rules/rules.md b/.roo/rules/rules.md deleted file mode 100644 index 1e2a500..0000000 --- a/.roo/rules/rules.md +++ /dev/null @@ -1,163 +0,0 @@ -# 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 composer install - ddev npm install - ``` -2. **Development Build** - ```bash - ddev npm run dev - ``` -3. **Production Build** - ```bash - ddev npm run build - ``` -4. **Clear TYPO3 Cache** - ```bash - ddev 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 diff --git a/ToDo.md b/ToDo.md index 9c28fe6..3255a91 100644 --- a/ToDo.md +++ b/ToDo.md @@ -2,5 +2,3 @@ [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 diff --git a/package.json b/package.json index c0044c2..9ee95d0 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 --watch" + "dev:css": "webpack --config webpack.config.js --mode development" }, "devDependencies": { "autoprefixer": "^10.4.21", diff --git a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml index 56a3839..25fb58d 100644 --- a/packages/base/ContentBlocks/ContentElements/textimage/config.yaml +++ b/packages/base/ContentBlocks/ContentElements/textimage/config.yaml @@ -21,11 +21,9 @@ fields: - identifier: imagesize type: Select renderType: selectSingle - default: 3 + default: 2 items: - label: 25% value: 1 - - label: 33% - value: 2 - label: 50% - value: 3 \ No newline at end of file + value: 2 \ 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 d40ff08..d72920c 100644 --- a/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html +++ b/packages/base/ContentBlocks/ContentElements/textimage/templates/frontend.html @@ -5,16 +5,10 @@ - - - - - - - - - - + + + +
@@ -30,11 +24,7 @@ {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) 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) 40vw', else: '(min-width: 768px) 50vw')}" /> + {f:if(condition: '{data.imagesize} == 1', then: '(min-width: 768px) 40vw', else: '(min-width: 768px) 50vw')}" />