React migration

.env.development

+REACT_APP_API_URL=https://www.embl.org/api/v1/
+SASS_PATH=./node_modules;node_modules/@visual-framework;./src

.env.production

+REACT_APP_API_URL=https://www.embl.org/api/v1/
+SASS_PATH=node_modules:node_modules/@visual-framework:src

.eslintrc.js

-module.exports = {
-  env: {
-    es6: true,
-    node: true,
-    browser: true
-  },
-  extends: "eslint:recommended",
-  parserOptions: {
-    sourceType: "module",
-    ecmaVersion: 2017
-  },
-  rules: {
-    indent: ["error", 2],
-    "linebreak-style": ["error", "unix"],
-    quotes: ["error", "double"],
-    semi: ["error", "always"]
-
-  }
-}; 

.eslintrc.json

+{
+    "env": {
+        "node":true,
+        "browser": true,
+        "es2021": true,
+        "jest": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:prettier/recommended"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "prettier/prettier": "warn",
+        "no-unused-vars": "warn",
+        "react/react-in-jsx-scope": "off",
+        "react/prop-types": "off",
+        "react/no-unescaped-entities":"off"
+    }
+}
\ No newline at end of file

.gitattributes

+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
 .DS_Store
-Thumbs.db
-db.json
-*.log
-public
-functions
-src/site/_includes/css
-src/site/_includes/js
-.env
-yarn-error.log
-dist
-build
-temp
-package.variables.scss
-src/site/_data/emblJobs.json
\ No newline at end of file
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.eslintcache
\ No newline at end of file

.gitlab-ci.yml

@@ -51,7 +51,6 @@ build:
 #   tags:
 #     - dind2
 
-
 # Reusable template, requires the $KUBE_CONFIG and $NAMESPACE variables to be set
 # This subsitutes the environment variable $IMAGE_NAME in the overlay file, and deploys
 .template: &deploy

.husky/.gitignore

+_

.husky/pre-commit

+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

.jsbeautifyrc

-{
-  "indent_size": 2,
-  "indent_char": " ",
-  "css": {
-    "indent_size": 2
-  },
-  "wrap_line_length": 10000,
-  "wrap_attributes": false
-}

.vscode/settings.json

-{
-    "cSpell.enableFiletypes": [
-        "nunjucks"
-    ]
-}
\ No newline at end of file

README.md

+# vf-react
+
+A React boilerplate for VF 2.0 projects.
+
+Demo: https://visual-framework.github.io/vf-react/
+
+Notes:
+
+- If you add a Visual Framework component, be sure to include it at `src/vf-components/vf-componenet-rollup/index.scss`
+- Add custom CSS to `src/vf-components/vf-local-overrides/vf-local-overrides.scss`
+- Bootstrapped with [Create React App](https://github.com/facebook/create-react-app), that brings certain advantages and limitations. If you want to escape those, read up on "[eject](https://create-react-app.dev/docs/available-scripts#npm-run-eject)"
+
+Watchout for:
+
+- Use `yarn` and not `npm`
+- This is still in early development
+- The building of VF component assets (CSS, JS, images, etc.) from `.vf-components` into `./build/vf-generated-assets` does not seem to be working after [#25](https://github.com/visual-framework/vf-react/pull/25)
+- Gulp may eventually removed from this project
+- We're still coming up with an approach on how to handle the use of VF JS inside React (probably we'll import the VF JS modules directly)
+
+## Available scripts
+
+In the project directory, you can run:
+
+### `gulp build-vf-assets`
+
+Build the assets, CSS and JS for VF components.
+
+### `gulp dev`
+
+- Build the assets, CSS and JS for VF components and watch for changes
+- Run React in development mode
+
+### `gulp build`
+
+- Build the assets, CSS and JS for VF components
+- Run React in build mode (yarn start)
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.<br>
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+
+
 # embl-jobs-pages
 
 Creates pages for `embl.org/jobs/position/{name}`
@@ -7,7 +52,7 @@ Creates pages for `embl.org/jobs/position/{name}`
 - Redirects from email alerts using format of https://www.embl.org/jobs/alerts/alert-email/{nPostingTargetID}(3656)
 - Redirects from EMBL.de are mostly handled by the script at https://sourcecode.embl.de/webdev/website/nps-legacy/-/blob/master/js/ext/src/embl_jobs_redirect.js (as of Feb 2021)
 
-## Developing 
+## Developing
 
 1. You'll need to [install npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
 1. If you don't have `yarn`, install it

docker-compose.yml

@@ -4,5 +4,4 @@ services:
   nginx:
     build: .
     ports:
-      - '8000:8080'
-
+      - "8000:8080"

eleventy.js

-const { DateTime } = require('luxon');
-const _            = require('lodash');
-const moment       = require('moment');
-const Path         = require('path');
-
-module.exports = function(config) {
-
-  // Add in tags, filters useful for Visual Framework installs
-  // (fractal's render tag, codeblock, markdown, etc)
-  // and common configuration
-  const vfEleventyExtension = require("@visual-framework/vf-extensions\/11ty");
-  config.addPlugin(vfEleventyExtension);
-
-  // BroswerSync options
-  config.setBrowserSyncConfig({ open: true });
-
-  // Filters
-  // https://www.11ty.io/docs/filters/
-  // -----
-
-  // {{ "myContent" | sampleFilter }}
-  // config.addFilter("sampleFilter", function(value) {
-  //   return 'ddd' + value;
-  // });
-
-  // Add any utiliuty filters
-  config.addFilter("dateDisplay", (dateObj, format = "LLL d, y") => {
-    return DateTime.fromJSDate(dateObj, {
-      zone: "utc"
-    }).toFormat(format);
-  });
-
-  // clean up the dates received from EDR
-  // Thu, 02/13/2020 - 12:00
-  config.addFilter("parseDate", function(value) {
-    value = value || '';
-
-    value = value.split(', ')[1]; // remove text day of week
-    value = value.split(' - ')[0]; // remove hour stamp
-
-    // stringToDate("17/9/2014","dd/MM/yyyy","/");
-    // stringToDate("9/17/2014","mm/dd/yyyy","/")
-    // stringToDate("9-17-2014","mm-dd-yyyy","-")
-    function stringToDate(_date,_format,_delimiter) {
-      var formatLowerCase=_format.toLowerCase();
-      var formatItems=formatLowerCase.split(_delimiter);
-      var dateItems=_date.split(_delimiter);
-      var monthIndex=formatItems.indexOf("mm");
-      var dayIndex=formatItems.indexOf("dd");
-      var yearIndex=formatItems.indexOf("yyyy");
-      var month=parseInt(dateItems[monthIndex]);
-      month-=1;
-      var formatedDate = new Date(dateItems[yearIndex],month,dateItems[dayIndex]);
-      return formatedDate;
-    }
-
-    return stringToDate(value,'mm/dd/yyyy','/');
-  });
-
-  // convert to a nice date
-  // expects format of:
-  // Tue Feb 25 2020 00:00:00 GMT+0100 (Central European Standard Time)
-  // returns:
-  // 26 February 2020
-  config.addFilter("prettyDate", function(value) {
-    value = value || '';
-
-    var month = new Array();
-    month[0] = "January";
-    month[1] = "February";
-    month[2] = "March";
-    month[3] = "April";
-    month[4] = "May";
-    month[5] = "June";
-    month[6] = "July";
-    month[7] = "August";
-    month[8] = "September";
-    month[9] = "October";
-    month[10] = "November";
-    month[11] = "December";
-    
-    var d = new Date(Date.parse(value)),
-        month = '' + (month[d.getMonth()]),
-        day = '' + d.getDate(),
-        year = d.getFullYear();
-
-    return day + " " + month + " " + year;
-    
-  });
-
-  
-  config.addFilter("makeLowercase", function(value) {
-    value = value || '';
-    return value.toLowerCase();
-  });
-  
-  config.addFilter("makeUppercase", function(value) {
-    value = value || '';
-    return value.toUpperCase();
-  });
-  
-  config.addFilter("spaceToDashes", function(value) {
-    value = value || '';
-    return value.replace(/\s+/g, '-');
-  });
-
-  // push a value into an array
-  // {% set emblEbiJobs = emblEbiJobs | push(job) %}
-  config.addFilter("push", function(object, value) {
-    value = value || '';
-    let length = object.length + 1;
-    object.push(value);
-    return object;
-  });
-
-  // receive format of `2015-10-08T15:30:00` and make it pretty with Moment.js
-  config.addFilter("dateMoment", (time, format = "D MMMM YYYY, HH:mm") => {
-    // console.log('time',time)
-    time = time.toString().replace('T',' '); // no need for T in timestamp
-    time = time || new Date();
-    if (format == 'unix') {
-      return moment(time).format('X'); // time in seconds
-    } else {
-      return moment(time).format(format);
-    }
-  });
-  
-  // do some common cleanup on job title
-  config.addFilter("jobTitleClean", (input) => {
-    input = input.replace('&','&');
-    return input;
-  });
-    
-  // Shortcodes
-  // https://www.11ty.io/docs/shortcodes/
-  // -----
-
-  // nunjucks
-  // {% sampleShortcode "firstName", "lastName" %}
-  // handlebars
-  // {{ sampleShortcode "firstName" "lastName" }}
-  // config.addShortcode("sampleShortcode", function(firstName, lastName) {
-  //   return 'hi ' + firstName + lastName;
-  // });
-
-  // If you want to minify html output
-  // config.addTransform("htmlmin", require("./node_modules/\@visual-framework/vf-eleventy--extensions/utils/minify-html.js"));
-
-  // Add any custom tags
-
-  // config.addNunjucksTag("uppercase", function(nunjucksEngine) {
-  //   return new function() {
-  //     this.tags = ["uppercase"];
-  //
-  //     this.parse = function(parser, nodes, lexer) {
-  //       var tok = parser.nextToken();
-  //
-  //       var args = parser.parseSignature(null, true);
-  //       parser.advanceAfterBlockEnd(tok.value);
-  //
-  //       return new nodes.CallExtensionAsync(this, "run", args);
-  //     };
-  //
-  //     this.run = function(context, myStringArg, callback) {
-  //       let ret = new nunjucksEngine.runtime.SafeString(
-  //         myStringArg.toUpperCase()
-  //       );
-  //       callback(null, ret);
-  //     };
-  //   }();
-  // });
-
-  // pass some assets right through
-  config.addPassthroughCopy("./src/site/images");
-  config.addPassthroughCopy("./src/site/apply/assets");
-
-  return {
-    dir: {
-      input: "src/site",
-      output: "build",
-      data: "_data"
-    },
-    templateFormats : [
-      "njk", "md" // note that .md files will also be parsed with njk processor
-    ],
-    htmlTemplateEngine : ["njk", "md"],
-    markdownTemplateEngine : "njk",
-    passthroughFileCopy: true,
-    pathPrefix: "/jobs/" // if your site is deployed to a sub-url, otherwise comment out
-  };
-
-};

gulpfile.js

-const path = require('path');
-const gulp = require('gulp');
+const path = require("path");
+const gulp = require("gulp");
+const shell = require("gulp-shell");
 
 // Pull in optional configuration from the package.json file, a la:
-const {componentPath, componentDirectories, buildDestionation} = require('@visual-framework/vf-config');
+const {
+  componentPath,
+  componentDirectories,
+  buildDestionation,
+} = require("@visual-framework/vf-config");
 
 // Tasks to build/run vf-core component system
-require('./node_modules/\@visual-framework/vf-core/gulp-tasks/_gulp_rollup.js')(gulp, path, componentPath, componentDirectories, buildDestionation);
-require('./node_modules/\@visual-framework/vf-extensions/gulp-tasks/_gulp_rollup.js')(gulp, path, componentPath, componentDirectories, buildDestionation);
-// require('./node_modules/\@visual-framework/vf-extensions/gulp-tasks/gulp-build-search-index.js')(gulp, path, buildDestionation);
+require("@visual-framework/vf-core/gulp-tasks/_gulp_rollup.js")(
+  gulp,
+  path,
+  componentPath,
+  componentDirectories,
+  buildDestionation
+);
 
 // Watch folders for changes
-gulp.task('watch', function() {
-  // left for convenience for local watch additions
-  gulp.watch(['./build/css/styles.css'], gulp.series('eleventy:reload'));
-  // gulp.watch(['./build/search/index.html'], gulp.parallel('vf-build-search-index'));
+gulp.task("watch", function () {
+  // gulp.watch(['./vf-components/**/*.scss', '!./vf-components/**/package.variables.scss'], gulp.parallel('vf-css'));
+  // gulp.watch(['./vf-components/**/*.js'], gulp.parallel('vf-scripts'));
 });
 
+// run react in build mode
+gulp.task("react:build", shell.task(["react-scripts build"]));
 
-// fetch embl jobs data and write
-// note: we don't commit this json to the repository and instead do this at build/run
-// https://www.embl.org/api/v1/jobs?_format=json&source=contenthub
-const _ = require('lodash');
-var usedNames = [];
-
-// filter and pre-process EDR data
-function filterFetchedData(data) {
-  data = JSON.parse(data.toString());
-
-  console.log('Person fetching script needs to be updated for jobs data');
-  console.log('Jobs fetched from EDR: ' + data.length)
-
-  // remove persons without an EMBL ID
-  // _.remove(data, function(n) {
-  //   return typeof n.emblId == 'undefined';
-  // });
-
-  // remove alumni
-  // _.remove(data, function(n) {
-  //   return n.personEEGroup == 'Unemployed';
-  // });
-  // _.forEach(data, function(n) {
-
-  // drop hmtl from start and end dates
-  // _.forEach(data, function(n) {
-  //   // <time datetime="2020-01-15T12:00:00Z" class="datetime">Wed, 01/15/2020 - 12:00</time>
-  //   n.field_jobs_publish_date = n.field_jobs_publish_date.split('datetime="')[1];
-  //   n.field_jobs_publish_date = n.field_jobs_publish_date.split('" class="datetime"')[0];
-
-  //   n.field_jobs_expiration = n.field_jobs_expiration.split('datetime="')[1];
-  //   n.field_jobs_expiration = n.field_jobs_expiration.split('" class="datetime"')[0];
-  // });
-
-  // Sort so most recent jobs come first
-  data = _.sortBy(data, function(n) { 
-    return n.field_jobs_publish_date; 
-  });
-
-  data = data.reverse(); // reverse so newest jobs come first
-
-  // track duplicate names by adding a `urlSuffix` attribute
-  // _.forEach(data, function(n) {
-  //   if (n.displayName) {
-  //     var tempName = n.displayName.replace(/\s+/g, '-').toLowerCase();
-  //     var isNameUsed = usedNames.includes(tempName);
- 
-  //     if (isNameUsed === false) {
-  //       usedNames.push(tempName);
-  //     } else {
-  //       // this method only handles the first duplicate, if we have two persons we'll need more logic
-  //       n.urlSuffix = '-1';
-  //       console.log('Duplicate name found for ' + tempName + '; suffix will be added.');
-  //     }
-  //   }
-  // });
-
-  console.log('After filtering, jobs to have record made: ' + data.length)
-
-  return data;
-}
-
-const request = require('request');
-const ora = require('ora');
-const fs = require('fs');
-gulp.task('fetch-jobs', function(done) {
-  // console.log('Fetching EMBL people data from EMBL EDR.');
-  // console.log('People data will not fetch if request is made outside of EMBL or EMBL-EBI network.');
-  const spinner = ora('Downloading jobs data from contentHub\n').start();
-  let totalDataReceived = 0;
-
-  request({
-      url: 'https://www.embl.org/api/v1/jobs?_format=json&source=contenthub',
-      headers: {
-        'User-Agent': 'request'
-      }
-    },
-    function optionalCallback(err, httpResponse, body) {
-      if (err) {
-        console.error(err);
-      }
-      spinner.stop();
-      console.log('Downloaded '+ totalDataReceived + ' KB of jobs data from the contentHub.');
-      console.warn('It may take a 2-3 minutes to prepare the data before Eleventy renders the pages.');
-      
-      let data = filterFetchedData(httpResponse.body);
-      let buffer = new Uint8Array(Buffer.from(JSON.stringify(data)));
-
-      fs.writeFile("src/site/_data/emblJobs.json", buffer, function(err) {
-        if(err) {return console.log(err);}  
-        // console.log("The file was saved!");
-        done();
-      }); 
-    
-    }
-    )
-    .on('data', function(data) {
-      // decompressed data as it is received
-    })
-    .on('response', function(response) {
-      // unmodified http.IncomingMessage object
-      response.on('data', function(data) {
-        // compressed data as it is received
-        totalDataReceived = totalDataReceived + data.length;
-        spinner.color = 'yellow';
-        spinner.text = 'Downloading jobs data; ' + totalDataReceived/1000 + ' KB received\n';
-      })
-    });
-    // .pipe(filterFetchedData())
-    // .pipe(source('emblJobs.json'))
-    // .pipe(gulp.dest('./src/site/_data'));
-});
+// run react in dev mode
+gulp.task("react:dev", shell.task(["react-scripts start"]));
 
 // Let's build this sucker.
-gulp.task('build', gulp.series(
-  'vf-clean',
-  gulp.parallel('vf-css','vf-scripts','vf-component-assets'),
-  'vf-css:production', //optimise, prefix css
-  'fetch-jobs',
-  'fractal:build',
-  'fractal',
-  'eleventy:init',
-  'eleventy:build',
-  // 'vf-build-search-index',
-  'manual-exit'
-));
+gulp.task(
+  "build",
+  gulp.series("vf-clean", gulp.parallel("vf-component-assets"), "react:build")
+);
+
+// Just build the assets, CSS and JS for VF components
+gulp.task(
+  "build-vf-assets",
+  gulp.series("vf-clean", gulp.parallel("vf-component-assets"))
+);
 
 // Build and watch things during dev
-gulp.task('dev', gulp.series(
-  'vf-clean',
-  gulp.parallel('vf-css','vf-scripts','vf-component-assets'),
-  'fetch-jobs',
-  'fractal:development',
-  'fractal',
-  'eleventy:init',
-  'eleventy:develop',
-  gulp.parallel('watch','vf-watch')
-));
+gulp.task(
+  "dev",
+  gulp.series(
+    "vf-clean",
+    gulp.parallel("vf-component-assets"),
+    gulp.parallel("react:dev", "watch")
+  )
+);

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src", "public/assets"]
+}
\ No newline at end of file

package.json

 {
-  "name": "@visual-framework/vf-boilerplate-eleventy",
-  "version": "2.0.0-alpha.14",
-  "description": "Build a site with Visual Framework components using the the Eleventy templating engine.",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/visual-framework/vf-eleventy.git"
-  },
+  "name": "embl-ebi-jobs",
+  "version": "0.1.0",
   "license": "Apache-2.0",
-  "author": "Ken Hawkins <ken.hawkins@embl.de> (https://www.embl.de/aboutus/communication_outreach/)",
-  "main": "gulpfile.js",
   "vfConfig": {
-    "vfName": "EMBL Jobs directory",
-    "vfNamespace": "embljobs-",
-    "vfComponentPath": "./src/components",
-    "vfBuildDestination": "./build",
-    "vfBuildFractalMode": "dataObject",
+    "vfName": "VF Boilerplate for React",
+    "vfNamesp