diff --git a/README.md b/README.md index 0b9b059..26e12ba 100644 --- a/README.md +++ b/README.md @@ -43,10 +43,10 @@ All the template layout must be in a single `*.hbs` file that located in `/src` ### Data -In `/data` folder, you can find multiple `*.json` files. +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. +how the data is stored. Don't change or edit these files - use the data as it is. 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. @@ -73,10 +73,32 @@ aspect ratio. ### Global Styling -The development environment includes CSS rules of the original project. The CSS file is embedded in served HTML. +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. + +# JavaScript + +## Sliders + +For any kind of slides animations - use [SwiperJS](https://swiperjs.com/get-started). + +The lib is included in the project and ready for use. Test with `window.Swiper` in browser console. # Testing ## Development Toolbar Use development toolbar to switch between data sources and test responsiveness of block. + +## Pixel Perfect Test + +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. + diff --git a/layouts/page-container.hbs b/layouts/page-container.hbs index d6de78a..3d07220 100644 --- a/layouts/page-container.hbs +++ b/layouts/page-container.hbs @@ -1,19 +1,18 @@ - - - - - - +{{> layouts/partials/head }} -
- {{> src/template }} -
+{{> layouts/partials/toolbar }} + +
+
+ {{> src/template }} +
+
+ +{{> layouts/partials/scripts }} - - diff --git a/layouts/page.hbs b/layouts/page.hbs index 234e8df..0fce1fb 100644 --- a/layouts/page.hbs +++ b/layouts/page.hbs @@ -1,17 +1,16 @@ - - - - - - +{{> layouts/partials/head }} -{{> src/template }} +{{> layouts/partials/toolbar }} + +
+ {{> src/template }} +
+ +{{> layouts/partials/scripts }} - - diff --git a/layouts/partials/head.hbs b/layouts/partials/head.hbs new file mode 100644 index 0000000..5af5aab --- /dev/null +++ b/layouts/partials/head.hbs @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/layouts/partials/scripts.hbs b/layouts/partials/scripts.hbs new file mode 100644 index 0000000..7c814e9 --- /dev/null +++ b/layouts/partials/scripts.hbs @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/layouts/partials/toolbar.hbs b/layouts/partials/toolbar.hbs new file mode 100644 index 0000000..615825c --- /dev/null +++ b/layouts/partials/toolbar.hbs @@ -0,0 +1,11 @@ +
+
+ + + +
+
diff --git a/layouts/scripts/page--toolbar.js b/layouts/scripts/page--toolbar.js new file mode 100644 index 0000000..e2de3d2 --- /dev/null +++ b/layouts/scripts/page--toolbar.js @@ -0,0 +1,13 @@ +(function () { + + const dataOptionsSelect = document.getElementById('data-options'); + if (!dataOptionsSelect) { + return; + } + + 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 new file mode 100644 index 0000000..085e874 --- /dev/null +++ b/layouts/styles/page--main.css @@ -0,0 +1,20 @@ +body { + margin: 0; + font-size: 1rem; +} + +header.page_toolbar { + font-family: Arial, sans-serif; + background-color: #ccc; + padding: 1rem; + + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 2rem; +} + +header.page_toolbar select { + font-size: 0.85rem; + padding: 0.25rem; +} diff --git a/server.js b/server.js index cfd17b7..2dd0088 100755 --- a/server.js +++ b/server.js @@ -2,7 +2,7 @@ import express from 'express'; import {create} from 'express-handlebars'; -import fs from 'fs-extra'; +import fsExtra from 'fs-extra'; import browserSync from 'browser-sync'; import config from 'config'; import gulp from 'gulp'; @@ -12,13 +12,15 @@ import rename from "gulp-rename"; import dartSass from 'sass'; import gulpSass from 'gulp-sass'; import sourcemaps from "gulp-sourcemaps"; +import fs from "fs/promises"; /** * Constants */ const isDev = config.get('mode') === 'development'; -const projectDir = isDev ? '.' : './node_modules/axe-web-component'; +const modulePath = './node_modules/axe-web-component'; +const projectDir = isDev ? '.' : modulePath; console.log('Development Mode:', isDev); const sass = gulpSass(dartSass); @@ -30,8 +32,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); @@ -39,15 +40,29 @@ app.set('view engine', '.hbs'); app.set('views', projectDir + '/layouts'); app.get('/', async (req, res) => { + let dataFiles = await fs.readdir('./data'); + dataFiles = dataFiles + .filter((fileName) => fileName.split('.').pop() === 'json') + .map((fileName) => { + const splitName = fileName.split('.'); + splitName.pop(); + const name = splitName.join(''); + return { + name, + active: (req.query.data) && req.query.data === name, + }; + }); + const jsonFileName = (req.query.data) ? req.query.data : 'default'; - const data = await fs.readJson(`./data/${jsonFileName}.json`); + const data = await fsExtra.readJson(`./data/${jsonFileName}.json`); - Object.assign(data, {config}); + Object.assign(data, {config}, {config: {projectDir, dataFiles}}); res.render('page-container', data); }); app.use(express.static('src')); +app.use(express.static('layouts')); const listener = app.listen(0, () => { const PORT = listener.address().port; @@ -56,19 +71,15 @@ const listener = app.listen(0, () => { 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/**/*.scss', - {delay: 400}, - gulp.series([buildStyleFiles, function (cb) { - browserSyncReload(bs, 'css', 'Style 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(); + }])); // bs.watch("src/**/*.js", function (event, file) {}); diff --git a/src/scripts/template.min.js b/src/scripts/template.min.js index 4f63732..10bf055 100644 --- a/src/scripts/template.min.js +++ b/src/scripts/template.min.js @@ -1,2 +1,2 @@ -!function(o){console.log("Ready!",o)}(window.jQuery); +!function(o){console.log("Ready!"),console.log("jQuery =",o),console.log("Swiper =",window.Swiper)}(window.jQuery); //# sourceMappingURL=template.min.js.map diff --git a/src/scripts/template.min.js.map b/src/scripts/template.min.js.map index 9f28c7e..8da972c 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","jQuery"],"mappings":"CAAA,SAAWA,GAEPC,QAAQC,IAAI,SAAUF,GAF1B,CAIGG,OAAOC","file":"template.min.js","sourcesContent":["(function ($) {\n\n console.log('Ready!', $);\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,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 diff --git a/src/scripts/template.mjs b/src/scripts/template.mjs index 1078eb0..8618dac 100644 --- a/src/scripts/template.mjs +++ b/src/scripts/template.mjs @@ -1,5 +1,7 @@ (function ($) { - console.log('Ready!', $); + console.log('Ready!'); + console.log('jQuery =', $); + console.log('Swiper =', window.Swiper); })(window.jQuery); \ No newline at end of file diff --git a/src/styles/template.min.css b/src/styles/template.min.css index dadbcfc..244eb6a 100644 --- a/src/styles/template.min.css +++ b/src/styles/template.min.css @@ -5,9 +5,13 @@ * Use BEM naming system for class names: http://getbem.com/naming/ * * Use Mobile First approach. + * Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px). * */ -.clients { - background-color: red; +.template { + padding: 1rem; +} +.template__header { + border-bottom: 2px solid green; } /*# sourceMappingURL=template.min.css.map */ diff --git a/src/styles/template.min.css.map b/src/styles/template.min.css.map index da0e06c..50e7658 100644 --- a/src/styles/template.min.css.map +++ b/src/styles/template.min.css.map @@ -1 +1 @@ -{"version":3,"sources":["styles/template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;EACE","file":"template.min.css","sourcesContent":["/**\n * Use \"rem\" instead of pixels. 1rem = 16pixels\n * No need to use rem in situations of \"1px\". (usually used for borders width).\n *\n * Use BEM naming system for class names: http://getbem.com/naming/\n *\n * Use Mobile First approach.\n *\n */\n\n.clients {\n background-color: red;\n //color: white;\n\n &__sub_level {\n // EXAMPLE OF BREAKPOINTS\n\n @media (min-width: 600px) {\n // Tablet\n }\n\n @media (min-width: 980px) {\n // Large Tablet\n }\n\n @media (min-width: 1024px) {\n // Laptop & Tablet\n }\n\n @media (min-width: 1336px) {\n // Laptop\n }\n\n @media (min-width: 1680px) {\n // Desktop\n }\n\n }\n\n &__sub_level_two {\n //\n }\n}"]} \ No newline at end of file +{"version":3,"sources":["styles/template.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWA;EACE;;AAwBA;EACE","file":"template.min.css","sourcesContent":["/**\n * Use \"rem\" instead of pixels. 1rem = 16pixels\n * No need to use rem in situations of \"1px\". (usually used for borders width).\n *\n * Use BEM naming system for class names: http://getbem.com/naming/\n *\n * Use Mobile First approach.\n * Start with mobile device styling and then focus on other screen sizes by using @media (min-width: ...px).\n *\n */\n\n.template {\n padding: 1rem;\n\n // EXAMPLE OF BREAKPOINTS\n\n @media (min-width: 600px) {\n // Tablet\n }\n\n @media (min-width: 980px) {\n // Large Tablet\n }\n\n @media (min-width: 1024px) {\n // Laptop & Tablet\n }\n\n @media (min-width: 1336px) {\n // Laptop\n }\n\n @media (min-width: 1680px) {\n // Desktop\n }\n\n &__header {\n border-bottom: 2px solid green;\n\n &-heading {\n // Heading\n }\n }\n\n &__content {\n // Content\n }\n}"]} \ No newline at end of file diff --git a/src/styles/template.scss b/src/styles/template.scss index 391d7ac..d8ec2bb 100644 --- a/src/styles/template.scss +++ b/src/styles/template.scss @@ -35,7 +35,7 @@ } &__header { - border-bottom: 2px solid red; + border-bottom: 2px solid green; &-heading { // Heading diff --git a/src/template.hbs b/src/template.hbs index 30ffbc2..2f085bb 100644 --- a/src/template.hbs +++ b/src/template.hbs @@ -4,6 +4,10 @@
-

Review the `/data` folder with JSON data files.

+

+ 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.

\ No newline at end of file