Getting started
Diazoma shows any list on the web (a feed, a catalog, a gallery, an archive) as a curved, searchable wall. In a VR headset the wall is around you. On a desktop or a phone it opens in the page as a “magic window”: you drag to look around and click to open an item.
The wall is one package, @diazoma/wall. It knows nothing about your site. Everything it shows comes from
an adapter, and @diazoma/adapters has one for each way a site can describe itself.
Pick your level
Section titled “Pick your level”| You are | You do | Time | Page |
|---|---|---|---|
| A front-end developer | Add data-wall-* attributes to your existing listing (Level 1) | about 10 minutes | Spec, section 2 |
| A back-end developer | Serve a JSON feed and a manifest (Level 2) | about 15 minutes | Feeds, Manifest |
| On WordPress or Laravel | Install a plugin that serves the feed and the manifest | a few minutes | WordPress, Laravel |
| A site owner who wants the wall on a page | Add one script tag (Level 3) | a few minutes | Embed |
| Someone who wants a wall for a site that publishes nothing | Write a recipe (Level 0) | an afternoon | Recipes |
A site can offer several levels. A program that reads the site uses the highest one it finds (the order is in section 1.1 of the spec).
The shortest path
Section titled “The shortest path”-
Serve a manifest at
/.well-known/wall.json. The smallest one is a version and one feed:{"version": 1,"name": "Example","feeds": [{ "id": "latest", "title": "Latest", "url": "/wall/feed", "cursor": true }]} -
Make
/wall/feedanswer with items:{"items": [{ "id": "12345", "link": "/listing/12345", "image": "https://cdn.example.com/12345/512.jpg", "aspect": 1.5, "title": "A title" }],"next": "eyJzIjpbMTY5"} -
Check it:
diazoma-spec validate https://example.com -
Put the wall on a page with one script tag.
Only four item fields are required: id, link, image and aspect. Everything else is optional.