als-layout 0.4.1 → 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.
- package/layout.js +33 -30
- package/package.json +1 -1
- 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"},
|
|
@@ -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
|
|
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 +=
|
|
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 +=
|
|
40
|
-
template +=
|
|
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 +=
|
|
44
|
-
template += tab+
|
|
45
|
-
template +=
|
|
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})
|
|
@@ -72,38 +78,35 @@ class Layout {
|
|
|
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
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
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
|
-
|
|
100
|
+
buildLinks() {
|
|
97
101
|
return this.links.map(link => {
|
|
98
|
-
let {href,rel
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
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
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 "/"
|