====== Fractal.build ======

====== Fractal Config ======

<code>
# 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
</code>

===== Use Components =====

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:

<code>
{#
/**
 * @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 %}
</code>

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

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

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

<code>
... 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
</code>