als-layout 0.3.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 +61 -65
  2. package/package.json +2 -2
  3. package/readme.md +38 -1
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 = [...this.scripts,...scripts]
20
- this.links = [...this.links,...links]
21
- if(title) this.title = title
22
- if(body) this.body = body
23
- if(description && description !== '') this.description = description
24
- if(image && image !== '') this.image = image
25
- if(lang && lang !== '') this.lang = lang
26
- if(url && url !== '') this.url = url
27
- if(favicon && 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,19 +67,13 @@ 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*/`${this.footer} ${scripts}`
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
79
  this.scripts.forEach(script => {
@@ -91,14 +86,14 @@ module.exports = class Layout {
91
86
  referrerpolicy = referrerpolicy ? ` referrerpolicy="${referrerpolicy}" ` : ''
92
87
  type = type ? ` type="${type}" ` : ''
93
88
  src = src ? `src="${src}${v}"`:''
94
- script = /*html*/` <script ${src}${referrerpolicy}${type}${integrity}${crossorigin}${defer}${async}>${inner}</script> `
95
- if(footer) footerScripts += script
96
- 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
97
92
  })
98
93
  return {footerScripts,headerScripts}
99
94
  }
100
95
 
101
- _styles() {
96
+ buildStyles() {
102
97
  return this.links.map(link => {
103
98
  let {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v} = link
104
99
  v = v ? '?'+v : ''
@@ -108,7 +103,8 @@ module.exports = class Layout {
108
103
  hreflang = hreflang ? ` hreflang="${hreflang}" ` : ''
109
104
  media = media ? ` media="${media}" ` : ''
110
105
  sizes = sizes ? ` media="${sizes}" ` : ''
111
- return /*html*/`<link href="${href}${v}" rel="${rel}" ${crossorigin}${referrerpolicy}${type}${hreflang}${media}${sizes}></link>`
112
- }).join(' ')
106
+ return this.tab+/*html*/`<link href="${href}${v}" rel="${rel}" ${crossorigin}${referrerpolicy}${type}${hreflang}${media}${sizes}></link>`
107
+ }).join(this.n)
113
108
  }
114
- }
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.3.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,10 +1,13 @@
1
1
  # Als-layout
2
2
 
3
+ * new in 0.4:
4
+ * minify
5
+ * package optimization
6
+ * can be used in node and in browser
3
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,
@@ -23,6 +26,40 @@ let pageLayout = layout.get({
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