als-layout 0.2.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/layout.js +63 -69
  2. package/package.json +2 -2
  3. package/readme.md +47 -10
package/layout.js CHANGED
@@ -1,56 +1,57 @@
1
- module.exports = class Layout {
2
- constructor({title,body,description,image,lang='en',url,twiterName,scripts={},links={},favicon,footer='',header='',charset='UTF-8'}) {
3
- this.title = title
4
- this.body = body
5
- this.description = description
6
- this.image = image
7
- this.lang = lang
8
- this.url = url
9
- this.favicon = favicon
10
- this.scripts = scripts
11
- this.links = links
12
- this.footer = footer
13
- this.header = header
14
- this.charset = charset
15
- this.twiterName = twiterName
1
+ class Layout {
2
+ static minify=false
3
+ defaults = {lang:'en',scripts:[],links:[],footer:'',header:'',body:'',charset:'UTF-8'}
4
+ meta = [
5
+ {'http-equiv':"X-UA-Compatible", content:"IE=edge"},
6
+ {name:"viewport",content:"width=device-width, initial-scale=1.0"},
7
+ {property:"og:type", content:"website"},
8
+ ]
9
+ tab=' '
10
+ n=`
11
+ `
12
+ constructor(options={}) {
13
+ if(Layout.minify) this.tab = this.n = ''
14
+ options = Object.assign(this.defaults,options)
15
+ for(let key in options) {
16
+ this[key] = options[key]
17
+ }
18
+ }
19
+
20
+ get(options={}) {
21
+ options = Object.assign(this.defaults,options)
22
+ for(let key in options) {
23
+ if(key == 'scripts' || key == 'links') this[key] = [...this[key],...options[key]]
24
+ else this[key] = options[key]
25
+ }
26
+ return this.template()
16
27
  }
17
28
 
18
- get({title,body,description,image,lang,url,favicon,footer='',header='',scripts={},links={},charset=this.charset}) {
19
- this.scripts = scripts
20
- this.links = links
21
- if(title) this.title = title
22
- if(body) this.body = body
23
- if(description) this.description = description
24
- if(image) this.image = image
25
- if(lang) this.lang = lang
26
- if(url) this.url = url
27
- if(favicon) this.favicon = favicon
28
- this.footer = footer
29
- this.header = header
30
- let {footerScripts,headerScripts} = this._scripts()
31
- return /*html*/`<!DOCTYPE html>
32
- <html lang="${this.lang}">
33
- <head>
34
- <meta charset="${charset}">
35
- ${this._meta()}
36
- ${this.favicon ? /*html*/`<link rel="icon" href="${this.favicon}" type="image/x-icon" >` : ''}
37
- <title>${this.title}</title>
38
- </head>
39
- <body>
40
- ${this._header(headerScripts)}
41
- ${this.body}
42
- ${this._footer(footerScripts)}
43
- </body>
44
- </html>`
29
+ template(n=this.n,tab=this.tab) {
30
+ let {footerScripts,headerScripts} = this.buildScripts()
31
+ let styles = this.buildStyles()
32
+ let template = /*html*/`<!DOCTYPE html>`+n
33
+ template +=/*html*/`<html lang="${this.lang}">`+n
34
+ template +=/*html*/`<head>`+n
35
+ template += styles ? styles+n : ''
36
+ template += headerScripts ? headerScripts : ''
37
+ template += tab+/*html*/`<meta charset="${this.charset}">`+n
38
+ template += this.buildMeta()+n
39
+ template += this.favicon ? tab+/*html*/`<link rel="icon" href="${this.favicon}" type="image/x-icon" >`+n : ''
40
+ template += this.title ? tab+/*html*/`<title>${this.title || ''}</title>`+n : ''
41
+ template +=/*html*/`</head>`+n
42
+ template += /*html*/`<body>`+n
43
+ template += this.header ? tab+this.header+n : ''
44
+ template += tab+this.body+n
45
+ template += this.footer ? tab+this.footer+n : ''
46
+ template += footerScripts ? footerScripts : ''
47
+ template += /*html*/`</body>`+n
48
+ template += /*html*/`</html>`
49
+ return template
45
50
  }
46
51
 
47
- _meta() {
52
+ buildMeta(n=this.n,tab=this.tab) {
53
+ let meta = this.meta
48
54
  let {title,url,description,image,twiterName} = this
49
- let meta = [
50
- {'http-equiv':"X-UA-Compatible", content:"IE=edge"},
51
- {name:"viewport",content:"width=device-width, initial-scale=1.0"},
52
- {property:"og:type", content:"website"},
53
- ]
54
55
  if(description) {
55
56
  meta.push({name:"description",content:description})
56
57
  meta.push({property:"og:description",content:description})
@@ -66,23 +67,16 @@ module.exports = class Layout {
66
67
  if(twiterName) meta.push({name:"twitter:site",content:twiterName})
67
68
  if(title) meta.push({property:"og:title", content:title})
68
69
  if(url) meta.push({property:"og:url",content:url})
69
- return meta.map(obj=>
70
- /*html*/`<meta ${Object.keys(obj).map(propName => `${propName}="${obj[propName]}"`).join('')}>`).join('')
70
+ return meta.map(obj => tab+
71
+ /*html*/`<meta ${Object.keys(obj).map(propName => `${propName}="${obj[propName]}"`).join('')}>`
72
+ ).join(n)
71
73
  }
72
74
 
73
- _footer(scripts) {
74
- return /*html*/`${scripts} ${this.footer}`
75
- }
76
-
77
- _header(scripts) {
78
- return /*html*/`${this._styles()} ${scripts} ${this.header}`
79
- }
80
75
 
81
- _scripts() {
76
+ buildScripts() {
82
77
  let footerScripts = ''
83
78
  let headerScripts = ''
84
- Object.keys(this.scripts).forEach(name => {
85
- let script = this.scripts[name]
79
+ this.scripts.forEach(script => {
86
80
  let {inner='',src='',async,crossorigin,defer,integrity,referrerpolicy,type,footer=false,v} = script
87
81
  v = v ? '?'+v : ''
88
82
  async = async ? ' async ' : ''
@@ -92,16 +86,15 @@ module.exports = class Layout {
92
86
  referrerpolicy = referrerpolicy ? ` referrerpolicy="${referrerpolicy}" ` : ''
93
87
  type = type ? ` type="${type}" ` : ''
94
88
  src = src ? `src="${src}${v}"`:''
95
- script = /*html*/` <script ${src}${referrerpolicy}${type}${integrity}${crossorigin}${defer}${async}>${inner}</script> `
96
- if(footer) footerScripts += script
97
- else headerScripts += script
89
+ script = /*html*/`<script ${src}${referrerpolicy}${type}${integrity}${crossorigin}${defer}${async}>${inner}</script> `
90
+ if(footer) footerScripts += this.tab+script+this.n
91
+ else headerScripts += this.tab+script+this.n
98
92
  })
99
93
  return {footerScripts,headerScripts}
100
94
  }
101
95
 
102
- _styles() {
103
- return Object.keys(this.links).map(name => {
104
- let link = this.links[name]
96
+ buildStyles() {
97
+ return this.links.map(link => {
105
98
  let {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v} = link
106
99
  v = v ? '?'+v : ''
107
100
  crossorigin = crossorigin ? ` crossorigin="${crossorigin}" ` : ''
@@ -110,7 +103,8 @@ module.exports = class Layout {
110
103
  hreflang = hreflang ? ` hreflang="${hreflang}" ` : ''
111
104
  media = media ? ` media="${media}" ` : ''
112
105
  sizes = sizes ? ` media="${sizes}" ` : ''
113
- return /*html*/`<link href="${href}${v}" rel="${rel}" ${crossorigin}${referrerpolicy}${type}${hreflang}${media}${sizes}></link>`
114
- }).join(' ')
106
+ return this.tab+/*html*/`<link href="${href}${v}" rel="${rel}" ${crossorigin}${referrerpolicy}${type}${hreflang}${media}${sizes}></link>`
107
+ }).join(this.n)
115
108
  }
116
- }
109
+ }
110
+ try {module.exports = Layout} catch{}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "als-layout",
3
- "version": "0.2.0",
4
- "description": "Being tested. create html layout with node",
3
+ "version": "0.4.0",
4
+ "description": "Create html layout",
5
5
  "main": "layout.js",
6
6
  "keywords": [],
7
7
  "author": "",
package/readme.md CHANGED
@@ -1,15 +1,18 @@
1
1
  # Als-layout
2
2
 
3
- **being tested**
3
+ * new in 0.4:
4
+ * minify
5
+ * package optimization
6
+ * can be used in node and in browser
7
+ * new in 0.3: scripts and links now array
4
8
 
5
9
  ## Syntax
6
10
  ```javascript
7
- let Layout = require('als-layout')
8
11
  // Create Layout object
9
12
  let layout = new Layout({
10
13
  title,body,description,image,
11
14
  lang='en',url,twiterName,
12
- scripts={},links={},
15
+ scripts=[],links=[],
13
16
  favicon,footer='',header='',
14
17
  charset='UTF-8'
15
18
  })
@@ -18,19 +21,53 @@ let pageLayout = layout.get({
18
21
  title,body,description,image,
19
22
  lang,url,favicon,
20
23
  footer='',header='',
21
- scripts={},links={},
24
+ scripts=[],links=[],
22
25
  charset=this.charset
23
26
  })
24
27
  ```
25
28
 
29
+ ## Changing defaults
30
+ Each Layout object has defaults, which you can change if needed.
31
+ * defaults - defaults for options
32
+ * meta - defaults for meta tags
33
+ * tab - adding this before children tags
34
+ * n - added at end of line
35
+
36
+ ```javascript
37
+ defaults = {lang:'en',scripts:[],links:[],footer:'',header:'',body:'',charset:'UTF-8'}
38
+ meta = [
39
+ {'http-equiv':"X-UA-Compatible", content:"IE=edge"},
40
+ {name:"viewport",content:"width=device-width, initial-scale=1.0"},
41
+ {property:"og:type", content:"website"},
42
+ ]
43
+ tab=' ' // then minify=true, tab=''
44
+ n=` // then minify=true, n=''
45
+ `
46
+ ```
47
+
48
+ ### Example for changing defaults
49
+
50
+ ```javascript
51
+ let layout = new Layout()
52
+ layout.meta[2].content = 'video.movie'
53
+ layout.tab = ' '
54
+ layout.defaults.lang = 'ru'
55
+ layout.defaults.footer = '<div>Copyright for some...</div>'
56
+ ```
57
+
58
+ ## Minify
59
+ ```javascript
60
+ let Layout = require('als-layout')
61
+ Layout.minify = true // false by default. if true, return minified html
62
+ ```
26
63
 
27
64
  ## scripts and links
28
65
 
29
66
  ```javascript
30
- let scripts = {
31
- scriptName:{inner='',src='',async,crossorigin,defer,integrity,referrerpolicy,type,footer=false,v}
32
- }
33
- let links = {
34
- linkName:{href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v}
35
- }
67
+ let scripts = [
68
+ {inner='',src='',async,crossorigin,defer,integrity,referrerpolicy,type,footer=false,v}
69
+ ]
70
+ let links = [
71
+ {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v}
72
+ ]
36
73
  ```