Davidson Styleguide

Fractal To Drupal

Fractal is used as a component workshop / style guide for the web site in production. CSS and Javascript are adopted unchanged by the Drupal site. Twig templates are also manipulated and prepped to be used in the Drupal theme, although in practice this is very rare; markup changes in this project are still managed through manual overrides.

There are three repositories involved in this process:

  1. The Davidson Fractal repository (https://gitlab.com/davidsoncollegedigitalstaff/davidson-fractal), which serves as the workshop for front-end components and assets
  2. The Davidson Theme repository (https://gitlab.com/davidsoncollegedigitalstaff/davidson-theme), which serves as an artifact repository for items extracted from Fractal. This repository is never edited by hand; its commits are always managed by continuous deployment.
  3. The Davidson Drupal repository (https://gitlab.com/davidsoncollegedigitalstaff/davidson-drupal), which contains Drupal integration templates and site configuration.

The pipeline works like this:

Updates to the site design and javascript are made in Fractal. On a commit / push to the master branch, the continuous integration script collects and publishes the relevant files to the “davidson-theme” repository:

From Davidson Fractal’s .gitlab-ci:

build:fractal:
  stage: build
  script:
    - make template_package
  artifacts:
    paths:
      - build
    expire_in: 1 week
  only:
    - master

From Davidson Fractal’s /Makefile:

TEMPLATE_DIR=drupal-fractal
PUBLISH_REPO=git@gitlab.com:davidsoncollegedigitalstaff/davidson-theme.git
WORK_THEME=theme

# [....]

template_package: | $(TEMPLATE_DIR) demo
  git clone $(PUBLISH_REPO) $(WORK_THEME)
  git config --global user.email "geeks@insidenewcity.com"
  git config --global user.name "NewCity"
  rsync -avh ./build/css theme/ --delete
  rsync -avh ./build/js theme/ --delete
  rsync -avh ./build/fonts theme/  --delete
  rsync -avh ./build/images theme/  --delete
  find monolith/patterns -name \*.twig -mindepth 1 -type f -exec cp '{}' $(TEMPLATE_DIR)/patterns ';'
  find $(TEMPLATE_DIR)/patterns -name \*.twig -exec sed -E -i'.bak' "s/([\'\"]@)([a-zA-Z_-]*)([\'\"])/\1fractal\/\2.twig\3/g" {} \;
  rm -rf $(TEMPLATE_DIR)/patterns/*.bak
  rsync -avh $(TEMPLATE_DIR)/patterns theme/
  cd theme; git add .; git commit -m "Automated deployment of fractal patterns."; git push;
  rm -rf theme;
  rm -rf drupal-fractal

This updates the theme artifact repository but does not update Drupal. Instead, Drupal manages updates to these assets through the Composer JSON file

The Repositories block sets where to download the assets

"repositories": [
    //...
    {
      "type": "vcs",
      "url": "https://gitlab+deploy-token-20577:7Ez6QUnmvkwG7Gk41tx4@gitlab.com/davidsoncollegedigitalstaff/davidson-theme.git"
    },
    //...
]

Then we’re set to track master:

"require": {
  //...
"davidsoncollegedigitalstaff/davidson-fractal": "dev-master",
  //...
}

And an installer path is set for where to deposit the results:

  "extra": {
    "installer-paths": {
      //...
      "web/themes/custom/davidson/{$name}": ["davidsoncollegedigitalstaff/davidson-fractal"],
      //...
    }