als-layout 0.3.0 → 0.4.1

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 +40 -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.1",
4
+ "description": "Create html layout",
5
5
  "main": "layout.js",
6
6
  "keywords": [],
7
7
  "author": "",
package/readme.md CHANGED
@@ -1,10 +1,15 @@
1
1
  # Als-layout
2
2
 
3
+ * new in 0.4.1
4
+ * Added spaces between properties on meta tags
5
+ * new in 0.4:
6
+ * minify
7
+ * package optimization
8
+ * can be used in node and in browser
3
9
  * new in 0.3: scripts and links now array
4
10
 
5
11
  ## Syntax
6
12
  ```javascript
7
- let Layout = require('als-layout')
8
13
  // Create Layout object
9
14
  let layout = new Layout({
10
15
  title,body,description,image,
@@ -23,6 +28,40 @@ let pageLayout = layout.get({
23
28
  })
24
29
  ```
25
30
 
31
+ ## Changing defaults
32
+ Each Layout object has defaults, which you can change if needed.
33
+ * defaults - defaults for options
34
+ * meta - defaults for meta tags
35
+ * tab - adding this before children tags
36
+ * n - added at end of line
37
+
38
+ ```javascript
39
+ defaults = {lang:'en',scripts:[],links:[],footer:'',header:'',body:'',charset:'UTF-8'}
40
+ meta = [
41
+ {'http-equiv':"X-UA-Compatible", content:"IE=edge"},
42
+ {name:"viewport",content:"width=device-width, initial-scale=1.0"},
43
+ {property:"og:type", content:"website"},
44
+ ]
45
+ tab=' ' // then minify=true, tab=''
46
+ n=` // then minify=true, n=''
47
+ `
48
+ ```
49
+
50
+ ### Example for changing defaults
51
+
52
+ ```javascript
53
+ let layout = new Layout()
54
+ layout.meta[2].content = 'video.movie'
55
+ layout.tab = ' '
56
+ layout.defaults.lang = 'ru'
57
+ layout.defaults.footer = '<div>Copyright for some...</div>'
58
+ ```
59
+
60
+ ## Minify
61
+ ```javascript
62
+ let Layout = require('als-layout')
63
+ Layout.minify = true // false by default. if true, return minified html
64
+ ```
26
65
 
27
66
  ## scripts and links
28
67