als-layout 0.1.0 → 0.3.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 +28 -29
  2. package/package.json +1 -1
  3. package/readme.md +12 -7
package/layout.js CHANGED
@@ -1,5 +1,5 @@
1
- class Layout {
2
- constructor({title,body,description,image,lang='en',url,scripts=[],links=[],favicon,footer,header,v,charset='UTF-8'}) {
1
+ module.exports = class Layout {
2
+ constructor({title,body,description,image,lang='en',url,twiterName,scripts=[],links=[],favicon,footer='',header='',charset='UTF-8'}) {
3
3
  this.title = title
4
4
  this.body = body
5
5
  this.description = description
@@ -11,46 +11,42 @@ class Layout {
11
11
  this.links = links
12
12
  this.footer = footer
13
13
  this.header = header
14
- this.v = v
15
14
  this.charset = charset
15
+ this.twiterName = twiterName
16
16
  }
17
17
 
18
- get({title,body,description,image,lang,url,favicon,footer,header,v,scripts,links,charset=this.charset}) {
19
- if(scripts) this.scripts = [...this.scripts,scripts]
20
- if(links) this.links = [...this.links,links]
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
21
  if(title) this.title = title
22
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
- if(footer) this.footer = footer
29
- if(header) this.header = header
30
- if(v) this.v = v
31
- let {footerScripts,headerScripts} = this.scripts()
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()
32
31
  return /*html*/`<!DOCTYPE html>
33
- <html lang="${lang}">
32
+ <html lang="${this.lang}">
34
33
  <head>
35
34
  <meta charset="${charset}">
36
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
37
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
38
- ${favicon ? /*html*/`<link rel="icon" href="${favicon}" type="image/x-icon" >` : ''}
39
35
  ${this._meta()}
40
- ${this._header(headerScripts)}
41
- <title>${title}</title>
36
+ ${this.favicon ? /*html*/`<link rel="icon" href="${this.favicon}" type="image/x-icon" >` : ''}
37
+ <title>${this.title}</title>
42
38
  </head>
43
39
  <body>
44
- ${body}
40
+ ${this._header(headerScripts)}
41
+ ${this.body}
45
42
  ${this._footer(footerScripts)}
46
43
  </body>
47
44
  </html>`
48
45
  }
49
46
 
50
47
  _meta() {
51
- let {title,url,description,image,twiterName,charset} = this
48
+ let {title,url,description,image,twiterName} = this
52
49
  let meta = [
53
- {charset},
54
50
  {'http-equiv':"X-UA-Compatible", content:"IE=edge"},
55
51
  {name:"viewport",content:"width=device-width, initial-scale=1.0"},
56
52
  {property:"og:type", content:"website"},
@@ -68,8 +64,10 @@ class Layout {
68
64
  meta.push({name:"twitter:card", content:'article'})
69
65
  }
70
66
  if(twiterName) meta.push({name:"twitter:site",content:twiterName})
71
- if(title) meta.push({property:"og:title", content:"title"})
67
+ if(title) meta.push({property:"og:title", content:title})
72
68
  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('')
73
71
  }
74
72
 
75
73
  _footer(scripts) {
@@ -77,14 +75,14 @@ class Layout {
77
75
  }
78
76
 
79
77
  _header(scripts) {
80
- return /*html*/`${this._styles()} ${this.header} ${scripts}`
78
+ return /*html*/`${this._styles()} ${scripts} ${this.header}`
81
79
  }
82
80
 
83
81
  _scripts() {
84
82
  let footerScripts = ''
85
83
  let headerScripts = ''
86
84
  this.scripts.forEach(script => {
87
- let {inner='',src='',async,crossorigin,defer,integrity,referrerpolicy,type,footer=false,v=this.v} = script
85
+ let {inner='',src='',async,crossorigin,defer,integrity,referrerpolicy,type,footer=false,v} = script
88
86
  v = v ? '?'+v : ''
89
87
  async = async ? ' async ' : ''
90
88
  defer = defer ? ' defer ' : ''
@@ -92,7 +90,8 @@ class Layout {
92
90
  integrity = integrity ? ` integrity="${integrity}" ` : ''
93
91
  referrerpolicy = referrerpolicy ? ` referrerpolicy="${referrerpolicy}" ` : ''
94
92
  type = type ? ` type="${type}" ` : ''
95
- let script = /*html*/` <script src="${src}${v}"${referrerpolicy}${type}${integrity}${crossorigin}${defer}${async}>${inner}</script> `
93
+ src = src ? `src="${src}${v}"`:''
94
+ script = /*html*/` <script ${src}${referrerpolicy}${type}${integrity}${crossorigin}${defer}${async}>${inner}</script> `
96
95
  if(footer) footerScripts += script
97
96
  else headerScripts += script
98
97
  })
@@ -101,7 +100,7 @@ class Layout {
101
100
 
102
101
  _styles() {
103
102
  return this.links.map(link => {
104
- let {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v=this.v} = link
103
+ let {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v} = link
105
104
  v = v ? '?'+v : ''
106
105
  crossorigin = crossorigin ? ` crossorigin="${crossorigin}" ` : ''
107
106
  referrerpolicy = referrerpolicy ? ` referrerpolicy="${referrerpolicy}" ` : ''
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "als-layout",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "description": "Being tested. create html layout with node",
5
5
  "main": "layout.js",
6
6
  "keywords": [],
package/readme.md CHANGED
@@ -1,20 +1,25 @@
1
1
  # Als-layout
2
2
 
3
- **being tested**
3
+ * new in 0.3: scripts and links now array
4
4
 
5
5
  ## Syntax
6
6
  ```javascript
7
7
  let Layout = require('als-layout')
8
8
  // Create Layout object
9
9
  let layout = new Layout({
10
- title,body,description,image,lang='en',url,
10
+ title,body,description,image,
11
+ lang='en',url,twiterName,
11
12
  scripts=[],links=[],
12
- favicon,footer,header,v,charset
13
+ favicon,footer='',header='',
14
+ charset='UTF-8'
13
15
  })
14
16
  // Get updated layout
15
17
  let pageLayout = layout.get({
16
- scripts,links, // added to existing scripts and links
17
- title,body,description,image,lang,url,favicon,footer,header,v
18
+ title,body,description,image,
19
+ lang,url,favicon,
20
+ footer='',header='',
21
+ scripts=[],links=[],
22
+ charset=this.charset
18
23
  })
19
24
  ```
20
25
 
@@ -23,9 +28,9 @@ let pageLayout = layout.get({
23
28
 
24
29
  ```javascript
25
30
  let scripts = [
26
- {inner='',src='',async,crossorigin,defer,integrity,referrerpolicy,type,footer=false,v=this.v}
31
+ {inner='',src='',async,crossorigin,defer,integrity,referrerpolicy,type,footer=false,v}
27
32
  ]
28
33
  let links = [
29
- {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v=this.v}
34
+ {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v}
30
35
  ]
31
36
  ```