Added Readme and updated config files with new config property - cssUrl.

4 years ago · 5818e8bd51
7 changed files with 91 additions and 6 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,82 @@
 # Development Setup
 Install required modules:
 ```
 npm install
 ```
 Run development environment:
 ```
 npm component-dev
 ```
 # Block Structure
 You will find all the block files in `/src` folder.
 ```
 /src/images/
    *.png, *jpg, *.svg
 /src/scritps/
    *.mjs, *js
 /src/styles/
    *.scss
 /src/template.hbs
 ```
 # Block rules
 We have a “blocks system”, means you will have to follow strict rules and use listed technologies:
 ## 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
 In `/data` folder, you can find multiple `*.json` files.
 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.
 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.
 ## Class Naming Convention
 Use BEM naming system for class names: http://getbem.com/naming/
 ## Styling rules
 ### Mobile First
 Use Mobile First approach. Start with mobile device styling and then focus on other screen sizes by using @media (
 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).
 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.
 ### Global Styling
 The development environment includes CSS rules of the original project. The CSS file is embedded in served HTML.
 # Testing
 ## Development Toolbar
 Use development toolbar to switch between data sources and test responsiveness of block.
--- a/config/default.cjs
+++ b/config/default.cjs
@ -1,3 +1,4 @@
 module.exports = {
-    "mode": "production"
+    "mode": "production",
    "cssUrl": "https://",
 }
--- a/config/development.cjs
+++ b/config/development.cjs
@ -1,3 +1,4 @@
 module.exports = {
-    "mode": "development"
+    "mode": "development",
    "cssUrl": "https://",
 }
--- a/layouts/page-container.hbs
+++ b/layouts/page-container.hbs
@ -1,7 +1,6 @@
 <html lang="en">
 <head>
-    <!-- <meta> tags> -->
+    <link rel="stylesheet" href="{{ config.cssUrl }}">
    <link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css">
    <link rel="stylesheet" href="styles/template.min.css">
 </head>
--- a/layouts/page.hbs
+++ b/layouts/page.hbs
@ -1,7 +1,6 @@
 <html lang="en">
 <head>
-    <!-- <meta> tags> -->
+    <link rel="stylesheet" href="{{ config.cssUrl }}">
    <link rel="stylesheet" href="https://2c6vcf1g6qbbdxbwc3tv88xw-wpengine.netdna-ssl.com/wp-content/cache/autoptimize/css/autoptimize_135f2ea0f3ad830521cacfdb7ccf0e6f.css">
    <link rel="stylesheet" href="styles/template.min.css">
 </head>
--- a/server.js
+++ b/server.js
@ -42,6 +42,8 @@ app.get('/', async (req, res) => {
    const jsonFileName = (req.query.data) ? req.query.data : 'default';
    const data = await fs.readJson(`./data/${jsonFileName}.json`);
    Object.assign(data, {config});
    res.render('page-container', data);
 });
--- a/src/styles/template.scss
+++ b/src/styles/template.scss
@ -5,6 +5,7 @@
 * 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).
 *
 */