Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bacwyls/basket


https://github.com/bacwyls/basket

Last synced: about 2 months ago
JSON representation

Awesome Lists containing this project

README 

        
# basket



basket is a simple db of tagged images



the frontend displays the most recent image in the full window,

so it can be used to add some personal style to an urbit desktop environment.



in addition to being a personal db,

basket is an experimental app on top of the 'rooms' primitive in [Realm](https://twitter.com/HoliumCorp)



members of a room have temporary write-access to each others basket db.

the frontend makes it ergonomic and fun to share / collaboritively create this data.



in theory (at scale), this creates a kind of decentralized giphy.



the images you know about are the images your friends have shared with you.

it gamifies the creation of rich, human curated image metadata.

one obvious use case for this is keeping track of memes.



To export the full dataset you can GET `http://yoururbitship.com/~/scry/basket/images.json`

Then you might want to use a python script to actually download the images to local storage.



Eventually, it would be nice to have a simple way to export and share the dataset.



## Desk



to integrate with rooms, :basket uses a scry into the local `:rooms-v2` agent.

room-members relay their pokes through the room-creator, who broadcasts it to everyone.



theres a bunch of routing logic to make all of that work.

for the base-case of users who _arent_ in Realm and in a room:

we just pretend the user is an a room by himself, and that he is the creator.



this seemed more elegant than creating two seperate branches of app logic.



## UI



The frontend has one subscription to the basket agent.

it speaks the same language as the backend, basket-actions.



```

:: basket-action

[%set-image *]

[%forget-image *]

[%tag-image *]

[%untag-image *]

```



it has two views: 'live' and 'repo'

the 'live' view displays the 'live' image on the screen. this corresponds with 'latest' in the :basket agent.

the 'repo' view displays items from the db, which it grabs from a scry to the backend. from here, you can delete images or tags.

from here, you can click on an item to set it to the live view.



you can also search the dataset by tag using a searchbar at the bottom of the page.



### some dev docs generated by @urbit/create-landscape-app



To get started using basket first you need to run `npm install` inside the `ui` directory.



To develop you'll need a running ship to point to. To do so you first need to add a `.env.local` file to the `ui` directory. This file will not be committed. Adding `VITE_SHIP_URL={URL}` where **{URL}** is the URL of the ship you would like to point to, will allow you to run `npm run dev`. This will proxy all requests to the ship except for those powering the interface, allowing you to see live data.



Your browser may require CORS requests to be enabled for the use of `@urbit/http-api`. The following commands will add `http://localhost:3000` to the CORS registry of your ship



```bash

~zod:dojo> +cors-registry



[requests={~~http~3a.~2f.~2f.localhost ~~http~3a.~2f.~2f.localhost~3a.3000} approved={} rejected={}]



~zod:dojo> |cors-approve ~~http~3a.~2f.~2f.localhost~3a.3000



~zod:dojo> +cors-registry



[requests={~~http~3a.~2f.~2f.localhost} approved={~~http~3a.~2f.~2f.localhost~3a.3000} rejected={}]



~your-sig:dojo>

```



Regardless of what you run to develop, Vite will hot-reload code changes as you work so you don't have to constantly refresh.



### Deploying



To deploy, run `npm run build` in the `ui` directory which will bundle all the code and assets into the `dist/` folder. This can then be made into a glob by doing the following:



1. Create or launch an urbit using the -F flag

2. On that urbit, if you don't already have a desk to run from, run `|merge %work our %base` to create a new desk and mount it with `|mount %work`.

3. Now the `%work` desk is accessible through the host OS's filesystem as a directory of that urbit's pier ie `~/zod/work`.

4. From the `ui` directory you can run `rsync -avL --delete dist/ ~/zod/work/basket` where `~/zod` is your fake urbit's pier.

5. Once completed you can then run `|commit %work` on your urbit and you should see your files logged back out from the dojo.

6. Now run `=dir /=garden` to switch to the garden desk directory

7. You can now run `-make-glob %work /basket` which will take the folder where you just added files and create a glob which can be thought of as a sort of bundle. It will be output to `~/zod/.urb/put`.

8. If you navigate to `~/zod/.urb/put` you should see a file that looks like this `glob-0v5.fdf99.nph65.qecq3.ncpjn.q13mb.glob`. The characters between `glob-` and `.glob` are a hash of the glob's contents.

9. Now that we have the glob it can be uploaded to any publicly available HTTP endpoint that can serve files. This allows the glob to distributed over HTTP.

10. Once you've uploaded the glob, you should then update the corresponding entry in the docket file at `desk/desk.docket-0`. Both the full URL and the hash should be updated to match the glob we just created, on the line that looks like this:



```hoon

    glob-http+['https://bootstrap.urbit.org/glob-0v5.fdf99.nph65.qecq3.ncpjn.q13mb.glob' 0v5.fdf99.nph65.qecq3.ncpjn.q13mb]

```



11. This can now be safely committed and deployed.



[react]: https://reactjs.org/

[typescript]: https://www.typescriptlang.org/

[tailwind css]: https://tailwindcss.com/

[vite]: https://vitejs.dev/