Covers by ReadShape

Summary

What is this?

So. Books have covers, right? Well, yes, but actually no.

Books are tricky business. If the book is self published then it might not have a cover or an ISBN. Other times a book might be incredibly old and never really had a cover to begin with.

How this helps with it?

No one is going to make covers for these books, but that doesn't mean we can just leave them naked & coverless. We want to create a beautiful UI so we have to show something.

So that is what we do. We will, given the same input arguments, always create the same cover on the fly. It will obviously not be a "real" cover, but it's better than nothing or just a gray cover.

Examples

What variance is there?

The covers have some variation. Each cover can be broken down into multiple pieces.

Cover color

A cover (might) have a unique color. It can be the following.

Gradient based on input hash
Static predefined color

Detail placement (title & author)

Details have predefined placement, but it still has the following variance.

Top (left, center, or right)
Bottom (left, center, or right)

Flow field

We generate a flow field based on the input hash. This affects the pattern.

Pattern

There are the following patterns we can draw.

Circle
Waves

Outcomes

Hello, i've made a fork of your incredible project and added some features which i think would be useful for some users.

Would you be interested in merging? My fork tree is really barebones, i've removed most of the dev dependencies, but i can just add them back.

If you have any feedback or criticism, please say so, i'm new to this haha.

Changes in my fork:

Your code is now wrapped in a useEffect().
I noticed that when using it directly, there's a small period where nothing is rendered, since the component is making it's calculations.
So i've gone ahead and introduced a fallbackComponent prop which may be used to render, say, a spinner while the cover loads.

It's now possible to add both className and style attributes to the resulting <img />.

There's also cache options, a cover is saved on IndexedDB, localStorage or sessionStorage and can be retrieved next time the users uses the same identifier (or the same title + authors array).

I hope that some of these changes may be useful to you, and thanks for your hard work.

Awesome Books project : An online Book Library. Storing book information using local storage and displaying it as a list on HTML page

This is project is my based on building an online Book Library. Storing book information using local storage and displaying it as a list on html page

Nov 11, 2022

LiveTabs is a Javascript library that allows you to create and manage tabs on the fly. This library gives the ability to your application to act like browser tabs, making dynamic tabs.

LiveTabs Table of content Description Goals Technologies Setup Description LiveTabs is a Javascript library that allows you to create and manage tabs

May 3, 2022

:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 🌹

TypeScript Deep Dive I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack

Jan 4, 2023

The Bookstore is a website that allows the user to :display a list of books , Add a book and remove a selected book.

Book Store The Bookstore is a website that allows the user to : -Display a list of books. -Add a book. -Remove a selected book. Built With 🔨 Basic CS

Sep 6, 2022

BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book.

Project Name : BookStore CMS BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book. In or

Aug 22, 2022

This is an app that displays a list of books, allow users add a book and remove a selected book.

BookStore This is an app that displays a list of books, allow users add a book and remove a selected book. Built With HTML CSS -React -Redux -JavaScri

Jul 22, 2022

The Bookstore is a website where the user can display a list of books, add a book by providing a title, an author, and selecting from the categories, and remove a selected book.

Bookstore The Book Store is a website where the user can display a list of books, add a book and remove a selected book. Microverse's Bookstore API wa

Jan 1, 2023

A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

Project Name Awesome book with ES6 Description the project. This is a single page application that allows users to keep track of their books. Users ca

Oct 13, 2022

A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Prisma ORM. Deploys to Fly.io

Live Demo · Twitter A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Pris

Oct 31, 2022

Possible merging of some features

Hello, i've made a fork of your incredible project and added some features which i think would be useful for some users.

Would you be interested in merging? My fork tree is really barebones, i've removed most of the dev dependencies, but i can just add them back.

If you have any feedback or criticism, please say so, i'm new to this haha.

Changes in my fork:

Your code is now wrapped in a useEffect().
I noticed that when using it directly, there's a small period where nothing is rendered, since the component is making it's calculations.
So i've gone ahead and introduced a fallbackComponent prop which may be used to render, say, a spinner while the cover loads.

It's now possible to add both className and style attributes to the resulting <img />.

There's also cache options, a cover is saved on IndexedDB, localStorage or sessionStorage and can be retrieved next time the users uses the same identifier (or the same title + authors array).

I hope that some of these changes may be useful to you, and thanks for your hard work.

opened by Lamarcke 0

Library for generating unique, repeatable book covers on the fly 📚

Related tags

Overview

Covers by ReadShape

Summary

What is this?

How this helps with it?

Examples

What variance is there?

Cover color

Detail placement (title & author)

Flow field

Pattern

Outcomes

You might also like...

Awesome Books project : An online Book Library. Storing book information using local storage and displaying it as a list on HTML page

LiveTabs is a Javascript library that allows you to create and manage tabs on the fly. This library gives the ability to your application to act like browser tabs, making dynamic tabs.

:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 🌹

The Bookstore is a website that allows the user to :display a list of books , Add a book and remove a selected book.

BookStore is a website that allows a given user to view a list of books, to add a new book and remove a given book.

This is an app that displays a list of books, allow users add a book and remove a selected book.

The Bookstore is a website where the user can display a list of books, add a book by providing a title, an author, and selecting from the categories, and remove a selected book.

A single-page application that allows users to keep track of their books. Users can add the book details (book title and author) and also, and the books can also be removed. Built with JavaScript, HTML, and CSS

A testing focused Remix Stack, that integrates E2E & Unit testing with Playwright, Vitest, MSW and Testing Library. Driven by Prisma ORM. Deploys to Fly.io

Comments

Possible merging of some features

Owner

Plover - Create awesome playlist covers

Password Generator - A fast, simple and powerful open-source utility tool for generating strong, unique and random passwords

Generate Password is a generating random and unique passwords.

Piccloud is a full-stack (Angular & Spring Boot) online image clipboard that lets you share images over the internet by generating a unique URL. Others can access the image via this URL.

This is a single page web application that keeps tracks of books. Book details captured are the book title, author and ISBN. User can add a book, view a list of books and also remove any un wanted books.

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Kurs-repo för kursen Webbserver och Databaser

The vision is for NFTs as unique pages of a PICTURE~BOOK

Awesome-book is an online library website where a user can store a collection of books. Different book can be added and removed. Built with JavaScript using Dom