{"id":14990475,"url":"https://github.com/tkngaejcpi/peeker","last_synced_at":"2026-02-17T21:02:37.320Z","repository":{"id":205436357,"uuid":"714231393","full_name":"tkngaejcpi/peeker","owner":"tkngaejcpi","description":"a web component that provides a preview window of your content, without complex config","archived":false,"fork":false,"pushed_at":"2023-11-08T14:51:24.000Z","size":252,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-30T18:28:44.304Z","etag":null,"topics":["lit-element","typescript","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tkngaejcpi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-04T09:53:40.000Z","updated_at":"2023-11-05T07:18:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"23764b0b-84e1-4d90-a3fb-1874170ecc68","html_url":"https://github.com/tkngaejcpi/peeker","commit_stats":{"total_commits":36,"total_committers":1,"mean_commits":36.0,"dds":0.0,"last_synced_commit":"f9075d264633fbd3d05d9caae58db86722468bec"},"previous_names":["tkngaejcpi/peeker"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/tkngaejcpi/peeker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkngaejcpi%2Fpeeker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkngaejcpi%2Fpeeker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkngaejcpi%2Fpeeker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkngaejcpi%2Fpeeker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tkngaejcpi","download_url":"https://codeload.github.com/tkngaejcpi/peeker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkngaejcpi%2Fpeeker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29558100,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T20:52:40.164Z","status":"ssl_error","status_checked_at":"2026-02-17T20:48:10.325Z","response_time":100,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lit-element","typescript","web-components"],"created_at":"2024-09-24T14:20:11.899Z","updated_at":"2026-02-17T21:02:37.280Z","avatar_url":"https://github.com/tkngaejcpi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## TOC\n\n- [What is Peeker?](#what-is-peeker)\n- [Quick Start](#quick-start)\n- [Custom Theme](#custom-theme)\n- [Screenshots](#screenshots)\n- [TODO](#todo)\n\n## What is Peeker?\n\n**Peeker** is a **web component** that provides a preview window of your content.\n\n**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.\n\nUsing **Peeker** as a web component, you:\n\n- can add a previewer to your site out of the box\n\n- don't pollute the thing not related to preview\n\n- don't have to think about the framework stuff\n\nAll you have to do is:\n\n1. prepare previewing data\n\n2. import this script, and add the web component in your site\n\n## Quick Start\n\nFirst, add this importing code to the head section of html:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import {\n    defineAllComponents,\n    useDefaultTheme,\n  } from 'https://cdn.jsdelivr.net/npm/@rileycki3333/peeker@1.2.1/dist/index.min.js';\n\n  defineAllComponents();\n  useDefaultTheme(); // remove this when you want to use a custom theme\n\u003c/script\u003e\n```\n\nThen, prepare a preview data json, with the schema:\n\n\u003e **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._\n\n```json\n{\n  \"title\": \"a test\",\n  \"linkTo\": \"/test.json\",\n  \"rawData\": \"\u003carticle\u003e\u003cp\u003ethis is just a test\u003c/p\u003e\u003c/article\u003e\"\n}\n```\n\nFinally, add\n\n```html\n\u003cvvv-peeker\u003e\u003c/vvv-peeker\u003e\n```\n\nto the body of html, and put\n\n```html\n\u003cvvv-peekable data-url=\"$$PATH_OF_THE_JSON$$\"\u003eClick me\u003c/vvv-peekable\u003e\n```\n\nto the anywhere you want in the body, it will be rendered to `\u003ca\u003e` tag.\n\n## Custom Theme\n\n\u003e If you want to use a custom theme, please don't call the function `useDefaultTheme` in the export.\n\nJust add such a css snippet to body within a `\u003cstyle\u003e`:\n\n```css\nvvv-peeker {\n  --peeker-background-color: #f6fbff;\n  --peeker-border-color: #dcebf7;\n  --peeker-close-button-background-color: #ddefff;\n  --peeker-close-button-border-color: #dcebf7;\n  --peeker-text-color: #2f2f2f;\n}\n```\n\n## Screenshots\n\nBefore click the link:\n\n![](./screenshots/0.png)\n\nAfter click the link, the preview window pop up:\n\n![](./screenshots/1.png)\n\n## TODO\n\n- ~~make the preview window next to the link~~\n\n- ~~add animation~~\n\n- ~~improve looking~~\n\n- ~~add cache (by HTTP cache)~~\n\n- ~~support external styling (theme?)~~\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkngaejcpi%2Fpeeker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftkngaejcpi%2Fpeeker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkngaejcpi%2Fpeeker/lists"}