The Lasso.js includes a taglib for Marko for easily injecting <script>
and <link>
tags into a page, as well as resource URLs for images and other types of front-end resources.
In order to automatically detect and compile required *.marko
templates we will need to install the lasso-marko plugin and lasso-marko-taglib taglib using the following commands:
npm install lasso-marko npm install @lasso/marko-taglib
<lasso-page name="my-page" package-path="./browser.json"/> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test Page</title> <lasso-head/> </head> <body> <h1>Test Page</h1> <lasso-body/> </body> </html>
Output HTML will be similar to the following:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test Page</title> <link rel="stylesheet" type="text/css" href="/static/my-page-85e3288e.css"> </head> <body> <h1>Test Page</h1> <script type="text/javascript" src="/static/bundle1-6df28666.js"></script> <script type="text/javascript" src="/static/bundle2-132d1091.js"></script> <script type="text/javascript" src="/static/my-page-1de22b65.js"></script> </body> </html>
Lassoes the page so that the resulting JavaScript and CSS resources can be injected into the output HTML. The <lasso-head>
and <lasso-body>
tags are used as insertion points. By default, all CSS <link>
tags will be added to the <lasso-head>
slot and all <script>
tags will be added to the <lasso-body>
slot.
Supported attributes:
package-paths
, but an Array of paths.Lasso
instance. Defaults to the default page lasso (i.e. require('lasso').getDefaultLasso()
)lassoContext.data
object.Examples:
With a path to an browser.json
file:
<lasso-page package-path="./browser.json"/>
With an explicit page name flags:
<lasso-page name="home" package-path="./browser.json"/>
With enabled flags:
<lasso-page package-path="./browser.json" flags="['foo', 'bar']"/>
With dependencies:
<lasso-page dependencies="['foo.js', 'bar.css']"/>
The head slot that is used as the marker for inserting CSS <link>
tags in the head section of the HTML page.
The body slot that is used as the marker for inserting JavaScript <script>
tags in the body section of the HTML page.
Lassoes an image resource and renders an <img>
tag with the src
attribute set to the resulting URL of the bundled image resource.
Supported attributes:
<img>
tagExample:
<lasso-img src="./foo.png" width="32" height="32" class="foo">
The output will be similar to the following:
<img src="/static/foo-1b4c0db.png" width="32" height="32" class="foo">
Lassoes an arbitrary resource and introduces a local variable that can be used to inject the resulting resource URL into the page.
Supported attributes:
Example:
<lasso-resource path="./favicon.ico" var="favicon"/> <link rel="shortcut icon" href=favicon.url>
The output will be similar to the following:
<link rel="shortcut icon" href="/static/favicon-c3deb101.ico">
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4