From b82756cc1018ddd7038c57c054b3d6b877dd11ae Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 15 Mar 2021 22:48:20 -0400 Subject: [PATCH 01/12] Fix webpack buildchain pipeline Signed-off-by: Andrew Welch --- buddy.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/buddy.yml b/buddy.yml index e4f2e13..600efb4 100644 --- a/buddy.yml +++ b/buddy.yml @@ -7,15 +7,15 @@ actions: - action: "Execute: webpack build" type: "BUILD" - working_directory: "/buddy/$PROJECT_SHORTNAME" - docker_image_name: "nystudio107/webpack-dev-base" - docker_image_tag: "latest" + working_directory: "/buddy/${PROJECT_SHORTNAME}" + docker_image_name: "nystudio107/node-dev-base" + docker_image_tag: "14-alpine" execute_commands: - "cd buildchain" - - "npm ci" + - "npm install" - "npm run build" volume_mappings: - - "/:/buddy/$PROJECT_SHORTNAME" + - "/:/buddy/${PROJECT_SHORTNAME}" trigger_condition: "ALWAYS" shell: "BASH" - action: "Execute: composer install" From a1a2db9e37d22029b711267257a2f84a17bceb15 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 15 Mar 2021 22:49:45 -0400 Subject: [PATCH 02/12] Version 2.4.27 Signed-off-by: Andrew Welch --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7caeb11..e9e3d73 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # nystudio107/craft Change Log +## 2.4.27 - UNRELEASED +### Fixed +* Fix webpack buildchain pipeline + ## 2.4.26 - 2021.03.07 ### Changed * Use aliases for import paths From 8829821b575f648ba1b50e14652d79c1ea7c010c Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 15 Mar 2021 23:06:28 -0400 Subject: [PATCH 03/12] Use @tailwindcss/jit Signed-off-by: Andrew Welch --- buildchain/package.json | 3 ++- .../webpack-configs/postcss-loader.config.js | 4 +-- buildchain/webpack-settings/app.settings.js | 4 +-- docker-config/node-dev-webpack/Dockerfile | 2 +- src/css/app-base.pcss | 11 -------- src/css/app-utilities.pcss | 12 --------- src/css/{app-components.pcss => app.pcss} | 25 +++++++++++++++++++ 7 files changed, 31 insertions(+), 30 deletions(-) delete mode 100644 src/css/app-base.pcss delete mode 100644 src/css/app-utilities.pcss rename src/css/{app-components.pcss => app.pcss} (50%) diff --git a/buildchain/package.json b/buildchain/package.json index 7c530c0..277ee24 100644 --- a/buildchain/package.json +++ b/buildchain/package.json @@ -44,7 +44,6 @@ }, "description": "Example Project brand website", "devDependencies": { - "autoprefixer": "^10.0.0", "@babel/core": "^7.12.3", "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1", @@ -57,11 +56,13 @@ "@babel/register": "^7.12.1", "@babel/runtime": "^7.12.1", "@gfx/zopfli": "^1.0.15", + "@tailwindcss/jit": "latest", "@types/node": "^14.11.10", "@types/webpack-env": "^1.15.3", "@typescript-eslint/eslint-plugin": "^3.6.1", "@typescript-eslint/parser": "^3.6.1", "@vue/compiler-sfc": "^3.0.1", + "autoprefixer": "^10.0.0", "babel-loader": "^8.1.0", "clean-webpack-plugin": "^3.0.0", "compression-webpack-plugin": "^6.0.0", diff --git a/buildchain/webpack-configs/postcss-loader.config.js b/buildchain/webpack-configs/postcss-loader.config.js index debf85f..85d2457 100644 --- a/buildchain/webpack-configs/postcss-loader.config.js +++ b/buildchain/webpack-configs/postcss-loader.config.js @@ -6,7 +6,7 @@ const path = require('path'); // webpack plugins const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const TailwindCss = require('tailwindcss'); +const TailwindCssJit = require('@tailwindcss/jit'); // return a webpack config // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -37,7 +37,7 @@ module.exports = (type = 'modern', settings) => { ['postcss-import', { path: ['./node_modules'], }], - TailwindCss('./tailwind.config.js'), + TailwindCssJit('./tailwind.config.js'), ['postcss-mixins', { }], ['postcss-nested', { diff --git a/buildchain/webpack-settings/app.settings.js b/buildchain/webpack-settings/app.settings.js index 7c23924..f90668f 100644 --- a/buildchain/webpack-settings/app.settings.js +++ b/buildchain/webpack-settings/app.settings.js @@ -13,9 +13,7 @@ module.exports = { entry: { 'app': [ '@/js/app.ts', - '@/css/app-base.pcss', - '@/css/app-components.pcss', - '@/css/app-utilities.pcss', + '@/css/app.pcss', ], 'lazysizes-wrapper': [ '@/js/utils/lazysizes-wrapper.ts', diff --git a/docker-config/node-dev-webpack/Dockerfile b/docker-config/node-dev-webpack/Dockerfile index 134ac4d..c79f1c8 100755 --- a/docker-config/node-dev-webpack/Dockerfile +++ b/docker-config/node-dev-webpack/Dockerfile @@ -1,4 +1,4 @@ -FROM nystudio107/node-dev-base:12-alpine +FROM nystudio107/node-dev-base:14-alpine WORKDIR /var/www/project/buildchain/ diff --git a/src/css/app-base.pcss b/src/css/app-base.pcss deleted file mode 100644 index b87fdc9..0000000 --- a/src/css/app-base.pcss +++ /dev/null @@ -1,11 +0,0 @@ -/** - * This injects Tailwind's base styles, which is a combination of - * Normalize.css and some additional base styles. - */ -@import 'tailwindcss/base'; - -/** - * Here we add custom base styles, applied after the tailwind-base - * classes - * - */ diff --git a/src/css/app-utilities.pcss b/src/css/app-utilities.pcss deleted file mode 100644 index b69634b..0000000 --- a/src/css/app-utilities.pcss +++ /dev/null @@ -1,12 +0,0 @@ -/** - * This injects all of Tailwind's utility classes, generated based on your - * config file. - * - */ -@import 'tailwindcss/utilities'; - -/** - * Include vendor css. - * - */ -@import 'vendor.pcss'; diff --git a/src/css/app-components.pcss b/src/css/app.pcss similarity index 50% rename from src/css/app-components.pcss rename to src/css/app.pcss index 4b6fd1f..cd62fdb 100644 --- a/src/css/app-components.pcss +++ b/src/css/app.pcss @@ -1,3 +1,15 @@ +/** + * This injects Tailwind's base styles, which is a combination of + * Normalize.css and some additional base styles. + */ +@import 'tailwindcss/base'; + +/** + * Here we add custom base styles, applied after the tailwind-base + * classes + * + */ + /** * This injects any component classes registered by plugins. * @@ -19,3 +31,16 @@ * */ @import './pages/homepage.pcss'; + +/** + * This injects all of Tailwind's utility classes, generated based on your + * config file. + * + */ +@import 'tailwindcss/utilities'; + +/** + * Include vendor css. + * + */ +@import 'vendor.pcss'; From ad017d7115dc5319cafa2d98b237f13955d6f320 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 15 Mar 2021 23:07:07 -0400 Subject: [PATCH 04/12] Version 2.4.27 Signed-off-by: Andrew Welch --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e9e3d73..366e375 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ # nystudio107/craft Change Log ## 2.4.27 - UNRELEASED +### Changed +* Use `@tailwindcss/jit` for the CSS generation + ### Fixed * Fix webpack buildchain pipeline From ca1095aacb76c0a0f5347e016aa58f483211d066 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Wed, 17 Mar 2021 06:16:50 -0400 Subject: [PATCH 05/12] Clean up the default buddy.yaml Signed-off-by: Andrew Welch --- buddy.yml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/buddy.yml b/buddy.yml index 600efb4..66fed64 100644 --- a/buddy.yml +++ b/buddy.yml @@ -30,8 +30,6 @@ - "echo \"memory_limit=-1\" >> /usr/local/etc/php/conf.d/buddy.ini" - "apk update && apk add git zip" - "curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer" - - "# php ext pdo_mysql" - - "docker-php-ext-install pdo_pgsql pgsql" volume_mappings: - "/:/buddy/$PROJECT_SHORTNAME" trigger_condition: "ALWAYS" @@ -111,7 +109,7 @@ channel_name: "nystudio107" trigger_condition: "ALWAYS" integration_hash: "5ef0d26820cfeb531cb10738" - - action: "Send notification to nystudio107 channel" + - action: "Send failure to nystudio107 channel" type: "SLACK" trigger_time: "ON_FAILURE" content: "[#$BUDDY_EXECUTION_ID] $BUDDY_EXECUTION_REVISION_SUBJECT - $BUDDY_EXECUTION_REVISION_COMMITTER_NAME" From 31a87e4647b7848e7fee74116d50c7b0e2f6d181 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Sun, 21 Mar 2021 18:25:37 -0400 Subject: [PATCH 06/12] Added `make` command aliases Signed-off-by: Andrew Welch --- Makefile | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 Makefile diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..a4fdf5e --- /dev/null +++ b/Makefile @@ -0,0 +1,20 @@ +CONTAINER?=$(shell basename $(CURDIR))_php_1 + +.PHONY: build dev pulldb restoredb up + +build: up + cd scripts/ && ./docker_prod_build.sh +dev: up + echo ${CONTAINER} +pulldb: up + cd scripts/ && ./docker_pull_db.sh +restoredb: up + cd scripts/ && ./docker_restore_db.sh \ + $(filter-out $@,$(MAKECMDGOALS)) +up: + if [ ! "$$(docker ps -q -f name=$${CONTAINER})" ]; then \ + docker-compose up; \ + fi +%: + @: +# ref: https://stackoverflow.com/questions/6273608/how-to-pass-argument-to-makefile-from-command-line From a87b71e07bb8ec7d39622acedd841e60bc738137 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Sun, 21 Mar 2021 18:26:09 -0400 Subject: [PATCH 07/12] Version 2.4.27 Signed-off-by: Andrew Welch --- CHANGELOG.md | 3 +++ README.md | 6 +++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 366e375..5414153 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ # nystudio107/craft Change Log ## 2.4.27 - UNRELEASED +### Added +* Added `make` command aliases + ### Changed * Use `@tailwindcss/jit` for the CSS generation diff --git a/README.md b/README.md index b2847b3..d29b90d 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ You'll need Docker desktop for your platform installed to run the project in loc * Set up a `.env` file in the `cms/` directory, based off of the provided `example.env` * Set up a `.env.sh.` file in the `scripts/` directory, based off of the provided `example.env.sh` -* Start up the site with `docker-compose up` (the first build will be somewhat lengthy) +* Start up the site with `make dev` (the first build will be somewhat lengthy) * Navigate to `http://localhost:8000` to use the site; the `webpack-dev-server` runs off of `http://localhost:8080` The CP login credentials are initially set as follows: @@ -71,13 +71,13 @@ Obviously change these to whatever you like as needed To update to the latest Composer packages (as constrained by the `cms/composer.json` semvers), do: ``` rm cms/composer.lock -docker-compose up +make dev ``` To update to the latest npm packages (as constrained by the `buildchain/package.json` semvers), do: ``` rm buildchain/package-lock.json -docker-compose up +make dev ``` To use Xdebug with VSCode install the [PHP Debug extension](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug ) and use the following configuration in your `.vscode/launch.json`: From e8ea673b0fbf9b4081c162782d4ebc48a7c89cb4 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 22 Mar 2021 09:02:15 -0400 Subject: [PATCH 08/12] =?UTF-8?q?Don=E2=80=99t=20echo=20the=20container=20?= =?UTF-8?q?name?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Makefile | 1 - 1 file changed, 1 deletion(-) diff --git a/Makefile b/Makefile index a4fdf5e..c628f44 100644 --- a/Makefile +++ b/Makefile @@ -5,7 +5,6 @@ CONTAINER?=$(shell basename $(CURDIR))_php_1 build: up cd scripts/ && ./docker_prod_build.sh dev: up - echo ${CONTAINER} pulldb: up cd scripts/ && ./docker_pull_db.sh restoredb: up From a80e93885de932bafd4d3ddf4248f19114dca164 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 22 Mar 2021 09:15:10 -0400 Subject: [PATCH 09/12] Updated README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d29b90d..b9afcd9 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ You'll need Docker desktop for your platform installed to run the project in loc * Set up a `.env` file in the `cms/` directory, based off of the provided `example.env` * Set up a `.env.sh.` file in the `scripts/` directory, based off of the provided `example.env.sh` -* Start up the site with `make dev` (the first build will be somewhat lengthy) +* Start up the site by typing `make dev` in terminal in the project's root directory (the first build will be somewhat lengthy) * Navigate to `http://localhost:8000` to use the site; the `webpack-dev-server` runs off of `http://localhost:8080` The CP login credentials are initially set as follows: @@ -66,7 +66,7 @@ Password: `letmein` Obviously change these to whatever you like as needed -**N.B.:** Without authorization & credentials (which are private), the `./docker_pull_db.sh` will not work. It's provided here for instructional purposes +**N.B.:** Without authorization & credentials (which are private), the `make pulldb` will not work (it just runs `scripts/docker_pull_db.sh`). It's provided here for instructional purposes. To update to the latest Composer packages (as constrained by the `cms/composer.json` semvers), do: ``` From c38bbe7e070606c311c14d60980aee4982dbb962 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 22 Mar 2021 09:16:29 -0400 Subject: [PATCH 10/12] Remove Slack integration --- buddy.yml | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/buddy.yml b/buddy.yml index 66fed64..693dd91 100644 --- a/buddy.yml +++ b/buddy.yml @@ -101,23 +101,6 @@ trigger_condition: "ALWAYS" run_as_script: true shell: "BASH" - - action: "Send notification to nystudio107 channel" - type: "SLACK" - content: "[#$BUDDY_EXECUTION_ID] $BUDDY_EXECUTION_REVISION_SUBJECT - $BUDDY_EXECUTION_REVISION_COMMITTER_NAME" - blocks: "[{\"type\":\"section\",\"fields\":[{\"type\":\"mrkdwn\",\"text\":\"*Successful execution:* <$BUDDY_EXECUTION_URL|Execution #$BUDDY_EXECUTION_ID $BUDDY_EXECUTION_COMMENT>\"},{\"type\":\"mrkdwn\",\"text\":\"*Pipeline:* <$BUDDY_PIPELINE_URL|$BUDDY_PIPELINE_NAME>\"},{\"type\":\"mrkdwn\",\"text\":\"*Branch:* $BUDDY_EXECUTION_BRANCH\"},{\"type\":\"mrkdwn\",\"text\":\"*Project:* <$BUDDY_PROJECT_URL|$BUDDY_PROJECT_NAME>\"}]}]" - channel: "G6AKRT78V" - channel_name: "nystudio107" - trigger_condition: "ALWAYS" - integration_hash: "5ef0d26820cfeb531cb10738" - - action: "Send failure to nystudio107 channel" - type: "SLACK" - trigger_time: "ON_FAILURE" - content: "[#$BUDDY_EXECUTION_ID] $BUDDY_EXECUTION_REVISION_SUBJECT - $BUDDY_EXECUTION_REVISION_COMMITTER_NAME" - blocks: "[{\"type\":\"section\",\"fields\":[{\"type\":\"mrkdwn\",\"text\":\"*Failed execution:* <$BUDDY_EXECUTION_URL|Execution #$BUDDY_EXECUTION_ID $BUDDY_EXECUTION_COMMENT>\"},{\"type\":\"mrkdwn\",\"text\":\"*Pipeline:* <$BUDDY_PIPELINE_URL|$BUDDY_PIPELINE_NAME>\"},{\"type\":\"mrkdwn\",\"text\":\"*Branch:* $BUDDY_EXECUTION_BRANCH\"},{\"type\":\"mrkdwn\",\"text\":\"*Project:* <$BUDDY_PROJECT_URL|$BUDDY_PROJECT_NAME>\"}]}]" - channel: "G6AKRT78V" - channel_name: "nystudio107" - trigger_condition: "ALWAYS" - integration_hash: "5ef0d26820cfeb531cb10738" variables: - key: "PROJECT_SHORTNAME" value: "CHANGEME" From 958c7f46e6f5cb5bdb8d9aa336ea90412d6fafc7 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 22 Mar 2021 10:07:34 -0400 Subject: [PATCH 11/12] Updated README.md --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b9afcd9..6ee5595 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ The project is based on [Craft CMS](https://CraftCMS.com) using a unique `templa * [webpack 5](https://webpack.js.org/) is used for the build system as per [An Annotated webpack 4 Config for Frontend Web Development](https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development) * [TypeScript](https://www.typescriptlang.org/) for strictly typed JavaScript code * [Vue.js 3.0](https://vuejs.org/) is used for some of the interactive bits on the website, and Vue.js 3.x allows us to leverage the [Composition API](https://composition-api.vuejs.org/) -* [Tailwind CSS](https://tailwindcss.com/) for the site-wide CSS with CSS splitting as per the [Speeding Up Tailwind CSS Builds](https://nystudio107.com/blog/speeding-up-tailwind-css-builds) article +* [Tailwind CSS](https://tailwindcss.com/) for the site-wide CSS using the [@tailwindcss/jit](https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css) * JSON-LD structured data as per [Annotated JSON-LD Structured Data Examples](https://nystudio107.com/blog/annotated-json-ld-structured-data-examples) * [Google AMP](https://developers.google.com/amp/) versions of the podcast episode and other pages * Image transforms are done via a [Serverless Image Handler](https://aws.amazon.com/solutions/serverless-image-handler/) lambda function, as described in the [Setting Up Your Own Image Transform Service](https://nystudio107.com/blog/setting-up-your-own-image-transform-service) article @@ -64,7 +64,9 @@ The CP login credentials are initially set as follows: Login: `andrew@nystudio107.com` \ Password: `letmein` -Obviously change these to whatever you like as needed +Obviously change these to whatever you like as needed. + +Build the production assets by typing `make build` to build the critical CSS, fonts, and other production assets. They will appear in `cms/web/dist/` (just double-click on the `report-legacy.html` and `report-modern.html` files to view them). **N.B.:** Without authorization & credentials (which are private), the `make pulldb` will not work (it just runs `scripts/docker_pull_db.sh`). It's provided here for instructional purposes. From 5652194a2044f8892af5e6ce746d4d49a0d9ad8d Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Mon, 22 Mar 2021 10:08:22 -0400 Subject: [PATCH 12/12] Version 2.4.27 --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5414153..7c64583 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # nystudio107/craft Change Log -## 2.4.27 - UNRELEASED +## 2.4.27 - 2021.03.22 ### Added * Added `make` command aliases