Gathering detailed insights and metrics for disco-party
Gathering detailed insights and metrics for disco-party
Installations
npm install disco-partyReleases
Unable to fetch releases
Developer
partykit
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
Yes
Node Version
18.17.0
NPM Version
9.6.7
Statistics
14 Stars
48 Commits
2 Watching
1 Branches
1 Contributors
Updated on 22 Oct 2024
Languages
TypeScript (90.42%)
HTML (7.67%)
CSS (1.66%)
JavaScript (0.25%)
Total Downloads
Cumulative downloads
Total Downloads
66,447
Last day
-1.3%
75
Compared to previous day
Last week
15.4%
577
Compared to previous week
Last month
-23.8%
2,779
Compared to previous month
Last year
191.8%
49,486
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
[WIP] sketch-disco
WORK IN PROGRESS -- Not yet ready for sharing!
Implements web components under the 'disco-party' project name.
These components are intended to add a sense of translucency and presence to static webpages.
Right now there is:
- disco-room -- links internal to the site are badged with how many people are connected at the other end, and when another user follows a hypoerlink then it bounces for everyone else.
- disco-cursors -- shows other people's cursors on the page, as if behind frosted glass.
Experimental!
This component was created during Matt's summer 2023 residency. The purpose is to experiment with multiplayer interactions, and simultaneously see what PartyKit can do. It's called a sketch because it's lightweight and quick, and because we learn something in making it.
Usage
EITHER: (1A) Self-hosting
Build the components with npm run build and then copy the dist directory to your webroot.
Then, in the <head> of every page you want to use the components, add:
1<script 2 type="module" 3 src="/path-to-your-disco-party-dist/disco-party.esm.js" 4></script>
OR: (1B) CDN
Add the following to the <head> of every page you want to use the components:
1<script type="module" src="https://unpkg.com/disco-party@0.1.0"></script>
(3) Start the server
The PartyKit server is your backend.
In the root of this repo, run:
1npx partykit dev
That will give you a host of 127.0.0.1:1999 (you'll need this later).
Or you can deploy the server publicly. Run:
1npx partykit deploy
And your host will be something like disco-party.USERNAME.partykit.dev.
(4) Add the disco-room component to your pages
In your site template, wrap the content that you want to be part of the disco-room in a <disco-room> tag.
1<disco-cursors host="127.0.0.1:1999"></disco-cursors> 2<disco-room host="127.0.0.1:1999"> 3 <h1>My disco room</h1> 4 <p>Some content</p> 5 <a href="/some-link">A link</a> 6</disco-room>
(You may need to put in empty tags to stop pre-processors collapsing them.)
Optionally: to include only some of the content inside the disco-room, wrap sections in <disco-include> tags. If you don't do this, then the entire disco-room will be included.
To do
- Add documentation
- Add disco-presence to show how many people are on the page (this is hardcoded at the moment)
- Fix logic of where cursors appear given page scroll (given responsiveness they will never match up exactly)
- Add real-time shared text selection
- In page.tsx, debounce connection change updates (these can change frequently and shouldn't be sent more than once every 500ms, but must send eventually)
- In the partyserver, account for changes in a page's list of subscribed URLs (these can change up to daily)
- Add debug views to page and counter to validate data
No vulnerabilities found.
No security vulnerabilities found.