This plugin is primarily designed for use with static site generators (SSG's) and pre-rendered pages. Because the plugin processes the resource files on each render() call, it's not very well suited for real-time rendering. This may be improved upon later, but it's currently not the main focus of this plugin.

How

Install Monta and the plugin into your project's dependencies

yarn add monta monta-plugin-resources

Use in your templates

<html>
  <head>
    <!-- Bundle files with static urls -->
    <link rel="stylesheet" href="${ get('stylesheet.css') | toUrl() }">
    
    <!-- Or inline them -->
    <style type="text/css">
      ${ get('stylesheet.css') | inline() }
    </style>
  </head>
  
  <body>
    <!-- Works for images too -->
    <img src="${ get('image.png') | toUrl() }">
    
    <!-- Most image types will automatically be inlined as base64 -->
    <img src="${ get('image.png') | inline() }">
  </body>
</html>

Syntax

<!-- Get a file -->
${ get('path/to/file.css') }

<!-- Save to a static file and return the URL -->
<link href="${ get('style.css') | toUrl() }">
<img src="${ get('image.jpg') | toUrl() }">

<!-- Return the file as a base64-encoded string -->
<style>${ get('style.css') | inline() }</style>
<img src="${ get('...') | inline() }">

<!-- Loop over multiple files --> 
${ get('*.css') | foreach(): }
  <link href="${ this | toUrl() ">
${ :end }

${ get('*.(png|jpg)') | foreach(): }
  <img src="${ this | toUrl() ">
${ :end }

<!-- Concatenate files -->
${ get('*.css') | concat('styles.css') | toUrl() }

<!-- Minify css or js files -->
${ get('stylesheet.css') | minify() | toUrl() }
${ get('script.js') | minify() | toUrl() }

Keywords

FAQs

What is monta-plugin-resources?

Is monta-plugin-resources popular?

Is monta-plugin-resources well maintained?

Package last updated on 09 Jul 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

monta-plugin-resources

Resources plugin for Monta

Plugin status: experimental

Why

How

Syntax

Keywords

Related posts

Malicious npm Package Targets Solana Developers and Hijacks Funds

Typosquatting Cryptographic Libraries: Malicious npm Packages Threaten Crypto Developers with Keylogging and Wallet Theft