als-layout 0.4.0 → 0.4.5

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 +34 -31
  2. package/package.json +1 -1
  3. package/readme.md +17 -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"},
@@ -27,22 +27,24 @@ class Layout {
27
27
  }
28
28
 
29
29
  template(n=this.n,tab=this.tab) {
30
+ let {rootUrl='',favicon,title,header,body,footer,styles} = this
30
31
  let {footerScripts,headerScripts} = this.buildScripts()
31
- let styles = this.buildStyles()
32
+ let links = this.buildLinks()
32
33
  let template = /*html*/`<!DOCTYPE html>`+n
33
34
  template +=/*html*/`<html lang="${this.lang}">`+n
34
35
  template +=/*html*/`<head>`+n
35
- template += styles ? styles+n : ''
36
+ template += links ? links+n : ''
37
+ template += styles ? /*html*/`<style>${styles}</style>`+n : ''
36
38
  template += headerScripts ? headerScripts : ''
37
39
  template += tab+/*html*/`<meta charset="${this.charset}">`+n
38
40
  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 += favicon ? tab+/*html*/`<link rel="icon" href="${rootUrl}${favicon}" type="image/x-icon" >`+n : ''
42
+ template += title ? tab+/*html*/`<title>${title || ''}</title>`+n : ''
41
43
  template +=/*html*/`</head>`+n
42
44
  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 : ''
45
+ template += header ? tab+header+n : ''
46
+ template += tab+body+n
47
+ template += footer ? tab+footer+n : ''
46
48
  template += footerScripts ? footerScripts : ''
47
49
  template += /*html*/`</body>`+n
48
50
  template += /*html*/`</html>`
@@ -51,7 +53,11 @@ class Layout {
51
53
 
52
54
  buildMeta(n=this.n,tab=this.tab) {
53
55
  let meta = this.meta
54
- let {title,url,description,image,twiterName} = this
56
+ let {title,url,description,image,twiterName,rootUrl} = this
57
+ if(rootUrl) {
58
+ url = rootUrl+url
59
+ image = rootUrl+image
60
+ }
55
61
  if(description) {
56
62
  meta.push({name:"description",content:description})
57
63
  meta.push({property:"og:description",content:description})
@@ -68,42 +74,39 @@ class Layout {
68
74
  if(title) meta.push({property:"og:title", content:title})
69
75
  if(url) meta.push({property:"og:url",content:url})
70
76
  return meta.map(obj => tab+
71
- /*html*/`<meta ${Object.keys(obj).map(propName => `${propName}="${obj[propName]}"`).join('')}>`
77
+ /*html*/`<meta ${Object.keys(obj).map(propName => `${propName}="${obj[propName]}"`).join(' ')}>`
72
78
  ).join(n)
73
79
  }
74
80
 
75
-
76
81
  buildScripts() {
77
82
  let footerScripts = ''
78
83
  let headerScripts = ''
84
+ let excludes = ['inner','v','footer']
79
85
  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> `
86
+ let {inner='',v,src,footer} = script
87
+ if(src && this.rootUrl)
88
+ if(src.startsWith('/')) script.src = this.rootUrl+src
89
+ if(src && v) script.src = script.src+'?'+v
90
+ script = '<script '+Object.keys(script)
91
+ .filter(p => !excludes.includes(p))
92
+ .map(prop => `${prop}="${script[prop] || ''}"`).join(' ')
93
+ +'>'+inner+`</script>`
90
94
  if(footer) footerScripts += this.tab+script+this.n
91
95
  else headerScripts += this.tab+script+this.n
92
96
  })
93
97
  return {footerScripts,headerScripts}
94
98
  }
95
99
 
96
- buildStyles() {
100
+ buildLinks() {
97
101
  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>`
102
+ let {href,v,rel} = link
103
+ if(rel == undefined) link.rel = 'stylesheet'
104
+ if(href && this.rootUrl)
105
+ if(href.startsWith('/')) link.href = this.rootUrl+href
106
+ if(href && v) link.href = href+'?'+v
107
+ return this.tab+'<link '
108
+ +Object.entries(link).map(([key,value]) => `${key}="${value}"`).join(' ')
109
+ +'></link>'
107
110
  }).join(this.n)
108
111
  }
109
112
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "als-layout",
3
- "version": "0.4.0",
3
+ "version": "0.4.5",
4
4
  "description": "Create html layout",
5
5
  "main": "layout.js",
6
6
  "keywords": [],
package/readme.md CHANGED
@@ -1,5 +1,10 @@
1
1
  # Als-layout
2
2
 
3
+ * new in 0.4.5
4
+ * rootUrl parameter
5
+ * styles parameter
6
+ * new in 0.4.1
7
+ * Added spaces between properties on meta tags
3
8
  * new in 0.4:
4
9
  * minify
5
10
  * package optimization
@@ -14,7 +19,8 @@ let layout = new Layout({
14
19
  lang='en',url,twiterName,
15
20
  scripts=[],links=[],
16
21
  favicon,footer='',header='',
17
- charset='UTF-8'
22
+ charset='UTF-8',styles='',
23
+ rootUrl = ''
18
24
  })
19
25
  // Get updated layout
20
26
  let pageLayout = layout.get({
@@ -70,4 +76,13 @@ let scripts = [
70
76
  let links = [
71
77
  {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v}
72
78
  ]
73
- ```
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 "/"