https://github.com/Cherry/placeholders.dev
Generate custom placeholder images, powered by Cloudflare Workers in 300+ edge locations
https://github.com/Cherry/placeholders.dev
cloudflare-workers placeholders
Last synced: 6 months ago
JSON representation
Generate custom placeholder images, powered by Cloudflare Workers in 300+ edge locations
- Host: GitHub
- URL: https://github.com/Cherry/placeholders.dev
- Owner: Cherry
- Created: 2020-02-19T16:11:43.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-07-07T16:19:44.000Z (11 months ago)
- Last Synced: 2024-07-07T17:42:19.711Z (11 months ago)
- Topics: cloudflare-workers, placeholders
- Language: TypeScript
- Homepage: https://placeholders.dev/
- Size: 707 KB
- Stars: 123
- Watchers: 3
- Forks: 88
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [placeholders.dev](https://placeholders.dev)
Generate super-fast placeholder images in 330+ edge locations, powered by Cloudflare Workers
)
[](https://deploy.workers.cloudflare.com/?url=https://github.com/Cherry/placeholders.dev)
## Info
placeholders.dev generates custom placeholder images on the fly, such as the examples above. All of these images are generated on Cloudflare's Edge, at 330+ locations, ensuring the best possible performance for all of your users. All images are cached for lengthy periods of time.
## Technology
This project makes use of Cloudflare Workers, and Cloudflare Workers Sites via Workers KV. It also implements a HTMLRewriter to update the total Cloudflare PoPs in multiple locations.
### Available API Options
- `width`
- Width of generated image. Defaults to `300`.
- `height`
- Height of generated image. Defaults to 150.
- `text`
- Text to display on generated image. Defaults to the image dimensions.
- `fontFamily`
- Font to use for the text. Defaults to `sans-serif`.
- `fontWeight`
- Font weight to use for the text. Defaults to `bold`.
- `fontSize`
- Font size to use for the text. Defaults to 20% of the shortest image dimension, rounded down.
- `dy`
- Adjustment applied to the dy attribute of the text element to appear vertically centered. Defaults to 35% of the font size.
- `bgColor`
- Background color of the image. Defaults to `#ddd`
- `textColor`
- Color of the text. For transparency, use an rgba or hsla value. Defaults to `rgba(0,0,0,0.5)`
- `textWrap`
- Wrap text to fit within the image (to best ability). Will not alter font size, so especially long strings may still appear outside of the image. Defaults to `false`.
Example URL: `https://images.placeholders.dev/?width=1055&height=100&text=Made%20with%20placeholders.dev&bgColor=%23f7f6f6&textColor=%236d6e71`
## Dev
### Prerequisites
#### Wrangler
`wrangler` is a CLI tool from Cloudflare, designed to push projects to Cloudflare Workers. See [Cloudflare's documentation](https://developers.cloudflare.com/workers/wrangler/install-and-update/) for more information.
### Run
- `npm run start:dev` (this will use `wrangler dev` to locally start the Cloudflare Worker for testing)
or
- `npm run publish` (push to `placeholders-dev` workers.dev)
or
- `npm run publish:staging` (push to `placeholders-staging` workers.dev)
## Production
- `npm run publish:prod` (publishes to placeholders.dev via Workers)