als-layout 4.2.0 → 5.0.0

package/index.js

@@ -1,148 +1,3 @@
-const { Document, SingleNode, Node } = require('als-document');
-const UglifyJS = require("uglify-js");
-const uglifycss = require('uglifycss');
-
-const onloadScript = /*js*/`document.addEventListener('DOMContentLoaded', function() {
-   const elements = document.querySelectorAll('[onload]');
-   elements.forEach(element => {
-       const onloadCode = element.getAttribute('onload');
-       const func = Function('"use strict"; return function() { ' + onloadCode + ' }');
-       func().call(element);
-       element.removeAttribute('onload');
-   });
-});`;
-
-class Layout extends Document {
-   get rawHtml() { return this.innerHTML }
-   get clone() { return new Layout(new Document(this), this.URL, this.minified) }
-   lang(lang) { this.html.setAttribute('lang', lang); return this }
-
-   constructor(html, host, minified = false) {
-      super(html, host);
-      this.minified = minified
-      this.root = this.html
-   }
-
-   onload() {
-      if (this.onloadAdded) return
-      this.script({}, onloadScript);
-      this.onloadAdded = true
-      return this
-   }
-
-   title(title) {
-      super.title // create title tag if not exists
-      super.title = title
-      this.meta({ property: 'og:title', content: title })
-      return this
-   }
-
-   description(description) {
-      this.meta({ name: 'description', content: description })
-      this.meta({ property: 'og:description', content: description })
-      this.meta({ property: 'twitter:description', content: description })
-      return this
-   }
-
-   favicon(href) {
-      const faviconElement = this.root.$('link[rel=icon][type=image/x-icon]')
-      if (faviconElement) faviconElement.setAttribute('href', href)
-      else this.head.insert(2, new SingleNode('link', { rel: 'icon', href, type: 'image/x-icon' }))
-      return this
-   }
-
-   meta(props) {
-      const entries = Object.entries(props)
-      const [name, value] = entries[0]
-      const selector = `meta[${name}="${value}"]`
-      const metaElement = this.root.$(selector)
-      if (metaElement) entries.forEach(([name, v]) => metaElement.setAttribute(name, props[name]))
-      else this.head.insert(2, new SingleNode('meta', props))
-   }
-
-   keywords(keywords = []) {
-      let keywordsElement = this.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())
-         this.head.insert(2, keywordsElement)
-      }
-      return this
-   }
-
-   viewport(viewport = 'width=device-width, initial-scale=1.0') {
-      const element = this.root.$('meta[name="viewport"]')
-      if (element) element.setAttribute('content', viewport)
-      else this.head.insert(2, new SingleNode('meta', { name: 'viewport', content: viewport }))
-      return this
-   }
-
-   image(image) {
-      this.meta({ property: 'og:image', content: image })
-      this.meta({ name: 'twitter:image', content: image })
-      this.meta({ name: 'twitter:card', content: 'summary_large_image' })
-      return this
-   }
-
-   style(styles, minified = this.minified) {
-      if (typeof styles !== 'string') throw 'styles parameter should be string';
-      if (minified) styles = uglifycss.processString(styles);
-      let styleElement = this.root.$('style')
-      if (styleElement) styleElement.innerHTML = styleElement.innerHTML + '\n' + styles
-      else {
-         styleElement = new Node('style')
-         styleElement.innerHTML = styles
-         this.head.insert(2, styleElement)
-      }
-      return this
-   }
-
-   url(url, host = this.URL) {
-      try {
-         url = new URL(url, host).href.replace(/\/$/, '')
-         this.meta({ property: 'og:url', content: url })
-         const canonicalElement = this.root.$('link[rel="canonical"]')
-         if (canonicalElement) canonicalElement.setAttribute('href', url)
-         else this.head.insert(2, new SingleNode('link', { rel: 'canonical', href: url }))
-      } catch (error) {
-         console.log(`url ${url} with host ${host} is not valid url`)
-      }
-      return this
-   }
-
-   script(attrs = {}, innerHTML = '', head = true, minified = this.minified) {
-      if (typeof attrs !== 'object' || attrs === null || Array.isArray(attrs)) attrs = {}
-      if (attrs.src) {
-         const selector = `script[src="${attrs.src}"]`
-         if (attrs.src && this.root.$(selector)) return this
-      }
-      if (Object.keys(attrs).length || innerHTML) {
-         const script = new Node('script', attrs)
-         if (innerHTML) {
-            if (minified) innerHTML = UglifyJS.minify(innerHTML).code
-            script.innerHTML = innerHTML
-         }
-         if (head) this.head.insert(2, script)
-         else this.html.insert(2, script)
-      }
-      return this
-   }
-
-   link(href, attributes = { rel: "stylesheet", type: "text/css" }) {
-      if (!href || typeof href !== 'string') return this
-      const selector = `link[rel=stylesheet][href^="${href}"]`
-      let linkElement = this.root.$(selector)
-      if (linkElement) return
-      linkElement = new SingleNode('link', { href, ...attributes })
-      this.head.insert(2, linkElement)
-      return this
-   }
-}
+const Layout = require('./lib/layout')
 
 module.exports = Layout

package/lib/layout.js

@@ -0,0 +1,127 @@
+const { Document, SingleNode } = require('als-document');
+const script = require('./script');
+const style = require('./style');
+const onloadScript = require('./onload');
+
+class Layout extends Document {
+   constructor(html, options = {}) {
+      super(html, options.host);
+      this.options = options
+      this.logger = options.logger || console
+      this.root = this.html
+      this.statusCode = 200
+   }
+
+   get rawHtml() { return this.innerHTML }
+   get clone() { return new this.constructor(new Document(this, this.URL), this.options) }
+   lang(lang) { this.html.setAttribute('lang', lang); return this }
+
+   onload() {
+      const id = 'onload-script'
+      if(this.$('#'+id)) return
+      this.script({id}, onloadScript);
+      return this
+   }
+
+   title(title) {
+      super.title // create title tag if not exists
+      super.title = title
+      this.meta({ property: 'og:title', content: title })
+      return this
+   }
+
+   description(description) {
+      this.meta({ name: 'description', content: description })
+      this.meta({ property: 'og:description', content: description })
+      this.meta({ property: 'twitter:description', content: description })
+      return this
+   }
+
+   favicon(href) {
+      const faviconElement = this.root.$('link[rel=icon][type=image/x-icon]')
+      if (faviconElement) faviconElement.setAttribute('href', href)
+      else this.head.insert(2, new SingleNode('link', { rel: 'icon', href, type: 'image/x-icon' }))
+      return this
+   }
+
+   meta(props) {
+      const entries = Object.entries(props)
+      const [name, value] = entries[0]
+      const selector = `meta[${name}="${value}"]`
+      const metaElement = this.root.$(selector)
+      if (metaElement) entries.forEach(([name, v]) => metaElement.setAttribute(name, props[name]))
+      else this.head.insert(2, new SingleNode('meta', props))
+   }
+
+   keywords(keywords = []) {
+      let keywordsElement = this.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())
+         this.head.insert(2, keywordsElement)
+      }
+      return this
+   }
+
+   viewport(viewport = 'width=device-width, initial-scale=1.0') {
+      const element = this.root.$('meta[name="viewport"]')
+      if (element) element.setAttribute('content', viewport)
+      else this.head.insert(2, new SingleNode('meta', { name: 'viewport', content: viewport }))
+      return this
+   }
+
+   image(image) {
+      this.meta({ property: 'og:image', content: image })
+      this.meta({ name: 'twitter:image', content: image })
+      this.meta({ name: 'twitter:card', content: 'summary_large_image' })
+      return this
+   }
+
+   style(styles, minified = this.options.minified) {
+      return style(styles,minified,this)
+   }
+
+   url(url, host = this.URL) {
+      try {
+         url = new URL(url, host).href.replace(/\/$/, '')
+         this.meta({ property: 'og:url', content: url })
+         const canonicalElement = this.root.$('link[rel="canonical"]')
+         if (canonicalElement) canonicalElement.setAttribute('href', url)
+         else this.head.insert(2, new SingleNode('link', { rel: 'canonical', href: url }))
+      } catch (error) {
+         this.logger.log(`url ${url} with host ${host} is not valid url`)
+      }
+      return this
+   }
+
+   script(attrs = {}, innerHTML = '', head = true, minified = this.options.minified) {
+      return script(attrs,innerHTML,head,minified,this)
+   }
+
+   link(href, attributes = { rel: "stylesheet", type: "text/css" }) {
+      if (!href || typeof href !== 'string') return this
+      const selector = `link[rel=stylesheet][href^="${href}"]`
+      let linkElement = this.root.$(selector)
+      if (linkElement) return
+      linkElement = new SingleNode('link', { href, ...attributes })
+      this.head.insert(2, linkElement)
+      return this
+   }
+
+   status(statusCode) { this.statusCode = statusCode; return this }
+   end(res) {
+      res.writeHead(this.statusCode);
+      if (res.set) res.set('Content-Type', 'text/html') // for Express
+      else res.setHeader('Content-Type', 'text/html') // for http
+      res.end(this.rawHtml)
+      return this
+   }
+}
+
+module.exports = Layout

package/lib/onload.js

@@ -0,0 +1,11 @@
+const onloadScript = /*js*/`document.addEventListener('DOMContentLoaded', function() {
+   const elements = document.querySelectorAll('[onload]');
+   elements.forEach(element => {
+       const onloadCode = element.getAttribute('onload');
+       const func = Function('"use strict"; return function() { ' + onloadCode + ' }');
+       func().call(element);
+       element.removeAttribute('onload');
+   });
+});`;
+
+module.exports = onloadScript

package/lib/script.js

@@ -0,0 +1,25 @@
+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/style.js

@@ -0,0 +1,20 @@
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "als-layout",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "main": "index.js",
   "scripts": {
     "test": "node --test --experimental-test-coverage",

package/readme.md

@@ -19,7 +19,14 @@ const Layout = require('als-layout')
 ```
 
 ## Change Log
-
+* V5.0.0
+  * constructor changed
+    * options object parameter instead separated parameters
+    * options.logger
+  * bugs fixed
+  * some refactoring
+  * minifiying error catching
+  * status and end methods added
 * V4.2.0
   * link method changed
     * `link(href, attributes = { rel: "stylesheet", type: "text/css" })`
@@ -66,11 +73,12 @@ const layout = new Layout()
    .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:{m:0, bgc:'whitesmoke'}}]) // adding as simple-css styles to existing/new style tag
    .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
+   .status(200)
+   .end(response);
 
 // Accessors for document parts
 layout.body // getter for body element (if not exists, created)
@@ -121,8 +129,13 @@ 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 layout = new Layout(raw, host, minified=false).lang('fr')
-console.log(layout.rawHtml) 
+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
@@ -145,6 +158,7 @@ console.log(homePage.rawHtml)
 ```
 
 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.
@@ -152,3 +166,100 @@ In this example:
 - 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.
+
+## 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`.
+
+### Methods
+
+#### `lang(lang: string): this`
+
+Sets the `lang` attribute on the `<html>` element.
+
+#### `onload(): this`
+
+Adds an `onload` script to the document. If called multiple times, the script is only added once.
+
+#### `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`
+
+Sets the HTTP status code for the response.
+
+#### `end(res: object): this`
+
+Sends the HTML response with the specified `statusCode` and sets `Content-Type` to `text/html`.

package/tests/constructor.test.js

@@ -22,7 +22,7 @@ describe('Layout Initialization', () => {
 
     it('should allow setting a custom host', () => {
         const customHost = 'http://localhost';
-        const layout = new Layout(undefined,customHost);
+        const layout = new Layout(undefined,{host:customHost});
         assert.strictEqual(layout.URL, customHost, `host is not set to ${customHost}`);
     });
 });

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,25 +0,0 @@
-## Change Log
-
-* V4.2.0
-  * link method changed
-    * `link(href, attributes = { rel: "stylesheet", type: "text/css" })`
-  * no version method
-    * no version parameter in image, link,script
-  * script
-    * script in footer added one after other in right order
-
-* V4.1.0
-  * Render removed
-
-* V4.0.0
-  * All code rebuilded and refactored
-  * No als-simple-css for style
-  * No charset method
-  * minifying for style and inner scripts
-  * updated render version
-  * render as element's method instead layout's method
-
-* V3.0.0
-  * render switched to als-render
-  * updated bug with meta tags after body
-

package/docs/1-basic-usage.md

@@ -1,47 +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:{m:0, bgc:'whitesmoke'}}]) // adding as simple-css styles to existing/new style tag
-   .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
-```
-
-### onload
-
-By adding onload attribute, you can run scripts for each element after dom content has loaded. 
-
-Example how it works:
-```js
-const layout = new Layout().viewport().title('On load').onload()
-layout.body.innerHTML = /*html*/`<div onload="this.innerHTML = 'new content'">original content</div>`
-```

package/docs/2-cloning.md

@@ -1,19 +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.
-

package/docs/3-advanced-usage.md

@@ -1,41 +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 layout = new Layout(raw, host, minified=false).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.