axe-web-public/block-dev-tool
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added editorconfig and option to set section layout.

Browse Source
This commit is contained in:
Roman Axelrod
2022-04-23 18:33:32 +03:00
parent 41daff5390
commit 210b600f21
18 changed files with 262 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.editorconfig
+23
View File
@@ -0,0 +1,23 @@
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
# WordPress Coding Standards
# https://make.wordpress.org/core/handbook/coding-standards/
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2
[*.json]
indent_style = tab
indent_size = 4
[*.md]
trim_trailing_whitespace = false
.gitignore
-4
View File
@@ -9,7 +9,3 @@ deploy.sh
deploy-*.sh
# Custom
assets/css/**/*.min.css*
assets/css-old/**/*.min.css*
components/**/*.min.css*
config.js
README.md
+31 -16
View File
@@ -2,16 +2,22 @@
Install required modules:
```
```sh
npm install
```
Run development environment:
```
```sh
npm start
```
## How it works
The project runs `gulp` and `browsersync` beyond the scenes.
Each change in template, styling or script files will reload the page. The idea is to have a comfortable development
environment.
# Block Structure
You will find all the block files in `/src` folder.
@@ -35,26 +41,31 @@ We have a “blocks system”, means you will have to follow strict rules and us
## Template Layout & Data
### Handlebars
In this project, [Handlebars](https://handlebarsjs.com/guide/ "What is Handlebars") used as a template engine.
All the template layout must be in a single `*.hbs` file that located in `/src` folder.
### Data
You will find multiple `*.json` files in `/data` folder after the first run of `npm start`.
These files are used as data sources in layout. By reviewing these files you can understand what parameters you have and
how the data is stored. Don't change or edit these files - use the data as it is.
how the data is stored.
There are multiple data sources since the block can be reused in different situations with different data. We have to
make sure that the block is always rendered properly.
> Don't change or edit these files - use the data as it is!
### Handlebars
[Handlebars](https://handlebarsjs.com/guide/ "What is Handlebars") used as a template engine in the project.
All the template layout must be in a single `*.hbs` file that located in `/src` folder.
> Use the data that is available in `/data` folder.
> Avoid using any kind of "freestyle" input/content. Your template file must contain only HTML tags and Handlebars parameters.
### Static Media Files
Use the `/src/images` folder in case you need to upload images or video files to the template. These files will be
available by the next URL: http://localhost:3000/images/${filename}
Use the `/src/images` folder in case you need to upload images or video files to the template.
These files will be available by the next URL: http://localhost:3000/images/${filename}
### Class Naming Convention
@@ -69,10 +80,10 @@ min-width: ...px).
### CSS Units
Use `rem` units instead of pixels. `1rem = 16pixels`.
No need to use rem in situations of `1px` or `2px`. (usually used for borders width).
Use `rem` units instead of pixels.
For example, `1rem = 16pixels` depends on project.
No need to use rem in situations of `1px`, `2px` or `3px`. (usually used for borders width).
It's important to mention that the block is "elastic". By using `rem` units we are able to scale the layout and keep the
aspect ratio.
@@ -81,7 +92,7 @@ aspect ratio.
The development environment includes CSS rules of the original project. This is including fonts, CSS variables,
container logic etc...
The CSS file is embedded in served HTML.
The CSS file is already embedded in served HTML.
# JavaScript
@@ -97,6 +108,11 @@ The lib is included in the project and ready for use. Test with `window.Swiper`
Use development toolbar to switch between data sources.
## Hover/Focus States
Make sure all "clickable" elements have `&:hover` & `&:focus` states in CSS rules.
This might be related to links, buttons or any other interactive elements.
## Responsiveness
Make sure the layout is rendered correctly on all standard breakpoint size:
@@ -123,6 +139,5 @@ Compare the final result with provided screenshots.
You can use
available [Browser Extensions](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en)
or any other tool/approach that you're familiar with.
The idea is to have "pretty close" result to requested design.
config/default.cjs
+2 -2
View File
@@ -1,4 +1,4 @@
module.exports = {
cssUrl: "https://",
blockName: "template",
cssUrl: "https://",
blockName: "template",
}
config/development.cjs
+3 -3
View File
@@ -1,5 +1,5 @@
module.exports = {
mode: "development",
cssUrl: "https://",
blockName: "template",
mode: "development",
cssUrl: "https://",
blockName: "template",
}
data/default.json
+4 -4
View File
@@ -1,6 +1,6 @@
{
"title": "As a Global Salesforce Partner,\n we deliver Service Cloud solutions\n and complex Field Service Management\n in diverse industries worldwide",
"phrases": "<p><b>Delivering top results to industry leaders:</b></p>",
"cta_text": "Our Success Stories",
"url": "https://google.com"
"title": "As a Global Salesforce Partner,\n we deliver Service Cloud solutions\n and complex Field Service Management\n in diverse industries worldwide",
"phrases": "<p><b>Delivering top results to industry leaders:</b></p>",
"cta_text": "Our Success Stories",
"url": "https://google.com"
}
data/two.json
+4 -4
View File
@@ -1,6 +1,6 @@
{
"title": "Option Two",
"phrases": "<p><b>Delivering top results to industry leaders:</b></p>",
"cta_text": "Our Success Stories",
"url": "https://google.com"
"title": "Option Two",
"phrases": "<p><b>Delivering top results to industry leaders:</b></p>",
"cta_text": "Our Success Stories",
"url": "https://google.com"
}
layouts/page-container.hbs → layouts/alignfull.hbs
+1 -3
View File
@@ -7,9 +7,7 @@
{{> (include_partial "layouts/partials/toolbar") }}
<main>
<div class="container">
{{> (include_block_template) }}
</div>
{{> (include_block_template) }}
</main>
{{> (include_partial "layouts/partials/scripts") }}
layouts/page.hbs → layouts/container.hbs
+2
View File
@@ -7,7 +7,9 @@
{{> (include_partial "layouts/partials/toolbar") }}
<main>
<div class="container">
{{> (include_block_template) }}
</div>
</main>
{{> (include_partial "layouts/partials/scripts") }}
layouts/partials/head.hbs
+6 -6
View File
@@ -1,9 +1,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ config.cssUrl }}">
<link rel="stylesheet" href="styles/page--main.css">
<link rel="stylesheet" href="styles/{{ config.blockName }}.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<link rel="stylesheet" href="{{ config.cssUrl }}">
<link rel="stylesheet" href="styles/page--main.css">
<link rel="stylesheet" href="styles/{{ config.blockName }}.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
</head>
layouts/partials/toolbar.hbs
+8 -8
View File
@@ -1,11 +1,11 @@
<header class="page_toolbar">
<div>
<label for="data-options">Data Options: </label>
<div>
<label for="data-options">Data Options: </label>
<select name="data" id="data-options">
{{#each config.dataFiles }}
<option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
{{/each}}
</select>
</div>
<select name="data" id="data-options">
{{#each config.dataFiles }}
<option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
{{/each}}
</select>
</div>
</header>
layouts/scripts/page--toolbar.js
+8 -8
View File
@@ -1,13 +1,13 @@
(function () {
const dataOptionsSelect = document.getElementById('data-options');
if (!dataOptionsSelect) {
return;
}
const dataOptionsSelect = document.getElementById('data-options');
if (!dataOptionsSelect) {
return;
}
dataOptionsSelect.addEventListener('change', function () {
console.log(this.value)
window.location = '?data=' + this.value;
})
dataOptionsSelect.addEventListener('change', function () {
console.log(this.value)
window.location = '?data=' + this.value;
})
})();
layouts/styles/page--main.css
+11 -11
View File
@@ -1,20 +1,20 @@
body {
margin: 0;
font-size: 1rem;
margin: 0;
font-size: 1rem;
}
header.page_toolbar {
font-family: Arial, sans-serif;
background-color: #ccc;
padding: 1rem;
font-family: Arial, sans-serif;
background-color: #ccc;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
}
header.page_toolbar select {
font-size: 0.85rem;
padding: 0.25rem;
font-size: 0.85rem;
padding: 0.25rem;
}
package-template.json
+10
View File
@@ -0,0 +1,10 @@
{
"name": "template-block",
"version": "1.0.0",
"scripts": {
"start": "component-dev"
},
"devDependencies": {
"axe-web-component": "git+https://git.devdevdev.life/roman/axe-web-component.git#master"
}
}
server.js
+81 -76
View File
@@ -18,13 +18,16 @@ import fs from "fs/promises";
* Constants
*/
const isDev = config.get('mode') === 'development';
const isDev = config.has('mode') && config.get('mode') === 'development';
const modulePath = 'node_modules/axe-web-component/';
const projectDir = isDev ? '' : modulePath;
console.log('Development Mode:', isDev);
const sass = gulpSass(dartSass);
buildStyleFiles()
buildScriptFiles()
/**
* Init server
*/
@@ -32,7 +35,7 @@ const sass = gulpSass(dartSass);
const app = express();
const hbs = create({
extname: '.hbs', defaultLayout: false, partialsDir: ['.'],
extname: '.hbs', defaultLayout: false, partialsDir: ['.'],
});
app.engine('.hbs', hbs.engine);
@@ -42,66 +45,68 @@ app.set('views', projectDir + 'layouts');
const dataFiles = prepareListOfDataFiles(await fs.readdir('./data'));
app.get('/', async (req, res) => {
let jsonFileName = (req.query.data) ? req.query.data : 'default';
if (!jsonFileName || !await fsExtra.exists(`./data/${jsonFileName}.json`)) {
jsonFileName = 'default';
let jsonFileName = (req.query.data) ? req.query.data : 'default';
if (!jsonFileName || !await fsExtra.exists(`./data/${jsonFileName}.json`)) {
jsonFileName = 'default';
}
const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
Object.assign(data, {
config: {
projectDir,
dataFiles: dataFiles.map((name) => {
return {
name,
active: jsonFileName === name,
};
}),
cssUrl: config.get('cssUrl'),
blockName: config.get('blockName')
}
});
const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
data.helpers = {
include_partial: (path) => projectDir + path,
include_block_template: (path) => 'src/' + config.get('blockName') + '.template',
}
Object.assign(data, {
config: {
projectDir,
dataFiles: dataFiles.map((name) => {
return {
name,
active: jsonFileName === name,
};
}),
cssUrl: config.get('cssUrl'),
blockName: config.get('blockName')
}
});
const baseView = config.has('baseView') ? config.get('baseView') : 'container';
data.helpers = {
include_partial: (path) => projectDir + path,
include_block_template: (path) => 'src/' + config.get('blockName') + '.template',
}
res.render('page-container', data);
res.render(baseView, data);
});
app.use(express.static('src'));
app.use(express.static(projectDir + 'layouts'));
const listener = app.listen(0, () => {
const PORT = listener.address().port;
const PORT = listener.address().port;
console.log(`The web server has started on port ${PORT}`);
console.log(`The web server has started on port ${PORT}`);
const bs = browserSync.create();
const bs = browserSync.create();
gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'], {delay: 400}, gulp.series([buildScriptFiles, function (cb) {
browserSyncReload(bs, 'js', 'Script Files Change');
return cb();
}]));
gulp.watch(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'], {delay: 400}, gulp.series([buildScriptFiles, function (cb) {
browserSyncReload(bs, 'js', 'Script Files Change');
return cb();
}]));
gulp.watch('src/**/*.scss', {delay: 400}, gulp.series([buildStyleFiles, function (cb) {
browserSyncReload(bs, 'css', 'Style Files Change');
return cb();
}]));
gulp.watch('src/**/*.scss', {delay: 400}, gulp.series([buildStyleFiles, function (cb) {
browserSyncReload(bs, 'css', 'Style Files Change');
return cb();
}]));
// bs.watch("src/**/*.js", function (event, file) {});
// bs.watch("src/**/*.css", function (event, file) {});
// bs.watch("src/**/*.js", function (event, file) {});
// bs.watch("src/**/*.css", function (event, file) {});
bs.watch("src/**/*.hbs", function (event, file) {
browserSyncReload(bs, '', 'Template File Change: ' + file)
});
bs.watch("src/**/*.hbs", function (event, file) {
browserSyncReload(bs, '', 'Template File Change: ' + file)
});
bs.init({
proxy: `http://localhost:${PORT}`,
});
bs.init({
proxy: `http://localhost:${PORT}`,
});
});
/**
@@ -109,49 +114,49 @@ const listener = app.listen(0, () => {
*/
function browserSyncReload(bs, extension = '', message = '') {
if (isDev) {
// console.log(event, file);
console.log(message);
}
if (isDev) {
// console.log(event, file);
console.log(message);
}
if (extension) {
extension = "*." + extension;
}
if (extension) {
extension = "*." + extension;
}
bs.reload(extension);
bs.reload(extension);
}
function buildScriptFiles() {
return gulp.src(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'])
.pipe(sourcemaps.init({}))
.pipe(babel())
.pipe(gulp.src('vendor/*.js'))
// .pipe(gulp.dest('src/'))
.pipe(uglify())
.pipe(rename({extname: '.min.js'}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('src/'));
return gulp.src(['src/**/*.js', 'src/**/*.mjs', '!src/**/*.min.js'])
.pipe(sourcemaps.init({}))
.pipe(babel())
.pipe(gulp.src('vendor/*.js'))
// .pipe(gulp.dest('src/'))
.pipe(uglify())
.pipe(rename({extname: '.min.js'}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('src/'));
}
function buildStyleFiles() {
return gulp.src('src/**/*.scss')
.pipe(sourcemaps.init({}))
.pipe(sass.sync().on('error', sass.logError))
// .pipe(gulp.dest('src/'))
.pipe(rename({extname: '.min.css'}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('src/'))
return gulp.src('src/**/*.scss')
.pipe(sourcemaps.init({}))
.pipe(sass.sync().on('error', sass.logError))
// .pipe(gulp.dest('src/'))
.pipe(rename({extname: '.min.css'}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('src/'))
}
function prepareListOfDataFiles(dataFiles) {
return dataFiles
.filter((fileName) => fileName.split('.').pop() === 'json')
.map((fileName) => {
const splitName = fileName.split('.');
splitName.pop();
return splitName.join('');
})
.sort();
return dataFiles
.filter((fileName) => fileName.split('.').pop() === 'json')
.map((fileName) => {
const splitName = fileName.split('.');
splitName.pop();
return splitName.join('');
})
.sort();
}
// TODO:
src/scripts/template.min.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","Swiper","jQuery"],"mappings":"CAAA,SAAWA,GAEPC,QAAQC,IAAI,UACZD,QAAQC,IAAI,WAAYF,GACxBC,QAAQC,IAAI,WAAYC,OAAOC,QAJnC,CAMGD,OAAOE","file":"template.min.js","sourcesContent":["(function ($) {\n\n console.log('Ready!');\n console.log('jQuery =', $);\n console.log('Swiper =', window.Swiper);\n\n})(window.jQuery);"]}
{"version":3,"sources":["scripts/template.mjs"],"names":["$","console","log","window","Swiper","jQuery"],"mappings":"CAAA,SAAWA,GAETC,QAAQC,IAAI,UACZD,QAAQC,IAAI,WAAYF,GACxBC,QAAQC,IAAI,WAAYC,OAAOC,QAJjC,CAMGD,OAAOE","file":"template.min.js","sourcesContent":["(function ($) {\n\n console.log('Ready!');\n console.log('jQuery =', $);\n console.log('Swiper =', window.Swiper);\n\n})(window.jQuery);\n"]}
src/scripts/template.mjs
+3 -3
View File
@@ -1,7 +1,7 @@
(function ($) {
console.log('Ready!');
console.log('jQuery =', $);
console.log('Swiper =', window.Swiper);
console.log('Ready!');
console.log('jQuery =', $);
console.log('Swiper =', window.Swiper);
})(window.jQuery);
src/template.template.hbs
+59 -59
View File
@@ -1,70 +1,70 @@
<section class="template">
{{!
Remove Everything Below:
}}
{{!
Remove Everything Below:
}}
<style>
code {
background-color: #eee;
color: #333;
padding: 1rem 1.5rem;
border: 2px solid #d8d8d8;
display: inline-block;
border-radius: 2px;
font-size: 14px;
}
</style>
<style>
code {
background-color: #eee;
color: #333;
padding: 1rem 1.5rem;
border: 2px solid #d8d8d8;
display: inline-block;
border-radius: 2px;
font-size: 14px;
}
</style>
<header class="template__header">
<h1 class="template__header-heading">Ready!</h1>
</header>
<header class="template__header">
<h1 class="template__header-heading">Ready!</h1>
</header>
<div class="template__content">
<p>
Review the `/data` folder with JSON data files.<br>
Don't change data JSON files - use the data as it is.
</p>
<p>Build the layout based on provided data structure.</p>
<div class="template__content">
<p>
Review the `/data` folder with JSON data files.<br>
Don't change data JSON files - use the data as it is.
</p>
<p>Build the layout based on provided data structure.</p>
<br><br>
<hr>
<br><br>
<hr>
<h2>Image Example</h2>
<div>
<img src="images/demo.jpeg" alt="">
<br>
<code>
&lt;img src=&quot;images/demo.jpeg&quot; alt=&quot;&quot;&gt;
</code>
</div>
<br><br>
<hr>
<h2>Available Buttons Styling</h2>
<div>
<a href="#" class="btn btn--primary">Primary</a>
<br>
<code>
&lt;a href=&quot;#&quot; class=&quot;btn btn--primary&quot;&gt;Primary&lt;/a&gt;
</code>
</div>
<br>
<div>
<a href="#" class="btn btn--secondary">Secondary</a>
<br>
<code>
&lt;a href=&quot;#&quot; class=&quot;btn btn--secondary&quot;&gt;Secondary&lt;/a&gt;
</code>
</div>
<h2>Image Example</h2>
<div>
<img src="images/demo.jpeg" alt="">
<br>
<code>
&lt;img src=&quot;images/demo.jpeg&quot; alt=&quot;&quot;&gt;
</code>
</div>
{{!
Remove END
}}
<br><br>
<hr>
<h2>Available Buttons Styling</h2>
<div>
<a href="#" class="btn btn--primary">Primary</a>
<br>
<code>
&lt;a href=&quot;#&quot; class=&quot;btn btn--primary&quot;&gt;Primary&lt;/a&gt;
</code>
</div>
<br>
<div>
<a href="#" class="btn btn--secondary">Secondary</a>
<br>
<code>
&lt;a href=&quot;#&quot; class=&quot;btn btn--secondary&quot;&gt;Secondary&lt;/a&gt;
</code>
</div>
</div>
{{!
Remove END
}}
</section>