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

cccards

v1.2.0

Published

Generates *Cards Against Humanity* style playing cards. Adjustable DPI and renders with Chrome allowing SVG and custom layout rendering.

Downloads

36

Readme

cccards

Generates Cards Against Humanity style playing cards. Adjustable DPI and renders with Chrome allowing SVG and custom layout rendering.

Examples

Card back Black card Black card with pick and draw White card with description White card with pre description White card svg name

Features

  • Card data is inserted directly into rendered HTML, so anything that can be rendered in Chrome can be rendered on the card.
  • Automatically generates pick/draw marks based on number of substitutions on card.
  • Adjustable DPI for PNG output. Can also output HTML.
  • Reads card data in JSON and XLSX formats.

Installing

Requires NodeJS 10+

npm install cccards

Usage

Just generate cards with default settings

cccards cards.json output/

Generate 900DPI cards from xlsx

cccards --dpi 900 --title 'DevOps Against Humanity' cards.xlsx output/

Generate HTML only

cccards --no-png --html cards.json output/

Help

cccards --help

Fonts

CAH is rendered using Helvetica Neue, which is a commercial font that cannot be distributed by this project. Cards should also render fine with other sans-serif fonts, but if you want to have authentic looking cards, you will need to obtain Helvetica Neue and have it accessible to Chrome.

If you want to know what font is being picked for rendering, you can output html, open it in Chrome, and check in the debug tools which font is being used.

Card Data

Blanks

In the name field of the card data, a _ character will be interpreted as a blank line. By default, it will occupy an entire line of the card, along with any text immediately proceeding or following the _.

This should suffice for most basic formatting. If you want to pull in text seperated by a space, the easiest way is to use a non-breaking whitespace character (anything pulled into the blank line won't have line breaks anyway). Ex: Foo _. will render similar to Foo _______. on its own line.

See the 'Given, when, then' card in cards.json for an example.

Manual blanks

Instead of using _, you can simply write the generated HTML yourself:

<div class="underline"><span class="underline">&nbsp;</span></div>

Anything in the div will be on its own line, and anything in the span will be underlined. Make sure at least one &nbsp; is in the underline span or it won't render an underline at all.

You should also remember to manually specify picks and draws as the autogenerated indicators generate based on _ chars.

See cards.json for an example.

Additionally, if you want to manually control the length of the underline, add manual to the span class and add the number of &nbsp; chars for the length desired.

Manual Pick & Draw

You may specify pick and draw counts in the xlsx/json card data, and it will use those instead of calculating based on _ char. Useful when manually specifying blanks or when no blanks are present (Make a Haiku style CAH cards).

Examples

cards.json

cards.xlsx

Licensing

Code is MIT License

Generated cards are Creative Commons BY-NC-SA 2.0 according to CAH:

"Cards Against Humanity is available under a Creative Commons BY-NC-SA 2.0 license. That means you can use and remix the game for free, but you can’t sell it. Please do not steal our name or we will smash you."