PEE-DEE-EFF

just a lil' pdf -> webp converter & carousel web-component for viewing!

quickstart

open index.html in your browser! get a handle on the different view options by fiddle'n with the controlz.

gen your own

./pdf2webp.sh path/to/some.pdf

now there should be .webp files in gen/ (one for each page of yr pdf).

edit really-simple.html and change the base-path="gen/whatever-folder-of-webp-images"

note: .webp images need to follow format page-000.web (where 000 is the page number).

if u wanna use this, copy pee-dee-eff.js to where ever you host yr other stuff. then on whatever page include the web-component tag and a <script /> (u could just copy/paste pee-dee-eff.js and inline it in a <script> on yr page) like:

<pee-dee-eff
    base-path="example/undoinganddoing"
    pages-per-view="4"
    direction="horizontal"
    loop="true"
    first-last-single="false"
    background="black"
>
</pee-dee-eff>

<script src="pee-dee-eff.js"></script>

web component props

| attribute | type | options / example values | default | required | description | | -------------------- | --------- | --------------------------------- | -------------- | -------- | ---------------------------------------------------------------------------------------- | | base-path | string | "./examples/undoinganddoing" | "." | yes | directory where image files like page-000.webp, page-001.webp, etc. are loaded from. | | pages-per-view | number | 1, 2, 4, 6, etc. | 2 | no | number of images shown per slide. determines the grid layout automatically. | | direction | string | "horizontal", "vertical" | "horizontal" | no | chooses between swipe-to-slide and scroll-down-to-browse modes. | | loop | boolean | "true" | false | no | whether to loop back to the first slide after the last one, and vice versa. | | first-last-single | boolean | "true" | false | no | shows first and last pages on a single slide (only with pages-per-view=2). | | wheel-navigation | boolean | "true", "false" | "true" | no | enables mouse wheel and trackpad scrolling for page navigation. | | background | string | "white", "#eeddee", "black" | "white" | no | background color of each image cell in the grid. |

web component slot for pagination

want to show current and (or) total pages? add a slot as children and apply styles as you wish.

<pee-dee-eff
    base-path="example/test-even"
    pages-per-view="2"
    first-last-single="true"
>
  <div class="pagination" slot="pagination">
    <span id="currentPages">?</span> /
    <span id="totalPages">?</span>
  </div>
</pee-dee-eff>

see also: test-pagination.html

pwa && cache

• web app Mmanifest for "Add to Home Screen" support
• offline-first image loading with network fallback
• background caching of images as they load

generating icons & favicon

a lil' icon generator:

1. open generate-icons.html
2. open generate-favicon.html
3. download png and favicon! 🥹

made with 💖 in nyc