als-layout 0.4.1 → 0.4.6

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 +38 -33
  2. package/package.json +1 -1
  3. package/readme.md +15 -2
package/layout.js CHANGED
@@ -1,6 +1,6 @@
1
1
  class Layout {
2
2
  static minify=false
3
- defaults = {lang:'en',scripts:[],links:[],footer:'',header:'',body:'',charset:'UTF-8'}
3
+ defaults = {lang:'en',scripts:[],links:[],footer:'',header:'',body:'',charset:'UTF-8',styles:''}
4
4
  meta = [
5
5
  {'http-equiv':"X-UA-Compatible", content:"IE=edge"},
6
6
  {name:"viewport",content:"width=device-width, initial-scale=1.0"},
@@ -11,38 +11,42 @@ class Layout {
11
11
  `
12
12
  constructor(options={}) {
13
13
  if(Layout.minify) this.tab = this.n = ''
14
- options = Object.assign(this.defaults,options)
14
+ options = {...this.defaults,...options}
15
15
  for(let key in options) {
16
16
  this[key] = options[key]
17
17
  }
18
18
  }
19
19
 
20
20
  get(options={}) {
21
- options = Object.assign(this.defaults,options)
22
21
  for(let key in options) {
23
- if(key == 'scripts' || key == 'links') this[key] = [...this[key],...options[key]]
22
+ if(key == 'scripts' || key == 'links') {
23
+ if(!Array.isArray(options[key])) options[key] = []
24
+ this[key] = [...this[key],...options[key]]
25
+ }
24
26
  else this[key] = options[key]
25
27
  }
26
28
  return this.template()
27
29
  }
28
30
 
29
31
  template(n=this.n,tab=this.tab) {
32
+ let {rootUrl='',favicon,title,header,body,footer,styles} = this
30
33
  let {footerScripts,headerScripts} = this.buildScripts()
31
- let styles = this.buildStyles()
34
+ let links = this.buildLinks()
32
35
  let template = /*html*/`<!DOCTYPE html>`+n
33
36
  template +=/*html*/`<html lang="${this.lang}">`+n
34
37
  template +=/*html*/`<head>`+n
35
- template += styles ? styles+n : ''
38
+ template += links ? links+n : ''
39
+ template += styles ? /*html*/`<style>${styles}</style>`+n : ''
36
40
  template += headerScripts ? headerScripts : ''
37
41
  template += tab+/*html*/`<meta charset="${this.charset}">`+n
38
42
  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 : ''
43
+ template += favicon ? tab+/*html*/`<link rel="icon" href="${rootUrl}${favicon}" type="image/x-icon" >`+n : ''
44
+ template += title ? tab+/*html*/`<title>${title || ''}</title>`+n : ''
41
45
  template +=/*html*/`</head>`+n
42
46
  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 : ''
47
+ template += header ? tab+header+n : ''
48
+ template += tab+body+n
49
+ template += footer ? tab+footer+n : ''
46
50
  template += footerScripts ? footerScripts : ''
47
51
  template += /*html*/`</body>`+n
48
52
  template += /*html*/`</html>`
@@ -51,7 +55,11 @@ class Layout {
51
55
 
52
56
  buildMeta(n=this.n,tab=this.tab) {
53
57
  let meta = this.meta
54
- let {title,url,description,image,twiterName} = this
58
+ let {title,url,description,image,twiterName,rootUrl} = this
59
+ if(rootUrl) {
60
+ url = rootUrl+url
61
+ image = rootUrl+image
62
+ }
55
63
  if(description) {
56
64
  meta.push({name:"description",content:description})
57
65
  meta.push({property:"og:description",content:description})
@@ -72,38 +80,35 @@ class Layout {
72
80
  ).join(n)
73
81
  }
74
82
 
75
-
76
83
  buildScripts() {
77
84
  let footerScripts = ''
78
85
  let headerScripts = ''
86
+ let excludes = ['inner','v','footer']
79
87
  this.scripts.forEach(script => {
80
- let {inner='',src='',async,crossorigin,defer,integrity,referrerpolicy,type,footer=false,v} = script
81
- v = v ? '?'+v : ''
82
- async = async ? ' async ' : ''
83
- defer = defer ? ' defer ' : ''
84
- crossorigin = crossorigin ? ` crossorigin="${crossorigin}" ` : ''
85
- integrity = integrity ? ` integrity="${integrity}" ` : ''
86
- referrerpolicy = referrerpolicy ? ` referrerpolicy="${referrerpolicy}" ` : ''
87
- type = type ? ` type="${type}" ` : ''
88
- src = src ? `src="${src}${v}"`:''
89
- script = /*html*/`<script ${src}${referrerpolicy}${type}${integrity}${crossorigin}${defer}${async}>${inner}</script> `
88
+ let {inner='',v,src,footer} = script
89
+ if(src && this.rootUrl)
90
+ if(src.startsWith('/')) script.src = this.rootUrl+src
91
+ if(src && v) script.src = script.src+'?'+v
92
+ script = '<script '+Object.keys(script)
93
+ .filter(p => !excludes.includes(p))
94
+ .map(prop => `${prop}="${script[prop] || ''}"`).join(' ')
95
+ +'>'+inner+`</script>`
90
96
  if(footer) footerScripts += this.tab+script+this.n
91
97
  else headerScripts += this.tab+script+this.n
92
98
  })
93
99
  return {footerScripts,headerScripts}
94
100
  }
95
101
 
96
- buildStyles() {
102
+ buildLinks() {
97
103
  return this.links.map(link => {
98
- let {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v} = link
99
- v = v ? '?'+v : ''
100
- crossorigin = crossorigin ? ` crossorigin="${crossorigin}" ` : ''
101
- referrerpolicy = referrerpolicy ? ` referrerpolicy="${referrerpolicy}" ` : ''
102
- type = type ? ` type="${type}" ` : ''
103
- hreflang = hreflang ? ` hreflang="${hreflang}" ` : ''
104
- media = media ? ` media="${media}" ` : ''
105
- sizes = sizes ? ` media="${sizes}" ` : ''
106
- return this.tab+/*html*/`<link href="${href}${v}" rel="${rel}" ${crossorigin}${referrerpolicy}${type}${hreflang}${media}${sizes}></link>`
104
+ let {href,v,rel} = link
105
+ if(rel == undefined) link.rel = 'stylesheet'
106
+ if(href && this.rootUrl)
107
+ if(href.startsWith('/')) link.href = this.rootUrl+href
108
+ if(href && v) link.href = href+'?'+v
109
+ return this.tab+'<link '
110
+ +Object.entries(link).map(([key,value]) => `${key}="${value}"`).join(' ')
111
+ +'></link>'
107
112
  }).join(this.n)
108
113
  }
109
114
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "als-layout",
3
- "version": "0.4.1",
3
+ "version": "0.4.6",
4
4
  "description": "Create html layout",
5
5
  "main": "layout.js",
6
6
  "keywords": [],
package/readme.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # Als-layout
2
2
 
3
+ * new in 0.4.5
4
+ * rootUrl parameter
5
+ * styles parameter
3
6
  * new in 0.4.1
4
7
  * Added spaces between properties on meta tags
5
8
  * new in 0.4:
@@ -16,7 +19,8 @@ let layout = new Layout({
16
19
  lang='en',url,twiterName,
17
20
  scripts=[],links=[],
18
21
  favicon,footer='',header='',
19
- charset='UTF-8'
22
+ charset='UTF-8',styles='',
23
+ rootUrl = ''
20
24
  })
21
25
  // Get updated layout
22
26
  let pageLayout = layout.get({
@@ -72,4 +76,13 @@ let scripts = [
72
76
  let links = [
73
77
  {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v}
74
78
  ]
75
- ```
79
+ ```
80
+
81
+ ## styles
82
+ You can add css styles as string which will be added inside as ``<style>/*your styles*/</style>`` inside head teag.
83
+
84
+
85
+ ## rootUrl
86
+ rootUrl parameter is a url you want to add to different links.
87
+ * adding rootUrl to meta url,meta image and favicon url
88
+ * adding to all scripts, links which starts with "/"