nc-img :framed_picture:

A custom element for non-copyable HTML images.

nc-img = non-copyable + img :sparkles:

:scroll: About

Have you ever tried to create non-copyable images for your website? Or, at least, discourage users from copying your website's images?

If so, you've found the right package! :tada:

nc-img is a web component that wrapps your image in some custom HTML with some nasty CSS rules, so users can't right-click your image to copy it, or drag'em into their desktop.

If the users wants to copy your image, they'll have to sweat - sneaking into the browser console to inspect your markup, or to search within the transferred resources.

This web component also prevents the Pinterest extension on Chrome and Firefox from saving your photos - the user can still search them by selecting the screen area. To prevent Pinterest plugin in your pages, you can use this metatag as well:

<meta name="pinterest" content="nopin" />

:gem: Stack

This project is built with Stencil, a toolchain for building web components and design systems using the Web Components API. The actual project was created using the component starter, offered by stencil-cli.

Stencil play as a compiler for the web components; and those components uses Angular under the hood - we can also create them in a functional style too. Stencil offers a great tooling, and the components were generated using stencil generate helper.

The styles are component-scoped, and the stylesheets are written in plain CSS.

As the package manager, it uses npm; prettier, husky and lint-staged are used to ensure code's patterns.

The project also uses semantic-release with commitizen to ensure a correct package versioning.

For testing, it uses jest with Stencil's abstractions.

:closed_book: How to use

You can use this package with unpkg CDN, putting the script tag into your .html file:

<script type="module" src="https://unpkg.com/nc-img/dist/nc-img/nc-img.esm.js"></script>
<script nomodule src="https://unpkg.com/nc-img/dist/nc-img/nc-img.js"></script>

So, you can use the following markup wherever you need a non-copyable image:

<!-- default state, with full size (width/height) -->
<nc-img src="<img_source>" alt="<img_alt>" />

<!--
  if your images will have explicit size (width/height)
  through CSS rules, you must use the `has-size="true"` attribute
  so the web component knows what to do to not distort your image
 -->
<nc-img src="<img_source>" alt="<img_alt>" has-size="true" />

It can be used with plain HTML and/or with any JS framework/lib you're using right now :confetti_ball:

:computer: Developing

This project uses Stencil. If you're not familiar with it, take a look on their docs before starting.

:school_satchel: Requirements

In order to have the correct development experience, you need to install the following:

• node.js (version 12 or above)
• npm (npm is shipped with node; if you don't have it, try the link above)

:microscope: Writing code

After setting up your local environment and forking the repo, use the following commands to start developing:

# install dependencies
npm install

# start development server at localhost:3333
npm start

# run the test suite
npm run test

# create a local build
npm run build

# commit changes using git-cz + commitizen
npm run commit

I'm using npm as the package manager, but you can also use yarn as well; no problem :tada:

If you're not familiar with semantic versioning or conventional commits, you should read their docs before starting.

If you have any doubt, take a look at the contributing guide!

:rocket: Build and release

This project is release on npm with the help of semantic-release and GitHub Actions; commitizen acts as a linter for commits, and semantic-release uses the signature the commits' signature to create new releases following the semver convention.

Every merged PR (pull request) into master branch will start the release workflow; if everything works fine, a new version will be automatically released within seconds.

The master branch is blocked. When working on this project create new, dedicated branches to your changes and always merge it into master.

:closed_lock_with_key: License

Licensed under the MIT.