Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tkngaejcpi/peeker
a web component that provides a preview window of your content, without complex config
https://github.com/tkngaejcpi/peeker
lit-element typescript web-components
Last synced: 3 days ago
JSON representation
a web component that provides a preview window of your content, without complex config
- Host: GitHub
- URL: https://github.com/tkngaejcpi/peeker
- Owner: tkngaejcpi
- License: gpl-3.0
- Created: 2023-11-04T09:53:40.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2023-11-08T14:51:24.000Z (11 months ago)
- Last Synced: 2024-09-20T03:01:39.096Z (8 days ago)
- Topics: lit-element, typescript, web-components
- Language: TypeScript
- Homepage:
- Size: 246 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## TOC
- [What is Peeker?](#what-is-peeker)
- [Quick Start](#quick-start)
- [Custom Theme](#custom-theme)
- [Screenshots](#screenshots)
- [TODO](#todo)
## What is Peeker?
**Peeker** is a **web component** that provides a preview window of your content.
**Peeker** is very useful in some static content site, for example your blog, because it just makes the preview part instead of entire site dynamic (_web component is an "island" automatically_), which is good for SEO.
Using **Peeker** as a web component, you:
- can add a previewer to your site out of the box
- don't pollute the thing not related to preview
- don't have to think about the framework stuff
All you have to do is:
1. prepare previewing data
2. import this script, and add the web component in your site
## Quick Start
First, add this importing code to the head section of html:
```html
import {
defineAllComponents,
useDefaultTheme,
} from 'https://cdn.jsdelivr.net/npm/@rileycki3333/[email protected]/dist/index.min.js';
defineAllComponents();
useDefaultTheme(); // remove this when you want to use a custom theme
```
Then, prepare a preview data json, with the schema:
> **Caution**: "rawData" will be **unsafely** rendered to HTML, you should check them before using. _It is suggested to use a generator rather than writing the json file manually._
```json
{
"title": "a test",
"linkTo": "/test.json",
"rawData": "
this is just a test
"
}
```
Finally, add
```html
```
to the body of html, and put
```html
Click me
```
to the anywhere you want in the body, it will be rendered to `` tag.
## Custom Theme
> If you want to use a custom theme, please don't call the function `useDefaultTheme` in the export.
Just add such a css snippet to body within a ``:
```css
vvv-peeker {
--peeker-background-color: #f6fbff;
--peeker-border-color: #dcebf7;
--peeker-close-button-background-color: #ddefff;
--peeker-close-button-border-color: #dcebf7;
--peeker-text-color: #2f2f2f;
}
```
## Screenshots
Before click the link:
After click the link, the preview window pop up:
## TODO
- ~~make the preview window next to the link~~
- ~~add animation~~
- ~~improve looking~~
- ~~add cache (by HTTP cache)~~
- ~~support external styling (theme?)~~