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

kcv-theme-mocha-responsive

v1.0.3

Published

Custom dark theme for JSON Resume based on Caffeine theme by Kelvin Nguyen (https://github.com/kelyvin)

Downloads

4

Readme

Theme mocha responsive

Dark, stylish theme strongly based on the jsonresume-theme-caffeine done by Kelvin Nguyen. It's a theme for the JSON Resume project and can by used with the HackMyResume to generate nice resumes in many supported formats.

Screenshot

The theme uses handlebars templating engine for rendering and utilizes Font Awesome. The generated HTML should have very good browser support by explicitly relying on older styling techniques. Although the theme is dark, there is separate tweaked styling for printing, with dark fonts on white background.

Print-preview

The theme can be used with tools supporting asynchronous theme rendering. It converts local or remote profile images to Base64 format, including them directly in the markup, so the generated HTML file can be used standalone. For certain sections (summary, work, education, volunteer ...) Markdown markup is supported. By default, the image processing and Markdown support are disabled and can be enabled by setting RENDER_MARKDOWN or PROCESS_IMAGE environment variables to true.

For usage and issues associated with HackMyResume see the next section.

Using the theme

The theme supports the HackMyResume tool and shall be fully compatible with resume-cli. The theme was specifically developed for my own toolkit KissMyResume which can utilize the async rendering and markdown support.

Install the theme from npm

npm install jsonresume-theme-mocha-responsive

Using with KissMyResume

The KissMyResume tool will automatically utilize async theme rendering and has support for Markdown markup and conversion of local and remote images to Base64. Set RENDER_MARKDOWN or PROCESS_IMAGE environment variables to true to enable those features.

RENDER_MARKDOWN=true PROCESS_IMAGE=true kissmyresume build path-to-resume.json --theme jsonresume-theme-mocha-responsive/

Yuou can use the serve command for live in-Browser preview with hot-reloading on resume changes.

RENDER_MARKDOWN=true PROCESS_IMAGE=true kissmyresume serve path-to-resume.json --theme jsonresume-theme-mocha-responsive/

Using with HackMyresume

The HackMyResume tool does not support async theme rendering, nor supports it helper transforming images to Base64 or converting markdown to HTML. Those helpers are disabled by default and yo should not use them with HackMyResume.

Due to the current bug in the HackMyResume remote profile pictures are not supported. See proposed workaround in the comments.

hackmyresume build path-to-resume.json --theme node_modules/jsonresume-theme-mocha-responsive/

Using with resume-html

You can render your resume in HTML (and print it to PDF) with the resume-html tool.

Set RENDER_MARKDOWN or PROCESS_IMAGE environment variables to true to enable Markdown support and conversion of local and remote images to Base64.

RENDER_MARKDOWN=true PROCESS_IMAGE=true path/to/resume-html/index.js outputFileName.html --resume path/to/resume.json --theme path/to/jsonresume-theme-mocha-responsive/

License

Available under the MIT license.