diff --git a/.ddev/config.local.yaml.example b/.ddev/config.local.yaml.example index d362b42cd..c4022aff3 100644 --- a/.ddev/config.local.yaml.example +++ b/.ddev/config.local.yaml.example @@ -44,9 +44,6 @@ hooks: # @see https://www.drupal.org/node/947312 - exec: drush user-block --uid=1 - # Login as AdminOne. - - exec-host: ddev login - # Make sure PHP CLI has no memory limit, this is # especially for unit testing. # Web requests should be still limited, as the @@ -54,6 +51,10 @@ hooks: # memory either. # @see https://github.com/drud/ddev/issues/1825#issuecomment-529964728 - exec: perl -pi -e 's/memory_limit.*$/memory_limit = -1/' /etc/php/${DDEV_PHP_VERSION}/cli/conf.d/*.ini + + # Login as AdminOne. + - exec-host: ddev login + post-import-db: # Run DB updates. - exec: drush updb diff --git a/.ddev/config.yaml b/.ddev/config.yaml index b3d2970f9..bbc2880f8 100644 --- a/.ddev/config.yaml +++ b/.ddev/config.yaml @@ -11,12 +11,12 @@ additional_fqdns: [] database: type: mariadb version: "10.5" +fail_on_hook_fail: true use_dns_when_possible: true composer_version: "2" web_environment: - COMPOSER_EXIT_ON_PATCH_FAILURE=1 corepack_enable: false -fail_on_hook_fail: true # Key features of DDEV's config.yaml: @@ -204,7 +204,7 @@ fail_on_hook_fail: true # disable_settings_management: false # If true, DDEV will not create CMS-specific settings files like -# Drupal's settings.php/settings.ddev.php or TYPO3's AdditionalConfiguration.php +# Drupal's settings.php/settings.ddev.php or TYPO3's additional.php # In this case the user must provide all such settings. # You can inject environment variables into the web container with: diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 000000000..8e2d9311a --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,7 @@ +{ + "image": "mcr.microsoft.com/devcontainers/universal:2", + "features": { + "ghcr.io/ddev/ddev/install-ddev:latest": {} + }, + "postCreateCommand": "./codespaces_setup.sh" +} \ No newline at end of file diff --git a/README.md b/README.md index 0bbff89a9..4191fc101 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,8 @@ [![Build Status](https://app.travis-ci.com/Gizra/drupal-starter.svg?branch=main)](https://app.travis-ci.com/Gizra/drupal-starter) +[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=250256146) + + # Drupal 10 Starter Starter repo for Drupal 10 development. This starter is an opinionated approach, @@ -22,18 +25,22 @@ us with easier iteration, reading and manipulating yaml files, pre-defined deployments. See more under ["Deploy to Pantheon"](#deploy-to-pantheon) section. 1. We use [Pluggable Entity View Builder](https://www.drupal.org/project/pluggable_entity_view_builder) to define how an entity should look like. See [example](https://github.com/Gizra/drupal-starter/blob/main/web/modules/custom/server_general/src/Plugin/EntityViewBuilder/NodeLandingPage.php). -## Requirements +## GitHub Codespaces + +You can open this project in GitHub Codespaces by clicking the badge at the top of this README. This will open a Codespace with the project already cloned and ready to go. + +Once the installation is complete (takes about 10 minutes), you can use `ddev login` to log in to the site as admin user using your default browser. -* [DDEV](https://ddev.readthedocs.io/en/stable/) +## Local Installation -## Installation +The only requirement is having [DDEV](https://ddev.readthedocs.io/en/stable/) installed. ddev composer install cp .ddev/config.local.yaml.example .ddev/config.local.yaml ddev restart Once the Drupal installation is complete you can use `ddev login` to -log in to the site as user 1 using your default browser. +log in to the site as admin userusing your default browser. ## Default content management diff --git a/ci-scripts/install_ddev.sh b/ci-scripts/install_ddev.sh index f2980c851..95d7e0708 100755 --- a/ci-scripts/install_ddev.sh +++ b/ci-scripts/install_ddev.sh @@ -7,7 +7,7 @@ else docker login --password "$DOCKER_PASSWORD" --username amitaibu fi -DDEV_VERSION="v1.23.4" +DDEV_VERSION="v1.23.5" if ! command -v ddev &>/dev/null; then echo "Installing ddev." diff --git a/codespaces_setup.sh b/codespaces_setup.sh new file mode 100755 index 000000000..466dcb39b --- /dev/null +++ b/codespaces_setup.sh @@ -0,0 +1,25 @@ +#!/bin/bash +set -x + +wait_for_docker() { + # Loop until Docker responds, indicating it's ready + while true; do + docker ps > /dev/null 2>&1 && break + sleep 1 + done + echo "Docker is ready." +} + +wait_for_docker + +# Remove lynx to prevent it opening a GUI while installing, which +# would cause the build to get stuck after the `ddev restart`. +sudo apt-get remove -y lynx + +# Proceed with commands requiring Docker +ddev composer install +cp .ddev/config.local.yaml.example .ddev/config.local.yaml + +# As we have a `ddev login` in the end of the ddev restart, it fails on codespace. +# So we force a success exit code to avoid the build to fail. +ddev restart -y || true diff --git a/composer.json b/composer.json index 92bba0345..39b6d8d84 100644 --- a/composer.json +++ b/composer.json @@ -81,7 +81,7 @@ "drupal/ultimate_cron": "^2.0@alpha", "drupal/upgrade_status": "^4.0", "drupal/username_enumeration_prevention": "^1.3", - "drupal/webp": "^1.0@RC", + "drupal/wpf": "^1.2", "drush/drush": "^12.4", "longwave/laminas-diactoros": "^2.14", "npm-asset/anchor-js": "^5.0", diff --git a/composer.lock b/composer.lock index d7d38ab8c..2dd189686 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "abe2a89746dc64bde4bdca9cbee07835", + "content-hash": "070c3d72343458006ab1b9c7a4c7e9f0", "packages": [ { "name": "asm89/stack-cors", @@ -67,7 +67,7 @@ "version": "6.x-dev", "source": { "type": "git", - "url": "git@github.com:FortAwesome/Font-Awesome.git", + "url": "https://github.com/FortAwesome/Font-Awesome.git", "reference": "d02961b018153506364077343b0edcde0a39d27e" }, "dist": { @@ -2633,7 +2633,7 @@ "homepage": "https://www.drupal.org/user/53892" }, { - "name": "Devin Carlson", + "name": "devin carlson", "homepage": "https://www.drupal.org/user/290182" }, { @@ -2649,7 +2649,7 @@ "homepage": "https://www.drupal.org/user/471638" }, { - "name": "Primsi", + "name": "primsi", "homepage": "https://www.drupal.org/user/282629" }, { @@ -5568,31 +5568,31 @@ } }, { - "name": "drupal/webp", - "version": "1.0.0-rc2", + "name": "drupal/wpf", + "version": "1.2.4", "source": { "type": "git", - "url": "https://git.drupalcode.org/project/webp.git", - "reference": "8.x-1.0-rc2" + "url": "https://git.drupalcode.org/project/wpf.git", + "reference": "1.2.4" }, "dist": { "type": "zip", - "url": "https://ftp.drupal.org/files/projects/webp-8.x-1.0-rc2.zip", - "reference": "8.x-1.0-rc2", - "shasum": "16a1d2c29af57ac04603bcba275e732340491554" + "url": "https://ftp.drupal.org/files/projects/wpf-1.2.4.zip", + "reference": "1.2.4", + "shasum": "faa7f46b2a91416cf789ba938a001c3826962a83" }, "require": { - "drupal/core": "^8 || ^9 || ^10 || ^11", + "drupal/core": "^10.3 || ^11", "ext-gd": "*" }, "type": "drupal-module", "extra": { "drupal": { - "version": "8.x-1.0-rc2", - "datestamp": "1713170119", + "version": "1.2.4", + "datestamp": "1721639534", "security-coverage": { - "status": "not-covered", - "message": "RC releases are not covered by Drupal security advisories." + "status": "covered", + "message": "Covered by Drupal's security advisory policy" } } }, @@ -5602,28 +5602,28 @@ ], "authors": [ { - "name": "Bart Vanhoutte", - "homepage": "https://www.drupal.org/user/145609", - "email": "bart@croquemonsieur.be", + "name": "Dudás József", + "homepage": "https://www.drupal.org/user/387119", + "email": "dj@brainsum.com", "role": "Maintainer" }, { - "name": "Bart Vanhoutte", - "homepage": "https://www.drupal.org/user/1133754" + "name": "pedrop", + "homepage": "https://www.drupal.org/user/1043368" }, { - "name": "mandclu", - "homepage": "https://www.drupal.org/user/52136" + "name": "szato", + "homepage": "https://www.drupal.org/user/389677" } ], - "description": "Generates WebP copies of image style derivatives.", - "homepage": "https://www.drupal.org/project/webp", + "description": "Generates jpg copies of webp image style derivatives.", + "homepage": "https://www.drupal.org/project/wpf", "keywords": [ "Drupal" ], "support": { - "source": "http://cgit.drupalcode.org/webp", - "issues": "https://www.drupal.org/project/issues/webp" + "source": "http://cgit.drupalcode.org/wpf", + "issues": "https://www.drupal.org/project/issues/wpf" } }, { @@ -15008,8 +15008,7 @@ "drupal/drupal_test_assertions": 20, "drupal/inline_entity_form": 5, "drupal/potx": 15, - "drupal/ultimate_cron": 15, - "drupal/webp": 5 + "drupal/ultimate_cron": 15 }, "prefer-stable": true, "prefer-lowest": false, diff --git a/config/sync/core.extension.yml b/config/sync/core.extension.yml index cdbad1ea8..f0e534322 100644 --- a/config/sync/core.extension.yml +++ b/config/sync/core.extension.yml @@ -87,8 +87,8 @@ module: user: 0 username_enumeration_prevention: 0 views_ui: 0 - webp: 0 workflows: 0 + wpf: 0 fast404: 1 menu_link_content: 1 pathauto: 1 diff --git a/config/sync/image.style.card.yml b/config/sync/image.style.card.yml index c27197268..e8558f4a7 100644 --- a/config/sync/image.style.card.yml +++ b/config/sync/image.style.card.yml @@ -15,3 +15,9 @@ effects: width: 410 height: 192 crop_type: focal_point + 346e742d-d17c-4208-b156-5812339ec476: + uuid: 346e742d-d17c-4208-b156-5812339ec476 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.hero_lg_1x.yml b/config/sync/image.style.hero_lg_1x.yml index e0a092c07..ac6944f00 100644 --- a/config/sync/image.style.hero_lg_1x.yml +++ b/config/sync/image.style.hero_lg_1x.yml @@ -15,3 +15,9 @@ effects: width: 1280 height: 400 crop_type: focal_point + 4917daef-1434-4208-bbf7-a5f9e88ed45c: + uuid: 4917daef-1434-4208-bbf7-a5f9e88ed45c + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.hero_lg_2x.yml b/config/sync/image.style.hero_lg_2x.yml index 4992ccc25..a4298636e 100644 --- a/config/sync/image.style.hero_lg_2x.yml +++ b/config/sync/image.style.hero_lg_2x.yml @@ -15,3 +15,9 @@ effects: width: 2560 height: 800 crop_type: focal_point + 4517c920-bb20-40cb-9d8d-2edc4decbbc5: + uuid: 4517c920-bb20-40cb-9d8d-2edc4decbbc5 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.hero_md_1x.yml b/config/sync/image.style.hero_md_1x.yml index d2611645b..377983e0a 100644 --- a/config/sync/image.style.hero_md_1x.yml +++ b/config/sync/image.style.hero_md_1x.yml @@ -15,3 +15,9 @@ effects: width: 1024 height: 320 crop_type: focal_point + 845c67f6-75c7-4321-8f87-577ecdf0d917: + uuid: 845c67f6-75c7-4321-8f87-577ecdf0d917 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.hero_md_2x.yml b/config/sync/image.style.hero_md_2x.yml index 9486d5a52..8df453a22 100644 --- a/config/sync/image.style.hero_md_2x.yml +++ b/config/sync/image.style.hero_md_2x.yml @@ -15,3 +15,9 @@ effects: width: 2048 height: 640 crop_type: focal_point + 2c40eafc-0ff8-4d30-8a57-d90ec3be292a: + uuid: 2c40eafc-0ff8-4d30-8a57-d90ec3be292a + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.hero_mobile_1x.yml b/config/sync/image.style.hero_mobile_1x.yml index caa02e7e3..843e11ccf 100644 --- a/config/sync/image.style.hero_mobile_1x.yml +++ b/config/sync/image.style.hero_mobile_1x.yml @@ -15,3 +15,9 @@ effects: width: 640 height: 200 crop_type: focal_point + 42df8dd1-c7f1-4e71-8935-4f45a0ae016d: + uuid: 42df8dd1-c7f1-4e71-8935-4f45a0ae016d + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.hero_mobile_2x.yml b/config/sync/image.style.hero_mobile_2x.yml index 13291c7ba..f6d176c60 100644 --- a/config/sync/image.style.hero_mobile_2x.yml +++ b/config/sync/image.style.hero_mobile_2x.yml @@ -15,3 +15,9 @@ effects: width: 1280 height: 400 crop_type: focal_point + 56762e47-7354-4f2e-af60-badffc42ed0c: + uuid: 56762e47-7354-4f2e-af60-badffc42ed0c + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.hero_sm_1x.yml b/config/sync/image.style.hero_sm_1x.yml index e80753b1d..16cc13e66 100644 --- a/config/sync/image.style.hero_sm_1x.yml +++ b/config/sync/image.style.hero_sm_1x.yml @@ -15,3 +15,9 @@ effects: width: 768 height: 240 crop_type: focal_point + 5904d9f3-a67c-43d8-bfab-26b10f8f141c: + uuid: 5904d9f3-a67c-43d8-bfab-26b10f8f141c + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.hero_sm_2x.yml b/config/sync/image.style.hero_sm_2x.yml index fa3e839e3..4e2cf4bdd 100644 --- a/config/sync/image.style.hero_sm_2x.yml +++ b/config/sync/image.style.hero_sm_2x.yml @@ -15,3 +15,9 @@ effects: width: 1536 height: 480 crop_type: focal_point + 0843a229-7768-4c41-a90f-c633f2fdf82d: + uuid: 0843a229-7768-4c41-a90f-c633f2fdf82d + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.hero_xl_1x.yml b/config/sync/image.style.hero_xl_1x.yml index c88362da2..4446f64e0 100644 --- a/config/sync/image.style.hero_xl_1x.yml +++ b/config/sync/image.style.hero_xl_1x.yml @@ -15,3 +15,9 @@ effects: width: 1536 height: 466 crop_type: focal_point + 481711d6-f88e-4a03-84ef-ba4314e6ab3f: + uuid: 481711d6-f88e-4a03-84ef-ba4314e6ab3f + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.hero_xl_2x.yml b/config/sync/image.style.hero_xl_2x.yml index 3b0adc7f6..ac0b03603 100644 --- a/config/sync/image.style.hero_xl_2x.yml +++ b/config/sync/image.style.hero_xl_2x.yml @@ -15,3 +15,9 @@ effects: width: 3072 height: 932 crop_type: focal_point + a13fd71a-b8ca-4ef8-bcf9-0b78a732df01: + uuid: a13fd71a-b8ca-4ef8-bcf9-0b78a732df01 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.large.yml b/config/sync/image.style.large.yml index 94b2ef487..1a3468ace 100644 --- a/config/sync/image.style.large.yml +++ b/config/sync/image.style.large.yml @@ -17,3 +17,9 @@ effects: width: 480 height: 480 crop_type: focal_point + e1eb279b-9d91-47ee-a8b0-acf4dafe076b: + uuid: e1eb279b-9d91-47ee-a8b0-acf4dafe076b + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.media_entity_browser_thumbnail.yml b/config/sync/image.style.media_entity_browser_thumbnail.yml index c851a63c9..f0e242786 100644 --- a/config/sync/image.style.media_entity_browser_thumbnail.yml +++ b/config/sync/image.style.media_entity_browser_thumbnail.yml @@ -17,3 +17,9 @@ effects: width: 350 height: 200 crop_type: focal_point + 2e96d10d-25a9-499a-8a56-7b560b81c257: + uuid: 2e96d10d-25a9-499a-8a56-7b560b81c257 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.media_library.yml b/config/sync/image.style.media_library.yml index ffaada986..0f4bfb067 100644 --- a/config/sync/image.style.media_library.yml +++ b/config/sync/image.style.media_library.yml @@ -18,3 +18,9 @@ effects: width: 220 height: 220 upscale: false + a3d694bc-5420-4898-bb2c-d083ca7ab306: + uuid: a3d694bc-5420-4898-bb2c-d083ca7ab306 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.medium.yml b/config/sync/image.style.medium.yml index bfe658637..03140d7d5 100644 --- a/config/sync/image.style.medium.yml +++ b/config/sync/image.style.medium.yml @@ -15,3 +15,9 @@ effects: width: 220 height: 220 upscale: false + 4afe0de5-587c-4c40-813b-23d7fbde9a0e: + uuid: 4afe0de5-587c-4c40-813b-23d7fbde9a0e + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.prose_image.yml b/config/sync/image.style.prose_image.yml index d0de4da3d..67d3333ac 100644 --- a/config/sync/image.style.prose_image.yml +++ b/config/sync/image.style.prose_image.yml @@ -13,3 +13,9 @@ effects: width: 768 height: null upscale: false + 20beb2f0-b7e1-4a35-9d15-ca54bc72a834: + uuid: 20beb2f0-b7e1-4a35-9d15-ca54bc72a834 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.prose_image_x2.yml b/config/sync/image.style.prose_image_x2.yml index cba7ff66b..881cff760 100644 --- a/config/sync/image.style.prose_image_x2.yml +++ b/config/sync/image.style.prose_image_x2.yml @@ -13,3 +13,9 @@ effects: width: 1536 height: null upscale: false + 17b5ae17-edbc-4fe4-aa84-6f1ea5eded91: + uuid: 17b5ae17-edbc-4fe4-aa84-6f1ea5eded91 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.quote_lg_1x.yml b/config/sync/image.style.quote_lg_1x.yml index a4a6ffc89..6e853e889 100644 --- a/config/sync/image.style.quote_lg_1x.yml +++ b/config/sync/image.style.quote_lg_1x.yml @@ -15,3 +15,9 @@ effects: width: 640 height: 400 crop_type: focal_point + 7e0a6e88-4e6b-4c17-9765-b12332a80188: + uuid: 7e0a6e88-4e6b-4c17-9765-b12332a80188 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.quote_lg_2x.yml b/config/sync/image.style.quote_lg_2x.yml index e15706a34..12b18ef4d 100644 --- a/config/sync/image.style.quote_lg_2x.yml +++ b/config/sync/image.style.quote_lg_2x.yml @@ -15,3 +15,9 @@ effects: width: 1280 height: 800 crop_type: focal_point + 9469d166-db60-43a5-9871-7effd378f084: + uuid: 9469d166-db60-43a5-9871-7effd378f084 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.quote_md_1x.yml b/config/sync/image.style.quote_md_1x.yml index a6ee4eaa2..523444011 100644 --- a/config/sync/image.style.quote_md_1x.yml +++ b/config/sync/image.style.quote_md_1x.yml @@ -15,3 +15,9 @@ effects: width: 512 height: 320 crop_type: focal_point + bc7da43a-1fb1-4506-a9f0-00fc8761c147: + uuid: bc7da43a-1fb1-4506-a9f0-00fc8761c147 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.quote_md_2x.yml b/config/sync/image.style.quote_md_2x.yml index 433ab3d43..d8d3af312 100644 --- a/config/sync/image.style.quote_md_2x.yml +++ b/config/sync/image.style.quote_md_2x.yml @@ -15,3 +15,9 @@ effects: width: 1024 height: 640 crop_type: focal_point + 76233d64-0175-465a-9089-15790bb88bbf: + uuid: 76233d64-0175-465a-9089-15790bb88bbf + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.quote_mobile_1x.yml b/config/sync/image.style.quote_mobile_1x.yml index 9d2eaff42..efdd6e96d 100644 --- a/config/sync/image.style.quote_mobile_1x.yml +++ b/config/sync/image.style.quote_mobile_1x.yml @@ -15,3 +15,9 @@ effects: width: 640 height: 200 crop_type: focal_point + 35eaa298-b20f-491c-a58c-d0ad238a0463: + uuid: 35eaa298-b20f-491c-a58c-d0ad238a0463 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.quote_mobile_2x.yml b/config/sync/image.style.quote_mobile_2x.yml index 40c3debfc..ac8f22d79 100644 --- a/config/sync/image.style.quote_mobile_2x.yml +++ b/config/sync/image.style.quote_mobile_2x.yml @@ -15,3 +15,9 @@ effects: width: 1280 height: 400 crop_type: focal_point + 8c08c569-070e-4f47-9eb2-06c8d430a579: + uuid: 8c08c569-070e-4f47-9eb2-06c8d430a579 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.quote_sm_1x.yml b/config/sync/image.style.quote_sm_1x.yml index b2f210288..15565fa43 100644 --- a/config/sync/image.style.quote_sm_1x.yml +++ b/config/sync/image.style.quote_sm_1x.yml @@ -15,3 +15,9 @@ effects: width: 768 height: 240 crop_type: focal_point + 69a9ac01-4511-4276-b66d-914fd4b250f9: + uuid: 69a9ac01-4511-4276-b66d-914fd4b250f9 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.quote_sm_2x.yml b/config/sync/image.style.quote_sm_2x.yml index ac0fdc0a1..6c9539f4a 100644 --- a/config/sync/image.style.quote_sm_2x.yml +++ b/config/sync/image.style.quote_sm_2x.yml @@ -15,3 +15,9 @@ effects: width: 1536 height: 480 crop_type: focal_point + 6aa94ff0-845c-4aca-aa33-6bf7db0b4db3: + uuid: 6aa94ff0-845c-4aca-aa33-6bf7db0b4db3 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.quote_xl_1x.yml b/config/sync/image.style.quote_xl_1x.yml index ffd57a671..3f5c6f67b 100644 --- a/config/sync/image.style.quote_xl_1x.yml +++ b/config/sync/image.style.quote_xl_1x.yml @@ -15,3 +15,9 @@ effects: width: 768 height: 400 crop_type: focal_point + b6573460-ebc9-4bfd-9709-52910cf553bf: + uuid: b6573460-ebc9-4bfd-9709-52910cf553bf + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.quote_xl_2x.yml b/config/sync/image.style.quote_xl_2x.yml index 77716a222..0edc48eed 100644 --- a/config/sync/image.style.quote_xl_2x.yml +++ b/config/sync/image.style.quote_xl_2x.yml @@ -15,3 +15,9 @@ effects: width: 1536 height: 400 crop_type: focal_point + 7f0a3bb1-45c8-42e7-ae08-d39af1890952: + uuid: 7f0a3bb1-45c8-42e7-ae08-d39af1890952 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/image.style.thumbnail.yml b/config/sync/image.style.thumbnail.yml index 1f2c21ff3..1d61e47f9 100644 --- a/config/sync/image.style.thumbnail.yml +++ b/config/sync/image.style.thumbnail.yml @@ -17,3 +17,9 @@ effects: width: 100 height: 100 crop_type: focal_point + 0715213a-db62-426e-9c71-2e0b179af050: + uuid: 0715213a-db62-426e-9c71-2e0b179af050 + id: image_convert + weight: 2 + data: + extension: webp diff --git a/config/sync/webp.settings.yml b/config/sync/webp.settings.yml deleted file mode 100644 index c7061c9a0..000000000 --- a/config/sync/webp.settings.yml +++ /dev/null @@ -1,3 +0,0 @@ -_core: - default_config_hash: 0ube66wBYymHixNiMD-uyY8Tjo8alYV3NII6dv5iBJ8 -quality: 75 diff --git a/config/sync/wpf.settings.yml b/config/sync/wpf.settings.yml new file mode 100644 index 000000000..8d92c59d4 --- /dev/null +++ b/config/sync/wpf.settings.yml @@ -0,0 +1,33 @@ +_core: + default_config_hash: Zz0MiEpGpRsSM81JunRrcLuDDV6mhBGcv-AJwlIzRdY +quality: 75 +styles: + disabled: + card: 0 + hero_lg_1x: 0 + hero_lg_2x: 0 + hero_md_1x: 0 + hero_md_2x: 0 + hero_mobile_1x: 0 + hero_mobile_2x: 0 + hero_sm_1x: 0 + hero_sm_2x: 0 + hero_xl_1x: 0 + hero_xl_2x: 0 + large: 0 + media_entity_browser_thumbnail: 0 + media_library: 0 + medium: 0 + prose_image: 0 + prose_image_x2: 0 + quote_lg_1x: 0 + quote_lg_2x: 0 + quote_md_1x: 0 + quote_md_2x: 0 + quote_mobile_1x: 0 + quote_mobile_2x: 0 + quote_sm_1x: 0 + quote_sm_2x: 0 + quote_xl_1x: 0 + quote_xl_2x: 0 + thumbnail: 0 diff --git a/robo-components/ThemeTrait.php b/robo-components/ThemeTrait.php index 72a796d05..345e7f479 100644 --- a/robo-components/ThemeTrait.php +++ b/robo-components/ThemeTrait.php @@ -71,6 +71,9 @@ private function doThemeCompile(bool $optimize = FALSE): void { $this->_copyDir(self::$themeBase . '/src/js', self::$themeBase . '/dist/js'); } + // Fonts. + $this->_copyDir(self::$themeBase . '/src/fonts', self::$themeBase . '/dist/fonts'); + // Images - Copy everything first. $this->_copyDir(self::$themeBase . '/src/images', self::$themeBase . '/dist/images'); diff --git a/web/modules/custom/server_general/src/ButtonTrait.php b/web/modules/custom/server_general/src/ButtonTrait.php index 9769b0a1c..b94eda636 100644 --- a/web/modules/custom/server_general/src/ButtonTrait.php +++ b/web/modules/custom/server_general/src/ButtonTrait.php @@ -22,8 +22,9 @@ trait ButtonTrait { * The button's title. * @param \Drupal\Core\Url $url * The button's URL as Url object. - * @param bool $is_primary - * Whether this is a primary button. Defaults to FALSE. + * @param string $button_type + * Type of button. Acceptable values: 'primary', 'secondary', 'tertiary'. + * Defaults to 'primary'. * @param string|null $icon * The name of the icon to add as prefix. Allowed values are: * - `download`. @@ -34,12 +35,16 @@ trait ButtonTrait { * @return array * The rendered button array. */ - protected function buildButton(array|string|TranslatableMarkup $title, Url $url, bool $is_primary = FALSE, ?string $icon = NULL, bool $open_new_tab = FALSE): array { + protected function buildButton(array|string|TranslatableMarkup $title, Url $url, string $button_type = 'primary', ?string $icon = NULL, bool $open_new_tab = FALSE): array { + $button_types = ['primary', 'secondary', 'tertiary']; + if (!in_array($button_type, $button_types)) { + $button_type = 'primary'; + } return [ '#theme' => 'server_theme_button', '#url' => $url, '#title' => $title, - '#is_primary' => $is_primary, + '#button_type' => $button_type, '#icon' => $icon, '#open_new_tab' => $open_new_tab, ]; diff --git a/web/modules/custom/server_general/src/ElementNodeNewsTrait.php b/web/modules/custom/server_general/src/ElementNodeNewsTrait.php index 91ea62058..915355523 100644 --- a/web/modules/custom/server_general/src/ElementNodeNewsTrait.php +++ b/web/modules/custom/server_general/src/ElementNodeNewsTrait.php @@ -129,10 +129,11 @@ private function buildMainAndSidebar(string $title, array $image, array $body, a // Get the tags, and social share. $sidebar_elements[] = $tags; - // Add a line separator above the social share buttons. - $sidebar_elements[] = $this->buildLineSeparator(); + // Add a line separator above the social share buttons when tags are added. + if (!empty($tags)) { + $sidebar_elements[] = $this->buildLineSeparator(); + } $sidebar_elements[] = $this->buildElementSocialShare($title, $url); - $sidebar_elements = $this->wrapContainerVerticalSpacing($sidebar_elements); return $this->buildElementLayoutMainAndSidebar( diff --git a/web/modules/custom/server_general/src/ElementTrait/CtaTrait.php b/web/modules/custom/server_general/src/ElementTrait/CtaTrait.php index 8141891c1..4d17ec678 100644 --- a/web/modules/custom/server_general/src/ElementTrait/CtaTrait.php +++ b/web/modules/custom/server_general/src/ElementTrait/CtaTrait.php @@ -44,7 +44,7 @@ protected function buildElementCta(string $title, array $body, Link $link): arra $elements[] = $this->wrapProseText($body); // Button. - $elements[] = $this->buildButton($link->getText(), $link->getUrl(), TRUE, NULL, $link->getUrl()->isExternal()); + $elements[] = $this->buildButton($link->getText(), $link->getUrl(), 'primary', NULL, $link->getUrl()->isExternal()); $elements = $this->wrapContainerVerticalSpacingBig($elements, 'center'); diff --git a/web/modules/custom/server_general/src/ElementTrait/ExpandingTextTrait.php b/web/modules/custom/server_general/src/ElementTrait/ExpandingTextTrait.php new file mode 100644 index 000000000..4b53f993b --- /dev/null +++ b/web/modules/custom/server_general/src/ElementTrait/ExpandingTextTrait.php @@ -0,0 +1,39 @@ + 'server_theme_element__expanding_text', + '#text' => $text, + '#lines_to_clamp' => $lines_to_clamp, + '#button_label_more' => $button_label_more, + '#button_label_less' => $button_label_less, + ]; + } + +} diff --git a/web/modules/custom/server_general/src/ElementTrait/HeroTrait.php b/web/modules/custom/server_general/src/ElementTrait/HeroTrait.php index d04eb2b10..baf57475c 100644 --- a/web/modules/custom/server_general/src/ElementTrait/HeroTrait.php +++ b/web/modules/custom/server_general/src/ElementTrait/HeroTrait.php @@ -45,7 +45,7 @@ protected function buildElementHeroImage(array $image, string $title, string $su // Button. if ($link) { - $elements[] = $this->buildButton($link->getText(), $link->getUrl(), TRUE, NULL, $link->getUrl()->isExternal()); + $elements[] = $this->buildButton($link->getText(), $link->getUrl(), 'primary', NULL, $link->getUrl()->isExternal()); } $elements = $this->wrapContainerVerticalSpacingBig($elements); diff --git a/web/modules/custom/server_style_guide/js/accordion.js b/web/modules/custom/server_style_guide/js/accordion.js index dd3f69422..cd6b4f355 100644 --- a/web/modules/custom/server_style_guide/js/accordion.js +++ b/web/modules/custom/server_style_guide/js/accordion.js @@ -21,6 +21,8 @@ } $slick.slick('setPosition'); }); + // Trigger resize. + $(window).trigger('resize'); }); // Check if hash exist, and if so try to open its pane. diff --git a/web/modules/custom/server_style_guide/src/Controller/StyleGuideController.php b/web/modules/custom/server_style_guide/src/Controller/StyleGuideController.php index 882130c23..79237e121 100644 --- a/web/modules/custom/server_style_guide/src/Controller/StyleGuideController.php +++ b/web/modules/custom/server_style_guide/src/Controller/StyleGuideController.php @@ -15,6 +15,7 @@ use Drupal\server_general\ElementTrait\CarouselTrait; use Drupal\server_general\ElementTrait\CtaTrait; use Drupal\server_general\ElementTrait\DocumentsTrait; +use Drupal\server_general\ElementTrait\ExpandingTextTrait; use Drupal\server_general\ElementTrait\HeroTrait; use Drupal\server_general\ElementTrait\InfoCardTrait; use Drupal\server_general\ElementTrait\NewsTeasersTrait; @@ -46,6 +47,7 @@ class StyleGuideController extends ControllerBase { use ElementNodeNewsTrait; use ElementLayoutTrait; use ElementWrapTrait; + use ExpandingTextTrait; use HeroTrait; use InfoCardTrait; use LinkTrait; @@ -146,6 +148,12 @@ protected function getAllElements() : array { $element = $this->getDocuments(); $build[] = $this->wrapElementNoContainer($element, 'Element: Documents list'); + $element = $this->getExpandingText(); + $build[] = $this->wrapElementNoContainer($element, 'Element: Expanding text'); + + $element = $this->getExpandingText(3, 'More', 'Less'); + $build[] = $this->wrapElementNoContainer($element, 'Element: Expanding text - 3 lines, custom buttons'); + $element = $this->getHeroImage(); $build[] = $this->wrapElementNoContainer($element, 'Element: Hero image'); @@ -499,13 +507,17 @@ protected function getButtons(): array { $url = Url::fromRoute(''); // Primary button with icon. - $element = $this->buildButton('Download file', $url, TRUE, 'download'); + $element = $this->buildButton($this->t('Download file'), $url, 'primary', 'download'); $build[] = $this->wrapElementWideContainer($element, 'Primary button'); // Secondary button. - $element = $this->buildButton('Register', $url, FALSE); + $element = $this->buildButton($this->t('Register'), $url, 'secondary'); $build[] = $this->wrapElementWideContainer($element, 'Secondary button'); + // Tertiary button. + $element = $this->buildButton($this->t('Login'), $url, 'tertiary'); + $build[] = $this->wrapElementWideContainer($element, 'Tertiary button'); + return $build; } @@ -758,11 +770,23 @@ protected function buildImage(string $url) { * A render array. */ protected function buildProcessedText(string $text) { - return [ + // Emulate core processed text by wrapping the text in div.text-formatted. + $element = [ + '#type' => 'container', + '#attributes' => [ + 'class' => [ + 'text-formatted', + ], + ], + ]; + + $element[] = [ '#type' => 'processed_text', '#text' => $text, '#format' => filter_default_format(), ]; + + return $element; } /** @@ -855,4 +879,17 @@ protected function getRelatedContent(int $num = 5, bool $is_featured = FALSE): a return $elements; } + /** + * Get a sample Expanding Text element. + * + * @return array + * The render array. + */ + protected function getExpandingText(?int $lines_to_clamp = NULL, ?string $button_label_more = NULL, ?string $button_label_less = NULL): array { + $element = ['#theme' => 'server_style_guide_text_styles']; + $element = $this->wrapProseText($element); + + return $this->wrapContainerWide($this->buildElementExpandingText($element, $lines_to_clamp, $button_label_more, $button_label_less)); + } + } diff --git a/web/modules/custom/server_style_guide/templates/server-style-guide-text-styles.html.twig b/web/modules/custom/server_style_guide/templates/server-style-guide-text-styles.html.twig index b6ba6815f..1e9b5ba78 100644 --- a/web/modules/custom/server_style_guide/templates/server-style-guide-text-styles.html.twig +++ b/web/modules/custom/server_style_guide/templates/server-style-guide-text-styles.html.twig @@ -1,61 +1,84 @@ -

This is an example for h1

-

This is an example for h2

-

This is an example for h3

-

This is an example for h4

-
This is an example for h5
- - - -
    -
  1. Item 1
    2. -
  2. Item 2
    3. -
  3. Item 3
    4. -
- -

- This is a long paragraph that has some text. - Opulence to into a never no unprofitable a and the much she musical someone - she turner eating I text agreed terms, higher to cache thoughts up, common - ever better work, that been a ages, behind of make one vows, shut as much - shown horses he essential loyalty. That is it an almost clean set the her so - there out throughout. And feel make mouth. In somewhere, way. Was the - intrigued sovereignty. That by he sign such, win promptness he of stiff. -

- -
- This is a blockquote. -
- -
- This is a link -
+
+

This is an example for h1

+

This is an example for h2

+

This is an example for h3

+

This is an example for h4

+
This is an example for h5
-
- This is bold text -
+ -
- This is italic text -
+
    +
  1. Item 1
    2. +
  2. Item 2
    3. +
  3. Item 3
    4. +
-
- This is deleted text -
+

+ This is a long paragraph that has some text. + Opulence to into a never no unprofitable a and the much she musical someone + she turner eating I text agreed terms, higher to cache thoughts up, common + ever better work, that been a ages, behind of make one vows, shut as much + shown horses he essential loyalty. That is it an almost clean set the her so + there out throughout. And feel make mouth. In somewhere, way. Was the + intrigued sovereignty. That by he sign such, win promptness he of stiff. +

-
- This is inserted text -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Col 1This is an example of a really long table headerColumn 3Miscellaneous
Side header 1Data 1Data 1Data 1
Side header 2Data 2Data 2Data 2
Side header 3Data 3Data 3Data 3
-
- This is superscript text -
+
+ This is a blockquote. +
-
- This is subscript text -
+

+ This is a link +

+ +

+ This is bold text +

+

+ This is italic text +

+

+ This is superscript text +

+ +

+ This is subscript text +

+
diff --git a/web/themes/custom/server_theme/package-lock.json b/web/themes/custom/server_theme/package-lock.json index 5286f3f50..ab6626ac8 100644 --- a/web/themes/custom/server_theme/package-lock.json +++ b/web/themes/custom/server_theme/package-lock.json @@ -6,7 +6,6 @@ "": { "devDependencies": { "@tailwindcss/forms": "^0.5.3", - "@tailwindcss/typography": "^0.5.7", "autoprefixer": "^10.4.12", "cssnano": "^5.1.13", "minify": "^9.1.0", @@ -407,21 +406,6 @@ "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1" } }, - "node_modules/@tailwindcss/typography": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.7.tgz", - "integrity": "sha512-JTTSTrgZfp6Ki4svhPA4mkd9nmQ/j9EfE7SbHJ1cLtthKkpW2OxsFXzSmxbhYbEkfNIyAyhle5p4SYyKRbz/jg==", - "dev": true, - "dependencies": { - "lodash.castarray": "^4.4.0", - "lodash.isplainobject": "^4.0.6", - "lodash.merge": "^4.6.2", - "postcss-selector-parser": "6.0.10" - }, - "peerDependencies": { - "tailwindcss": ">=3.0.0 || insiders" - } - }, "node_modules/@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", @@ -1534,12 +1518,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/lodash.castarray": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", - "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", - "dev": true - }, "node_modules/lodash.difference": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz", @@ -1564,24 +1542,12 @@ "integrity": "sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=", "dev": true }, - "node_modules/lodash.isplainobject": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", - "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", - "dev": true - }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==", "dev": true }, - "node_modules/lodash.merge": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", - "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", - "dev": true - }, "node_modules/lodash.sortby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", @@ -4043,18 +4009,6 @@ "mini-svg-data-uri": "^1.2.3" } }, - "@tailwindcss/typography": { - "version": "0.5.7", - "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.7.tgz", - "integrity": "sha512-JTTSTrgZfp6Ki4svhPA4mkd9nmQ/j9EfE7SbHJ1cLtthKkpW2OxsFXzSmxbhYbEkfNIyAyhle5p4SYyKRbz/jg==", - "dev": true, - "requires": { - "lodash.castarray": "^4.4.0", - "lodash.isplainobject": "^4.0.6", - "lodash.merge": "^4.6.2", - "postcss-selector-parser": "6.0.10" - } - }, "@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", @@ -4843,12 +4797,6 @@ "p-locate": "^6.0.0" } }, - "lodash.castarray": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", - "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==", - "dev": true - }, "lodash.difference": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz", @@ -4873,24 +4821,12 @@ "integrity": "sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=", "dev": true }, - "lodash.isplainobject": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", - "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", - "dev": true - }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==", "dev": true }, - "lodash.merge": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", - "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", - "dev": true - }, "lodash.sortby": { "version": "4.7.0", "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", diff --git a/web/themes/custom/server_theme/package.json b/web/themes/custom/server_theme/package.json index f624eedd5..626cd6c95 100644 --- a/web/themes/custom/server_theme/package.json +++ b/web/themes/custom/server_theme/package.json @@ -2,7 +2,6 @@ "scripts": {}, "devDependencies": { "@tailwindcss/forms": "^0.5.3", - "@tailwindcss/typography": "^0.5.7", "autoprefixer": "^10.4.12", "cssnano": "^5.1.13", "minify": "^9.1.0", diff --git a/web/themes/custom/server_theme/server_theme.libraries.yml b/web/themes/custom/server_theme/server_theme.libraries.yml index 8594d955c..ebebd4648 100644 --- a/web/themes/custom/server_theme/server_theme.libraries.yml +++ b/web/themes/custom/server_theme/server_theme.libraries.yml @@ -80,3 +80,11 @@ messages: dist/js/messages.js: {} dependencies: - core/drupal + +expanding-text: + js: + dist/js/expanding-text.js: {} + dependencies: + - core/drupal + - core/jquery + - core/once diff --git a/web/themes/custom/server_theme/server_theme.theme b/web/themes/custom/server_theme/server_theme.theme index a284cace5..64e2bc068 100644 --- a/web/themes/custom/server_theme/server_theme.theme +++ b/web/themes/custom/server_theme/server_theme.theme @@ -271,8 +271,8 @@ function server_theme_theme() { 'url' => NULL, // The button's text. 'title' => NULL, - // Indicate if button should be primary or secondary. - 'is_primary' => NULL, + // Specify button type. One of: 'primary', 'secondary' or 'tertiary'. + 'button_type' => NULL, // Specify an icon. Any icon should be added as SVG in // `server-theme-button`. 'icon' => NULL, @@ -468,6 +468,20 @@ function server_theme_theme() { ], ]; + // An element which displays clamped text with "Read more" option. + $info['server_theme_element__expanding_text'] = [ + 'variables' => [ + // This needs to be a processed text wrapped with `text-formatted` class + // (i.e., a processed text field type). + 'text' => NULL, + // Customize the Read more/less button text if needed. + 'button_label_more' => NULL, + 'button_label_less' => NULL, + // Customize how much clamping is done. 1 to 6. Default is 6. + 'lines_to_clamp' => NULL, + ], + ]; + // Media document. $info['server_theme_media__document'] = [ 'variables' => [ diff --git a/web/themes/custom/server_theme/src/js/expanding-text.js b/web/themes/custom/server_theme/src/js/expanding-text.js new file mode 100644 index 000000000..de3dd1419 --- /dev/null +++ b/web/themes/custom/server_theme/src/js/expanding-text.js @@ -0,0 +1,43 @@ +/** + * @file + * JS for button controls. + */ +(function ($, Drupal, once) { + Drupal.behaviors.expandingText = { + attach: function(context, settings) { + const $expandingText = $(once('expanding-text', '.js-expanding-text', context)); + if (!$expandingText.length) { + return; + } + + const checkExpandingText = function() { + $expandingText.each(function () { + const $text = $(this).find('.text-formatted'); + if (!$text.length) { + return; + } + const $button = $(this).find('button'); + const $textHeight = $text.height(); + const $textScrollHeight = $text.prop('scrollHeight'); + + // If the text was clamped, the scrollHeight will be higher than the + // height. + if ($textHeight < $textScrollHeight) { + // Text is clamped, if the button's hidden, reveal it. + if ($button.hasClass('hidden')) { + $button.removeClass('hidden'); + } + return; + } + + // Text is not clamped, hide the button. + $button.addClass('hidden'); + }); + } + + checkExpandingText(); + + $(window).on('resize', checkExpandingText); + } + } +})(jQuery, Drupal, once); diff --git a/web/themes/custom/server_theme/src/js/toggler.js b/web/themes/custom/server_theme/src/js/toggler.js index 8f84f07e3..47c3dda0d 100644 --- a/web/themes/custom/server_theme/src/js/toggler.js +++ b/web/themes/custom/server_theme/src/js/toggler.js @@ -25,7 +25,16 @@ if (!$target.length) { return; } - $target.toggleClass('hidden'); + + // Sometimes we don't want to toggle .hidden class. In such cases you + // can add data-toggle-strategy="aria-expanded" to the button, and this + // will instead toggle the aria-expanded property on the target element. + if ($this.data('toggleStrategy') === 'aria-expanded') { + $target.attr('aria-expanded', $target.attr('aria-expanded') === 'true' ? 'false' : 'true') + } + else { + $target.toggleClass('hidden'); + } $this.attr('aria-expanded', $this.attr('aria-expanded') === 'true' ? 'false' : 'true'); // Handle has-scroll class. It's nice to know element has scrollbar diff --git a/web/themes/custom/server_theme/src/pcss/typography.pcss b/web/themes/custom/server_theme/src/pcss/typography.pcss index 2c813a2ed..4e1ebebd7 100644 --- a/web/themes/custom/server_theme/src/pcss/typography.pcss +++ b/web/themes/custom/server_theme/src/pcss/typography.pcss @@ -14,16 +14,118 @@ body { @apply text-gray-900; } -// Remove the top/ bottom margin from the first/ last element of a prose. -.prose .text-formatted > :first-child { - @apply mt-0; -} +.prose { + // Apply default spacing to all formatted text elements. + .text-formatted > * { + @apply my-5 md:my-6 lg:my-8; + } -.prose .text-formatted > :last-child { - @apply mb-0; -} + // Remove top margin from first element, and bottom margin from last element. + .text-formatted > :first-child { + @apply mt-0; + } + .text-formatted > :last-child { + @apply mb-0; + } + + // Remove margins from images. + figure, + img { + @apply my-0; + } + + // Styling for text elements. + h1 { + @apply text-4xl md:text-5xl lg:text-6xl font-bold; + } + + h2 { + @apply text-3xl md:text-4xl lg:text-5xl font-bold; + } + + h3 { + @apply text-2xl md:text-3xl lg:text-4xl font-bold; + } + + h4 { + @apply text-xl md:text-2xl lg:text-3xl font-bold; + } + + h5 { + @apply text-lg md:text-xl lg:text-2xl font-bold; + } + + h6 { + @apply text-lg md:text-xl lg:text-2xl; + } + + p, + ul, + ol, + blockquote { + @apply text-base lg:text-lg; + } + + ul, + ol { + @apply ps-6 md:ps-8 lg:ps-10; + + li { + @apply my-1 md:my-2 lg:my-3 marker:text-gray-500; + } + } + + ul { + @apply list-disc; + } + + ol { + @apply list-decimal; + } + + a { + @apply underline decoration-2 underline-offset-4 decoration-blue-500 hover:decoration-emerald-900 hover:underline-offset-6 focus-visible:decoration-emerald-900 focus-visible:underline-offset-6 transition-all duration-300; + } + + blockquote { + @apply ps-4 md:ps-5 lg:ps-6 border-s-4 border-slate-400; + } + + table { + @apply table-auto w-full text-sm lg:text-base; + + thead tr { + @apply border-b-2 border-gray-200 bg-gray-300; + } + + th { + @apply align-bottom font-bold; + } + + td { + @apply align-top; + } + + th, + td { + @apply py-1 md:py-2 px-1 text-start; + } + + tbody { + @apply border-b-2 border-gray-200; + } + + tbody tr { + @apply border-b border-gray-100; + + &:hover { + @apply bg-lime-100; + } + } + + } -.prose .text-formatted figure, -.prose .text-formatted img { - @apply my-0; } + + + diff --git a/web/themes/custom/server_theme/tailwind.config.js b/web/themes/custom/server_theme/tailwind.config.js index 832867be8..058a0dac5 100644 --- a/web/themes/custom/server_theme/tailwind.config.js +++ b/web/themes/custom/server_theme/tailwind.config.js @@ -4,8 +4,11 @@ module.exports = { theme: { extend: { maxWidth: { - '8xl': '90rem', + '8xl': '90rem' }, + textUnderlineOffset: { + '6': '6px' + } }, fontFamily: { 'headers': ["Roboto", 'sans-serif'], @@ -29,6 +32,5 @@ module.exports = { ], plugins: [ require('@tailwindcss/forms'), - require('@tailwindcss/typography'), ], }; diff --git a/web/themes/custom/server_theme/templates/page.html.twig b/web/themes/custom/server_theme/templates/page.html.twig index 5a864e7f7..9ed1e483b 100644 --- a/web/themes/custom/server_theme/templates/page.html.twig +++ b/web/themes/custom/server_theme/templates/page.html.twig @@ -42,7 +42,7 @@ * @see html.html.twig */ #} -
+