Skip to content

Commit d09d378

Browse files
author
Thorn Walli
committedMay 18, 2019
added svg symbol support
update
·
v4.2.7v4.1.0
1 parent b8830eb commit d09d378

38 files changed

+23269
-115
lines changed
 

‎.gitignore

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ out
99
gen
1010

1111
# VSCode
12-
.vscode
12+
.vscode/*
13+
!/.vscode/launch.json
1314

1415
### Node template
1516
# Logs
@@ -39,7 +40,6 @@ build/Release
3940
# Dependency directory
4041
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
4142
.DS_Store
42-
/package-lock.json
4343
node_modules/*
4444
/dev
4545
/build

‎.vscode/launch.json

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
{
2+
// Verwendet IntelliSense zum Ermitteln möglicher Attribute.
3+
// Zeigen Sie auf vorhandene Attribute, um die zugehörigen Beschreibungen anzuzeigen.
4+
// Weitere Informationen finden Sie unter https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "node",
9+
"request": "launch",
10+
"name": "Handlebar Test",
11+
"program": "${workspaceFolder}/test/handlebars/index.js"
12+
},
13+
{
14+
"type": "node",
15+
"request": "launch",
16+
"name": "Task SVGO",
17+
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
18+
"args": ["svgo", "--serverConfig=/env/config/hapi/config", "--gulpTaskConfig=/env/config/"],
19+
"env": {
20+
"NODE_ENV": "build"
21+
}
22+
},
23+
{
24+
"type": "node",
25+
"request": "launch",
26+
"name": "Task SVG Symbols",
27+
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
28+
"args": ["svg-symbols", "--serverConfig=/env/config/hapi/config", "--gulpTaskConfig=/env/config/"],
29+
"env": {
30+
"NODE_ENV": "build"
31+
}
32+
},
33+
{
34+
"type": "node",
35+
"request": "launch",
36+
"name": "Task Handlebars",
37+
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
38+
"args": ["handlebars", "--serverConfig=/env/config/hapi/config", "--gulpTaskConfig=/env/config/"],
39+
"env": {
40+
"NODE_ENV": "build"
41+
}
42+
},
43+
{
44+
"type": "node",
45+
"request": "launch",
46+
"name": "Task Generates",
47+
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
48+
"args": ["generates", "--serverConfig=/env/config/hapi/config", "--gulpTaskConfig=/env/config/"],
49+
"env": {
50+
"NODE_ENV": "build"
51+
}
52+
},
53+
{
54+
"type": "node",
55+
"request": "launch",
56+
"name": "Build",
57+
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
58+
"args": ["build", "--serverConfig=/env/config/hapi/config", "--gulpTaskConfig=/env/config/"],
59+
"env": {
60+
"NODE_ENV": "build"
61+
}
62+
},
63+
{
64+
"type": "node",
65+
"request": "launch",
66+
"name": "Dev",
67+
"program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
68+
"args": ["run", "dev", "--serverConfig=/env/config/hapi/config", "--gulpTaskConfig=/env/config/", "--server=/env/server"],
69+
"env": {
70+
"NODE_ENV": "development"
71+
}
72+
}
73+
]
74+
}

‎env/config/copy/map.json

+17-5
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@
77
"name": "default",
88
"files": {
99
"src": [
10-
"src/assets/**/*.{ttf,woff,eot,svg,ico,png,jpg,gif}",
11-
"!src/assets/svg-symbols/**/*.svg"
10+
"src/assets/**/*.{ttf,woff,eot,svg,ico,png,jpg,gif}"
11+
],
12+
"ignore": [
13+
"src/assets/svg-symbols/**/*.svg"
1214
],
1315
"dest": "<%= destination %>/assets"
1416
}
@@ -36,13 +38,23 @@
3638
{
3739
"src": [
3840
"src/assets/**/*.{ttf,woff,eot,svg,ico,png,jpg,gif}",
39-
"src/assets/svg/**/*.svg",
40-
"!src/assets/svg-symbols/**/*.svg"
41+
"src/assets/svg/**/*.svg"
42+
],
43+
"ignore": [
44+
"src/assets/svg-symbols/**/*.svg"
4145
],
4246
"tasks": [
4347
"default"
4448
]
4549
},
50+
{
51+
"src": [
52+
"generated/svg-symbols/**/*.svg"
53+
],
54+
"tasks": [
55+
"svg-symbols"
56+
]
57+
},
4658
{
4759
"src": [
4860
"src/external/**/*"
@@ -53,4 +65,4 @@
5365
}
5466
]
5567
}
56-
}
68+
}

‎env/config/handlebars/map.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
"critical": "<%= destination %>/css/critical.css",
5050
"docs-main": "css/docs.style.css",
5151
"docs-critical": "<%= destination %>/css/docs.critical.css"
52+
},
53+
"symbols": {
54+
"default": "<%= destination %>/assets/svg-symbols/default.svg"
5255
}
5356
},
5457
"subtasks": [
@@ -122,4 +125,4 @@
122125
}
123126
]
124127
}
125-
}
128+
}

‎env/config/svg-symbols/config.default.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const path = require('upath');
2+
const PREFIX = 'svg_symbol_default_';
3+
4+
module.exports = {
5+
svgClassname: 'default',
6+
id: '%f',
7+
className: '.' + PREFIX + '%f',
8+
templates: [
9+
path.join(__dirname, 'tmpl', 'default.pcss'),
10+
path.join(__dirname, 'tmpl', 'default.svg')
11+
],
12+
slug: function (name) {
13+
return name.replace(/[^a-zA-Z0-9_]/g, '_');
14+
},
15+
transformData: function (svg, data) {
16+
return {
17+
id: PREFIX + data.id,
18+
className: data.className,
19+
width: svg.width + 'px',
20+
height: svg.height + 'px',
21+
prefix: PREFIX,
22+
ratio: svg.height / svg.width,
23+
filename: 'default.svg'
24+
};
25+
}
26+
};

‎env/config/svg-symbols/map.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "svg-symbols",
3+
"task": "./lib/tasks/svg-symbols",
4+
"config": {
5+
"dest": "<%= destination_root %>/generated/svg-symbols",
6+
"subtasks": [
7+
{
8+
"name": "default",
9+
"files": {
10+
"src": [
11+
"<%= root %>/src/assets/svg/**/*.svg"
12+
]
13+
}
14+
}
15+
],
16+
"watch": [
17+
{
18+
"src": [
19+
"<%= root %>/src/assets/svg-symbols/*.svg"
20+
],
21+
"tasks": [
22+
"default"
23+
]
24+
}
25+
]
26+
}
27+
}

‎env/config/svg-symbols/tmpl/default.pcss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.partial[data-partial^="svgs/symbol"] {
2+
<% _.forEach( icons, function( icon) {
3+
4+
var width = icon.width, height = icon.height;
5+
if (width > height) {
6+
width = icon.height;
7+
height = icon.width;
8+
}
9+
10+
%>&<%=icon.className %> {
11+
&:before {
12+
padding-top: calc(<%= parseFloat(width) %> / <%= parseFloat(height) %> * 100)%;
13+
}
14+
}<%
15+
}); %>
16+
}

‎env/config/svg-symbols/tmpl/default.svg

+9
Loading

‎env/config/svgo/default.json

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
{
2+
"plugins": [
3+
{
4+
"cleanupAttrs": true
5+
},
6+
{
7+
"removeDoctype": true
8+
},
9+
{
10+
"removeXMLProcInst": true
11+
},
12+
{
13+
"removeComments": true
14+
},
15+
{
16+
"removeMetadata": true
17+
},
18+
{
19+
"removeTitle": true
20+
},
21+
{
22+
"removeDesc": true
23+
},
24+
{
25+
"removeUselessDefs": false
26+
},
27+
{
28+
"removeEditorsNSData": true
29+
},
30+
{
31+
"removeEmptyAttrs": true
32+
},
33+
{
34+
"removeHiddenElems": true
35+
},
36+
{
37+
"removeEmptyText": true
38+
},
39+
{
40+
"removeEmptyContainers": true
41+
},
42+
{
43+
"removeViewBox": false
44+
},
45+
{
46+
"cleanUpEnableBackground": true
47+
},
48+
{
49+
"convertStyleToAttrs": true
50+
},
51+
{
52+
"convertColors": true
53+
},
54+
{
55+
"convertPathData": true
56+
},
57+
{
58+
"convertTransform": true
59+
},
60+
{
61+
"removeUnknownsAndDefaults": true
62+
},
63+
{
64+
"removeNonInheritableGroupAttrs": true
65+
},
66+
{
67+
"removeUselessStrokeAndFill": true
68+
},
69+
{
70+
"removeUnusedNS": true
71+
},
72+
{
73+
"cleanupIDs": false
74+
},
75+
{
76+
"cleanupNumericValues": true
77+
},
78+
{
79+
"moveElemsAttrsToGroup": true
80+
},
81+
{
82+
"moveGroupAttrsToElems": true
83+
},
84+
{
85+
"collapseGroups": true
86+
},
87+
{
88+
"removeRasterImages": false
89+
},
90+
{
91+
"mergePaths": true
92+
},
93+
{
94+
"convertShapeToPath": false
95+
},
96+
{
97+
"sortAttrs": true
98+
},
99+
{
100+
"transformsWithOnePath": false
101+
},
102+
{
103+
"removeDimensions": true
104+
},
105+
{
106+
"removeAttrs": {
107+
"attrs": "(stroke|fill)"
108+
}
109+
}
110+
]
111+
}

‎env/config/svgo/map.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "svgo",
3+
"task": "./lib/tasks/svgo",
4+
"config": {
5+
"subtasks": [
6+
{
7+
"name": "default",
8+
"config": "<%= root %>/env/config/svgo/default.json",
9+
"files": {
10+
"src": [
11+
"<%= root %>/src/assets/svg/**/*.svg"
12+
],
13+
"ignore": [],
14+
"dest": "<%= destination %>/assets/svg"
15+
}
16+
}
17+
],
18+
"watch": [
19+
{
20+
"src": [
21+
"<%= root %>/src/assets/svg/**/*.svg"
22+
],
23+
"tasks": [
24+
"default"
25+
]
26+
}
27+
]
28+
}
29+
}

‎env/core/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ if (tasksDir) {
4747
*/
4848

4949
if (!gulp.task('prebuild')) {
50-
gulp.task('prebuild', gulp.series('clean', gulp.parallel('generates', 'copy', 'webpack:embed'), 'postcss', 'handlebars'));
50+
gulp.task('prebuild', gulp.series('clean', 'svg-symbols', gulp.parallel('generates', 'copy', 'webpack:embed'), 'postcss', 'svgo', 'handlebars'));
5151
}
5252

5353
if (!gulp.task('build')) {

‎env/core/lib/assemble/config.js

+3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const base64Helper = require('../handlebars/helpers/base64');
1919
const concatHelper = require('../handlebars/helpers/concat');
2020
const classMappingHelper = require('../handlebars/helpers/classMapping');
2121
const dataAttributesHelper = require('../handlebars/helpers/dataAttributes');
22+
const svgSymbolHelpers = require('../handlebars/helpers/svgSymbol');
2223

2324
const globHelper = require('../handlebars/helpers/glob');
2425
const globTreeHelper = require('../handlebars/helpers/globTree');
@@ -28,6 +29,8 @@ assemble.helpers(templateHelpers);
2829
assemble.asyncHelpers(layoutsHelpers);
2930
assemble.asyncHelper('raw', rawHelper);
3031
assemble.asyncHelper('base64', base64Helper);
32+
assemble.asyncHelper('svg-symbol', svgSymbolHelpers.svgSymbol);
33+
assemble.asyncHelper('svg-symbols', svgSymbolHelpers.svgSymbols);
3134
assemble.helper('concat', concatHelper);
3235
assemble.helper('class-mapping', classMappingHelper(engine));
3336
assemble.helper('data-attrs', dataAttributesHelper(engine));

‎env/core/lib/handlebars/helpers/svgSymbol.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
const fs = require('fs');
2+
const upath = require('upath');
3+
const cheerio = require('cheerio');
4+
5+
const ASSETS_PATH = 'assets/svg-symbols', IGNORED_ATTRS = [
6+
'embed', 'extern', 'xmlns', 'viewBox'
7+
];
8+
9+
module.exports.svgSymbol = function (name, id, options, cb) {
10+
const assetPath = options.hash.assetPath || ASSETS_PATH;
11+
name = name.toString();
12+
id = id.toString();
13+
14+
loadMap(name, options).then(function (data) {
15+
const symbol = data.$(`#${name}_${id}`);
16+
17+
if (symbol.length < 1) {
18+
throw new Error(`Can't find symbol id "${id}" in symbols "${name}"`);
19+
}
20+
21+
setUsedSymbols(options, name);
22+
23+
const isEmbed = options.hash.embed, isExtern = options.hash.extern;
24+
25+
const attrs = [
26+
'xmlns="http://www.w3.org/2000/svg"', `viewBox="${symbol.attr('viewBox')}"`
27+
];
28+
Object.keys(options.hash).forEach(function (name) {
29+
if (IGNORED_ATTRS.indexOf(name) < 0) {
30+
attrs.push(`${name}="${options.hash[name].toString()}"`);
31+
}
32+
});
33+
34+
let html;
35+
html = `<svg${attrs.length ? ' ' + attrs.join(' ') : ''}>`;
36+
37+
if (isEmbed) {
38+
html += symbol.html();
39+
} else {
40+
let href;
41+
if (isExtern) {
42+
href = upath.join(options.data.root.relativeToRoot, assetPath, `${name}.svg#${name}_${id}`);
43+
} else {
44+
href = upath.join(`#${name}_${id}`);
45+
}
46+
html += `<use xlink: href="${href}" />`;
47+
}
48+
html += '</svg>';
49+
cb(null, html);
50+
})
51+
.catch(function (e) {
52+
cb(e);
53+
});
54+
};
55+
56+
function setUsedSymbols (options, name) {
57+
const isEmbed = options.hash.embed, isExtern = options.hash.extern;
58+
options.data.root.usedSymbols = options.data.root.usedSymbols || [];
59+
if (options.data.root.usedSymbols.indexOf(name) < 0) {
60+
if (!isEmbed && !isExtern) {
61+
options.data.root.usedSymbols.push(name);
62+
}
63+
}
64+
}
65+
66+
module.exports.svgSymbols = function (options, cb) {
67+
let usedSymbols, html = '';
68+
if (options.hash.force) {
69+
usedSymbols = Object.keys(fileCache);
70+
} else {
71+
usedSymbols = options.data.root.usedSymbols || [];
72+
}
73+
74+
usedSymbols.map(function (name) {
75+
if (fileCache[name]) {
76+
html += fileCache[name].content;
77+
}
78+
});
79+
cb(null, html);
80+
};
81+
82+
const fileCache = {};
83+
84+
function loadMap (name, options) {
85+
return new Promise(resolve => {
86+
if (fileCache[name]) {
87+
resolve(fileCache[name]);
88+
}
89+
if (!(name in options.data.root.options.resources.symbols)) {
90+
throw new Error(`Can't find Handlebars symbols resource "${name}"`);
91+
}
92+
const path = upath.join(process.cwd(), options.data.root.options.resources.symbols[name]);
93+
94+
fs.readFile(path, 'utf-8', function (err, content) {
95+
if (err) {
96+
throw err;
97+
}
98+
fileCache[name] = { content, $: cheerio.load(content) };
99+
resolve(fileCache[name]);
100+
});
101+
});
102+
}

‎env/core/lib/tasks/copy.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ module.exports = function (name, config, serverConfig) {
77
return taskGenerator(name, config, serverConfig, function (taskName, task) {
88
gulp.task(taskName, function () {
99
return gulp
10-
.src(task.files.src)
10+
.src(task.files.src, { ignore: task.files.ignore })
1111
.pipe(changed(task.files.dest, { hasChanged: changed.compareSha1Digest }))
1212
.pipe(gulp.dest(task.files.dest))
1313
.pipe(livereload());

‎env/core/lib/tasks/svg-symbols.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const gulp = require('gulp');
2+
const svgSymbols = require('gulp-svg-symbols');
3+
const rename = require('gulp-rename');
4+
const taskGenerator = require('../taskGenerator');
5+
const path = require('upath');
6+
7+
module.exports = function (name, config, serverConfig) {
8+
return taskGenerator(name, config, serverConfig, function (taskName, task) {
9+
gulp.task(taskName, function () {
10+
return gulp.src(task.files.src)
11+
.pipe(svgSymbols(createConfig(task.name, task.prefix)))
12+
.pipe(rename({
13+
basename: task.name
14+
}))
15+
.pipe(gulp.dest(config.dest));
16+
});
17+
},
18+
function (config, tasks, cb) {
19+
gulp.parallel(tasks)(cb);
20+
});
21+
};
22+
23+
function createConfig (name, prefix) {
24+
prefix = prefix || '';
25+
return {
26+
svgAttrs: {
27+
class: name
28+
},
29+
id: '%f',
30+
class: `.${prefix}%f`,
31+
templates: [
32+
path.join(__dirname, 'svg-symbols', 'template.pcss'),
33+
path.join(__dirname, 'svg-symbols', 'template.svg')
34+
],
35+
slug: function (name) {
36+
return name.replace(/[^a-zA-Z0-9_]/g, '_');
37+
},
38+
transformData: function (svg, data) {
39+
return {
40+
id: prefix + data.id,
41+
className: data.className,
42+
width: svg.width + 'px',
43+
height: svg.height + 'px',
44+
prefix: prefix,
45+
ratio: svg.height / svg.width,
46+
filename: `${name}.svg`
47+
};
48+
}
49+
};
50+
}

‎env/core/lib/tasks/svg-symbols/template.pcss

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.partial[data-partial^="svgs/symbol"] {
2+
<% _.forEach( icons, function( icon) {
3+
4+
var width = icon.width, height = icon.height;
5+
if (width > height) {
6+
width = icon.height;
7+
height = icon.width;
8+
}
9+
10+
%>&<%=icon.id %> {
11+
&:before {
12+
padding-top: calc(<%= parseFloat(width) %> / <%= parseFloat(height) %> * 100%);
13+
}
14+
}
15+
<%
16+
}); %>}

‎env/core/lib/tasks/svg-symbols/template.svg

+9
Loading

‎env/core/lib/tasks/svgo.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const taskGenerator = require('../taskGenerator');
2+
const gulp = require('gulp');
3+
const svgo = require('gulp-svgo');
4+
5+
module.exports = function (name, config, serverConfig) {
6+
return taskGenerator(name, config, serverConfig, function (taskName, task) {
7+
gulp.task(taskName, function () {
8+
return gulp.src(task.files.src, { ignore: task.files.ignore })
9+
.pipe(svgo(require(task.config)))
10+
.pipe(gulp.dest(task.files.dest));
11+
});
12+
});
13+
};

‎package-lock.json

+22,454
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+5
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
"task-handlebars": "cross-env NODE_ENV=build node node_modules/gulp/bin/gulp handlebars --serverConfig=/env/config/hapi/config --gulpTaskConfig=/env/config/",
1616
"task-generates": "cross-env NODE_ENV=build node node_modules/gulp/bin/gulp generates --serverConfig=/env/config/hapi/config --gulpTaskConfig=/env/config/",
1717
"task-webpack-app": "cross-env NODE_ENV=production node node_modules/gulp/bin/gulp webpack:app --serverConfig=/env/config/hapi/config --gulpTaskConfig=/env/config/",
18+
"task-svgo": "cross-env NODE_ENV=build node node_modules/gulp/bin/gulp svgo --serverConfig=/env/config/hapi/config --gulpTaskConfig=/env/config/",
19+
"task-svg-symbols": "cross-env NODE_ENV=build node node_modules/gulp/bin/gulp svg-symbols --serverConfig=/env/config/hapi/config --gulpTaskConfig=/env/config/",
1820
"deploy-now": "npm run build && now ./build -A ../now.json"
1921
},
2022
"dependencies": {
@@ -41,6 +43,9 @@
4143
"gulp-nodemon": "^2.4.2",
4244
"gulp-notify": "^3.2.0",
4345
"gulp-postcss": "^8.0.0",
46+
"gulp-rename": "^1.4.0",
47+
"gulp-svg-symbols": "^3.2.3",
48+
"gulp-svgo": "^2.1.1",
4449
"h2o2": "^8.2.0",
4550
"handlebars-layouts": "^3.1.4",
4651
"handlebars-utils": "^1.0.6",

‎src/assets/svg/logo.svg

+106
Loading

‎src/js/docs.js

+8
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@ function refreshPreviewSize () {
99
}
1010

1111
window.onload = function () {
12+
const resize = function () {
13+
Array.from(document.querySelectorAll('.auto-max-height')).forEach(function (el) {
14+
el.style.height = `${el.children[0].offsetHeight}px`;
15+
});
16+
};
17+
document.addEventListener('resize', resize);
18+
resize();
19+
1220
previewContainer = document.getElementById('overviewContentPreview');
1321

1422
if (previewContainer) {

‎src/js/embed.js

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
2+
document.documentElement.classList.remove('no-js');
3+
14
import 'script-loader!fg-loadcss';
25
import 'script-loader!fg-loadcss/src/cssrelpreload';
36
import './embed/fontfaceObserver';

‎src/js/partials/organisms/Header.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import DomModel from '../../base/DomModel';
33

44
export default Controller.extend({
55
modelConstructor: DomModel.extend({
6-
session: {}
6+
session: {
7+
}
78
}),
89

9-
bindings: {},
10+
bindings: {
11+
},
1012

1113
initialize () {
1214
Controller.prototype.initialize.apply(this, arguments);
13-
console.log('Header INIT');
1415
}
1516
});

‎src/pcss/base/colors.pcss

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
:root {
2-
--color-1: #000;
3-
--color-2: #002b0d;
4-
--color-3: #063315;
5-
--color-4: #0c833d;
6-
--color-5: #14f074;
2+
--color-1: #ddd;
3+
--color-2: #fff;
4+
--color-3: #000;
5+
--color-4: #333;
6+
--color-5: #666;
7+
--color-main-background: var(--color-1);
8+
--color-header-background: var(--color-1);
79
--color-primary: var(--color-5);
810
--color-primary-hover: var(--color-4);
911

‎src/pcss/critical.pcss

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
}
1010

1111
html {
12-
color: white;
13-
background: var(--color-1);
12+
color: var(--color-copy-primary);
13+
background: var(--color-main-background);
1414
}
1515

1616
body {

‎src/pcss/partials/docs/overview.pcss

+27-8
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,33 @@
2020
border-right: solid #bbb 1px;
2121
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
2222

23-
& h3 {
24-
padding: 10px 20px;
25-
margin: 0;
26-
font-size: 15px;
27-
letter-spacing: 1px;
28-
background: rgba(0, 0, 0, 0.05);
29-
border-top: solid #ddd 1px;
30-
border-bottom: solid #ddd 1px;
23+
& > div {
24+
& > label {
25+
cursor: pointer;
26+
}
27+
28+
& h3 {
29+
padding: 10px 20px;
30+
margin: 0;
31+
font-size: 15px;
32+
letter-spacing: 1px;
33+
background: rgba(0, 0, 0, 0.05);
34+
border-top: solid #ddd 1px;
35+
border-bottom: solid #ddd 1px;
36+
}
37+
38+
& > input {
39+
display: none;
40+
}
41+
}
42+
43+
& > div > label + input + div {
44+
overflow: hidden;
45+
transition: height 0.2s linear;
46+
}
47+
48+
& > div > label + input:not(:checked) + div {
49+
height: 0 !important;
3150
}
3251
}
3352

‎src/pcss/partials/organisms/header.pcss

+23-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
.partial[data-partial="organisms/header"] {
2-
padding: 20px;
3-
margin: 20px;
4-
border: solid var(--color-primary) 1px;
2+
position: fixed;
3+
top: 0;
4+
right: 0;
5+
left: 0;
6+
z-index: 10;
7+
overflow: hidden;
8+
9+
& > div {
10+
padding: 20px;
11+
}
12+
13+
& nav {
14+
padding: 20px;
15+
background: var(--color-header-background);
16+
border: solid var(--color-primary) 1px;
17+
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
18+
}
19+
}
20+
21+
[data-partial="layouts/docs"] {
22+
& .partial[data-partial="organisms/header"] {
23+
position: relative;
24+
}
525
}

‎src/pcss/partials/organisms/section.pcss

+8
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,12 @@
88
background: var(--color-2);
99
border: solid var(--color-primary) 1px;
1010
}
11+
12+
&:first-child {
13+
padding-top: 0;
14+
}
15+
16+
&:last-child {
17+
padding-bottom: 0;
18+
}
1119
}

‎src/tmpl/docs/index.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,6 @@
22
layout: 'docs/layouts/default'
33
---
44
{{{mixin "docs/overview"}}}
5+
6+
7+

‎src/tmpl/index.hbs

+13
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,23 @@ layout: 'layouts/default'
77

88
{{{mixin "organisms/section/stage"}}}
99

10+
11+
{{#mixin "organisms/section"}}
12+
13+
{{#content "content"}}
14+
{{{svg-symbol "default" "logo" }}}
15+
{{{svg-symbol "default" "logo" extern=true}}}
16+
{{{svg-symbol "default" "logo" embed=true}}}
17+
{{/content}}
18+
19+
{{/mixin}}
20+
1021
{{{mixin "organisms/section/text"}}}
1122

1223
{{{mixin "organisms/section/text-image"}}}
1324

1425
{{/content}}
1526
{{/mixin}}
1627

28+
29+

‎src/tmpl/partials/atoms/picture.hbs

+6-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ docs:
1111
class:
1212
type: "string"
1313
required: false
14-
values: ["align-left-[default,sm,md,lg,xl]", "align-right-[default,sm,md,lg,xl]"]
1514
sources:
1615
type: "array"
1716
required: true
@@ -20,11 +19,15 @@ docs:
2019
absolute: {type: "boolean", required: false, values: [true, false]}
2120
srcset: {type: "string", required: true}
2221
sizes:
23-
type: "map"
22+
type: "object"
2423
required: false
2524
placeholder:
2625
type: "string"
2726
required: false
27+
focal-point:
28+
type: "object"
29+
required: false
30+
values: [{x: 0.5, y: 1}]
2831
data:
2932
lazy: false
3033
title: "sample image"
@@ -52,7 +55,7 @@ data:
5255
{{/each}}
5356
<!--[if IE 9]></video><![endif]-->
5457

55-
<img {{#if lazy}}class="lazyload" src="{{{placeholder}}}" data-src{{else}}src{{/if}}="{{#unless sources.0.absolute}}{{{relativeToRoot}}}{{/unless}}{{sources.0.srcset}}" alt="{{title}}" {{#if focal-point}} style="object-position: {{multiply focal-point.x 100}}% {{multiply focal-point.y 100}}%;" {{/if}}
58+
<img {{#if lazy}}class="lazyload" src="{{{placeholder}}}" data-src{{else}}src{{/if}}="{{#unless sources.0.absolute}}{{{relativeToRoot}}}{{/unless}}{{fallback placeholder sources.0.srcset}}" alt="{{title}}" {{#if focal-point}} style="object-position: {{multiply focal-point.x 100}}% {{multiply focal-point.y 100}}%;" {{/if}}
5659
/>
5760
</picture>
5861

‎src/tmpl/partials/docs/layouts/default.hbs

+34-33
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,48 @@
11

22
<!DOCTYPE html>
3-
<html class="partial" data-partial="layouts/docs" lang="{{lang}}">
4-
<head>
5-
<title>{{title}}</title>
3+
<html class="partial" data-partial="layouts/docs" lang="{{lang}}" class="no-js">
4+
<head>
5+
<title>{{title}}</title>
66

7-
<style type="text/css">
8-
{{{raw options.resources.css.docs-critical}}}
9-
</style>
7+
<style type="text/css">
8+
{{{raw options.resources.css.docs-critical}}}
9+
</style>
1010

11-
{{#if globals.fonts}}
12-
{{{mixin "commons/head/fonts" fonts=globals.fonts}}}
13-
{{/if}}
14-
15-
16-
{{#if options.watch.status}}
17-
<script type="text/javascript">
18-
if('WebSocket' in window || 'MozWebSocket' in window) {
19-
var host = (location.host || 'localhost').split(':')[0];
20-
document.write('<script src="//' + host + ':{{options.watch.config.port}}/livereload.js?snipver=1"></' + 'script>');
21-
}
22-
</script>
23-
{{/if}}
11+
{{#if globals.fonts}}
12+
{{{mixin "commons/head/fonts" fonts=globals.fonts}}}
13+
{{/if}}
2414

25-
<link rel="preload" href="{{relativeToRoot}}{{options.resources.css.docs-main}}" as="style" onload="this.rel='stylesheet';" media="screen">
26-
<noscript><link rel="stylesheet" href="{{relativeToRoot}}{{options.resources.css.docs-main}}"></noscript>
2715

16+
{{#if options.watch.status}}
2817
<script type="text/javascript">
29-
{{raw options.resources.js.embed}}
18+
if('WebSocket' in window || 'MozWebSocket' in window) {
19+
var host = (location.host || 'localhost').split(':')[0];
20+
document.write('<script src="//' + host + ':{{options.watch.config.port}}/livereload.js?snipver=1"></' + 'script>');
21+
}
3022
</script>
23+
{{/if}}
3124

32-
{{!-- polyfills --}}
33-
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=HTMLPictureElement" type="text/javascript" defer></script>
25+
<link rel="preload" href="{{relativeToRoot}}{{options.resources.css.docs-main}}" as="style" onload="this.rel='stylesheet';" media="screen">
26+
<noscript><link rel="stylesheet" href="{{relativeToRoot}}{{options.resources.css.docs-main}}"></noscript>
3427

35-
{{!-- @TODO JAVASCRIPT CHUNKS - Sets webpackPublicPath variable for override root javascript path. Example: "/js/app.js" -> "/docroot/js/app.js" --}}
36-
<script type="text/javascript">
37-
window.webpackPublicPath = '{{{relativeToRoot}}}js/';
38-
</script>
28+
<script type="text/javascript">
29+
{{raw options.resources.js.embed}}
30+
</script>
31+
32+
{{!-- polyfills --}}
33+
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=HTMLPictureElement" type="text/javascript" defer></script>
3934

40-
</head>
41-
<body>
35+
{{!-- @TODO JAVASCRIPT CHUNKS - Sets webpackPublicPath variable for override root javascript path. Example: "/js/app.js" -> "/docroot/js/app.js" --}}
36+
<script type="text/javascript">
37+
window.webpackPublicPath = '{{{relativeToRoot}}}js/';
38+
</script>
4239

43-
{% body %}
40+
</head>
41+
<body>
4442

45-
<script type="text/javascript" src="{{{relativeToRoot}}}{{options.resources.js.docs}}" async defer></script>
46-
</body>
43+
{% body %}
44+
45+
<script type="text/javascript" src="{{{relativeToRoot}}}{{options.resources.js.docs}}" async defer></script>
46+
</body>
4747
</html>
48+

‎src/tmpl/partials/docs/layouts/detail.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@ layout: 'docs/layouts/default'
66
{{{{/doc-detail}}}}
77

88
{{#if (is env "development")}}{{{mixin "commons/breakpoint"}}}{{/if}}
9+
10+
{{!-- rendering used svg symbols if not embed or extern --}}
11+
{{{svg-symbols force=true}}}
912

1013
<script type="text/javascript" src="{{{relativeToRoot}}}{{options.resources.js.main}}" async defer></script>

‎src/tmpl/partials/docs/overview.hbs

+12-10
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,20 @@ preview-sizes:
2222
---
2323
<div class="partial" data-partial="docs/overview">
2424
<div class="overview__menu" id="overviewMenu">
25-
<div>
26-
{{#each lists}}
25+
{{#each lists}}
2726
<div>
28-
<h3>{{{headline}}}</h3>
29-
{{#globTree glob}}
30-
{{#each this}}
31-
{{{mixin "docs/accordeon" this}}}
32-
{{/each}}
33-
{{/globTree}}
27+
<label for="{{{camelcase headline }}}"><h3>{{{headline}}}</h3></label><input type="checkbox" id="{{{camelcase headline }}}" checked />
28+
<div>
29+
<div>
30+
{{#globTree glob}}
31+
{{#each this}}
32+
{{{mixin "docs/accordeon" this}}}
33+
{{/each}}
34+
{{/globTree}}
35+
</div>
36+
</div>
3437
</div>
35-
{{/each}}
36-
</div>
38+
{{/each}}
3739
<span class="overview__menu__size-helper" id="overviewMenuSizeHelper"></span>
3840
</div>
3941
<div class="overview__content" id="overviewContent">

‎src/tmpl/partials/layouts/default.hbs

+39-36
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,54 @@
11

22
<!DOCTYPE html>
3-
<html data-partial="layouts/default" lang="{{lang}}">
4-
<head>
5-
{{#if options.watch.status}}
6-
<script type="text/javascript">
7-
if('WebSocket' in window || 'MozWebSocket' in window) {
8-
var host = (location.host || 'localhost').split(':')[0];
9-
document.write('<script src="//' + host + ':{{options.watch.config.port}}/livereload.js?snipver=1"></' + 'script>');
10-
}
11-
</script>
12-
{{/if}}
3+
<html data-partial="layouts/default" lang="{{lang}}" class="no-js">
4+
<head>
5+
{{#if options.watch.status}}
6+
<script type="text/javascript">
7+
if('WebSocket' in window || 'MozWebSocket' in window) {
8+
var host = (location.host || 'localhost').split(':')[0];
9+
document.write('<script src="//' + host + ':{{options.watch.config.port}}/livereload.js?snipver=1"></' + 'script>');
10+
}
11+
</script>
12+
{{/if}}
1313

14-
<title>{{title}}</title>
14+
<title>{{title}}</title>
1515

16-
{{{mixin "commons/head/meta" meta=globals.meta}}}
17-
{{{mixin "commons/head/meta" meta=globals.meta-og}}}
16+
{{{mixin "commons/head/meta" meta=globals.meta}}}
17+
{{{mixin "commons/head/meta" meta=globals.meta-og}}}
1818

19-
<style type="text/css">
20-
{{{raw options.resources.css.critical}}}
21-
</style>
19+
<style type="text/css">
20+
{{{raw options.resources.css.critical}}}
21+
</style>
2222

23-
{{#if globals.fonts}}
24-
{{{mixin "commons/head/fonts" fonts=globals.fonts}}}
25-
{{/if}}
23+
{{#if globals.fonts}}
24+
{{{mixin "commons/head/fonts" fonts=globals.fonts}}}
25+
{{/if}}
2626

27-
<link rel="preload" href="{{relativeToRoot}}{{options.resources.css.main}}" as="style" onload="this.rel='stylesheet';" media="screen">
28-
<noscript><link rel="stylesheet" href="{{relativeToRoot}}{{options.resources.css.main}}"></noscript>
27+
<link rel="preload" href="{{relativeToRoot}}{{options.resources.css.main}}" as="style" onload="this.rel='stylesheet';" media="screen">
28+
<noscript><link rel="stylesheet" href="{{relativeToRoot}}{{options.resources.css.main}}"></noscript>
2929

30-
<script type="text/javascript">
31-
{{raw options.resources.js.embed}}
32-
</script>
30+
<script type="text/javascript">
31+
{{raw options.resources.js.embed}}
32+
</script>
3333

34-
{{!-- polyfills --}}
35-
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=HTMLPictureElement" type="text/javascript" defer></script>
34+
{{!-- polyfills --}}
35+
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=HTMLPictureElement" type="text/javascript" defer></script>
3636

37-
{{!-- @TODO JAVASCRIPT CHUNKS - Sets webpackPublicPath variable for override root javascript path. Example: "/js/app.js" -> "/docroot/js/app.js" --}}
38-
<script type="text/javascript">
39-
window.webpackPublicPath = '{{{relativeToRoot}}}js/';
40-
</script>
37+
{{!-- @TODO JAVASCRIPT CHUNKS - Sets webpackPublicPath variable for override root javascript path. Example: "/js/app.js" -> "/docroot/js/app.js" --}}
38+
<script type="text/javascript">
39+
window.webpackPublicPath = '{{{relativeToRoot}}}js/';
40+
</script>
4141

42-
</head>
43-
<body>
42+
</head>
43+
<body>
4444

45-
{% body %}
45+
{% body %}
4646

47-
{{#if (is env "development")}}{{{mixin "commons/breakpoint"}}}{{/if}}
47+
{{!-- rendering used svg symbols if not embed or extern --}}
48+
{{{svg-symbols}}}
4849

49-
<script type="text/javascript" src="{{{relativeToRoot}}}{{options.resources.js.main}}" async defer></script>
50-
</body>
50+
{{#if (is env "development")}}{{{mixin "commons/breakpoint"}}}{{/if}}
51+
52+
<script type="text/javascript" src="{{{relativeToRoot}}}{{options.resources.js.main}}" async defer></script>
53+
</body>
5154
</html>

‎src/tmpl/partials/organisms/header.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ data:
66
navigation: 'ref:molecules/navigation'
77
---
88
<header class="partial controller" data-partial="organisms/header" data-controller="./partials/organisms/Header">
9-
{{{mixin "molecules/navigation" navigation}}}
9+
<div>{{{mixin "molecules/navigation" navigation}}}</div>
1010
</header>
1111

1212

‎src/tmpl/partials/organisms/section/text-image.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ data:
1515
{{#mixin "organisms/section" this partial-name="organisms/section/text-image" class=(class-mapping class text-image--right=imageRight)}}
1616
{{#content "content"}}
1717
<div class="row">
18-
<div class="col-12 col-md-6 text-image__image">{{{mixin "atoms/picture" picture lazy=true}}}</div>
18+
<div class="col-12 col-md-6 text-image__image">{{{mixin "atoms/picture" picture lazy=false}}}</div>
1919
<div class="col-12 col-md-6 text-image__text">{{{mixin "molecules/article" article }}}</div>
2020
</div>
2121
{{/content}}

0 commit comments

Comments
 (0)
Please sign in to comment.