Base Assets repo to be shared by Drupal and WP

[JulesKhong]

Description

Base tokens, tailwind components, components and blocks will live in two places: base Drupal theme and base WP theme. Are there pieces that could be shared, and put into another repo? Are there ways to make these more maintainable

Dev

• Review file structure
• Write up a proposed solution
• Test a proof of concept
• Create third repo, move files into it
• remove shared files from WP theme, potentially create new starter theme repos
• remove shared files from Drupal theme, clean up @mariacha
• Discuss naming convention for repos 😂 (here in slack)
• Write documentation
• Update setup instructions in the library
• Dev team meeting, loop in the team on Monday to share concept, ask for input and questions

We have a base build in the WP base theme, but it also needs to live in FORUM and Drupal soon for some upcoming work.
Do we have a separate repo? Is there a smart way to pull in directories based on whether you’re in WP or Drupal? How do we make maintaining the base build and adding to it as streamlined as possible?

SHARED FILES/DIRECTORIES: In the BASE BUILD theme for Drupal and WP

• Tokens:https://github.com/thinkshout/thinkwp-starter-theme/tree/main/tokens

• Assets: https://github.com/thinkshout/thinkwp-starter-theme/tree/main/assets (css/js)

• Views > Cards https://github.com/thinkshout/thinkwp-starter-theme/tree/low-code-base-theme/views/cards

• Views > Btns https://github.com/thinkshout/thinkwp-starter-theme/tree/low-code-base-theme/views/btns

• Views > Blocks (exact same except where we define field values) https://github.com/thinkshout/thinkwp-starter-theme/tree/low-code-base-theme/views/blocks

• Views > _styleguide_sections https://github.com/thinkshout/thinkwp-starter-theme/tree/low-code-base-theme/views/_styleguide_sections

• tailwind.config.js https://github.com/thinkshout/thinkwp-starter-theme/blob/low-code-base-theme/tailwind.config.js

• style dictionary: https://github.com/thinkshout/thinkwp-starter-theme/blob/low-code-base-theme/style-dictionary.config.js

• Style guide page: https://github.com/thinkshout/thinkwp-starter-theme/blob/low-code-base-theme/views/pages/page-style-guide.twig

Things that are different: field data values on the views/block/* directories for each block. Do we have a WP one and a Drupal one and you delete the ones not in use? (edited)

[mariacha]

I'm interested in helping with this, but will need guidance on what to do!

[JulesKhong]

Test Base Script (test-base-script)

p: login

Step 1: Use Pantheon Build tools to create the project.

Create the new project, based off of the Pantheon Build tools:

• Make sure you have the correct terminus plugin installed. More information about that is found on the Pantheon web site.
• Create your site.
• Drupal version: COMPOSER_MEMORY_LIMIT=-1 terminus build:project:create --team='ThinkShout' --org='thinkshout' --visibility='private' d9 YOURSITENAME.
• Wordpress version: COMPOSER_MEMORY_LIMIT=-1 terminus build:project:create --team='ThinkShout' --org='thinkshout' --visibility='private' wp test-base-script.
• Once you’ve finished this, you should be able to visit your site at https://dev-test-base-script.pantheonsite.io/ in a browser AND visit https://github.com/thinkshout/test-base-script on Github.
• Move your pantheon database from dev -> test -> live

At this point, the following things should be true. Stop and check:

• There is a site at https://live-test-base-script.pantheonsite.io/
• There is a PRIVATE repo at https://github.com/thinkshout/test-base-script. You can move the contents of this ticket into your new repo now, and keep following along.
• This is also a good time to remove any steps below that are not relevant to your project (if his is Drupal, take out any Wordpress steps, and vice versa)

Step 2. Customize the repo

There are a handful of things we always do on sites. This set of instructions takes care of that.

Replace Master branch with Main

• Change the main branch from "master" to "main" at https://github.com/thinkshout/test-base-script/settings/branches
• Clone down the site into the ~/Sites directory locally: git clone test-base-script
• Update the .circleci/config.yml file. Update the default branch from "master" to "main" by adding this line: "DEFAULT_BRANCH: main" under "TERM: dumb"
• Find/replace any versions of "master" with "main" in the .circleci/config.yml file.

Give ownership to ThinkShout

• Use the Organization's settings instead of yours for deploys. See https://library.thinkshoutlabs.com/articles/how-change-owner-pantheon-build-tools for full instructions

Add Drupal integrations (Drupal only)

• Require the Drupal Integrations project by requiring it: composer require thinkshout/drupal-integrations
• In your composer.json file, under "extra" -> "drupal-scaffold" -> "allowed-packages" add "thinkshout/drupal-integrations"
• Remove .ci/build/.gitignore. We want to commit this file.
• Delete your web/sites/default/settings.php file and run composer install to pull in the settings.php file from https://github.com/thinkshout/drupal-integrations/blob/main/assets/web/sites/default/settings.php

Preserve the develop branch

• In your ".circleci/config.yml" file, find/replace any of these commands "command: /build-tools-ci/scripts/set-environment" with "command: ./.ci/build/multidev-save"
• Change the ".ci/build/multidev-save" permission level to 755: chmod 755 .ci/build/multidev-save

Git-Ignore some useful things

• In your .gitignore file, uncomment the line to ignore .idea files /.idea/, or add it to the bottom of your root .gitignore file.

Add helpful packages to composer.json (Drupal version)

• Do the following to add useful modules to the development package list:
  composer require --dev drupal/config_suite drupal/field_tools drupal/stage_file_proxy zaporylie/composer-drupal-optimizations
• Do the following to add useful modules to the regular package list:
  composer require drupal/admin_toolbar drupal/config_split drupal/editor_advanced_link drupal/email_registration drupal/fast_404 drupal/field_group drupal/honeypot drupal/inline_entity_form drupal/menu_block drupal/metatag drupal/pathauto drupal/redirect drupal/redis drupal/simple_sitemap drupal/smart_trim drush/drush drupal/allowed_formats drupal/file_delete drupal/webp drupal/pantheon_advanced_page_cache

Make your code sniffer smarter

• For phpcs improvements: In your composer.json, delete the "css", "text", and "md" entries from your extensions list:
  --extensions=php,module,inc,install,test,profile,theme,info
• Copy your "code-sniff" section of your composer.json file into a duplicate "code-sniff-fix" section, and change all phpcs to phpcbf example from Drupal:
  "code-sniff-fix": [
".\/vendor\/bin\/phpcbf --standard=Drupal --extensions=php,module,inc,install,test,profile,theme,info --ignore=node_modules,bower_components,vendor .\/web\/modules\/custom",
".\/vendor\/bin\/phpcbf --standard=Drupal --extensions=php,module,inc,install,test,profile,theme,info --ignore=node_modules,bower_components,vendor .\/web\/themes\/custom",
".\/vendor\/bin\/phpcbf --standard=DrupalPractice --extensions=php,module,inc,install,test,profile,theme,info --ignore=node_modules,bower_components,vendor .\/web\/modules\/custom",
".\/vendor\/bin\/phpcbf --standard=DrupalPractice --extensions=php,module,inc,install,test,profile,theme,info --ignore=node_modules,bower_components,vendor .\/web\/themes\/custom"
]

Make your README real (Drupal version)

• Update the README: Pull over the code after "Customize code below" in the README.md.orig, and paste it at the bottom of your README.md file. Change any "new-project-name" values to your repo's name.

Improve your Visual Regression reliability

• In .ci/test/visual-regression/backstopConfig.js update a few settings: delay: 5000, and asyncCompareLimit: 10`.
• In .ci/test/visual-regression/run delete the piece starting with # Always run visual tests if "[vr]" is in the last commit message and ending right before # Ping the multidev environment to wake it from sleep -- this code keeps VR tests from running at weird times.

Add Robo (Drupal only):

• Follow the installation instructions at https://github.com/thinkshout/robo-drupal#installation (you can copy and paste the steps to this ticket and check them off one at a time for your convenience).

Create your local site connection (Wordpress only)

• Create a .env.sample file in the root's repository with the following values, replacing "name-of-your-site" with the actual values:
  TERMINUS_SITE=test-base-script
DB_NAME=test-base-script
DB_USER=root
DB_PASSWORD=root
DB_HOST=localhost
WP_HOME=https://web.test-base-script.localhost/
# Generate your keys here: https://roots.io/salts.html
AUTH_KEY='generateme'
SECURE_AUTH_KEY='generateme'
LOGGED_IN_KEY='generateme'
NONCE_KEY='generateme'
AUTH_SALT='generateme'
SECURE_AUTH_SALT='generateme'
LOGGED_IN_SALT='generateme'
NONCE_SALT='generateme'
• Use Terminus to set a secure username and password for the wp admin. In the sample below, update "test-base-script" and the "user_pass" to a strong generated password (you can use 1Password to generate it): terminus wp test-base-script.live-- user update 1 --user_pass="some-generated-password"
• Update your README.md file with information on how other devs can build the repositories. You can start with the README template found https://library.thinkshoutlabs.com/articles/wordpress-setup-documentation, customized to work.
• Follow the README's steps to get a local site install that works.

Step 3. Configure Circle CI options

To get Circle to behave the way we want it, it's helpful to set some options in the Circle project that Pantheon created as part of the script you ran above.

• Log in to https://app.circleci.com/ and find your project in there. The URL will be something like "https://app.circleci.com/pipelines/github/thinkshout/test-base-script".
• Click the "Project Settings" on the top right to get to your configuration screen.
• Under "Advanced" check "Only build pull requests": this prevents Circle from filling up your multidevs with "ci-###" instances for every branch that gets pushed to Github.

Step 4. Set up the Wiki on github

• Create a "Documents" page on the project's wiki.
• Following these instructions: https://docs.google.com/document/d/1hmPswNOk_-w4FdYXM57IpwgZ-rufy7c6Lr9XA_CZBG8/edit to create a Content Editor's Guide and add it to the Documents page
• Following these instructions: https://docs.google.com/document/d/1hmPswNOk_-w4FdYXM57IpwgZ-rufy7c6Lr9XA_CZBG8/edit to create a Project Build and Launch checklist and add it to the Documents page
• (Drupal only) Add to the Documents page the Build Spec
  Copy https://docs.google.com/spreadsheets/d/1bCTyR0BXPnnG78lvGAJPDesyZeivipX9HmCSP-_2LLM/edit#gid=0 and saving in your client's google drive folder, then add it to the Add to the Documents as the Build Spec
• If this site will have a migration, create the Content Type Level Audit & Field mapping by copying https://docs.google.com/spreadsheets/d/1BzYDdkN8oRptebJhD4ZHBFDGn5FeQUEwDJoMDP21FRc/edit#gid=107374375 and saving in your client's google drive folder. Add a link to that on your Documents page.
• Make the link to this Documents page the "Topic" of your slack channel for this project.

Step 5. Slack integration (optional)

• If it doesn't already exist, create a PROJECT-dev channel on slack, where notifications about Github can go.
• Type /github subscribe thinkshout/test-base-script pulls,issues into the new slack channel to start seeing notifications about github activity on your project.

Step 6. Create your theme

(Drupal version)

• Clone the repo at https://github.com/thinkshout/ts_motif into you theme folder:
  cd ~/Sites/YOURSITE/web/themes/custom
git clone https://github.com/thinkshout/ts_motif
rm -rf ts_motif/.git
• Enable the ts_styleguide module (which should be part of the drupal-project repo)
• Update the variables at the top of web/themes/custom/ts_motif/templates/_includes/styleguide.html.twig to customize your styleguide based on the designs. Or hand this off as a ticket for a front-end person to do later.

(Wordpress version)

• Navigate to your theme folder ~/sites/YOURSITE/web/wp-content/themes/
• Create a new folder custom/
• Download a copy of the TS WP starter theme
• Extract and rename it and then navigate to the newly added theme mv thinkwp-starter-theme-master ts_YOURSITE, cd ts_YOURSITE
• Update the theme name to your project name ./update_theme_name.sh ts_YOURSITE
• Run npm install
• In your admin panel, go to Appearance > Themes
• Find your new theme and click Activate to use your new theme right away.

Step 7. Compile your theme with circle

Instead of committing our css files directly to our repo, we are compiling them with node on circle. To do that, add the following to your ".circleci/config" file.

• Find the "configure_env_vars" job -- it's right at the beginning of the jobs list. Add the following steps, overwriting the persist_to_workspace step that already exists: (Note that the image here is for node 16. You can update it to whatever version of node you'd like your site to be running):

- run:
name: Install n and switch to 16
command: npm install -g n && n 16
- run:
name: Compile the theme
command: cd web/themes/custom/your_theme && npm ci
- run:
name: Format code
command: cd web/themes/custom/your_theme && npm run theme.bundle.prod
- persist_to_workspace:
root: .
paths:
- bash_env.txt
- web/themes/custom/your_theme

• If your "deploy_to_pantheon" job doesn't have a "name: sync build artifact" step, add one right before "# Deploy to Pantheon". This syncs the compiled node directory to Pantheon:
  # Rsync the build artifact pieces web directory
- run:
name: sync build artifact
command: rsync -rz /tmp/web .

• Check your ".gitignores". If your theme is gitignoring items that need to be built on Pantheon, you'll need to move those to the site's root .gitignore, placing them above the cut line # :::::::::::::::::::::: cut ::::::::::::::::::::::". This will keep these out of github, but commit them to Pantheon. Usually this is just your theme's "dist" folder.

Step 8. Set up auto-config-export (Drupal only)

You should already have a lot of the items in place to use config_suite, but to get things properly set up do the following:

• Enable the following modules: drush en config_split config_suite
• Go to /admin/config/development/configuration/config-split and set up a "Local" config split file. Set its path to "../config-local"
• On /admin/config/development/configuration/config-split/local/edit add the "Config Suite" module to the "Complete Split" section..
• Repeat the "Enable"-then-"Add to Complete split"-steps for any local development modules, like Stage File Proxy, Devel, and Field Tools.

Step 9: Tell ThinkShout about your project

• The support team, managers, and team leads use this spreadsheet to keep track of all our projects. Add a line to this spreadsheet for the project you just created!

​

[JulesKhong]

This work proof of concept was done in this ticket, but remaining items are in #77