{"id":22281129,"url":"https://github.com/sitegeist/fluid-components","last_synced_at":"2025-04-12T14:57:36.879Z","repository":{"id":32878135,"uuid":"144719527","full_name":"sitegeist/fluid-components","owner":"sitegeist","description":"Encapsulated frontend components with Fluid's ViewHelper syntax for TYPO3","archived":false,"fork":false,"pushed_at":"2025-02-18T19:52:08.000Z","size":523,"stargazers_count":53,"open_issues_count":24,"forks_count":23,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-12T14:57:30.456Z","etag":null,"topics":["components","fluid","html","template","typo3","typo3-extension","typo3-fluid"],"latest_commit_sha":null,"homepage":"https://fluidcomponents.sitegeist.de/","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sitegeist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-14T12:49:44.000Z","updated_at":"2025-01-21T13:35:05.000Z","dependencies_parsed_at":"2024-06-19T05:26:07.515Z","dependency_job_id":"a3b1c894-427c-4c54-bddd-859986d6609b","html_url":"https://github.com/sitegeist/fluid-components","commit_stats":{"total_commits":261,"total_committers":19,"mean_commits":"13.736842105263158","dds":0.2183908045977011,"last_synced_commit":"95696e95e470c5112d96a319104ddec4ce6ce0d3"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitegeist%2Ffluid-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitegeist%2Ffluid-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitegeist%2Ffluid-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sitegeist%2Ffluid-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sitegeist","download_url":"https://codeload.github.com/sitegeist/fluid-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586249,"owners_count":21128997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","fluid","html","template","typo3","typo3-extension","typo3-fluid"],"created_at":"2024-12-03T16:14:41.458Z","updated_at":"2025-04-12T14:57:36.858Z","avatar_url":"https://github.com/sitegeist.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fluid Components\n\nThis TYPO3 extensions puts frontend developers in a position to create encapsulated components\nin pure Fluid. By defining a clear interface (API) for the integration, frontend developers can\nimplement components independent of backend developers. The goal is to create highly reusable\npresentational components which have no side effects and aren't responsible for data acquisition.\n\n⬇️ **[TL;DR? Get started right away](#getting-started)** ⬇️\n\n## What does it do?\n\n[Fluid](https://github.com/typo3/fluid) templates usually consist of three ingredients:\n\n* **Templates**,\n* **Layouts**, which structure and wrap the markup defined in the template, and\n* **Partials**, which contain markup snippets to be reused in different templates.\n\nIn addition, **ViewHelpers** provide basic control structures and encapsulate advanced rendering and\ndata manipulation that would otherwise not be possible. They are defined as PHP classes.\n\nThe extension adds another ingredient to Fluid: **Components**.\n\n## What are components?\n\nFluid components are similar to ViewHelpers. The main difference is that they can be defined solely in\nFluid. In a way, they are quite similar to Fluid's partials, but they have a few advantages:\n\n* They provide a **clear interface** via predefined parameters. The implementation is encapsulated in\nthe component. You don't need to know what the component does internally to be able to use it.\n* With semantic component names your templates get more **readable**. This gets even better with\n[atomic design](http://bradfrost.com/blog/post/atomic-web-design/) or similar approaches.\n* They can easily be used across different TYPO3 extensions because they utilize Fluid's\n**namespaces**. No *partialRootPath* needed.\n\n## How do components look like?\n\nThe following component implements a simple teaser card element:\n\n*Components/TeaserCard/TeaserCard.html*\n\n```xml\n\u003cfc:component\u003e\n    \u003cfc:param name=\"title\" type=\"string\" /\u003e\n    \u003cfc:param name=\"link\" type=\"Typolink\" /\u003e\n    \u003cfc:param name=\"icon\" type=\"string\" optional=\"1\" /\u003e\n    \u003cfc:param name=\"theme\" type=\"string\" optional=\"1\" default=\"light\" /\u003e\n\n    \u003cfc:renderer\u003e\n        \u003ca href=\"{link}\" class=\"{component.class} {component.class}-{theme}\"\u003e\n            \u003ch3 class=\"{component.prefix}title\"\u003e{title}\u003c/h3\u003e\n            \u003cf:if condition=\"{content}\"\u003e\n                \u003cp class=\"{component.prefix}description\"\u003e\u003cfc:slot /\u003e\u003c/p\u003e\n            \u003c/f:if\u003e\n\n            \u003cf:if condition=\"{icon}\"\u003e\n                \u003ci class=\"icon icon-{icon} {component.prefix}icon\"\u003e\u003c/i\u003e\n            \u003c/f:if\u003e\n        \u003c/a\u003e\n    \u003c/fc:renderer\u003e\n\u003c/fc:component\u003e\n```\n\nUse the following code in your template to render a teaser card about TYPO3:\n\n```xml\n{namespace my=VENDOR\\MyExtension\\Components}\n\u003cmy:teaserCard\n    title=\"TYPO3\"\n    link=\"https://typo3.org\"\n    icon=\"typo3\"\n\u003e\n    The professional, flexible Content Management System\n\u003c/my:teaserCard\u003e\n```\n\nThe result is the following HTML:\n\n```xml\n\u003ca href=\"https://typo3.org\" class=\"smsExampleTeaserCard smsExampleTeaserCard-light\"\u003e\n    \u003ch3 class=\"smsExampleTeaserCard_title\"\u003eTYPO3\u003c/h3\u003e\n    \u003cp class=\"smsExampleTeaserCard_description\"\u003eThe professional, flexible Content Management System\u003c/p\u003e\n\n    \u003ci class=\"icon icon-typo3 smsExampleTeaserCard_icon\"\u003e\u003c/i\u003e\n\u003c/a\u003e\n```\n*(improved indentation for better readability)*\n\n## Getting Started\n\n1. Install the extension either [from TER](https://typo3.org/extensions/repository/view/fluid_components)\nor [via composer](https://packagist.org/packages/sitegeist/fluid-components):\n\n    ```\n    composer require sitegeist/fluid-components\n    ```\n\n2. Define the component namespace in your *ext_localconf.php*:\n\n\t```php\n\t$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['fluid_components']['namespaces']['VENDOR\\\\MyExtension\\\\Components'] =\n\t\t\\TYPO3\\CMS\\Core\\Utility\\ExtensionManagementUtility::extPath('my_extension', 'Resources/Private/Components');\n\t```\n\n\tUse your own vendor name for `VENDOR`, extension name for `MyExtension`, and extension key for `my_extension`.\n\n3. Create your first component in *EXT:my_extension/Resources/Private/Components/* by creating a directory\n*MyComponent* containing a file *MyComponent.html*\n\n4. Define and apply your component according to [How do components look like?](#how-do-components-look-like). The [Extended Documentation](#extended-documentation)\ncan be helpful as well.\n\n5. Check out [Fluid Styleguide](https://github.com/sitegeist/fluid-styleguide), a living styleguide for Fluid Components, and [Fluid Components Linter](https://github.com/sitegeist/fluid-components-linter) to improve the quality and reusability of your components.\n\nIf you have any questions, need support or want to discuss components in TYPO3, feel free to join [#ext-fluid_components](https://typo3.slack.com/archives/ext-fluid_components).\n\n## Why should I use components?\n\n* Components encourage **markup reusage and refactoring**. Only the component knows about its implementation\ndetails. As long as the interface stays compatible, the implementation can change.\n* Components can be a tool to **enforce design guidelines**. If the component's implementation respects the\nguidelines, they are respected everywhere the component is used. A helpful tool to accomplish that is the corresponding\nliving styleguide: [Fluid Styleguide](https://github.com/sitegeist/fluid-styleguide).\n* Components **formalize and improve communication**. Frontend developers and integrators agree on a clearly\ndefined interface instead of debating implementation details.\n* Components **reduce dependencies**. Frontend developers can work independent of integrators and backend developers.\n\n## Extended Documentation\n\nFeature References\n\n* [ViewHelper Reference](Documentation/ViewHelperReference.md)\n* [Data Structures](Documentation/DataStructures.md)\n    * [Links and Typolink](Documentation/DataStructures.md#links-and-typolink)\n    * [Files and Images](Documentation/DataStructures.md#files-and-images)\n    * [Translations](Documentation/DataStructures.md#translations)\n    * [Navigations](Documentation/DataStructures.md#navigations)\n    * [DateTime](Documentation/DataStructures.md#datetime)\n    * [Slots](Documentation/DataStructures.md#slots)\n* [Component Prefixers](Documentation/ComponentPrefixers.md)\n* [Component Settings](Documentation/ComponentSettings.md)\n\nHow-To's\n\n* [Usage with Forms](Documentation/Forms.md)\n* [Add auto-completion in your IDE](Documentation/AutoCompletion.md)\n* [Updating from 1.x](Documentation/UpdateNotes.md)\n* [Mitigating XSS issues with 3.5](Documentation/XssIssue.md)\n\n## Authors \u0026 Sponsors\n\n* Ulrich Mathes - mathes@sitegeist.de\n* Simon Praetorius - moin@praetorius.me\n* [All contributors](https://github.com/sitegeist/fluid-components/graphs/contributors)\n\n*The development and the public-releases of this package is generously sponsored\nby my employer https://sitegeist.de.*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsitegeist%2Ffluid-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsitegeist%2Ffluid-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsitegeist%2Ffluid-components/lists"}