diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..0c4982b --- /dev/null +++ b/.editorconfig @@ -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 + diff --git a/.gitignore b/.gitignore index 4475b22..c26b566 100644 --- a/.gitignore +++ b/.gitignore @@ -9,7 +9,3 @@ deploy.sh deploy-*.sh # Custom -assets/css/**/*.min.css* -assets/css-old/**/*.min.css* -components/**/*.min.css* -config.js \ No newline at end of file diff --git a/README.md b/README.md index 87728ec..627f2fc 100644 --- a/README.md +++ b/README.md @@ -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: @@ -122,7 +138,6 @@ 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. - +or any other tool/approach that you're familiar with. The idea is to have "pretty close" result to requested design. diff --git a/config/default.cjs b/config/default.cjs index c20c4ad..dbc6151 100644 --- a/config/default.cjs +++ b/config/default.cjs @@ -1,4 +1,4 @@ module.exports = { - cssUrl: "https://", - blockName: "template", + cssUrl: "https://", + blockName: "template", } diff --git a/config/development.cjs b/config/development.cjs index 8c9e1cb..e654a48 100644 --- a/config/development.cjs +++ b/config/development.cjs @@ -1,5 +1,5 @@ module.exports = { - mode: "development", - cssUrl: "https://", - blockName: "template", + mode: "development", + cssUrl: "https://", + blockName: "template", } diff --git a/data/default.json b/data/default.json index 5a67d77..e332c08 100644 --- a/data/default.json +++ b/data/default.json @@ -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": "

Delivering top results to industry leaders:

", - "cta_text": "Our Success Stories", - "url": "https://google.com" -} \ No newline at end of file + "title": "As a Global Salesforce Partner,\n we deliver Service Cloud solutions\n and complex Field Service Management\n in diverse industries worldwide", + "phrases": "

Delivering top results to industry leaders:

", + "cta_text": "Our Success Stories", + "url": "https://google.com" +} diff --git a/data/two.json b/data/two.json index b3b96e6..4f4c088 100644 --- a/data/two.json +++ b/data/two.json @@ -1,6 +1,6 @@ { - "title": "Option Two", - "phrases": "

Delivering top results to industry leaders:

", - "cta_text": "Our Success Stories", - "url": "https://google.com" -} \ No newline at end of file + "title": "Option Two", + "phrases": "

Delivering top results to industry leaders:

", + "cta_text": "Our Success Stories", + "url": "https://google.com" +} diff --git a/layouts/page-container.hbs b/layouts/alignfull.hbs similarity index 73% rename from layouts/page-container.hbs rename to layouts/alignfull.hbs index e19ea35..915128d 100644 --- a/layouts/page-container.hbs +++ b/layouts/alignfull.hbs @@ -7,9 +7,7 @@ {{> (include_partial "layouts/partials/toolbar") }}
-
- {{> (include_block_template) }} -
+ {{> (include_block_template) }}
{{> (include_partial "layouts/partials/scripts") }} diff --git a/layouts/page.hbs b/layouts/container.hbs similarity index 87% rename from layouts/page.hbs rename to layouts/container.hbs index b99b842..936d8c3 100644 --- a/layouts/page.hbs +++ b/layouts/container.hbs @@ -7,7 +7,9 @@ {{> (include_partial "layouts/partials/toolbar") }}
+
{{> (include_block_template) }} +
{{> (include_partial "layouts/partials/scripts") }} diff --git a/layouts/partials/head.hbs b/layouts/partials/head.hbs index f5408b7..e3bfc49 100644 --- a/layouts/partials/head.hbs +++ b/layouts/partials/head.hbs @@ -1,9 +1,9 @@ - - + + - - - - + + + + diff --git a/layouts/partials/toolbar.hbs b/layouts/partials/toolbar.hbs index 615825c..efcb92b 100644 --- a/layouts/partials/toolbar.hbs +++ b/layouts/partials/toolbar.hbs @@ -1,11 +1,11 @@
-
- +
+ - -
+ +
diff --git a/layouts/scripts/page--toolbar.js b/layouts/scripts/page--toolbar.js index e2de3d2..112d59d 100644 --- a/layouts/scripts/page--toolbar.js +++ b/layouts/scripts/page--toolbar.js @@ -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; + }) })(); diff --git a/layouts/styles/page--main.css b/layouts/styles/page--main.css index 085e874..e62740b 100644 --- a/layouts/styles/page--main.css +++ b/layouts/styles/page--main.css @@ -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; } diff --git a/package-template.json b/package-template.json new file mode 100644 index 0000000..dd2a2dc --- /dev/null +++ b/package-template.json @@ -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" + } +} diff --git a/server.js b/server.js index 18c5670..ffff65f 100755 --- a/server.js +++ b/server.js @@ -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`); - - Object.assign(data, { - config: { - projectDir, - dataFiles: dataFiles.map((name) => { - return { - name, - active: jsonFileName === name, - }; - }), - cssUrl: config.get('cssUrl'), - blockName: config.get('blockName') - } - }); - - data.helpers = { - include_partial: (path) => projectDir + path, - include_block_template: (path) => 'src/' + config.get('blockName') + '.template', - } + data.helpers = { + include_partial: (path) => projectDir + path, + include_block_template: (path) => 'src/' + config.get('blockName') + '.template', + } + + const baseView = config.has('baseView') ? config.get('baseView') : 'container'; - 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: diff --git a/src/scripts/template.min.js.map b/src/scripts/template.min.js.map index 8da972c..ec2930d 100644 --- a/src/scripts/template.min.js.map +++ b/src/scripts/template.min.js.map @@ -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);"]} \ No newline at end of file +{"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"]} \ No newline at end of file diff --git a/src/scripts/template.mjs b/src/scripts/template.mjs index 8618dac..baa6bad 100644 --- a/src/scripts/template.mjs +++ b/src/scripts/template.mjs @@ -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); \ No newline at end of file +})(window.jQuery); diff --git a/src/template.template.hbs b/src/template.template.hbs index cf91e69..18ca576 100644 --- a/src/template.template.hbs +++ b/src/template.template.hbs @@ -1,70 +1,70 @@
- {{! - Remove Everything Below: - }} + {{! + Remove Everything Below: + }} - + -
-

Ready!

-
+
+

Ready!

+
-
-

- Review the `/data` folder with JSON data files.
- Don't change data JSON files - use the data as it is. -

-

Build the layout based on provided data structure.

+
+

+ Review the `/data` folder with JSON data files.
+ Don't change data JSON files - use the data as it is. +

+

Build the layout based on provided data structure.

-

-
+

+
-

Image Example

-
- -
- - <img src="images/demo.jpeg" alt=""> - -
+

Image Example

+
+ +
+ + <img src="images/demo.jpeg" alt=""> + +
-

-
+

+
-

Available Buttons Styling

+

Available Buttons Styling

-
- Primary -
- - <a href="#" class="btn btn--primary">Primary</a> - -
+
+ Primary +
+ + <a href="#" class="btn btn--primary">Primary</a> + +
-
+
-
- Secondary -
- - <a href="#" class="btn btn--secondary">Secondary</a> - -
+
+ Secondary +
+ + <a href="#" class="btn btn--secondary">Secondary</a> +
+
- {{! - Remove END - }} + {{! + Remove END + }} -
\ No newline at end of file +