.vscode/launch.json

@@ -1,16 +0,0 @@
-{
-  "configurations": [
-    {
-      "name": "Listen for Xdebug",
-      "type": "php",
-      "request": "launch",
-      "hostname": "0.0.0.0",
-      "port": 9003,
-      "pathMappings": {
-        "/var/www/html": "${workspaceFolder}"
-      },
-      "preLaunchTask": "DDEV: Enable Xdebug",
-      "postDebugTask": "DDEV: Disable Xdebug"
-    }
-  ]
-}

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "intelephense.environment.phpVersion": "8.1"
-}

.vscode/tasks.json

@@ -1,23 +0,0 @@
-{
-	"version": "2.0.0",
-	"tasks": [
-		{
-			"label": "DDEV: Enable Xdebug",
-			"type": "shell",
-			"command": "ddev xdebug on",
-			"presentation": {
-				"reveal": "silent",
-				"close": true
-			}
-		},
-		{
-			"label": "DDEV: Disable Xdebug",
-			"type": "shell",
-			"command": "ddev xdebug off",
-			"presentation": {
-				"reveal": "silent",
-				"close": true
-			}
-		}
-	]
-}

geo-coop.code-workspace

@@ -1,10 +0,0 @@
-{
-	"folders": [
-		{
-			"path": "."
-		}
-	],
-	"settings": {
-		"intelephense.environment.phpVersion": "8.1"
-	}
-}

web/themes/custom/geofresco/README.md

@@ -45,19 +45,12 @@ Autoprefixer & Babel is set to support:
 
 These can be updated at any time within the `package.json`.
 
-### Run the following command from the theme directory
+### Run the following commands from the theme directory
-
-`ddev npm install`
-
-### Alternat non-DDEV
-
-Run the following command from the theme directory (that's the folder where this README is).
-
-#### Use the right version of node with:
-
 If you haven't yet, install nvm:
 https://github.com/creationix/nvm
 
+#### Use the right version of node with:
+
 `nvm use`
 
 _This command will look at your `.nvmrc` file and use the version node.js specified in it. This ensures all developers use the same version of node for consistency._

web/themes/custom/geofresco/gulp-tasks/clean.js

@@ -0,0 +1,33 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var del = require('del');
+
+// Export our tasks.
+module.exports = {
+
+  // Clean style guide files.
+  styleguide: function() {
+    // You can use multiple globbing patterns as you would with `gulp.src`
+    return del([
+      './dist/style-guide/*'
+    ], {force: true});
+  },
+
+  // Clean CSS files.
+  css: function() {
+    return del([
+      './dist/css/*'
+    ], {force: true});
+  },
+
+  // Clean JS files.
+  js: function() {
+    return del([
+      './dist/js/*'
+    ], {force: true});
+  }
+};

web/themes/custom/geofresco/gulp-tasks/compile.js

@@ -0,0 +1,65 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var sass        = require('gulp-sass');
+var prefix      = require('gulp-autoprefixer');
+var sourcemaps  = require('gulp-sourcemaps');
+var sync        = require('browser-sync');
+var rename      = require('gulp-rename');
+
+// Small error handler helper function.
+function handleError(err) {
+  console.log(err.toString());
+  this.emit('end');
+}
+
+// Export our tasks.
+module.exports = {
+
+  // Compile Sass.
+  sass: function() {
+    return gulp.src('./src/{global,layout,components}/**/*.scss')
+      .pipe(
+        sass({ outputStyle: 'nested' })
+          .on('error', handleError)
+      )
+      .pipe(prefix({
+        cascade: false
+      }))
+      .pipe(rename(function (path) {
+        path.dirname = '';
+        return path;
+      }))
+      .pipe(gulp.dest('./dist/css'))
+      .pipe(sync.stream({match: '**/*.css'}));
+  },
+
+  // Compile JavaScript.
+  js: function() {
+    return gulp.src([
+      './src/{global,layout,components}/**/*.es6.js'
+    ], { base: './' })
+      .pipe(sourcemaps.init())
+      .pipe(rename(function (path) {
+        // Currently not using ES6 modules so for now
+        // es6 files are compiled into individual JS files.
+        // Eventually this can use ES6 Modules and compile
+        // all files within a component directory into a single
+        // foo.bundle.js file. In that case the bundle name should
+        // reflect the components directory name.
+        path.dirname = '';
+        path.basename = path.basename.replace(/\.es6/, '');
+        return path;
+      }))
+      .pipe(sourcemaps.write('./'))
+      .pipe(gulp.dest('./dist/js'));
+  }
+};

web/themes/custom/geofresco/gulp-tasks/compress.js

@@ -0,0 +1,35 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var rename      = require('gulp-rename');
+var imagemin    = require('gulp-imagemin');
+
+// Export our tasks.
+module.exports = {
+
+  // Compress svg/png/jpg files.
+  assets: function() {
+    return gulp.src([
+      './src/{global,layout,components}/**/*{.png,.jpg,.svg}'
+    ])
+      .pipe(imagemin({
+        progressive: true,
+        svgoPlugins: [{
+          removeViewBox: false
+        }]
+      }))
+      .pipe(rename(function (path) {
+        path.dirname = '';
+        return path;
+      }))
+      .pipe(gulp.dest('./dist/assets'));
+  }
+};

web/themes/custom/geofresco/gulp-tasks/concat.js

@@ -0,0 +1,42 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var concat      = require('gulp-concat');
+var order       = require('gulp-order');
+var sync        = require('browser-sync');
+
+// Export our tasks.
+module.exports = {
+
+  // Concat all CSS into a master bundle.
+  css: function() {
+    return gulp.src([
+      './dist/css/*.css'
+    ])
+      // Reorder the files so global is first.
+      // If you need to get fancier with the order here's an example:
+      // .pipe(order([
+      //   'dist/css/global.css',
+      //   'src/components/**/*.css',
+      //   'dist/css/btn.css',
+      //   'dist/css/form-item.css',
+      //   'dist/css/form-float-label.css',
+      //   'dist/css/*.css'
+      // ], { base: './' }))
+      .pipe(order([
+        'dist/css/global.css',
+        'dist/css/*.css'
+      ], { base: './' }))
+      .pipe(concat('all.css'))
+      .pipe(gulp.dest('./dist/all'))
+      .pipe(sync.stream());
+  }
+};

web/themes/custom/geofresco/gulp-tasks/lint.js

@@ -0,0 +1,36 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var sassLint = require('gulp-sass-lint');
+var eslint   = require('gulp-eslint');
+
+// Export our tasks.
+module.exports = {
+
+  // Lint Sass based on .sass-lint.yml config.
+  sass: function() {
+    return gulp.src([
+      './src/{global,layout,components}/**/*.scss',
+    ])
+      .pipe(sassLint())
+      .pipe(sassLint.format());
+  },
+
+  // Lint JavaScript based on .eslintrc config.
+  js: function() {
+    return gulp.src([
+      './src/{global,layout,components}/**/*.js',
+      '!./src/components/**/vendors/*'
+    ])
+      .pipe(eslint())
+      .pipe(eslint.format());
+  }
+};

web/themes/custom/geofresco/gulp-tasks/move.js

@@ -0,0 +1,33 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+// If some JS components aren't es6 we want to simply move them
+// into the dist folder. This allows us to clean the dist/js
+// folder on build.
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var rename = require('gulp-rename');
+
+// Export our tasks.
+module.exports = {
+
+  // Moves JavaScript.
+  js: function() {
+    return gulp.src([
+      './src/{global,layout,components}/**/*.js',
+      '!./src/{global,layout,components}/**/*.es6.js'
+    ], { base: './' })
+      .pipe(rename(function (path) {
+        path.dirname = '';
+        return path;
+      }))
+      .pipe(gulp.dest('./dist/js'));
+  }
+};

web/themes/custom/geofresco/gulpfile.js

@@ -0,0 +1,168 @@
+/*eslint strict: ["error", "global"]*/
+'use strict';
+
+//=======================================================
+// Include gulp
+//=======================================================
+var gulp = require('gulp');
+
+//=======================================================
+// Include Our Plugins
+//=======================================================
+var sync        = require('browser-sync');
+var runSequence = require('run-sequence');
+
+//=======================================================
+// Include Our tasks.
+//
+// Each task is broken apart to it's own node module.
+// Check out the ./gulp-tasks directory for more.
+//=======================================================
+var taskCompile     = require('./gulp-tasks/compile.js');
+var taskMove        = require('./gulp-tasks/move.js');
+var taskLint        = require('./gulp-tasks/lint.js');
+var taskCompress    = require('./gulp-tasks/compress.js');
+var taskClean       = require('./gulp-tasks/clean.js');
+
+var taskConcat      = require('./gulp-tasks/concat.js');
+
+//=======================================================
+// Compile Our Sass and JS
+// We also move some files if they don't need
+// to be compiled.
+//=======================================================
+gulp.task('compile', ['compile:sass', 'compile:js', 'move:js']);
+
+// Compile Sass
+gulp.task('compile:sass', function() {
+  return taskCompile.sass();
+});
+
+// Compile JavaScript ES2015 to ES5.
+gulp.task('compile:js', function() {
+  return taskCompile.js();
+});
+
+// If some JS components aren't es6 we want to simply move them
+// into the dist folder. This allows us to clean the dist/js
+// folder on build.
+gulp.task('move:js', function() {
+  return taskMove.js();
+});
+
+//=======================================================
+// Lint Sass and JavaScript
+//=======================================================
+gulp.task('lint', ['lint:sass', 'lint:js']);
+
+// Lint Sass based on .sass-lint.yml config.
+gulp.task('lint:sass', function () {
+  return taskLint.sass();
+});
+
+// Lint JavaScript based on .eslintrc config.
+gulp.task('lint:js', function () {
+  return taskLint.js();
+});
+
+//=======================================================
+// Compress Files
+//=======================================================
+gulp.task('compress', function() {
+  return taskCompress.assets();
+});
+
+//=======================================================
+// Concat all CSS files into a master bundle.
+//=======================================================
+gulp.task('concat', function () {
+  return taskConcat.css();
+});
+
+//=======================================================
+// Clean all directories.
+//=======================================================
+gulp.task('clean', ['clean:css', 'clean:js', 'clean:styleguide']);
+
+// Clean style guide files.
+gulp.task('clean:styleguide', function () {
+  return taskClean.styleguide();
+});
+
+// Clean CSS files.
+gulp.task('clean:css', function () {
+  return taskClean.css();
+});
+
+// Clean JS files.
+gulp.task('clean:js', function () {
+  return taskClean.js();
+});
+
+//=======================================================
+// Watch and recompile sass.
+//=======================================================
+
+// Pull the sass watch task out so we can use run sequence.
+
+gulp.task('watch:sass', function(callback) {
+  runSequence(
+    ['lint:sass', 'compile:sass'],
+    'concat',
+    callback
+  );
+});
+
+// Main watch task.
+gulp.task('watch', function() {
+
+  // BrowserSync proxy setup
+  // Uncomment this and swap proxy with your local env url.
+  // NOTE: for this to work in Drupal, you must install and enable
+  // https://www.drupal.org/project/link_css. This module should
+  // NOT be committed to the repo OR enabled on production.
+  //
+  // This should work out of the box for work within the style guide.
+  //
+  // sync.init({
+  //   open: false,
+  //   proxy: 'http://test.mcdev'
+  // });
+
+  // Watch all my sass files and compile sass if a file changes.
+  gulp.watch(
+    './src/{global,layout,components}/**/*.scss',
+    ['watch:sass']
+  );
+
+  // Watch all my JS files and compile if a file changes.
+  gulp.watch([
+    './src/{global,layout,components}/**/*.js'
+  ], ['lint:js', 'compile:js']);
+
+  // Watch all my twig files and rebuild the style guide if a file changes.
+  gulp.watch(
+    './src/{layout,components}/**/*.twig',
+    ['watch:styleguide']
+  );
+
+});
+
+// Reload the browser if the style guide is updated.
+gulp.task('watch:styleguide', ['styleguide'], sync.reload);
+
+//=======================================================
+// Default Task
+//
+// runSequence runs 'clean' first, and when that finishes
+// 'lint', 'compile', 'compress', 'styleguide' run
+// at the same time. 'concat' runs last.
+//=======================================================
+gulp.task('default', function(callback) {
+  runSequence(
+    'clean',
+    ['lint', 'compile', 'compress', 'styleguide'],
+    'concat',
+    callback
+  );
+});