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

tumblr-theme-parser

v1.0.0

Published

parse and compile tumblr themes

Downloads

4

Readme

Tumblr Theme Parser

Build Status NPM version NPM license dependencies

This tool allows custom Tumblr themes to be parsed / rendered locally, so they can be used outside of Tumblr.

It should be noted that this parser is slightly more strict than the one Tumblr uses. For example, each block tag must be matched with a closing block tag (omitting it will cause the parser to fail), and tags must open and close in the correct order ({block:a}{block:b}{/block:b}{/block:a} is correct, but {block:a}{block:b}{/block:a}{/block:b} will fail).

This parser allows case insensitivity in tag and variable names (because we want to match the Tumblr compiler as closely as possible). However, you should still use PascalCase for all of your identifiers, because this is the convention in Tumblr themes.

Usage

CLI

The Markup of the theme is passed in via STDIN, and the compiled theme is sent to STDOUT. Data for the theme is passed in the form of a file path. Warnings (like undefined variables or other non-fatal issues) are sent to STDERR. A typical command might look like this:

$ tumblr-theme-parser -d data.json < theme.html > compiled-theme.html

For example, with a Tumblr theme like this (saved as theme.html):

<html>
  <head>
    <title>{Title}</title>
  </head>
  <body>
    {block:Posts}
    <article class="{PostType}">
      {block:Text}
      {block:Title}
      <a href="{Permalink}">
        <h2>{Title}</h2>
      </a>
      {/block:Title}
      {Body}
      {/block:Text}
    </article>
    {/block:Posts}
  </body>
</html>

And this data from Tumblr (saved as data.json):

{
  "Title": "My Title",
  "block:Posts": [
    {
      "block:Body": true,
      "block:Title": true,
      "Body": "<p>test<br></p>",
      "Permalink": "http:/test.tumblr.com/post/118449891560/test",
      "PostType": "text",
      "Title": "My first post"
    }, {
      "block:Body": true,
      "block:Title": true,
      "Body": "<p>test<br></p>",
      "Permalink": "http:/test.tumblr.com/post/891560118449/test",
      "PostType": "text",
      "Title": "My second post"
    }
  ]
}

The rendered HTML looks like this:

<html>
  <head>
    <title>My Title</title>
  </head>
  <body>

    <article class="text">

      <a href="http:/test.tumblr.com/post/118449891560/test">
        <h2>My first post</h2>
      </a>

      <p>test<br></p>

    </article>

    <article class="text">

      <a href="http:/test.tumblr.com/post/891560118449/test">
        <h2>My second post</h2>
      </a>

      <p>test<br></p>

    </article>

  </body>
</html>

JavaScript

Usage in JavaScript is very simple. The module exports an object containing 2 functions: compile and parse. The compile function takes the input HTML & optional associated data, and returns the compiled HTML.

compile = require('tumblr-theme-parser').compile
compiledHtml = compile(themeHtml, data)