2.0 gulp prettier tailwind (#184)

* adding initial gulp settings

* orb by default, but overrideble for local ports

* fixing mu-plugins

* reload gulp after deploy #182 (#183)

* no need to ignore mu-plugins

* updates to make gulp work locally

---------

Co-authored-by: Chris Herold <[email protected]>

.eslintrc.json

@@ -5,7 +5,12 @@
     "es6": true,
     "node": true
   },
-  "extends": ["next", "eslint:recommended", "prettier"],
+  "plugins": ["import"],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2017
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
   "settings": {
     "react": {
       "version": "detect"

.gitignore

@@ -9,9 +9,9 @@ composer.lock
 # development-environment
 tmp/
 docker-compose.local.yml
+!_init/docker-compose.local.yml
 wp-content/themes/timber/dev/
 wp-config-local.php
-/wp-content/mu-plugins/local-plugins.php
 _data/
 /gulpconfig.json
 info.php
@@ -56,11 +56,25 @@ wp-content/plugins/hello.php
 wp-admin/
 wp-includes/
 
-# ignore everything in the "plugins" directory,
-# except the plugins you specify
+# ignore everything in the "plugins" directory, except the plugins you specify
+# this is for a site that uses composer to manage plugins and not track them in source
 # wp-content/plugins/*
 #!wp-content/plugins/stop-emails/
 
+# ignore everything in the "mu-plugins" directory,
+# except the mu-plugins you specify
+# !wp-content/mu-plugins/*
+wp-content/mu-plugins/local-plugins.php
+
+# ignore specific theme assets
+wp-content/themes/timber/assets/vendor
+wp-content/themes/timber/static
+wp-content/themes/timber/dist
+
+# ignore specific files in the root directory
+.gitattributes
+.gitignore
+
 # ignore certain plugins
 wp-content/plugins/hello.php
 wp-content/plugins/akismet/

.prettierrc

@@ -5,6 +5,11 @@
   "printWidth": 90,
   "phpVersion": "7.4",
   "braceStyle": "1tbs",
+  "twigPrintWidth": 150,
+  "plugins": [
+    "prettier-plugin-tailwindcss",
+    "./node_modules/@supersoniks/prettier-plugin-twig-melody"
+  ],
   "overrides": [
     {
       "files": "*.php",

.vscode/extensions.json

@@ -2,6 +2,8 @@
   "recommendations": [
     "stylelint.vscode-stylelint",
     "esbenp.prettier-vscode",
-    "rifi2k.format-html-in-php"
+    "bradlc.vscode-tailwindcss",
+    "rifi2k.format-html-in-php",
+    "stanislav.vscode-twig"
   ]
 }

.vscode/settings.json

@@ -3,24 +3,15 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   // As of version 14, stylelint needs to be told to validate SCSS
-  "stylelint.validate": ["css", "scss"],
+  // "stylelint.validate": ["css", "scss"],
   // Turn on auto-fixing for project defined linters.
   "editor.codeActionsOnSave": {
     // For ESLint
-    // "source.fixAll.eslint": true,
+    "source.fixAll.eslint": true
     // For Stylelint
-    "source.fixAll.stylelint": true
+    // "source.fixAll.stylelint": true
   },
   "files.associations": {
     "*.twig": "twig"
-  },
-  "[twig]": {
-    "editor.defaultFormatter": "mblode.twig-language-2"
-  },
-  "twig-language-2.bracePadding": true,
-  "twig-language-2.indentStyle": "space",
-  "twig-language-2.preserve": 1,
-  "twig-language-2.comments": true,
-  "twig-language-2.commentLine": true,
-  "twig-language-2.wrap": 120
+  }
 }

.vscode/tasks.json

@@ -46,7 +46,7 @@
     {
       "label": "Wordpress Docker Recreate",
       "type": "shell",
-      "command": "docker-compose up --build --force-recreate --no-deps"
+      "command": "docker-compose -f docker-compose.yml -f docker-compose.local.yml up --build --force-recreate --no-deps"
     },
     {
       "label": "Wordpress Composer Install",

_build/deploy.sh

@@ -114,6 +114,12 @@ else
   fi
 fi
 
+if pgrep gulp >/dev/null 2>&1
+then
+  echo "Rebuilding gulp dev assets"
+  npx gulp restart
+fi
+
 if [ -f ".env" ]; then
   unset $(grep -v '^#' .env | sed -E 's/(.*)=.*/\1/' | xargs)
 fi

_init/docker-compose.local.yml

@@ -0,0 +1,22 @@
+# copy this to the root of your project if you wan to customize the docker-compose.yml file defaults
+# common usage are to change the ports or to add environment variables
+# make sure when you run docker, you incorporate -- see .vscode/tasks.json for an example
+
+# version: '3.3'
+
+# services:
+#   db:
+#     ports:
+#       - '3307:3306'
+
+#   wordpress:
+#     ports:
+#       - '8000:80'
+#     environment:
+#       WORDPRESS_CONFIG_EXTRA: |
+#         define('WP_ENV', 'development');
+#         define('WP_LOCAL_DEV', true);
+#         define('WP_THEME', 'timber');
+#         define('WP_DEBUG_LOG', true );
+#         define('WP_DEBUG_DISPLAY', false);
+#         @ini_set('display_errors', 0);

_init/local.sql

@@ -1,6 +1,6 @@
 ## Update main site
-UPDATE `wp_options` SET `option_value` = 'http://wordpress.saltlaw.orb.local' WHERE `option_name` = 'siteurl';
-UPDATE `wp_options` SET `option_value` = 'http://wordpress.saltlaw.orb.local' WHERE `option_name` = 'home';
+UPDATE `wp_options` SET `option_value` = 'http://wordpress.bubstimber.orb.local' WHERE `option_name` = 'siteurl';
+UPDATE `wp_options` SET `option_value` = 'http://wordpress.bubstimber.orb.local' WHERE `option_name` = 'home';
 
 ## Alternate if using localhost instead of orb
 -- UPDATE `wp_options` SET `option_value` = 'http://localhost:8000' WHERE `option_name` = 'siteurl';

config.mjs

@@ -0,0 +1,44 @@
+const config = {
+  tailwindjs: './tailwind.config.js',
+  port: 9050,
+  purgecss: {
+    content: ['src/**/*.{html,js,php,twig}'],
+    safelist: {
+      standard: [/^pre/, /^code/],
+      greedy: [/token.*/],
+    },
+  },
+};
+
+// tailwind plugins
+const plugins = {
+  typography: true,
+  forms: true,
+  containerQueries: true,
+  twElements: true,
+};
+
+// base folder paths
+const basePaths = ['assets', 'dev', 'dist', 'static'];
+
+// folder assets paths
+const folders = ['css', 'js', 'img', 'fonts', 'vendor'];
+
+const paths = {
+  root: 'wp-content/themes/timber',
+};
+
+basePaths.forEach((base) => {
+  paths[base] = {
+    base: `./${paths.root}/${base}`,
+  };
+  folders.forEach((folderName) => {
+    const toCamelCase = folderName.replace(/\b-([a-z])/g, (_, c) => c.toUpperCase());
+    paths[base][toCamelCase] = `./${paths.root}/${base}/${folderName}`;
+  });
+});
+
+config.paths = paths;
+config.plugins = plugins;
+
+export { config };

docker-compose.yml

@@ -3,8 +3,6 @@ version: '3.3'
 services:
   db:
     image: mariadb
-    ports:
-      - '3307:3306'
     volumes:
       - db_data:/var/lib/mysql
     restart: 'no'
@@ -18,8 +16,6 @@ services:
     depends_on:
       - db
     image: wordpress:6.3
-    ports:
-      - '8000:80'
     volumes:
       - ./.htaccess:/var/www/html/.htaccess
       - ./wp-content:/var/www/html/wp-content