A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/lasso-js/lasso-marko-taglib below:

lasso-js/lasso-marko-taglib: A taglib to use Marko with Lasso

Lasso.js Taglib for Marko

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:

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:

Example:

<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