Unverified Commit 2aa5a669 authored by Ken Hawkins's avatar Ken Hawkins Committed by GitHub
Browse files

Feature: eleventy refactor (#27)

parent bf2c21c2
Pipeline #143405 failed with stages
in 1 minute and 3 seconds
......@@ -38,6 +38,8 @@ jspm_packages
# Build files
dist
build
temp
# Jekyll
_site
......
......@@ -28,7 +28,7 @@ build:
- node_modules
artifacts:
paths:
- dist
- build
test:
stage: test
......@@ -36,9 +36,9 @@ test:
- docker
script:
# test .htaccess has been generated
- if [ ! -f ${CI_PROJECT_DIR}/dist/.htaccess ]; then echo "Missing .htaccess"; exit 1; fi
- if [ ! -f ${CI_PROJECT_DIR}/build/.htaccess ]; then echo "Missing .htaccess"; exit 1; fi
# test index.html has been generated
- if [ ! -f ${CI_PROJECT_DIR}/dist/index.html ]; then echo "Missing index.html"; exit 1; fi
- if [ ! -f ${CI_PROJECT_DIR}/build/index.html ]; then echo "Missing index.html"; exit 1; fi
# setup ssh keys
.deploy_template: &deploy
......@@ -82,7 +82,7 @@ validate_dev:
stage: validate
script:
- set -a; source ${CI_PROJECT_DIR}/.env; set +a;
- curl -L "${DEV_SITE_URL}?${CI_COMMIT_SHA}" | cmp ${CI_PROJECT_DIR}/dist/index.html -
- curl -L "${DEV_SITE_URL}?${CI_COMMIT_SHA}" | cmp ${CI_PROJECT_DIR}/build/index.html -
only:
- master
......@@ -90,6 +90,6 @@ validate_prod:
stage: validate
script:
- set -a; source ${CI_PROJECT_DIR}/.env; set +a;
- curl -L "${PROD_SITE_URL}?${CI_COMMIT_SHA}" | cmp ${CI_PROJECT_DIR}/dist/index.html -
- curl -L "${PROD_SITE_URL}?${CI_COMMIT_SHA}" | cmp ${CI_PROJECT_DIR}/build/index.html -
only:
- tags
# Deploy to gh-pages
dist: trusty
language: node_js
node_js:
- 10
- 12
cache: npm
install:
- npm install
stages:
- deploy
before_script:
- npm install -g gulp
script: gulp
- yarn install
- yarn run build
# deploy:
# provider: pages
# skip_cleanup: true
# target_branch: gh-pages
# github_token: $GITHUB_TOKEN # Set in travis-ci.org dashboard
# on:
# branch: master
deploy:
provider: pages
skip-cleanup: true
github-token: $GITHUB_TOKEN #https://docs.travis-ci.com/user/deployment/pages/
keep-history: true
target-branch: gh-pages
local-dir: build
on:
branch:
- master
......@@ -33,8 +33,8 @@ Source files are in /src, they map like so:
```
Source Optimised Deployed
------ --------- --------
Front: src/index.html > dist/index.html > www.ebi.ac.uk/
Training: src/training/index.html > dist/training/index.html > www.ebi.ac.uk/training
Front: src/index.html > build/index.html > www.ebi.ac.uk/
Training: src/training/index.html > build/training/index.html > www.ebi.ac.uk/training
```
## Use of branches
......@@ -59,34 +59,60 @@ We use semantic versioning style of releases.
More radical changes should be done on a feature branch.
## Developing content
### Configuring the site
Serve non-optimised `./src/` files from your dev environment:
- In `package.json` update `vfConfig`
- In `elevnety.js` update `pathPrefix`
- Update `./src/site/_data/siteConfig.js`
- `yarn dev`
Otherwise configure gulp and eleventy as you would for any other project.
## Optimising the pages
### Developing and adding content
If you wish to test the optimisation process on your local machine, here's what you need to do:
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
- https://yarnpkg.com/lang/en/docs/install/
1. Install all the things
- `yarn install`
1. Generate the site in `/build`
- `gulp dev` renders and serves
- `gulp build` build static assets
1. Edit all the things:
- pages: `./src/site/`
- templates: `.src/site/_includes`
- site information: `./src/site/_data`
- local css: `./src/scss`
NOTE: Only developers would have the need do this.
### Adding Visual Framework components
1. Clone the repo
2. If you're using npm:
- Install the npm instance: `yarn install`
- Run the default gulp script: `yarn build`
3. If you're using Docker:
- `docker run -it --rm -v $PWD:/workspace -w /workspace simonvanderveldt/node-bower-gulp:6 bash -c 'npm install --quiet && gulp'`
To add a component you can use Yarn or install it manually.
### What the optimisations get you
In either case you'll need to re-run `gulp dev` to ensure the component is fully loaded.
As measured with [WebPagetest](https://www.webpagetest.org):
#### By package
[![alt text](assets/readme/performance-timings.png "Performance timings")](https://www.webpagetest.org/video/compare.php?tests=170508_5G_bbac80592e8a6982bb442dfce733f626,170508_66_5c3bd9d66aeb872d713be241f738dba4,170508_4X_18331d7513ef3beae9ddbfec1c8eaf0a)
- installation: `yarn add @visual-framework/vf-logo`
- updating components: `yarn upgrade-interactive --latest`
- alias: `yarn run update-components`
A comparison of the above two URLs. [View the more detailed report](https://www.webpagetest.org/video/compare.php?tests=170508_5G_bbac80592e8a6982bb442dfce733f626,170508_66_5c3bd9d66aeb872d713be241f738dba4,170508_4X_18331d7513ef3beae9ddbfec1c8eaf0a)
#### Manual installation for customisation
### To do?
1. Download a pattern
2. Copy it to `./src/components/vf-component-name`
- Handlebars optimisations?
- Concat all external css/js?
#### Create your own local component
You can add a custom VF-compatible component to `./src/components` and use it in
your site.
- `gulp vf-component`
You'll find a `vf-sample` component already placed in `./src/components`
### Footnotes
- Why `yarn` and not `npm`?
For the particular structure of the Visual Framework components, Yarn is considerably
faster at installing and does so more efficiently (about half the total file size). You'll
also be able to use `yarn upgrade-interactive --latest`, which makes it easier to update
VF components.
......@@ -41,7 +41,7 @@ esac;
for _SERVER in ${SERVER};
do
# copy code to VM
rsync -acv --delete-after ${CI_PROJECT_DIR}/dist/. ${SSH_OWNER}@${_SERVER}:${VM_CORE_PATH}/;
rsync -acv --delete-after ${CI_PROJECT_DIR}/build/. ${SSH_OWNER}@${_SERVER}:${VM_CORE_PATH}/;
# stop apache, etc
APACHEVER=$(ssh -tt ${SSH_APACHE}@${_SERVER} '[ -f /bin/systemctl ] && echo -n apache24 || echo -n apache22');
......
const { DateTime } = require('luxon');
const _ = require('lodash');
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);
});
// config.addFilter("makeLowercase", function(value) {
// value = value || '';
// return value.toLowerCase();
// });
// config.addFilter("spaceToDashes", function(value) {
// value = value || '';
// return value.replace(/\s+/g, '-').toLowerCase();
// });
// 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);
// };
// }();
// });
// copy js files
// this is neccesary now that 11ty tries to compile JS files as templates
// @todo: backport to vf-eleventy
config.addPassthroughCopy("./src/site/**/*.js");
// pass some assets right through
config.addPassthroughCopy("./src/site/images");
return {
dir: {
input: "src/site",
output: "build",
data: "_data"
},
templateFormats : [
"njk", "md", // note that .md files will also be parsed with njk processor
"css" // passthrough file copying for static assets
],
htmlTemplateEngine : ["njk", "md"],
markdownTemplateEngine : "njk",
passthroughFileCopy: true,
pathPrefix: "/" // if your site is deployed to a sub-url, otherwise comment out
};
};
const path = require('path');
const gulp = require('gulp');
const gutil = require('gulp-util');
const replace = require('gulp-replace');
const inlineImages = require('gulp-inline-images');
const minifyInline = require('gulp-minify-inline');
const through = require('through2');
const del = require('del');
const browserSync = require('browser-sync').create();
// Ensure dist folder is reset
gulp.task('purge', function(cb){
return del([
'dist/*'
]);
});
// Translate any src images to base64
gulp.task('inline-images', function(cb){
return gulp.src(['src/*.html','src/**/*.html'])
.pipe(inlineImages({/* options */}))
.pipe(gulp.dest('dist/'))
.on('error', function(err) {
gutil.log(gutil.colors.red(err.message));
process.exit(1);
});
});
// Handle any jpg, svg, png assets
gulp.task('file-assets', function(cb){
return gulp.src(['src/*.{png,gif,jpg,svg,pdf,mp4}','src/**/*.{png,gif,jpg,svg,pdf,mp4}'])
.pipe(gulp.dest('dist/'))
.on('error', function(err) {
gutil.log(gutil.colors.red(err.message));
process.exit(1);
});
});
// Pull in optional configuration from the package.json file, a la:
const {componentPath, componentDirectories, buildDestionation} = require('@visual-framework/vf-config');
// Minify any inline css/js
// https://www.npmjs.com/package/gulp-minify-inline
const optionsminify = {
// js: {
// output: {
// comments: true
// }
// },
jsSelector: 'script[type!="text/x-handlebars-template"]',
css: {
keepSpecialComments: 1
},
cssSelector: 'style[data-do-not-minify!="true"]'
};
// 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);
gulp.task('minify-inline', function(cb) {
return gulp.src(['dist/*.html','dist/**/*.html'])
.pipe(replace(/('|")http(s)?\:\/\/www.ebi/g, '$1//www.ebi')) // make all http/s ebi urls //
.pipe(minifyInline(optionsminify))
.on('error', function(err) {
gutil.log(gutil.colors.red(err.message));
process.exit(1);
})
.pipe(gulp.dest('dist/'));
// Watch folders for changes
gulp.task('watch', function() {
// left for convince for local watch additions
gulp.watch(['./build/css/styles.css'], gulp.series('eleventy:reload'));
});
// Write a partial apache config
// https://github.com/ebiwd/EBI-Corporatesite/issues/1
const pipeFunction = () => {
  return through.obj((file, enc, cb) => {
    console.log(file.path);
    return cb(null, file);
  });
};
gulp.task('apache-config', function(cb) {
const fileName = 'dist/.htaccess';
const fileName = 'build/.htaccess';
const endOfLine = '\r\n';
require('fs').writeFileSync(fileName, '# Static page mappings built with gulp');
require('fs').appendFileSync(fileName, endOfLine); // new line
require('fs').appendFileSync(fileName, 'AddOutputFilterByType DEFLATE text/html');
require('fs').appendFileSync(fileName, endOfLine); // new line
require('fs').appendFileSync(fileName, 'RewriteCond %{QUERY_STRING} !(^|&)q=');
return gulp.src(['dist/*.{html,jpg,png,gif,pdf,mp4}','dist/**/*.{html,svg,jpg,png,gif,pdf,mp4}'])
return gulp.src(['build/*.{html,jpg,png,gif,pdf,mp4}','build/**/*.{html,svg,jpg,png,gif,pdf,mp4}'])
.pipe(through.obj(function (file, enc, cb) {
const localFilePath = file.path.split('/dist/')[1];
const localFilePath = file.path.split('/build/')[1];
gutil.log(gutil.colors.green('Mapping:',localFilePath));
require('fs').appendFileSync(fileName, endOfLine); // new line
require('fs').appendFileSync(fileName, 'RewriteRule ^/'+localFilePath.split('index.htm')[0]+'?$ /staticpages/'+localFilePath+' [L]');
......@@ -95,29 +42,30 @@ gulp.task('apache-config', function(cb) {
);
});
// Development server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./src"
}
});
gulp.watch('**/*.{png,gif,jpg,svg,html}').on('change', browserSync.reload);
// gulp.watch('**/*.{png,gif,jpg,svg}' , ['file-assets']);
});
// Build it all
gulp.task('default', gulp.series(
'purge','file-assets','inline-images','minify-inline','apache-config'
));
// Alias for default
// Let's build this sucker.
gulp.task('build', gulp.series(
'default'
'vf-clean',
gulp.parallel('vf-css','vf-scripts','vf-component-assets'),
'vf-css:production', //optimise, prefix css
'fractal:build',
'fractal',
'eleventy:init',
'eleventy:build',
'apache-config'
));
// Local development
// Build and watch things during dev
gulp.task('dev', gulp.series(
'browser-sync'
'vf-clean',
gulp.parallel('vf-css','vf-scripts','vf-component-assets'),
'fractal:development',
'fractal',
'eleventy:init',
'eleventy:develop',
gulp.parallel('watch','vf-watch')
));
// Build it all
gulp.task('default', gulp.series(
'build'
));
This diff is collapsed.
{
"name": "EBI-Corporatesite",
"version": "1.0.0",
"version": "2.0.0",
"description": "Static pages for the main www.ebi.ac.uk site",
"main": "index.js",
"main": "gulpfile.js",
"vfConfig": {
"vfName": "EBI Boilerplate for Eleventy",
"vfNamespace": "ebieleventy-",
"vfComponentPath": "./src/components",
"vfBuildDestination": "./build",
"vfThemePath": "@frctl/mandelbrot"
},
"scripts": {
"build": "gulp build && echo \"🏋 Build completed\" && exit 0",
"dev": "gulp dev",
"build": "gulp",
"test": "echo \"Error: no test specified\" && exit 1"
"start": "npm run dev",
"test": "echo \"Error: no test specified\" && exit 0",
"update-components": "yarn upgrade-interactive --latest"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ebiwd/EBI-Corporatesite.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"author": "Ken Hawkins <ken.hawkins@embl.de> (https://www.embl.de/aboutus/communication_outreach/)",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/ebiwd/EBI-Corporatesite/issues"
},
"homepage": "https://github.com/ebiwd/EBI-Corporatesite#readme",
"devDependencies": {
"browser-sync": "^2.26.7",
"del": "^5.0.0",
"gulp": "^4.0.2",
"gulp-inline-images": "^1.2.6",
"gulp-minify-inline": "^1.1.0",
"gulp-replace": "^0.5.4",
"@11ty/eleventy": "0.12.1",
"@node-sass/node-module-importer": "1.2.3",
"@visual-framework/embl-breadcrumbs-lookup": "2.0.1",
"@visual-framework/embl-conditional-edit": "1.0.3",
"@visual-framework/embl-content-hub-loader": "1.0.8",
"@visual-framework/embl-grid": "2.1.2",
"@visual-framework/embl-logo": "1.1.0",
"@visual-framework/embl-notifications": "1.0.1",
"@visual-framework/vf-banner": "1.7.1",
"@visual-framework/vf-body": "^1.2.0",
"@visual-framework/vf-box": "2.3.1",
"@visual-framework/vf-breadcrumbs": "2.0.3",
"@visual-framework/vf-card": "2.5.4",
"@visual-framework/vf-card-container": "3.1.2",
"@visual-framework/vf-code-example": "1.2.1",
"@visual-framework/vf-config": "1.0.1-alpha.0",
"@visual-framework/vf-content": "1.5.1",
"@visual-framework/vf-core": "2.2.21",
"@visual-framework/vf-design-tokens": "3.4.0",
"@visual-framework/vf-divider": "2.0.0",
"@visual-framework/vf-extensions": "1.0.0-rc.1",
"@visual-framework/vf-favicon": "1.0.2",
"@visual-framework/vf-font-plex-mono": "1.1.1",
"@visual-framework/vf-font-plex-sans": "1.1.1",
"@visual-framework/vf-footer": "1.1.1",
"@visual-framework/vf-form": "2.0.0-alpha.1",
"@visual-framework/vf-grid": "1.4.1",
"@visual-framework/vf-heading": "1.0.1",
"@visual-framework/vf-hero": "3.2.0",
"@visual-framework/vf-inlay": "2.0.1",
"@visual-framework/vf-intro": "1.4.7",
"@visual-framework/vf-lede": "1.0.1",
"@visual-framework/vf-link": "2.0.0",
"@visual-framework/vf-logo": "1.5.1",
"@visual-framework/vf-navigation": "2.2.2",
"@visual-framework/vf-no-js": "1.0.1",
"@visual-framework/vf-sass-config": "2.5.2",
"@visual-framework/vf-sass-utilities": "1.0.1",
"@visual-framework/vf-search": "3.0.0-alpha.0",
"@visual-framework/vf-section-header": "1.3.3",
"@visual-framework/vf-stack": "2.1.1",
"@visual-framework/vf-summary": "1.4.2",
"@visual-framework/vf-summary-container": "1.0.0",
"@visual-framework/vf-tabs": "1.2.1",
"@visual-framework/vf-text": "1.0.2",
"@visual-framework/vf-u-fullbleed": "1.2.2",
"@visual-framework/vf-utility-classes": "2.0.0",
"e": "0.2.0",
"html-minifier": "4.0.0",
"list-stream": "2.0.0",
"require-dir": "1.2.0",
"through2": "^2.0.5"
}
}
# Visual Framework 2.0 patterns
If you need to manually install components, copy Visual Framework 2.0-compatible
components into this directory.
For components available in [vf-core](https://github.com/visual-framework/vf-core)
you can simply npm install them and they'll be available through the `vf-core-components`
symlink to `node_module/@visual-framework`.
<!-- https://fractal.build/guide/components/preview-layouts.html#creating-a-preview-layout -->
<link media="all" rel="stylesheet" href="../raw/{{_target.baseHandle}}/{{_target.baseHandle}}.css">
{{ yield | safe }}
/**
* Precompiled Nunjucks template: _preview.njk
*/
(function() {(window.nunjucksPrecompiled = window.nunjucksPrecompiled || {})["_preview"] = (function() {
function root(env, context, frame, runtime, cb) {
var lineno = 0;
var colno = 0;
var output = "";
try {
var parentTemplate = null;
output += "<!-- https://fractal.build/guide/components/preview-layouts.html#creating-a-preview-layout -->\n<link media=\"all\" rel=\"stylesheet\" href=\"../raw/";
output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "_target")),"baseHandle"), env.opts.autoescape);
output += "/";
output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "_target")),"baseHandle"), env.opts.autoescape);
output += ".css\">\n";
output += runtime.suppressValue(env.getFilter("safe").call(context, runtime.contextOrFrameLookup(context, frame, "yield")), env.opts.autoescape);
output += "\n";
if(parentTemplate) {
parentTemplate.rootRenderFunc(env, context, frame, runtime, cb);
} else {
cb(null, output);
}
;
} catch (e) {
cb(runtime.handleError(e, lineno, colno));
}
}
return {
root: root
};
})();
})();
bin
.github
.travis.yml
node_modules
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.