{"id":19146394,"url":"https://github.com/netzstrategen/twig_fractal","last_synced_at":"2025-10-23T17:23:56.338Z","repository":{"id":48229426,"uuid":"100603005","full_name":"netzstrategen/twig_fractal","owner":"netzstrategen","description":"Reuse Fractal components in your Twig or Drupal projects without duplicating component code.","archived":false,"fork":false,"pushed_at":"2025-04-01T17:09:01.000Z","size":60,"stargazers_count":4,"open_issues_count":2,"forks_count":4,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-05-07T02:04:03.263Z","etag":null,"topics":["adapter","component-library","drupal","fractal","twig"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/netzstrategen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null}},"created_at":"2017-08-17T12:49:47.000Z","updated_at":"2025-04-01T17:06:37.000Z","dependencies_parsed_at":"2024-11-09T07:44:09.724Z","dependency_job_id":"502f6772-4830-42ee-a1fd-bc4e4abc019b","html_url":"https://github.com/netzstrategen/twig_fractal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netzstrategen%2Ftwig_fractal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netzstrategen%2Ftwig_fractal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netzstrategen%2Ftwig_fractal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netzstrategen%2Ftwig_fractal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netzstrategen","download_url":"https://codeload.github.com/netzstrategen/twig_fractal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252798852,"owners_count":21805886,"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":["adapter","component-library","drupal","fractal","twig"],"created_at":"2024-11-09T07:44:01.272Z","updated_at":"2025-10-23T17:23:51.318Z","avatar_url":"https://github.com/netzstrategen.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fractal integration for Twig projects\n\nThis module enables you to build a living style guide based on Fractal components using the Twig templating language.\nIt can either be used as a Drupal module or as a standalone Twig extension.\n\n## Features\n\n1. Consistency: Respect component definitions.\n\n    The default variables of a component are read from its component definition\n    file (usually `*.config.yml`).\n\n    The class name of a component (or a variant of it) is not manually passed to\n    the template each time it is used.  Instead, every usage of the component\n    ensures that that at least the component's class names are output (which\n    should follow BEM).\n\n    ```twig\n    {% render '@atoms/button.twig' with { name: 'submit' } %}\n\n    {% render '@atoms/button--primary.twig' with { label: 'Save' } %}\n\n    {% render [\n      '@pages/section--trythis.twig',\n      '@pages/section--alternative.twig',\n      '@pages/section.twig',\n    ] %} \n    ```\n\n    By design, the class name of a component or variant cannot be removed, it\n    may only be amended.\n\n2. Structure: Drupal Attributes.\n\n    Any template context variable with \"attributes\" in its name is treated as a\n    Drupal Attributes object.  Use them intuitively in your Fractal components.\n\n    ```yml\n    context:\n      attributes:\n        class: article--teaser\n      title: Dummy article title\n      title_attributes:\n        class: article__heading\n    ```\n    ```twig\n    \u003carticle{{ attributes }}\u003e\n      \u003ch1{{ title_attributes }}\u003e{{ title }}\u003c/h1\u003e\n    \u003c/article\u003e\n    ```\n\n3. Variance: Modifiers. Multiple modifiers.\n\n    A variant is identified by its modifier name, as specified in the referenced\n    component name:\n\n    ```twig\n    {% render '@atoms/button--primary.twig' %}\n    ```\n\n    This will look up the variant identified by modifier 'primary' in the\n    'button' atom:\n\n    ```yml\n    context:\n      attributes:\n        class: button\n\n    variants:\n      - modifier: primary\n        context:\n          label: Save\n          attributes:\n            class: button--primary\n    ```\n\n    Components may appear in multiple variations and states.\n\n    ```twig\n    {% render '@atoms/button--primary--disabled.twig' with { label: 'Save' } %}\n    ```\n\n## Installation\n\nAdd the following in your project `composer.json` file:\n\n```sh\ncomposer config repositories.twig_fractal git https://github.com/netzstrategen/twig_fractal.git\n\ncomposer require drupal/twig_fractal:dev-master\n```\n\n### Standalone\n\nDrupal Core did not split its components into separate repositories yet, so the files\nneed to be retrieved manually from the main repository. As soon as separate\nrepositories for Drupal Components and Core become available, you can try to use them\ninstead.\n\n1. As the extension relies on some Drupal functionalities we need to grab the necessary\n   files and autoload them: \n\n    ```sh\n    composer config repositories.drupal-attributes git https://github.com/netzstrategen/drupal-attributes.git\n    \n    composer require netzstrategen/drupal-attributes:dev-master\n    ```\n\n2. Register the Twig extension in your project:\n\n    ```\n    // Add 'render' tag for pattern library components.\n    $twig-\u003eaddExtension(new \\Drupal\\twig_fractal\\TwigFractal());\n    ```\n\n## Recommended packages\n\nhttps://github.com/netzstrategen/twig_fractal (this package) adds support for the `{% render %}` tag to the Twig environment in PHP (of your application).\n\nhttps://github.com/netzstrategen/fractal-twig adds support for the `{% render %}` tag to the Twig environment in JavaScript (of the Fractal UI).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetzstrategen%2Ftwig_fractal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetzstrategen%2Ftwig_fractal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetzstrategen%2Ftwig_fractal/lists"}