Dropout of the centralized web and into the p2p web! This is a webapp for using
dropout with Beaker Browser. It’s sort of like your own fully customizable and offline version of Instapaper. In addition to being a fully usable webapp, this might also be a nice peek into Choo architecture and Beaker’s web API.
First download and install Beaker Browser, then visit the Dat URL. Once there, click the Fork button in the lower right!
Dropout uses Beaker’s experimental web api to read and write to the Dat archive, which requires you to be connected through
dat:// and not
https://. If the web api is not available a message is displayed detailing the necessary steps to get going.
structure and functionality
scraping and saving
Sites deployed with Dat and viewable in Beaker are static, meaning they can not execute modules which utilize binaries. The readability module must be run on a server. To get around this limitation a request to an easily self-deployable microservice is made from within the webapp. Of course, this requires an internet connection, however the limitation would be present even if able to run strictly within the client as a request to the page being scraped must be made.
To run you very own instance, simply navigate to Glitch and click the Fork button. Glitch will generate a URL for you. Copy that and open
dropout.json in the root of your app. Paste it as the value of
microservice. That’s it!
You might be wondering, “If you can’t run server side code, how do you save data without using localstorage?” What’s awesome about Dat and Beaker is “Everything Is A File.” Beaker’s web api mirrors that of Node’s
fs module. Saving data is as simple as reading and writing folders and files.
design and functionality
The webapp is built with
choo, a super lightweight and understandable front-end framework. Open your site directory in terminal and run
npm install. The site’s source is contained in
src/, and can be hacked away however you’d like.
You can also adjust the design of the page content without being required to install and run any build process. Just edit
content.css and you’re golden!
With Beaker, it’s possible to see the source files of your Dropout library. It’s also possible to fork/clone your full site. These are great features, but sometimes it’s nice to keep things private. To do so, just add the
content directory to
Want to contribute? Please do! Alternatively, donations and funding are being accepted for dedicating time to design and development of features you’d like to see. Get in touch if you’re curious.
image assets do not load
Beaker requires all connections to be over https, preventing external assets such as images from being loaded over http. Of course this is desired functionality, and ultimately media assets (images, videos, audio) should be detected and scraped, too. This is a somewhat more extensive feature which will hopefully be added soon.
- General design
- Fallback to localstorage if the web api is not available
- Export from localstorage to JSON, drag into app
- Save static HTML in addition to JSON
- Scrape image assets (breaks with http)
- Search/filter page list
- Settings Panel (design customization)
- Separate the App from the User data (Fritter model)
- Mark as read when reaching bottom of page
- Keyboard shortcuts
- Swap out arrow icons for non sf-mono svgs
First release! Apart from making the damn thing there were these other items:
- Sticky navigation
- Deploy on server and add dat
- Show fork instead of add if not Dat Owner
- Cloning/Forking UI