This is a Drupal theme that implements a design system created using Emulsify (Storybook). Default components provided by the design system:
- language bar
- brandbar
- menu
- footer
- page template
- Include the custom package in the repositories section of composer.json before the packages.drupal.org. Replace the dist:url with "https://github.com/dcmits/un_geneva_design_system/archive/main.zip" to automatically pull latest revision.
{
"type": "package",
"package": {
"name": "dcmits/un_geneva_design_system",
"version": "1.1.0",
"type": "drupal-theme",
"source": {
"type" : "git",
"url" : "https://github.com/dcmits/un_geneva_design_system.git",
"reference" : "main"
},
"dist": {
"url": "https://github.com/dcmits/un_geneva_design_system/archive/refs/tags/1.1.0.zip",
"type": "zip"
}
}
}
- Install dependencies (block_class, components:^3.0@beta, emulsify_twig, menu_block, twig_tweak, unified_twig_ext)
composer require drupal/block_class drupal/components:^3.0@beta drupal/emulsify_twig drupal/menu_block drupal/twig_tweak drupal/unified_twig_ext
drush en block_class,components,emulsify_twig,menu_block,twig_tweak,unified_twig_ext
- Install the theme
composer require dcmits/un_geneva_design_system
- Add patches in compser.json under the extra section
"patches": {
"drupal/core": {
"Add stream wrappers to access extension files": "https://www.drupal.org/files/issues/2024-06-24/1308152.patch"
},
"drupal/unified_twig_ext": {
"ExtensionLoader not loading extensions from parent themes": "https://www.drupal.org/files/issues/2023-08-10/unified_twig_ext-load_parent_extensions-3380423-2.patch"
},
"drupal/emulsify_twig": {
"removeAttribute method not found on array": "https://www.drupal.org/files/issues/2022-11-18/emulsify_twig-removeattribute_not_found_on_array-3260914-5.patch"
}
}
The patch for enabling stream wrappers from drupal/core works for drupal <= 10.2. For drupal 10.3 and above use "https://www.drupal.org/files/issues/2024-06-24/1308152.patch". If you do not have composer patches installed run:
composer require cweagans/composer-patches
Run composer update to patch the modules
composer update
- Generate new theme (using the Drupal core starter kit theme generation script) First make sure the custom theme folder exists
mkdir web/themes/custom
generate theme
php web/core/scripts/drupal generate-theme [new_theme] --path themes/custom --starterkit un_geneva_starterkit --name="[New theme name]"
[new_theme] should be lowercase letters and digits and underscores (it shouldn't start with a digit)
-
Install and set as default the new theme from the Appeareance menu.
-
Do a cache rebuild after installing the new theme.
-
Update the theme settings (Site name, Secondary site name, social media share image, default banner image)
rm -rf web/themes/contrib/un_geneva_design_system
composer update dcmits/un_geneva_design_system --no-cache
The version 1.1.0 removes dependency on obsolete lang_dropdown contrib module and adds support for Drupal 11. To upgrade, change the version tag of the design system in the composer repository definition to 1.1.0. Also remove lang_dropdown from the custom theme info.yml dependencies.
The search form block is hardcoded in the template because of constraints from the mobile menu and the header markup. In order to replace the default search form add the following code in you custom theme's .theme file, replacing CUSTOM_THEME with your theme name (lowercase) and CUSTOM_THEME_HEADER_SEARCH_BLOCK with the block id of your custom block:
function CUSTOM_THEME_preprocess(&$variables, $hook) {
if($hook == 'region' && $variables['region'] == 'header') {
$block_search = \Drupal\block\Entity\Block::load('CUSTOM_THEME_HEADER_SEARCH_BLOCK'); // replace mytheme part with your theme name.
if($block_search) {
$variables['header__search'] = \Drupal::entityTypeManager()
->getViewBuilder('block')
->view($block_search);
}
}
}