Skip to content

Commit c60da4a

Browse files
SIR-R0BSIR-R0B
committed
Update Readme
1 parent f268ddc commit c60da4a

1 file changed

Lines changed: 135 additions & 27 deletions

File tree

‎README.md‎

Lines changed: 135 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,151 @@
1-
# Astro Starter Kit: Minimal
1+
# Holo Marketplace
22

3-
```sh
4-
npm create astro@latest -- --template minimal
5-
```
3+
A product catalog and discovery site for the Holo/Holochain ecosystem and partners. Browse decentralized hosting, developer tools, community currencies, AI infrastructure, and VPS hosting from Holo, Holochain Foundation, Unyt, Coasys, and Mycelium.
4+
5+
**Live site:** [Holo-Host.github.io/marketplace](https://Holo-Host.github.io/marketplace)
66

7-
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
7+
## Tech Stack
88

9-
## 🚀 Project Structure
9+
- **Astro 6** — Static-first framework with islands architecture
10+
- **React 19** — Interactive product catalog as a client-side island
11+
- **Tailwind CSS v4** — Utility-first styling via the Vite plugin
12+
- **GitHub Pages** — Auto-deployed on push to `main`
1013

11-
Inside of your Astro project, you'll see the following folders and files:
14+
## Project Structure
1215

13-
```text
14-
/
15-
├── public/
16+
```
17+
marketplace/
18+
├── public/ # Static assets (logos, favicon, OG image)
1619
├── src/
17-
│ └── pages/
18-
│ └── index.astro
20+
│ ├── components/
21+
│ │ └── ProductCatalog.jsx # Main interactive catalog (React island)
22+
│ ├── content/
23+
│ │ ├── products/ # Product listings (YAML, one per product)
24+
│ │ └── providers/ # Provider profiles (YAML, one per provider)
25+
│ ├── layouts/
26+
│ │ └── Base.astro # HTML shell with SEO/OG meta tags
27+
│ ├── pages/
28+
│ │ └── index.astro # Queries content collections, renders catalog
29+
│ ├── styles/
30+
│ │ └── global.css # Tailwind import + theme config
31+
│ └── content.config.ts # Zod schemas for products & providers
32+
├── astro.config.mjs
1933
└── package.json
2034
```
2135

22-
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
36+
## Getting Started
37+
38+
```bash
39+
npm install
40+
npm run dev # → http://localhost:4321
41+
```
42+
43+
## Adding or Editing Products
44+
45+
Products are YAML files in `src/content/products/`. Create a new file or edit an existing one — the Zod schema in `content.config.ts` validates every field at build time.
46+
47+
Example product file (`src/content/products/holo-edge-hosting.yaml`):
48+
49+
```yaml
50+
name: Edge Hosting
51+
provider: holo
52+
description: >-
53+
Run a HoloPort to host Holochain apps at the edge.
54+
longDescription: >-
55+
Extended description shown when the product card is expanded.
56+
tags:
57+
- hosting
58+
- depin
59+
- earn
60+
category: hosting
61+
status: available
62+
pricing:
63+
type: earn
64+
label: "Free / Get Paid"
65+
action:
66+
type: download
67+
label: Download ISO
68+
url: https://holo.host/download
69+
featured: true
70+
sortOrder: 1
71+
```
72+
73+
**Field reference:**
74+
75+
| Field | Required | Values |
76+
|-------|----------|--------|
77+
| `name` | Yes | Display name |
78+
| `provider` | Yes | `holo`, `holochain`, `unyt`, `coasys`, `mycelium` |
79+
| `description` | Yes | Short (1-2 sentences) |
80+
| `longDescription` | No | Extended text for expanded view |
81+
| `tags` | Yes | Array of strings |
82+
| `category` | Yes | `hosting`, `social`, `developer_tools`, `currency`, `networking`, `ai`, `infrastructure` |
83+
| `status` | No | `available` (default), `beta`, `coming_soon` |
84+
| `pricing.type` | Yes | `free`, `freemium`, `earn`, `paid`, `contact` |
85+
| `pricing.label` | Yes | Display text (e.g. "Free / Get Paid") |
86+
| `pricing.amount` | No | Number (USD) |
87+
| `pricing.note` | No | Extra context (e.g. "Credited back in HOT") |
88+
| `action.type` | Yes | `unyt_app`, `external_link`, `download`, `contact_form` |
89+
| `action.label` | Yes | Button text |
90+
| `action.url` | No | Direct URL for downloads/links |
91+
| `featured` | No | `true` to pin to top of "Featured" sort |
92+
| `sortOrder` | No | Number for ordering (lower = first) |
93+
94+
## Adding or Editing Providers
95+
96+
Provider profiles are YAML files in `src/content/providers/`. These power the expandable provider sections in the sidebar filter.
97+
98+
Example (`src/content/providers/holo.yaml`):
99+
100+
```yaml
101+
name: Holo
102+
color: "#22d3ee"
103+
description: >-
104+
Holo provides distributed hosting infrastructure for Holochain
105+
applications, making peer-to-peer apps accessible through standard
106+
web browsers.
107+
logo: holo-mark.svg
108+
website: https://holo.host
109+
contact: https://holo.host/contact
110+
sortOrder: 1
111+
```
112+
113+
Logo files are referenced by filename and must be placed in `public/`.
23114

24-
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
115+
## Catalog Features
25116

26-
Any static assets, like images, can be placed in the `public/` directory.
117+
- **Search** — Fuzzy client-side search across name, description, provider, and tags. Press `/` to focus.
118+
- **Filter** — By pricing (Free, Get Paid, Paid), provider, and category. Filters are OR within a group, AND across groups.
119+
- **Sort** — Featured, Name, Price (low/high), Provider.
120+
- **View modes** — List and grid, toggle in the toolbar.
121+
- **Expandable cards** — Click any product to expand an inline detail panel with the long description.
122+
- **Provider profiles** — Click a provider name in the sidebar to see their description, logo, website, and contact link.
123+
- **Responsive** — Optimized for desktop, tablet, and mobile.
27124

28-
## 🧞 Commands
125+
## Mycelium Integration (Pending)
29126

30-
All commands are run from the root of the project, from a terminal:
127+
Mycelium VPS products are currently simulated with placeholder data in the React component (`getMyceliumProducts()`). When the Mycelium API is available, replace this function with a real `fetch()` call. The adapter pattern is already in place — dynamic products are merged with static content collection products at runtime.
31128

32-
| Command | Action |
33-
| :------------------------ | :----------------------------------------------- |
34-
| `npm install` | Installs dependencies |
35-
| `npm run dev` | Starts local dev server at `localhost:4321` |
36-
| `npm run build` | Build your production site to `./dist/` |
37-
| `npm run preview` | Preview your build locally, before deploying |
38-
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
39-
| `npm run astro -- --help` | Get help using the Astro CLI |
129+
## Unyt Integration (Pending)
130+
131+
Products with `action.type: "unyt_app"` will trigger the Unyt desktop application via a custom protocol handler (`unyt://`). The protocol scheme, payload format, and fallback behavior are being defined by the Unyt integration engineer. Currently, action buttons are wired up but non-functional.
132+
133+
## Deployment
134+
135+
The site auto-deploys to GitHub Pages on push to `main` via `.github/workflows/deploy.yml`. The Astro build outputs static HTML to `dist/`, served under the `/marketplace` base path.
136+
137+
To build locally:
138+
139+
```bash
140+
npm run build # Output in dist/
141+
npm run preview # Preview the build at localhost:4321
142+
```
40143

41-
## 👀 Want to learn more?
144+
## Commands
42145

43-
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
146+
| Command | Action |
147+
|---------|--------|
148+
| `npm install` | Install dependencies |
149+
| `npm run dev` | Dev server at `localhost:4321` |
150+
| `npm run build` | Production build to `dist/` |
151+
| `npm run preview` | Preview production build locally |

0 commit comments

Comments
 (0)