als-layout 6.1.0 → 7.0.1

package/docs/#.md

@@ -1,19 +0,0 @@
-# als-layout Documentation
-
-`als-layout` is a JavaScript library designed to simplify and enhance the process of constructing and managing web page layouts. It provides a comprehensive API for modifying HTML documents dynamically, allowing developers to add, update, and manipulate various elements such as meta tags, styles, scripts, and more.
-
-The `als-layout` library is versatile, suitable for:
-- Building dynamic web pages that require frequent updates to their metadata, styles, or scripts.
-- Creating templating systems where multiple page layouts share similar structures but differ in content or styling.
-- Developing web applications that need to dynamically adjust their UI based on user interactions or data changes.
-
-## Installation and Adding
-To use the `als-layout` library in your project, you can install it via npm and then include it in your JavaScript files:
-
-```bash
-npm i als-layout
-```
-
-```js
-const Layout = require('als-layout')
-```

package/docs/0-change-log.md

@@ -1,10 +0,0 @@
-## Change Log for V6
-
-The code refactored.
-
-### Removed
-  * no deepclone for options, using { ...Layout.options, ...options } instead
-  * no onload method
-### Added
-  * status
-  * end(res)

package/docs/1-basic-usage.md

@@ -1,37 +0,0 @@
-## Basic Usage
-
-### Initialization
-To start using `als-layout`, you first need to create a new instance of `Layout`. This instance will serve as the foundation for building and modifying your web page.
-
-```js
-const Layout = require('als-layout');
-const layout = new Layout();
-```
-
-### Adding Different Elements
-Once you have your `Layout` instance, you can easily add or modify various elements of your web page. Here are some examples of how you can use the library to customize your layout:
-
-```js
-const layout = new Layout()
-   .viewport() // default width=device-width, initial-scale=1.0
-   .title('Test title') // adding/updating title and meta[og:title]
-   .favicon('/favicon.png') // adding/updating link[rel=icon][type=image/x-icon] with new href
-   .keywords(['some', 'keyword']) // adding/updating meta[name=keywords]. not adding existing keywords
-   .image('/main-image.png', '1.5') // adding/updating meta - og:image, twitter:image, twitter:card
-   .description('Cool site') // adding/updating meta og:description, twitter:description, and description tag
-   .url('/some', 'http://site.com') // adding/updating meta[og:url] and link[rel="canonical"]
-   .style('body {margin:0; background-color:whitesmoke;}', true) // adding css styles to existing/new style tag. Second parameter is minified (default=false).
-   .link('/styles.css') // adding link[rel=stylesheet] if such href not exists
-   .script({src:'/app.js'}, '', true) // set script with src to head if such src not exists
-   .script({}, 'console.log("hello world")', false) // set script with script code to footer
-
-// Accessors for document parts
-layout.body // getter for body element (if not exists, created)
-layout.head // getter for head element (if not exists, created)
-layout.html // getter for html Element (if not exists, created)
-
-// Outputs
-layout.rawHtml // raw HTML of the document
-layout.clone // creates a new layout object clone for current object
-```
-

package/docs/2-cloning.md

@@ -1,35 +0,0 @@
-## Cloning Functionality
-
-### What is Cloning and Why is it Necessary?
-Cloning in the `als-layout` library refers to creating a complete, independent copy of the existing `Layout` instance. This functionality is crucial when you need to generate multiple pages or versions of a page from a single base layout without affecting the original setup.
-
-### How to Use Cloning
-To clone a `Layout` instance, simply use the `clone` method. This method creates a new `Layout` instance with the same properties and settings as the original, allowing for independent modifications without interference.
-
-```js
-const newLayout = layout.clone;
-```
-
-### Benefits of Cloning
-- **Efficiency:** Cloning is highly efficient, especially for creating pages with similar structures but different content or styles. It avoids the overhead of reinitializing and reconfiguring a new `Layout` instance from scratch.
-- **Speed:** Cloning is fast, typically taking less than 20ms even for large pages. This makes it ideal for high-performance web applications that need to dynamically generate content.
-- **Isolation:** Changes made to a cloned `Layout` do not affect the original, ensuring that each instance can be modified independently based on specific requirements.
-
-Cloning is particularly useful in scenarios where templates or base layouts are used repeatedly with slight variations, providing a robust and scalable solution for web page generation.
-
-
-### propsToClone
-
-You can add properties to add when cloning the object, by adding name of properties to `Layout.propsToClone` which is array.
-
-Example:
-
-```js
-Layout.propsToClone.push('projectName')
-
-const layout = new Layout()
-layout.projectName = 'Cool project'
-
-const cloned = layout.clone
-console.log(cloned.projectName) // 'Cool project'
-```

package/docs/3-advanced-usage.md

@@ -1,48 +0,0 @@
-## Advanced Usage
-
-The `als-layout` library allows for sophisticated manipulation of web page layouts, providing robust tools for creating dynamic and complex web pages. Below is an advanced example demonstrating various capabilities of the library:
-
-```js
-const Layout = require('als-layout')
-
-// Starting with a basic HTML template and specifying the host for URL methods
-const raw = /*html*/`<html></html>`
-const host = 'http://example.com';
-const options = {
-   logger,
-   host, 
-   minified=false
-}
-const layout = new Layout(raw, options).lang('fr')
-console.log(layout.rawHtml)
-// <!DOCTYPE html><html lang="fr"><head></p></head><body></body></html>
-
-// Cloning the initial layout to create a specialized page
-const homePage = layout.clone
-homeAutoReload = layout.clone
-homePage.title('Home page')
-homePage.body.innerHTML = /*html*/`<h1>Home page</h1>`
-console.log(homePage.rawHtml)
-// <!DOCTYPE html><html lang="fr"><head><title>Home page</title><meta property="og:title" content="Home page"></head><body><h1>Home page</h1></body></html>
-
-// Adding script that reloads the page every minute
-homeAutoReload.script({}, 'setTimeout(function() { window.location.reload(); }, 60000);', false)
-console.log(homeAutoReload.rawHtml)
-// <!DOCTYPE html><html lang="fr"><head><title>Automatic Reload Page</title><meta property="og:title" content="Automatic Reload Page"></head><body><script>setTimeout(function() { window.location.reload(); }, 60000);</script></body></html>
-
-// Demonstrating dynamic stylesheet linkage with versioning
-homePage.link('/css/main.css')
-console.log(homePage.rawHtml)
-// Includes link to the stylesheet with version parameter to ensure fresh cache
-```
-
-In this example:
-
-- We start with a basic HTML template and use the `lang` method to set the language.
-- We use the `clone` method to create two versions of the base layout: one for the home page and another that automatically reloads every minute.
-- We manipulate the `body` of the `homePage` to include custom HTML.
-- We add a script to `homeAutoReload` that sets up an automatic page reload, showcasing how to insert JavaScript dynamically.
-- We dynamically add a versioned link to a stylesheet in the `homePage`, demonstrating control over caching and resource management.
-
-This advanced example illustrates how `als-layout` can be used to handle complex scenarios and requirements in web development, enhancing the flexibility and power at your disposal.
-

package/docs/4-res-and-status.md

@@ -1,10 +0,0 @@
-## Response with status
-
-In version 6, added two methods:
-1. `status(statusCode)` - adds the statusCode to `__status` property
-2. `end(res)` 
-   1. writes head with `__status, { 'Content-Type': 'text/html' }` 
-   2. runs `res.end(this.rawHtml)`
-
-
-The main idea, is to add quick way to response with layout. 

package/docs/5-api.md

@@ -1,97 +0,0 @@
-## API
-
-### Constructor
-
-#### `new Layout(html: string, options: object)`
-
-Creates a new `Layout` instance.
-
-- **html**: The initial HTML document string.
-- **options**: Configuration options for the layout instance.
-  - **minified**: Boolean (default: `false`). Determines if inline CSS and JavaScript should be minified.
-  - **logger**: Function (default: `console`). Function for errors in minifiying and url method.
-  - **host**:  String (defult:`undefined`). String for url method. 
-
-
-### Properties
-
-#### `layout.rawHtml`
-
-Returns the inner HTML of the document.
-
-#### `layout.clone`
-
-Creates a clone of the current layout instance, preserving `options`.
-
-
-#### `__status`
-
-Stores the statusCode for `end` method.
-
-### Methods
-
-#### `lang(lang: string): this`
-
-Sets the `lang` attribute on the `<html>` element.
-
-#### `title(title: string): this`
-
-Sets the document title and creates an Open Graph title meta tag.
-
-#### `description(description: string): this`
-
-Adds description meta tags for SEO and social platforms.
-
-#### `favicon(href: string): this`
-
-Sets or updates the favicon URL.
-
-#### `meta(props: object): this`
-
-Adds or updates a `<meta>` tag with specified attributes.
-
-- **props**: An object where each key-value pair corresponds to a meta attribute.
-
-#### `keywords(keywords: array): this`
-
-Sets or appends keywords in the `content` attribute of a `<meta name="keywords">` tag.
-
-#### `viewport(viewport: string): this`
-
-Sets the viewport meta tag. Default: `width=device-width, initial-scale=1.0`.
-
-#### `image(image: string): this`
-
-Sets meta tags for Open Graph and Twitter cards for an image.
-
-#### `style(styles: string, minified: boolean = this.options.minified): this`
-
-Adds inline CSS to the document. If `minified` is true, the CSS is minified.
-
-- **styles**: CSS string.
-- **minified**: Boolean (optional).
-
-#### `url(url: string, host: string = this.URL): this`
-
-Sets the canonical URL and Open Graph URL meta tags.
-
-#### `script(attrs: object = {}, innerHTML: string = '', head: boolean = true, minified: boolean = this.options.minified): this`
-
-Adds a `<script>` tag to the document.
-
-- **attrs**: Attributes for the `<script>` tag.
-- **innerHTML**: Inline JavaScript (optional).
-- **head**: Boolean (default: `true`). If `false`, the script is added to `<body>`.
-- **minified**: Boolean. If true, inline JavaScript is minified.
-
-#### `link(href: string, attributes: object = { rel: "stylesheet", type: "text/css" }): this`
-
-Adds a `<link>` tag for external stylesheets.
-
-#### `status(statusCode:number): this`
-
-Adds the statusCode to `__status` property
-
-#### `end(res):undefined`
-
-Response with res(rawHtml)

package/index.js

@@ -1,3 +0,0 @@
-const Layout = require('./lib/layout')
-
-module.exports = Layout

package/lib/elements/index.js

@@ -1,38 +0,0 @@
-const meta = require('./meta')
-const script =  require('./script')
-const style =  require('./style')
-const addKeywords =  require('./keywords')
-const addLink =  require('./link')
-const addUrl = require('./url')
-
-const { SingleNode } = require('als-document');
-
-function getDescription(description,layout) {
-   meta({ name: 'description', content: description },layout)
-   meta({ property: 'og:description', content: description },layout)
-   meta({ property: 'twitter:description', content: description },layout)
-   return layout
-}
-
-function getFavicon(href,layout) {
-   const faviconElement = layout.root.$('link[rel=icon][type=image/x-icon]')
-   if (faviconElement) faviconElement.setAttribute('href', href)
-   else layout.head.insert(2, new SingleNode('link', { rel: 'icon', href, type: 'image/x-icon' }))
-   return layout
-}
-
-function getViewport(viewport = 'width=device-width, initial-scale=1.0',layout) {
-   const element = layout.root.$('meta[name="viewport"]')
-   if (element) element.setAttribute('content', viewport)
-   else layout.head.insert(2, new SingleNode('meta', { name: 'viewport', content: viewport }))
-   return layout
-}
-
-function getImage(image,layout) {
-   meta({ property: 'og:image', content: image },layout)
-   meta({ name: 'twitter:image', content: image },layout)
-   meta({ name: 'twitter:card', content: 'summary_large_image' },layout)
-   return layout
-}
-
-module.exports = { meta, getDescription, getFavicon, getViewport, getImage, script, style, addKeywords, addLink, addUrl }

package/lib/elements/keywords.js

@@ -1,19 +0,0 @@
-const { SingleNode } = require('als-document');
-
-function keywords(keywords = [],layout) {
-   let keywordsElement = layout.root.$('meta[name=keywords]')
-   if (!keywordsElement) keywordsElement = new SingleNode('meta', { name: 'keywords' })
-   const content = keywordsElement.getAttribute('content')
-   const existingKeywords = content ? content.split(',') : []
-   keywords.forEach(keyword => {
-      keyword = keyword.trim()
-      if (!existingKeywords.includes(keyword)) existingKeywords.push(keyword)
-   });
-   if (existingKeywords.length) {
-      keywordsElement.setAttribute('content', existingKeywords.join())
-      layout.head.insert(2, keywordsElement)
-   }
-   return layout
-}
-
-module.exports = keywords

package/lib/elements/link.js

@@ -1,13 +0,0 @@
-const { SingleNode } = require('als-document');
-
-function link(href, attributes = { rel: "stylesheet", type: "text/css" },layout) {
-   if (!href || typeof href !== 'string') return layout
-   const selector = `link[rel=stylesheet][href^="${href}"]`
-   let linkElement = layout.root.$(selector)
-   if (linkElement) return
-   linkElement = new SingleNode('link', { href, ...attributes })
-   layout.head.insert(2, linkElement)
-   return layout
-}
-
-module.exports = link

package/lib/elements/meta.js

@@ -1,12 +0,0 @@
-const { SingleNode } = require('als-document');
-
-function meta(props,layout) {
-   const entries = Object.entries(props)
-   const [name, value] = entries[0]
-   const selector = `meta[${name}="${value}"]`
-   const metaElement = layout.root.$(selector)
-   if (metaElement) entries.forEach(([name, v]) => metaElement.setAttribute(name, props[name]))
-   else layout.head.insert(2, new SingleNode('meta', props))
-}
-
-module.exports = meta

package/lib/elements/script.js

@@ -1,25 +0,0 @@
-const UglifyJS = require("uglify-js");
-const { Node } = require('als-document');
-
-function script(attrs = {}, innerHTML = '', head = true, minified, layout) {
-   if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
-   if (attrs.src) {
-      const selector = `script[src="${attrs.src}"]`
-      if (attrs.src && layout.root.$(selector)) return layout
-   }
-   if (Object.keys(attrs).length || innerHTML) {
-      const script = new Node('script', attrs)
-      if (innerHTML) {
-         if (minified) {
-            try { innerHTML = UglifyJS.minify(innerHTML).code } 
-            catch (error) { layout.logger.error(error) }
-         }
-         script.innerHTML = innerHTML
-      }
-      if (head) layout.head.insert(2, script)
-      else layout.html.insert(2, script)
-   }
-   return layout
-}
-
-module.exports = script

package/lib/elements/style.js

@@ -1,20 +0,0 @@
-const uglifycss = require('uglifycss');
-const { Node } = require('als-document');
-
-function style(styles, minified, layout) {
-   if (typeof styles !== 'string') throw 'styles parameter should be string';
-   if (minified) {
-      try { styles = uglifycss.processString(styles); } 
-      catch (error) { layout.logger.error(error) }
-   }
-   let styleElement = layout.root.$('style')
-   if (styleElement) styleElement.innerHTML = styleElement.innerHTML + '\n' + styles
-   else {
-      styleElement = new Node('style')
-      styleElement.innerHTML = styles
-      layout.head.insert(2, styleElement)
-   }
-   return layout
-}
-
-module.exports = style

package/lib/elements/url.js

@@ -1,18 +0,0 @@
-const meta = require('./meta');
-const { SingleNode } = require('als-document');
-
-function addUrl(url, host,layout) {
-   try {
-      url = (host ? new URL(url, host) : new URL(url)).href.replace(/\/$/, '')
-      meta({ property: 'og:url', content: url },layout)
-      const canonicalElement = layout.root.$('link[rel="canonical"]')
-      if (canonicalElement) canonicalElement.setAttribute('href', url)
-      else layout.head.insert(2, new SingleNode('link', { rel: 'canonical', href: url }))
-} catch (error) {
-      console.log(error)
-      layout.logger.log(`url "${url}" with host "${host}" is not valid url`)
-   }
-   return layout
-}
-
-module.exports = addUrl

package/lib/layout.js

@@ -1,52 +0,0 @@
-const { Document } = require('als-document');
-const { meta, getDescription, getFavicon, getViewport, getImage, script, style, addKeywords, addLink, addUrl } = require('./elements/index')
-
-class Layout extends Document {
-   static propsToClone = []; 
-   static options = { logger: console, host: '', minified: false }
-
-   constructor(html, options = {}) {
-      options = { ...Layout.options, ...options }
-      super(html, options.host);
-      this.options = options
-      this.logger = options.logger || console
-      this.root = this.html
-   }
-
-   get rawHtml() { return this.innerHTML }
-   get clone() { 
-      const clone = new this.constructor(new Document(this, this.URL), this.options)
-      Layout.propsToClone.forEach(prop => clone[prop] = this[prop])
-      return clone
-   }
-
-   __status = 200;
-   status(status) { this.__status = status; return this }
-   end(res) {
-      res.writeHead(this.__status, { 'Content-Type': 'text/html' })
-      res.end(this.rawHtml)
-   }
-
-   lang(lang) { this.html.setAttribute('lang', lang); return this }
-   link(href, attributes) { return addLink(href, attributes, this) }
-   keywords(keywords = []) { return addKeywords(keywords, this) }
-   style(styles, minified = this.options.minified) { return style(styles, minified, this) }
-   url(url, host = this.URL) { return addUrl(url, host, this) }
-   meta(props) { return meta(props, this) }
-   description(description) { return getDescription(description,this) }
-   favicon(href) { return getFavicon(href,this) }
-   viewport(viewport) { return getViewport(viewport,this) }
-   image(image) { return getImage(image,this) }
-   script(attrs = {}, innerHTML = '', head = true, minified = this.options.minified) {
-      return script(attrs, innerHTML, head, minified, this)
-   }
-
-   title(title) {
-      super.title // create title tag if not exists
-      super.title = title
-      this.meta({ property: 'og:title', content: title })
-      return this
-   }
-}
-
-module.exports = Layout

package/scripts/build-readme.js

@@ -1,8 +0,0 @@
-const { readFileSync, writeFileSync, readdirSync } = require('fs')
-const { join } = require('path')
-
-const docsDir = join(__dirname, '..','docs')
-const files = readdirSync(docsDir)
-const content = files.map(file => readFileSync(join(docsDir, file), 'utf-8')).join('\n');
-writeFileSync(join(__dirname, '..','readme.md'), content, 'utf-8')
-