mohsenk/BookatreatLandingPorposal.md

## BookatreatLandingPorposal.md

      
    Raw
  

              BookatreatLandingPorposal.md
            
          
    Landing Page Porposal

Features


Ability to select diffrent templates
Ability to fill and change template variables ( like images and texts)
Ability to enable or disable any section or part of template
We can define templates that use handlebars syntax and save it to db or file system
Every template contains a config.json file and contains template configuration
A Template is consis of components and every component has props

Technical

Every template is contains a index.hbs and config.json
Template sample

<!DOCTYPE html>
<html>
<head>
    {{#component head}}
        <title>Kavenegar Call Backend Sample Node</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    {{/component}}
    {{#component styles}}
        <style>
        body {
            background-color:{{color}};
        }
        </style>
    {{/component}}
</head>
<body>
    {{#component body.header}}
        <h1>Header</h1>
    {{/component}}
    {{#component body.content}}
        <h1>Body</h1>
    {{/component}}
    {{#component body.footer}}
        <h1>Footer</h1>
    {{/component}}

    {{render order="header,body,footer"}}
</body>
</html>

Configuration sample

{
    "name" : "Default Template",
    "description" : "A simple template contains heading and gallery and staff and contact",
    "components" : [
        {
            "name" : "toolbar",
            "description" : "",
            "defaultStatus" : "enabled",
            "props" : [
                { 
                    "name" : "website_title" , 
                    "title" : "Website Title" ,
                    "description" : "Browser title of website ( head's title) " , 
                    "default" : "Bookatreat Website",
                    "type" : "string",
                    "rules" : ""
                },
                { 
                    "name" : "website_logo" , 
                    "title" : "Toolbar Logo" ,
                    "description" : "Image that shown in toolbar" , 
                    "default" : "http://google.com/logo.png",
                    "type" : "file",
                    "rules" : "min=10,max=100"
                },
                { 
                    "name" : "header_type" , 
                    "title" : "Style of Header" ,
                    "description" : "" , 
                    "default" : "small",
                    "type" : "enum=small,large,medium",
                    "rules" : "min=10,max=100"
                },
                {
                    "name" : "staff_list",
                    "title" : "List of staff",
                    "description" : "array of staff list",
                    "default" : [{
                        "name" : "Mohsen Kairmi",
                        "image" : "https://google.com/imag1.png",
                        "job_title" : "Makeup Artist"
                    }],
                    "type" : {
                        "name" : "string",
                        "image" : "url",
                        "job_title" : "string"
                    },
                    "rules" : {
                        "name" : "len=10",
                        "image" : "regexp=^[a-zA-Z]*$",
                        "job_title" : "min=3,max=40"
                    }
                }
            ]
        }
    ]
}
Notes :


Component design gives ability to use only some compoents that we need and maybe we can change order of components
We can bind variables to components and use that naming like componentname.propsname like toolbar.name

Page Editor

Page Editor use config.json file and show's the variable that organization must be fill.