npm - als-layout - Versions diffs - 0.1.0 - Mend

als-layout 0.1.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

package/layout.js ADDED Viewed

@@ -0,0 +1,115 @@
+class Layout {
+   constructor({title,body,description,image,lang='en',url,scripts=[],links=[],favicon,footer,header,v,charset='UTF-8'}) {
+      this.title = title
+      this.body = body
+      this.description = description
+      this.image = image
+      this.lang = lang
+      this.url = url
+      this.favicon = favicon
+      this.scripts = scripts
+      this.links = links
+      this.footer = footer
+      this.header = header
+      this.v = v
+      this.charset = charset
+   }
+   get({title,body,description,image,lang,url,favicon,footer,header,v,scripts,links,charset=this.charset}) {
+      if(scripts) this.scripts = [...this.scripts,scripts]
+      if(links) this.links = [...this.links,links]
+      if(title) this.title = title
+      if(body) this.body = body
+      if(description) this.description = description
+      if(image) this.image = image
+      if(lang) this.lang = lang
+      if(url) this.url = url
+      if(favicon) this.favicon = favicon
+      if(footer) this.footer = footer
+      if(header) this.header = header
+      if(v) this.v = v
+      let {footerScripts,headerScripts} = this.scripts()
+      return /*html*/`<!DOCTYPE html>
+<html lang="${lang}">
+<head>
+   <meta charset="${charset}">
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   ${favicon ? /*html*/`<link rel="icon" href="${favicon}" type="image/x-icon" >` : ''}
+   ${this._meta()}
+   ${this._header(headerScripts)}
+   <title>${title}</title>
+</head>
+<body>
+   ${body}
+   ${this._footer(footerScripts)}
+</body>
+</html>`
+   }
+   _meta() {
+      let {title,url,description,image,twiterName,charset} = this
+      let meta = [
+         {charset},
+         {'http-equiv':"X-UA-Compatible", content:"IE=edge"},
+         {name:"viewport",content:"width=device-width, initial-scale=1.0"},
+         {property:"og:type", content:"website"},
+      ]
+      if(description) {
+         meta.push({name:"description",content:description})
+         meta.push({property:"og:description",content:description})
+         meta.push({name:"twitter:description",content:description})
+      }
+      if(image) {
+         meta.push({property:"og:image", content:image})
+         meta.push({name:"twitter:image", content:image})
+         meta.push({name:"twitter:card", content:'summary_large_image'})
+      } else {
+         meta.push({name:"twitter:card", content:'article'})
+      }
+      if(twiterName) meta.push({name:"twitter:site",content:twiterName})
+      if(title) meta.push({property:"og:title", content:"title"})
+      if(url) meta.push({property:"og:url",content:url})
+   }
+   _footer(scripts) {
+      return /*html*/`${this.footer} ${scripts}`
+   }
+   _header(scripts) {
+      return /*html*/`${this._styles()} ${this.header} ${scripts}`
+   }
+   _scripts() {
+      let footerScripts = ''
+      let headerScripts = ''
+      this.scripts.forEach(script => {
+         let {inner='',src='',async,crossorigin,defer,integrity,referrerpolicy,type,footer=false,v=this.v} = script
+         v = v ? '?'+v : ''
+         async = async ? ' async ' : ''
+         defer = defer ? ' defer ' : ''
+         crossorigin = crossorigin ? ` crossorigin="${crossorigin}" ` : ''
+         integrity = integrity ? ` integrity="${integrity}" ` : ''
+         referrerpolicy = referrerpolicy ? ` referrerpolicy="${referrerpolicy}" ` : ''
+         type = type ? ` type="${type}" ` : ''
+         let script = /*html*/` <script src="${src}${v}"${referrerpolicy}${type}${integrity}${crossorigin}${defer}${async}>${inner}</script> `
+         if(footer) footerScripts += script
+         else headerScripts += script
+      })
+      return {footerScripts,headerScripts}
+   }
+   _styles() {
+      return this.links.map(link => {
+         let {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v=this.v} = link
+         v = v ? '?'+v : ''
+         crossorigin = crossorigin ? ` crossorigin="${crossorigin}" ` : ''
+         referrerpolicy = referrerpolicy ? ` referrerpolicy="${referrerpolicy}" ` : ''
+         type = type ? ` type="${type}" ` : ''
+         hreflang = hreflang ? ` hreflang="${hreflang}" ` : ''
+         media = media ? ` media="${media}" ` : ''
+         sizes = sizes ? ` media="${sizes}" ` : ''
+         return /*html*/`<link href="${href}${v}" rel="${rel}" ${crossorigin}${referrerpolicy}${type}${hreflang}${media}${sizes}></link>`
+      }).join(' ')
+   }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,9 @@
+{
+  "name": "als-layout",
+  "version": "0.1.0",
+  "description": "Being tested. create html layout with node",
+  "main": "layout.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

package/readme.md ADDED Viewed

@@ -0,0 +1,31 @@
+# Als-layout
+**being tested**
+## Syntax
+```javascript
+let Layout = require('als-layout')
+// Create Layout object
+let layout = new Layout({
+   title,body,description,image,lang='en',url,
+   scripts=[],links=[],
+   favicon,footer,header,v,charset
+})
+// Get updated layout
+let pageLayout = layout.get({
+   scripts,links, // added to existing scripts and links
+   title,body,description,image,lang,url,favicon,footer,header,v
+})
+```
+## scripts and links
+```javascript
+let scripts = [
+   {inner='',src='',async,crossorigin,defer,integrity,referrerpolicy,type,footer=false,v=this.v}
+]
+let links = [
+   {href,rel='stylesheet',crossorigin,hreflang,media,referrerpolicy,sizes,type,v=this.v}
+]
+```