npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

html-ng-temp

v0.1.0

Published

Parses HTML for email like if is Angular templates, and apply CSS as inline styles in it.

Downloads

2

Readme

html-ng-temp

Parses HTML for email like if is Angular templates, and apply CSS as inline styles in it.

Installation

Add this package as local dependency:

npm i --save html-ng-temp

How to use

1. Make the template

First make a file with the html (and optionally your *.css) do you want to send by email, for example:

./template-01.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Package Shipped</title>
        <link rel="stylesheet" href="./template-01.css">
    </head>
    <body>
        <h3>Hi John Titor:</h3>

        <p>
            Your package 6573765853 has been shipped to your destination address. click <a href="https://test.com/package/6573765853">here</a> for tracking.
        </p>

        <p>
            Regards....
        </p>
    </body>
</html>

./template-01.css:

h3 {
    color: #fff;
    background: #ff7f35;
}

p {
    color: #202020;
}

2. Identify the dynamic data

For this case, that HTML will be sended to a lot of people, so the name and the package number will be change for every distinct person and package. For that case, our dynamic data is:

export interface TemplateData {
    // The name of the client.
    name: string;
    
    // The number of the package.
    package: number;
}

3. Add the wildcards

Replace the dynamic data with wildcards using this format: {{ variableName }}, as variableName is the key of the interface above. For example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Package Shipped</title>
        <link rel="stylesheet" href="./template-01.css">
    </head>
    <body>
        <h3>Hi {{ name }}:</h3>

        <p>
            Your package {{ package }} has been shipped to your destination address. click <a href="https://test.com/package/{{ package }}">here</a> for tracking.
        </p>

        <p>
            Regards....
        </p>
    </body>
</html>

4. Parse the template

Now in your progran you only need to load the html file, and give the dynamic data to the parse method:

import { HtmlTemplate } from 'html-ng-temp';
import { TemplateData } from './template-data';

export async function sendEmail(): Promise<void> {
    // Read the HTML template
    const temp = await HtmlTemplate.load<TemplateData>('./template-01.html');

    // Parse the data
    const html = temp.parse({
        name: 'Buckethead',
        package: 999999999
    });

    // Now you can make anything with the parsed html
    console.log(html);
}

The result is below these lines, look how the CSS has been attached to its respective elements, ready to be sent as email:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Package Shipped</title>

    </head>
    <body>
        <h3 style="color: #fff; background: #ff7f35;">Hi Buckethead:</h3>

        <p style="color: #202020;">
            Your package 999999999 has been shipped to your destination address. click <a href="https://test.com/package/999999999">here</a> for tracking.
        </p>

        <p style="color: #202020;">
            Regards....
        </p>
    </body>
</html>

Notes

1. Complex data

You can parse documents with a more complex structure, for example:

export interface TemplateData {
    user: {
        name: string;
        dni: string;
    };
    package: {
        trackN: number;
        dateOut: string;
    }
}

To use that structure in the html:

<!DOCTYPE html>
<html>
    <body>
        <h3>Hi {{ user.name }}</h3>

        <ul>
            <li>DNI: {{ user.dni }}</li>
            <li>Tracking Number: {{ package.trackN }}</li>
            <li>Date Shipped: {{ package.dateOut }}</li>
        </ul>
    </body>
</html>

2. Multiple CSS files

You can use n CSS files as you needs, for example:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./template-1.css">
        <link rel="stylesheet" href="./template-2.css">
        <!-- ... --->
        <link rel="stylesheet" href="./template-n.css">
    </head>
    <body>
        <!-- bla bla bla --->
        <!-- bla bla bla --->
        <!-- bla bla bla --->
    </body>
</html>