# using jawnpaper without npm

Three ways to load jawnpaper: jsDelivr (zero install), npm, or self-hosted.

## quickstart (jsDelivr)

Two lines in `<head>`, one class on `<body>`:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jamditis/stash/docs/jawnpaper/jawnpaper.css">
<script src="https://cdn.jsdelivr.net/gh/jamditis/stash/docs/jawnpaper/jawnpaper.js" defer></script>
<body class="notebook">
```

That's it — your page is now wobbly cream paper.

## pinning to a commit (recommended for production)

The URLs above always serve the latest `main`, which means a future change could break your site. Pin to a specific commit by inserting `@<sha>` after the repo:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jamditis/stash@abc1234/docs/jawnpaper/jawnpaper.css">
<script src="https://cdn.jsdelivr.net/gh/jamditis/stash@abc1234/docs/jawnpaper/jawnpaper.js" defer></script>
```

Replace `abc1234` with the full or short commit SHA. You can also pin to a tag (`@v0.1.0`) once releases exist.

## subresource integrity (SRI)

For hash-locked loads, append `?meta` to a jsDelivr URL to fetch the SHA hashes, then add `integrity="sha384-..."` and `crossorigin="anonymous"` to your `<link>` and `<script>` tags. Details: https://www.jsdelivr.com/using-sri-with-dynamic-files

## npm

```
npm install jawnpaper
```

Then import the CSS in your bundler entry (works in Vite, webpack, Parcel, Rollup, esbuild):

```js
import 'jawnpaper/jawnpaper.css';
import 'jawnpaper/jawnpaper.js';
```

Add `class="notebook"` to your `<body>` and you're done.

## self-host

Copy `jawnpaper.css`, `jawnpaper.js`, and (optionally) `jawnpaper.svg` into your project's static folder, then reference them with relative paths. See the main README for the file roles.

## a note on Google Fonts

`jawnpaper.css` `@import`s Caveat, Patrick Hand, and Patrick Hand SC from Google Fonts. That's a third-party network request — relevant for privacy, CSP headers, and offline use. The README has three swap-out options (preconnect, self-host, or system fonts): see the "fonts" section of [README.md](./README.md#fonts).
