# fractal components library setup

# fractal installieren
npm install --save @frctl/fractal

# fractal cli tool installieren (global)
npm i -g @frctl/fractal

# twig adapter installieren
npm install @frctl/twig

# twig adapter setup in fractal.config.js
/*
 * Require the Twig adapter
 */
const twigAdapter = require('@frctl/twig')();
fractal.components.engine(twigAdapter);
fractal.components.set('ext', '.twig');

# use twig for docs
fractal.docs.engine(twigAdapter);
fractal.docs.set('ext', '.twig');

# spezielles für twig:
{% render "@component" with {some: 'values'} %}


# tailwindcss installieren
npm install -D tailwindcss

# tailwind.config.js erzeugen
npx tailwindcss init

# tailwind plugins installieren
npm install -D @tailwindcss/typography
npm install -D @tailwindcss/forms
npm install -D @tailwindcss/aspect-ratio
npm install -D @tailwindcss/line-clamp


# install fakerjs
npm install @faker-js/faker --save-dev

Vorbedingung: Drupal Modul „Components“ muss installiert und aktiviert sein, https://www.drupal.org/project/components

Im Verzeichnis des Theme existieren 2 Unterverzeichnisse:

• components (Fractal Stuff)
  • 00-base
  • 01-atoms
  • 02-molecules
  • 03-organisms
  • 04-templates
  • 05-pages
• templates (Drupal Stuff)
  • layout
  • content
  • block
  • navigation
  • views
  • field
  • media-library
  • …

Die Components in /components haben die Endung .twig. Die Templates in /templates haben die Endung .html.twig.

In einem Template, z.B. /templates/layout/region–cta.html.twig, wird die entsprechende Component durch include referenziert:

{#
/**
 * @file
 * Theme override to display a region.
 *
 * Available variables:
 * - content: The content for this region, typically blocks.
 * - attributes: HTML attributes for the region <div>.
 * - region: The name of the region variable as defined in the theme's
 *   .info.yml file.
 *
 * @see template_preprocess_region()
 */
#}
{% if content %}
{%
  include "@organisms/region/region--cta.twig" with {
    'content': content,
    'attributes': attributes,
    'region': region
  }
%}
{% endif %}

In der Datei /components/03-organisms/region/region–cta.twig sitzt der endgültige Sourcecode:

<section name="cta" class="w-full my-8 py-4 lava-gradient">
  <div class="region container mx-auto text-white">
    {{ content }}
  </div>
</section>

Die „Übersetzung“ im Include übernimmt das Components-Modul. Definiert werden die „Namespaces“ der Components in der Theme info Datei, z.B. swiftly.info.yml:

... other stuff like regions, theme name etc.
...

components:
  namespaces:
    base:
      - components/00-base
    atoms:
      - components/01-atoms
    molecules:
      - components/02-molecules
    organisms:
      - components/03-organisms
    templates:
      - components/04-templates
    pages:
      - components/05-pages

Backlinks zu dieser Seite: