Commit a963aa52 authored by www-dev-migration's avatar www-dev-migration

Initial commit

parents
node_modules
.DS_Store
Thumbs.db
db.json
*.log
public
functions
src/site/_includes/css
src/site/_includes/js
.env
yarn-error.log
dist
build
temp
# Deploy to gh-pages
dist: trusty
language: node_js
node_js:
- 10
stages:
- deploy
before_script:
# - npm install
- npm install -g gulp-cli
- npm run-script build
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
cache:
paths:
- node_modules
on:
branch:
- master
# Eleventy boilerplate for Visual Framework 1.3
This allows you to use the [11ty](https://www.11ty.io) static site generator
with direct access to Visual Framework 1.3 and 2.0 components.
This is possible as the VF 2.0 is [no-conflict with VF 1.3](https://visual-framework.github.io/vf-welcome/).
**This is in active development as of 2019.08.16**
- We recommend using this over [EBI-Boilerplate-Jekyll](https://github.com/ebiwd/EBI-Boilerplate-Jekyll)
as node+Eleventy facilitates more flexible solutions and frees a Ruby dependency.
## 1. Creating a new project powered by ebi-eleventy-boilerplate
There are two methods you can use:
1. ~~Use the interactive npm template [RECOMMENDED]~~ Not yet implemented
- If you don't have npm, [install it](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
- The [`create-vf-eleventy`](https://github.com/visual-framework/create-vf-eleventy) project allows you to interactively create a new site by typing<br/> `npm init @visual-framework/vf-eleventy your-new-site-name ebi-eleventy-boilerplate`
- Follow the prompts
1. The GitHub template
- Click the "[Use this template](https://help.github.com/en/articles/creating-a-repository-from-a-template)" method; quick url: https://github.com/visual-framework/ebi-eleventy-boilerplate/generate
- Follow the prompts and then clone the new project to your local machine
## 2. Configuring your new site
- In `package.json` update `vfConfig`
- In `elevnety.js` update `pathPrefix`
- Update `./src/site/_data/siteConfig.js`
Otherwise configure gulp and eleventy as you would for any other project.
## 3. Developing your new site
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`
## 4. Adding Visual Framework components
To add a component you can use npm/Yarn or install it manually.
In either case you'll need to re-run `gulp dev` to ensure the component is fully loaded.
### By package
- installation: `yarn add @visual-framework/vf-logo`
- updating components: `yarn upgrade-interactive --latest`
- alias: `npm run update-components`
### Manual installation for customisation
1. Download a pattern
2. Copy it to `./src/components/vf-component-name`
### 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`
## 5. Deploying
- to come
## 6. 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.
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-eleventy--extensions");
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);
});
// 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");
return {
dir: {
input: "src/site",
output: "build",
data: "_data"
},
templateFormats : [
"njk", "md", // note that .md files will also be parsed with njk processor
"css", "js" // passthrough file copying for static assets
],
htmlTemplateEngine : ["njk", "md"],
markdownTemplateEngine : "njk",
passthroughFileCopy: true,
pathPrefix: "/ebi-eleventy-boilerplate/" // if your site is deployed to a sub-url, otherwise comment out
};
};
const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
// Uglify our javascript files into one.
gulp.task('js', function() {
return gulp.src("./src/js/**/*.js")
.pipe(concat('scripts.js'))
// .pipe(uglify())
.pipe(gulp.dest('./src/site/_includes/js'));
});
var gulp = require('gulp');
var sass = require("gulp-sass");
// Generate the css with sass
gulp.task('css', function() {
return gulp.src('./src/scss/*.scss')
.pipe(sass({
// outputStyle: 'compressed'
})
.on('error', sass.logError))
.pipe(gulp.dest('./build/css'));
});
var path = require('path');
var fs = require('fs');
// Ensure that the path to a file exists when saving
function ensureDirectoryExistence(filePath) {
var dirname = path.dirname(filePath);
if (fs.existsSync(dirname)) {
return true;
}
ensureDirectoryExistence(dirname);
fs.mkdirSync(dirname);
}
/*
Many of our scripts will need these
*/
module.exports = {
// Some default locations
buildSrc: "src",
buildDest: "build",
// Save some data to a local file for use in the build
storeData: function(fileName, data){
ensureDirectoryExistence(process.cwd() + fileName);
fs.writeFile(`${process.cwd()}/${fileName}`, data, function(err) {
if(err) {
console.log(err);
} else {
console.log(`Saved: ${process.cwd()}/${fileName}`);
}
});
},
};
var project = require('./_project.js');
var os = require("os");
var gulp = require('gulp');
var parallel = require("concurrent-transform");
var rename = require("gulp-rename");
var imageResize = require('gulp-image-resize');
// create a set of resize tasks at defined image widths
var resizeImageTasks = [];
[400,1000].forEach(function(size) {
var resizeImageTask = 'resize_' + size;
gulp.task(resizeImageTask, function(done) {
gulp.src(project.buildSrc + '/_includes/images/*')
.pipe(parallel(
imageResize({ width : size }),
os.cpus().length
))
.pipe(rename(function (path) { path.basename += "-" + size; }))
.pipe(gulp.dest(project.buildDest+ '/_includes/images'));
done();
});
resizeImageTasks.push(resizeImageTask);
});
// Copy our core images to the dist folder, and resize all preview images
gulp.task('images', gulp.parallel(resizeImageTasks, function copyOriginalImages(done) {
gulp.src(project.buildSrc + '/_includes/images/*')
.pipe(gulp.dest(project.buildDest+ '/_includes/images'))
done();
}));
const gulp = require('gulp');
const rename = require('gulp-rename');
let fractalBuildMode = 'build';
// -----------------------------------------------------------------------------
// Configuration
// -----------------------------------------------------------------------------
// Pull in some optional configuration from the package.json file, a la:
// "vfConfig": {
// "vfName": "My Component Library",
// "vfNameSpace": "myco-",
// "vfComponentPath": "./src/components",
// "vfBuildDestination": "./build",
// "vfThemePath": "@frctl/mandelbrot"
// },
// all settings are optional
// todo: this could/should become a JS module
const fs = require('fs');
const path = require('path');
const config = JSON.parse(fs.readFileSync('./package.json'));
config.vfConfig = config.vfConfig || [];
global.vfName = config.vfConfig.vfName || "Visual Framework 2.0";
global.vfNamespace = config.vfConfig.vfNamespace || "vf-";
global.vfComponentPath = config.vfConfig.vfComponentPath || __dirname + '/src/components';
global.vfBuildDestination = config.vfConfig.vfBuildDestination || __dirname + '/temp/build-files';
global.vfThemePath = config.vfConfig.vfThemePath || './tools/vf-frctl-theme';
const componentPath = path.resolve('.', global.vfComponentPath);
const buildDestionation = path.resolve('.', global.vfBuildDestination);
// Some Gulp tasks live in their own files, for the sake of clarity.
require('require-dir')('./gulp-tasks');
// Tasks to build/run vf-core component system
require('./node_modules/\@visual-framework/vf-core/tools/gulp-tasks/_gulp_rollup.js')(gulp, path, componentPath, buildDestionation);
// Eleventy config
process.argv.push('--config=eleventy.js');
// Watch folders for changess
gulp.task('watch', function() {
gulp.watch(['./src/components/**/*.scss'], gulp.parallel('vf-css'));
gulp.watch(['./src/components/**/*.js'], gulp.parallel('vf-scripts'));
gulp.watch(['./src/scss/**/*.scss','./src/scss/*.scss'], gulp.parallel('css'));
gulp.watch(['./src/js/**/*.js','./src/js/*.js'], gulp.parallel('js'));
});
gulp.task('elventy-set-to-serve', function(done) {
// Since we're not using the 11ty command line directly, we need to set the
// `--serve` param manually
process.argv.push('--serve');
process.env.ELEVENTY_ENV = 'development';
fractalBuildMode = 'server';
done();
});
gulp.task('elventy-set-to-build', function(done) {
// Since we're not using the 11ty command line directly, we need to set the
// `--serve` param manually
process.argv.push('--quiet');
process.env.ELEVENTY_ENV = 'production';
done();
});
// Run eleventy, but only after we wait for fractal to bootstrap
// @todo: consider if this could/should be two parallel gulp tasks
gulp.task('eleventy', function(done) {
global.vfBuilderPath = __dirname + '/build/vf-core-components';
global.vfDocsPath = __dirname + '/node_modules/\@visual-framework/vf-eleventy--extensions/fractal/docs';
global.vfOpenBrowser = false; // if you want to open a browser tab for the component library
global.fractal = require('@visual-framework/vf-core/fractal.js').initialize(fractalBuildMode,fractalReadyCallback); // make fractal components are available gloablly
function fractalReadyCallback(fractal) {
global.fractal = fractal; // save fractal globally
global.eleventy = require('@11ty/eleventy/cmd.js');
done();
}
});
// Let's build this sucker.
gulp.task('build', gulp.series(
'vf-clean',
gulp.parallel('css','js','vf-css', 'vf-scripts','vf-component-assets'),
'elventy-set-to-build',
'eleventy'
));
// Build and watch things during dev
gulp.task('dev', gulp.series(
'vf-clean',
gulp.parallel('css','js','vf-css', 'vf-scripts','vf-component-assets'),
'elventy-set-to-serve',
'eleventy',
'watch'
));
{
"name": "@visual-framework/vf-boilerplate-eleventy",
"version": "2.0.0-alpha.6",
"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"
},
"license": "Apache-2.0",
"author": "Ken Hawkins <ken.hawkins@embl.de> (https://www.embl.de/aboutus/communication_outreach/)",
"main": "gulpfile.js",
"vfConfig": {
"vfName": "VF Boilerplate for Eleventy",
"vfNamespace": "vfeleventy-",
"vfComponentPath": "./src/components",
"vfBuildDestination": "./build",
"vfThemePath": "@frctl/mandelbrot"
},
"scripts": {
"build": "gulp build && echo \"🏋 Build completed\" && exit 0",
"dev": "gulp dev",
"start": "npm run dev",
"test": "echo \"Error: no test specified\" && exit 0",
"update-components": "yarn upgrade-interactive --latest"
},
"dependencies": {
"@11ty/eleventy": "^0.8.3",
"@node-sass/node-module-importer": "^1.2.3",
"@visual-framework/embl-grid": "^1.0.0-alpha.3",
"@visual-framework/vf-banner": "1.0.0-alpha.3",
"@visual-framework/vf-code-example": "^1.0.0-alpha.3",
"@visual-framework/vf-content": "^1.0.0-beta.3",
"@visual-framework/vf-core": "^2.0.0-beta.1",
"@visual-framework/vf-design-tokens": "^1.0.0-beta.3",
"@visual-framework/vf-divider": "^1.0.0-rc.3",
"@visual-framework/vf-eleventy--extensions": "^1.0.0-alpha.2",
"@visual-framework/vf-favicon": "1.0.0-beta.3",
"@visual-framework/vf-font-plex-sans": "^1.0.0-beta.3",
"@visual-framework/vf-form__checkbox": "^1.0.0-alpha.3",
"@visual-framework/vf-form__core": "^1.0.0-alpha.3",
"@visual-framework/vf-form__helper": "^1.0.0-alpha.3",
"@visual-framework/vf-form__input": "^1.0.0-alpha.3",
"@visual-framework/vf-form__radio": "^1.0.0-alpha.3",
"@visual-framework/vf-form__select": "^1.0.0-alpha.3",
"@visual-framework/vf-form__textarea": "^1.0.0-alpha.3",
"@visual-framework/vf-grid": "^1.0.0-alpha.3",
"@visual-framework/vf-grid-page": "^1.0.0-alpha.3",
"@visual-framework/vf-heading": "^1.0.0-beta.3",
"@visual-framework/vf-intro": "^1.0.0-beta.3",
"@visual-framework/vf-lede": "^1.0.0-beta.3",
"@visual-framework/vf-no-js": "1.0.0-rc.3",
"@visual-framework/vf-sass-config": "^1.0.0-beta.3",
"@visual-framework/vf-text": "^1.0.0-beta.3",
"concurrent-transform": "^1.0.0",
"del": "^5.0.0",
"dotenv": "^8.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-babel": "^8.0.0",
"gulp-better-rollup": "^4.0.1",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-cssnano": "^2.1.3",
"gulp-image-resize": "^0.13.1",
"gulp-notify": "^3.2.0",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^1.4.0",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.0.2",
"gulp-shell": "^0.7.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-stylelint": "^9.0.0",
"gulp-svgmin": "^2.2.0",
"gulp-uglify": "^3.0.2",
"gulp-watch": "^5.0.1",
"html-minifier": "^4.0.0",
"list-stream": "^1.0.1",
"luxon": "^1.17.2",
"require-dir": "^1.0.0",
"rollup-plugin-includepaths": "^0.2.3",
"touch": "^3.1.0",
"yeoman-generator": "^4.0.1",
"yosay": "^2.0.2"
},
"bugs": {
"url": "https://github.com/visual-framework/vf-eleventy/issues"
},
"homepage": "https://github.com/visual-framework/vf-eleventy#readme",
"keywords": []
}
# 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`.
# Change Log
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## 0.0.11 (2019-06-03)
**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
## 0.0.10 (2019-05-02)
**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
## 0.0.9 (2019-03-28)
**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
## 0.0.8 (2019-02-28)
**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
## 0.0.7 (2019-02-28)
**Note:** Version bump only for package @visual-framework/vf-componenet-rollup
# 0.1.0
### Added
- added this
- added that
### Changes
- changed this
- changed that
### Removed
- deleted this
- deleted that
# vf-componenet-rollup Component
[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-componenet-rollup.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-componenet-rollup)
The `vf-componenet-rollup` compiles component Sass and JS into style.css and scripts.js files, retrospectively.
## Install
This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `vf-componenet-rollup` with this command.
```
$ npm install --save @visual-framework/vf-componenet-rollup
```
## Usage
The source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
```
@import "@visual-framework/vf-componenet-rollup/index.scss";
```
_Make sure you import any requirements along with the modules._
/*
*
* styles.css
* The Visual Framework kitchen sink of styles.
* Include this style sheet as a quick way to get *everything*,
* or follow the guide at github.com/visual-framework/vf-core
* to learn how to build custom and optimised CSS.
*
*/
@import 'vf-global-custom-properties.scss';
@import 'vf-global-variables.scss';
@import '_vf-variables.shame.scss';
@import 'vf-global-variables.scss';
@import 'vf-border-radius.variables.scss';
@import 'vf-breakpoints.variables.scss';
@import 'vf-colors.map.scss';
@import 'vf-ui-colors.map.scss';
@import 'vf-font--monospace.scss';
@import 'vf-font--sans.scss';
@import 'vf-font-families.variables.scss';
@import 'vf-links.variables.scss';
@import 'vf-spacing.map.scss';
@import 'vf-colors.custom-properties.scss';
@import 'vf-ui-colors.custom-properties.scss';
@import 'vf-functions.scss';