@cloudgrid-io/mcp 0.12.0 → 0.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/corpus/capability-map.md +21 -2
- package/src/corpus/examples/crm/index.md +273 -0
- package/src/corpus/examples/kanban/index.md +256 -0
- package/src/corpus/templates/admin-dashboard/README.md +75 -0
- package/src/corpus/templates/admin-dashboard/cloudgrid.yaml +15 -0
- package/src/corpus/templates/admin-dashboard/index.md +78 -0
- package/src/corpus/templates/admin-dashboard/services/web/app/api/orders/route.js +64 -0
- package/src/corpus/templates/admin-dashboard/services/web/app/api/users/route.js +63 -0
- package/src/corpus/templates/admin-dashboard/services/web/app/layout.js +39 -0
- package/src/corpus/templates/admin-dashboard/services/web/app/page.js +73 -0
- package/src/corpus/templates/admin-dashboard/services/web/app/resource-table.js +94 -0
- package/src/corpus/templates/admin-dashboard/services/web/lib/db.js +32 -0
- package/src/corpus/templates/admin-dashboard/services/web/package.json +16 -0
- package/src/corpus/templates/api-docs/README.md +28 -0
- package/src/corpus/templates/api-docs/cloudgrid.yaml +10 -0
- package/src/corpus/templates/api-docs/index.html +136 -0
- package/src/corpus/templates/api-docs/index.md +30 -0
- package/src/corpus/templates/changelog/README.md +27 -0
- package/src/corpus/templates/changelog/cloudgrid.yaml +10 -0
- package/src/corpus/templates/changelog/index.html +80 -0
- package/src/corpus/templates/changelog/index.md +30 -0
- package/src/corpus/templates/crm/README.md +72 -0
- package/src/corpus/templates/crm/cloudgrid.yaml +15 -0
- package/src/corpus/templates/crm/index.md +68 -0
- package/src/corpus/templates/crm/services/web/app/api/contacts/route.js +80 -0
- package/src/corpus/templates/crm/services/web/app/contact-manager.js +102 -0
- package/src/corpus/templates/crm/services/web/app/layout.js +35 -0
- package/src/corpus/templates/crm/services/web/app/page.js +34 -0
- package/src/corpus/templates/crm/services/web/lib/db.js +32 -0
- package/src/corpus/templates/crm/services/web/package.json +16 -0
- package/src/corpus/templates/docs-site/README.md +28 -0
- package/src/corpus/templates/docs-site/cloudgrid.yaml +10 -0
- package/src/corpus/templates/docs-site/index.html +122 -0
- package/src/corpus/templates/docs-site/index.md +30 -0
- package/src/corpus/templates/kanban/README.md +72 -0
- package/src/corpus/templates/kanban/cloudgrid.yaml +15 -0
- package/src/corpus/templates/kanban/index.md +68 -0
- package/src/corpus/templates/kanban/services/web/app/api/cards/route.js +70 -0
- package/src/corpus/templates/kanban/services/web/app/board.js +93 -0
- package/src/corpus/templates/kanban/services/web/app/layout.js +37 -0
- package/src/corpus/templates/kanban/services/web/app/page.js +32 -0
- package/src/corpus/templates/kanban/services/web/lib/db.js +32 -0
- package/src/corpus/templates/kanban/services/web/package.json +16 -0
- package/src/corpus/templates/portfolio/README.md +29 -0
- package/src/corpus/templates/portfolio/cloudgrid.yaml +10 -0
- package/src/corpus/templates/portfolio/index.html +126 -0
- package/src/corpus/templates/portfolio/index.md +30 -0
- package/src/corpus/templates/saas-marketing/README.md +30 -0
- package/src/corpus/templates/saas-marketing/cloudgrid.yaml +10 -0
- package/src/corpus/templates/saas-marketing/index.html +212 -0
- package/src/corpus/templates/saas-marketing/index.md +30 -0
- package/src/corpus/templates/status-page/README.md +28 -0
- package/src/corpus/templates/status-page/cloudgrid.yaml +10 -0
- package/src/corpus/templates/status-page/index.html +117 -0
- package/src/corpus/templates/status-page/index.md +30 -0
- package/src/corpus/templates/task-manager/README.md +72 -0
- package/src/corpus/templates/task-manager/cloudgrid.yaml +15 -0
- package/src/corpus/templates/task-manager/index.md +68 -0
- package/src/corpus/templates/task-manager/services/web/app/api/tasks/route.js +77 -0
- package/src/corpus/templates/task-manager/services/web/app/layout.js +39 -0
- package/src/corpus/templates/task-manager/services/web/app/page.js +33 -0
- package/src/corpus/templates/task-manager/services/web/app/task-list.js +110 -0
- package/src/corpus/templates/task-manager/services/web/lib/db.js +32 -0
- package/src/corpus/templates/task-manager/services/web/package.json +16 -0
- package/src/corpus/templates/waitlist/README.md +38 -0
- package/src/corpus/templates/waitlist/cloudgrid.yaml +10 -0
- package/src/corpus/templates/waitlist/index.html +69 -0
- package/src/corpus/templates/waitlist/index.md +41 -0
- package/src/corpus/workflows/admin-dashboard.md +102 -0
- package/src/corpus/workflows/api-docs.md +36 -0
- package/src/corpus/workflows/changelog.md +33 -0
- package/src/corpus/workflows/crm.md +101 -0
- package/src/corpus/workflows/docs-site.md +35 -0
- package/src/corpus/workflows/kanban.md +102 -0
- package/src/corpus/workflows/portfolio.md +35 -0
- package/src/corpus/workflows/saas-marketing.md +37 -0
- package/src/corpus/workflows/status-page.md +35 -0
- package/src/corpus/workflows/task-manager.md +101 -0
- package/src/corpus/workflows/waitlist.md +42 -0
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# task-manager template — persistent Next.js + Mongo task list
|
|
2
|
+
|
|
3
|
+
A real, deployable task manager — richer than the bare `app-with-data` to-do
|
|
4
|
+
starter. Tasks live in the grid-shared MongoDB, so they survive refresh and are
|
|
5
|
+
shared across users/sessions. Same proven shape, adapted to a `tasks` domain
|
|
6
|
+
(title, done, due, priority) with a complete-toggle and an active/done filter.
|
|
7
|
+
|
|
8
|
+
## How the grid gives you a database
|
|
9
|
+
|
|
10
|
+
You do **not** provision a database or set a connection string. In
|
|
11
|
+
`cloudgrid.yaml` you declare `needs: { database: true }`, and the grid:
|
|
12
|
+
|
|
13
|
+
- provisions shared Mongo for the app, and
|
|
14
|
+
- injects the connection string as the **`DATABASE_MONGODB_URL`** environment
|
|
15
|
+
variable (plus the legacy `MONGODB_URL` alias) — at dev-time (`grid dev`) and
|
|
16
|
+
at runtime (after `grid plug`).
|
|
17
|
+
|
|
18
|
+
The app reads it via `process.env.DATABASE_MONGODB_URL` (with a legacy
|
|
19
|
+
`process.env.MONGODB_URL` fallback) in `services/web/lib/db.js` — **lazily,
|
|
20
|
+
inside the `getDb` getter, never at module top level** (a top-level read fails
|
|
21
|
+
`next build`, which imports the module for route analysis before the grid injects
|
|
22
|
+
the var). Never hardcode a connection string; never commit a secret.
|
|
23
|
+
|
|
24
|
+
> **Declare `needs: { database: true }` (the canonical shape).** The deployer
|
|
25
|
+
> provisions Mongo and injects `DATABASE_MONGODB_URL` (plus the legacy
|
|
26
|
+
> `MONGODB_URL` alias). `requires:` is the deprecated v1 alias — don't author new
|
|
27
|
+
> yaml with it, and never set `needs:` and `requires:` together (the validator
|
|
28
|
+
> rejects the combination).
|
|
29
|
+
|
|
30
|
+
## Service layout
|
|
31
|
+
|
|
32
|
+
App code lives under **`services/web/`**, not the template root. `path:` in
|
|
33
|
+
`cloudgrid.yaml` is the URL mount, not the filesystem path — the service named
|
|
34
|
+
`web` means the CLI looks for `services/web/`. Files at the root fail with
|
|
35
|
+
`Error: Service directory not found: …/services/web`.
|
|
36
|
+
|
|
37
|
+
## Run locally
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm install
|
|
41
|
+
grid dev # runs Next.js with DATABASE_MONGODB_URL injected against dev Mongo
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Deploy
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
grid plug # builds + deploys the folder (async — poll status until live)
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
A runtime deploy is asynchronous: `plug` returns `status: building`; poll status
|
|
51
|
+
until the app is live, then use the returned live URL. Re-plug the same entity
|
|
52
|
+
to update the same URL.
|
|
53
|
+
|
|
54
|
+
## File tree
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
cloudgrid.yaml # name + services.web (nextjs) + needs: { database: true }
|
|
58
|
+
services/web/package.json # next, react, react-dom, mongodb driver only
|
|
59
|
+
services/web/lib/db.js # lazy Mongo client from DATABASE_MONGODB_URL (legacy MONGODB_URL fallback)
|
|
60
|
+
services/web/app/layout.js # root layout + inline CSS
|
|
61
|
+
services/web/app/page.js # server component: reads tasks from Mongo
|
|
62
|
+
services/web/app/task-list.js # client list: POST / PATCH (toggle done) / DELETE, plus a filter
|
|
63
|
+
services/web/app/api/tasks/route.js # GET (list) / POST (add) / PATCH (toggle) / DELETE (remove)
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Adapt it
|
|
67
|
+
|
|
68
|
+
- Rename the `tasks` collection in `services/web/app/api/tasks/route.js` and
|
|
69
|
+
`services/web/app/page.js`.
|
|
70
|
+
- Change the document fields (tags, projects, assignees, subtasks).
|
|
71
|
+
- Add sorting by due date or priority on top of the existing fields.
|
|
72
|
+
- Add `cache: true` to `needs:` only if you actually need Redis.
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# Rename this app. The grid injects the DB connection string as an environment
|
|
2
|
+
# variable at runtime — do NOT set it yourself, and never commit a connection
|
|
3
|
+
# string or secret.
|
|
4
|
+
#
|
|
5
|
+
# `needs: { database: true }` is the canonical, recommended shape. The deployer
|
|
6
|
+
# provisions Mongo and injects DATABASE_MONGODB_URL (plus the legacy MONGODB_URL
|
|
7
|
+
# alias). `requires:` is the deprecated v1 alias — don't author new yaml with it,
|
|
8
|
+
# and never set `needs:` and `requires:` together (the validator rejects it).
|
|
9
|
+
name: my-tasks
|
|
10
|
+
services:
|
|
11
|
+
web:
|
|
12
|
+
type: nextjs
|
|
13
|
+
path: /
|
|
14
|
+
needs:
|
|
15
|
+
database: true
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# Template: task-manager (persistent Next.js + Mongo task list)
|
|
2
|
+
|
|
3
|
+
A real, deployable task manager — richer than the bare `app-with-data` to-do
|
|
4
|
+
starter. Tasks live in the grid-shared MongoDB, so they survive refresh and are
|
|
5
|
+
shared across sessions. Same proven shape, adapted to a `tasks` domain (title,
|
|
6
|
+
done, due, priority) with a complete-toggle and an active/done filter.
|
|
7
|
+
|
|
8
|
+
**Key rules (all proven by the app-with-data end-to-end deploy):**
|
|
9
|
+
|
|
10
|
+
1. **Service code MUST live under `services/<name>/`, not the repo/template
|
|
11
|
+
root.** `path:` in `cloudgrid.yaml` is the URL mount, NOT the filesystem path.
|
|
12
|
+
The service named `web` → the CLI looks for `services/web/`. App files at the
|
|
13
|
+
root fail with `Error: Service directory not found: …/services/web`.
|
|
14
|
+
2. **Read the DB connection string LAZILY (inside the getter), never at module
|
|
15
|
+
top level.** The grid injects it as `DATABASE_MONGODB_URL` (plus the legacy
|
|
16
|
+
`MONGODB_URL` alias) at dev-time and runtime; the app reads
|
|
17
|
+
`process.env.DATABASE_MONGODB_URL || process.env.MONGODB_URL` inside `getDb`.
|
|
18
|
+
A top-level read fails `next build`. Never hardcode a connection string; never
|
|
19
|
+
commit a secret.
|
|
20
|
+
3. **Declare the datastore with `needs: { database: true }`.** The deployer
|
|
21
|
+
provisions Mongo and injects the connection string. `requires:` is the
|
|
22
|
+
deprecated v1 alias; don't author new yaml with it, and never set `needs:` and
|
|
23
|
+
`requires:` together (the validator rejects the combination).
|
|
24
|
+
|
|
25
|
+
## File tree
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
cloudgrid.yaml # name + services.web (nextjs) + needs: { database: true }
|
|
29
|
+
services/web/package.json # next, react, react-dom, mongodb driver only
|
|
30
|
+
services/web/lib/db.js # lazy Mongo client from DATABASE_MONGODB_URL (legacy MONGODB_URL fallback)
|
|
31
|
+
services/web/app/layout.js # root layout + inline CSS
|
|
32
|
+
services/web/app/page.js # server component: reads tasks from Mongo
|
|
33
|
+
services/web/app/task-list.js # client list: POST / PATCH (toggle done) / DELETE, plus a filter
|
|
34
|
+
services/web/app/api/tasks/route.js # GET (list) / POST (add) / PATCH (toggle) / DELETE (remove)
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## cloudgrid.yaml
|
|
38
|
+
|
|
39
|
+
```yaml
|
|
40
|
+
name: my-tasks
|
|
41
|
+
services:
|
|
42
|
+
web:
|
|
43
|
+
type: nextjs
|
|
44
|
+
path: /
|
|
45
|
+
needs:
|
|
46
|
+
database: true
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
> **Capability:** this template's need is `database: true`. The deployer
|
|
50
|
+
> provisions Mongo and injects `DATABASE_MONGODB_URL` (plus the legacy
|
|
51
|
+
> `MONGODB_URL` alias). `requires:` is the deprecated v1 alias — don't mix it with
|
|
52
|
+
> `needs:` (the validator rejects the combination). See the capability-map for
|
|
53
|
+
> the full injection table.
|
|
54
|
+
|
|
55
|
+
## The tasks collection
|
|
56
|
+
|
|
57
|
+
Documents: `{ title, done, due, priority, createdAt }` where `priority` is one of
|
|
58
|
+
`low` / `medium` / `high`. The API route on `tasks` does GET (list), POST (add),
|
|
59
|
+
PATCH (toggle done), DELETE (remove); the page is a server component that reads
|
|
60
|
+
the collection and hands it to a client list with an active/done filter.
|
|
61
|
+
|
|
62
|
+
## Adapt it
|
|
63
|
+
|
|
64
|
+
- Rename the `tasks` collection to your data.
|
|
65
|
+
- Change the document fields (tags, projects, assignees, subtasks).
|
|
66
|
+
- Add sorting by due date or priority on top of the existing fields.
|
|
67
|
+
- Add `cache: true` to `needs:` only if you actually need Redis.
|
|
68
|
+
- Run `grid dev` to test locally, `grid plug` to deploy (async — poll to live).
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
// App Router route handler for the `tasks` collection.
|
|
2
|
+
// GET -> list tasks, POST -> add a task, PATCH -> toggle done, DELETE -> remove
|
|
3
|
+
// a task by id.
|
|
4
|
+
//
|
|
5
|
+
// To adapt this app, rename the collection or change the fields.
|
|
6
|
+
import { NextResponse } from "next/server";
|
|
7
|
+
import { ObjectId } from "mongodb";
|
|
8
|
+
import { getDb } from "../../../lib/db.js";
|
|
9
|
+
|
|
10
|
+
// Never cache — always read/write live data.
|
|
11
|
+
export const dynamic = "force-dynamic";
|
|
12
|
+
|
|
13
|
+
const PRIORITIES = ["low", "medium", "high"];
|
|
14
|
+
|
|
15
|
+
async function tasks() {
|
|
16
|
+
const db = await getDb();
|
|
17
|
+
return db.collection("tasks");
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function shape(t) {
|
|
21
|
+
return {
|
|
22
|
+
id: t._id.toString(),
|
|
23
|
+
title: t.title || "",
|
|
24
|
+
done: !!t.done,
|
|
25
|
+
due: t.due || "",
|
|
26
|
+
priority: PRIORITIES.includes(t.priority) ? t.priority : "medium",
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// GET /api/tasks — list all tasks, newest first.
|
|
31
|
+
export async function GET() {
|
|
32
|
+
const col = await tasks();
|
|
33
|
+
const items = await col.find({}).sort({ createdAt: -1 }).toArray();
|
|
34
|
+
return NextResponse.json(items.map(shape));
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// POST /api/tasks — add a task. Body: { title, due, priority }.
|
|
38
|
+
export async function POST(request) {
|
|
39
|
+
const body = await request.json().catch(() => ({}));
|
|
40
|
+
const title = typeof body.title === "string" ? body.title.trim() : "";
|
|
41
|
+
if (!title) {
|
|
42
|
+
return NextResponse.json({ error: "title is required" }, { status: 400 });
|
|
43
|
+
}
|
|
44
|
+
const doc = {
|
|
45
|
+
title,
|
|
46
|
+
done: false,
|
|
47
|
+
due: typeof body.due === "string" ? body.due.trim() : "",
|
|
48
|
+
priority: PRIORITIES.includes(body.priority) ? body.priority : "medium",
|
|
49
|
+
createdAt: new Date(),
|
|
50
|
+
};
|
|
51
|
+
const col = await tasks();
|
|
52
|
+
const res = await col.insertOne(doc);
|
|
53
|
+
return NextResponse.json({ id: res.insertedId.toString(), ...doc }, { status: 201 });
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// PATCH /api/tasks — toggle a task's done state. Body: { id, done }.
|
|
57
|
+
export async function PATCH(request) {
|
|
58
|
+
const body = await request.json().catch(() => ({}));
|
|
59
|
+
const { id, done } = body;
|
|
60
|
+
if (!id || !ObjectId.isValid(id) || typeof done !== "boolean") {
|
|
61
|
+
return NextResponse.json({ error: "valid id and done (boolean) required" }, { status: 400 });
|
|
62
|
+
}
|
|
63
|
+
const col = await tasks();
|
|
64
|
+
await col.updateOne({ _id: new ObjectId(id) }, { $set: { done } });
|
|
65
|
+
return NextResponse.json({ ok: true });
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// DELETE /api/tasks?id=<id> — remove a task.
|
|
69
|
+
export async function DELETE(request) {
|
|
70
|
+
const id = new URL(request.url).searchParams.get("id");
|
|
71
|
+
if (!id || !ObjectId.isValid(id)) {
|
|
72
|
+
return NextResponse.json({ error: "valid id is required" }, { status: 400 });
|
|
73
|
+
}
|
|
74
|
+
const col = await tasks();
|
|
75
|
+
await col.deleteOne({ _id: new ObjectId(id) });
|
|
76
|
+
return NextResponse.json({ ok: true });
|
|
77
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
// Root layout + plain inline CSS (no external CDNs, fonts, or stylesheets).
|
|
2
|
+
export const metadata = {
|
|
3
|
+
title: "Task manager",
|
|
4
|
+
description: "A persistent task manager on CloudGrid, backed by grid-shared Mongo.",
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
const css = `
|
|
8
|
+
:root { color-scheme: light dark; }
|
|
9
|
+
* { box-sizing: border-box; }
|
|
10
|
+
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; line-height: 1.5; }
|
|
11
|
+
main { max-width: 44rem; margin: 3rem auto; padding: 0 1.25rem; }
|
|
12
|
+
h1 { margin: 0 0 .25rem; }
|
|
13
|
+
.hint { margin: 0 0 1.5rem; opacity: .7; font-size: .9rem; }
|
|
14
|
+
.row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
|
|
15
|
+
input, select { padding: .5rem .75rem; border: 1px solid #8886; border-radius: .5rem; font: inherit; }
|
|
16
|
+
input[type="text"] { flex: 1; min-width: 10rem; }
|
|
17
|
+
button { padding: .5rem .9rem; border: 1px solid #8886; border-radius: .5rem; background: #6663; font: inherit; cursor: pointer; }
|
|
18
|
+
button:disabled { opacity: .5; cursor: default; }
|
|
19
|
+
.filters { display: flex; gap: .4rem; margin-bottom: 1rem; }
|
|
20
|
+
.filters button.active { background: #6669; }
|
|
21
|
+
ul { list-style: none; padding: 0; margin: 0; }
|
|
22
|
+
li { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid #8883; }
|
|
23
|
+
li.done .title { text-decoration: line-through; opacity: .6; }
|
|
24
|
+
li .title { flex: 1; }
|
|
25
|
+
li .meta { font-size: .8rem; opacity: .7; }
|
|
26
|
+
.pri { font-size: .75rem; padding: .1rem .45rem; border: 1px solid #8886; border-radius: 1rem; }
|
|
27
|
+
.empty { opacity: .6; }
|
|
28
|
+
`;
|
|
29
|
+
|
|
30
|
+
export default function RootLayout({ children }) {
|
|
31
|
+
return (
|
|
32
|
+
<html lang="en">
|
|
33
|
+
<head>
|
|
34
|
+
<style dangerouslySetInnerHTML={{ __html: css }} />
|
|
35
|
+
</head>
|
|
36
|
+
<body>{children}</body>
|
|
37
|
+
</html>
|
|
38
|
+
);
|
|
39
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// Home page: a server component reads the tasks straight from Mongo, and a small
|
|
2
|
+
// client list toggles / adds / removes them via the API route. Data persists
|
|
3
|
+
// across refresh and across users because it lives in the grid-shared Mongo, not
|
|
4
|
+
// in memory.
|
|
5
|
+
import { getDb } from "../lib/db.js";
|
|
6
|
+
import TaskList from "./task-list.js";
|
|
7
|
+
|
|
8
|
+
export const dynamic = "force-dynamic";
|
|
9
|
+
|
|
10
|
+
const PRIORITIES = ["low", "medium", "high"];
|
|
11
|
+
|
|
12
|
+
async function listTasks() {
|
|
13
|
+
const db = await getDb();
|
|
14
|
+
const items = await db.collection("tasks").find({}).sort({ createdAt: -1 }).toArray();
|
|
15
|
+
return items.map((t) => ({
|
|
16
|
+
id: t._id.toString(),
|
|
17
|
+
title: t.title || "",
|
|
18
|
+
done: !!t.done,
|
|
19
|
+
due: t.due || "",
|
|
20
|
+
priority: PRIORITIES.includes(t.priority) ? t.priority : "medium",
|
|
21
|
+
}));
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export default async function Page() {
|
|
25
|
+
const tasks = await listTasks();
|
|
26
|
+
return (
|
|
27
|
+
<main>
|
|
28
|
+
<h1>Tasks</h1>
|
|
29
|
+
<p className="hint">Persisted in the grid-shared Mongo — survives refresh.</p>
|
|
30
|
+
<TaskList initialTasks={tasks} />
|
|
31
|
+
</main>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// Small client component: renders the task list with a complete-toggle + filter
|
|
4
|
+
// and posts to /api/tasks.
|
|
5
|
+
import { useState } from "react";
|
|
6
|
+
|
|
7
|
+
const PRIORITIES = ["low", "medium", "high"];
|
|
8
|
+
const FILTERS = ["all", "active", "done"];
|
|
9
|
+
|
|
10
|
+
export default function TaskList({ initialTasks }) {
|
|
11
|
+
const [tasks, setTasks] = useState(initialTasks);
|
|
12
|
+
const [title, setTitle] = useState("");
|
|
13
|
+
const [due, setDue] = useState("");
|
|
14
|
+
const [priority, setPriority] = useState("medium");
|
|
15
|
+
const [filter, setFilter] = useState("all");
|
|
16
|
+
const [busy, setBusy] = useState(false);
|
|
17
|
+
|
|
18
|
+
async function add(e) {
|
|
19
|
+
e.preventDefault();
|
|
20
|
+
const value = title.trim();
|
|
21
|
+
if (!value) return;
|
|
22
|
+
setBusy(true);
|
|
23
|
+
const res = await fetch("/api/tasks", {
|
|
24
|
+
method: "POST",
|
|
25
|
+
headers: { "content-type": "application/json" },
|
|
26
|
+
body: JSON.stringify({ title: value, due, priority }),
|
|
27
|
+
});
|
|
28
|
+
if (res.ok) {
|
|
29
|
+
const task = await res.json();
|
|
30
|
+
setTasks((prev) => [task, ...prev]);
|
|
31
|
+
setTitle("");
|
|
32
|
+
setDue("");
|
|
33
|
+
setPriority("medium");
|
|
34
|
+
}
|
|
35
|
+
setBusy(false);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
async function toggle(id, done) {
|
|
39
|
+
setBusy(true);
|
|
40
|
+
const res = await fetch("/api/tasks", {
|
|
41
|
+
method: "PATCH",
|
|
42
|
+
headers: { "content-type": "application/json" },
|
|
43
|
+
body: JSON.stringify({ id, done }),
|
|
44
|
+
});
|
|
45
|
+
if (res.ok) setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, done } : t)));
|
|
46
|
+
setBusy(false);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
async function remove(id) {
|
|
50
|
+
setBusy(true);
|
|
51
|
+
const res = await fetch(`/api/tasks?id=${encodeURIComponent(id)}`, { method: "DELETE" });
|
|
52
|
+
if (res.ok) setTasks((prev) => prev.filter((t) => t.id !== id));
|
|
53
|
+
setBusy(false);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const shown = tasks.filter((t) =>
|
|
57
|
+
filter === "all" ? true : filter === "done" ? t.done : !t.done,
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<div>
|
|
62
|
+
<form onSubmit={add} className="row">
|
|
63
|
+
<input
|
|
64
|
+
type="text"
|
|
65
|
+
value={title}
|
|
66
|
+
onChange={(e) => setTitle(e.target.value)}
|
|
67
|
+
placeholder="Add a task…"
|
|
68
|
+
aria-label="New task"
|
|
69
|
+
/>
|
|
70
|
+
<input type="date" value={due} onChange={(e) => setDue(e.target.value)} aria-label="Due date" />
|
|
71
|
+
<select value={priority} onChange={(e) => setPriority(e.target.value)} aria-label="Priority">
|
|
72
|
+
{PRIORITIES.map((p) => (
|
|
73
|
+
<option key={p} value={p}>{p}</option>
|
|
74
|
+
))}
|
|
75
|
+
</select>
|
|
76
|
+
<button type="submit" disabled={busy}>Add</button>
|
|
77
|
+
</form>
|
|
78
|
+
<div className="filters">
|
|
79
|
+
{FILTERS.map((f) => (
|
|
80
|
+
<button
|
|
81
|
+
key={f}
|
|
82
|
+
type="button"
|
|
83
|
+
className={filter === f ? "active" : ""}
|
|
84
|
+
onClick={() => setFilter(f)}
|
|
85
|
+
>
|
|
86
|
+
{f}
|
|
87
|
+
</button>
|
|
88
|
+
))}
|
|
89
|
+
</div>
|
|
90
|
+
<ul>
|
|
91
|
+
{shown.length === 0 && <li className="empty">No tasks.</li>}
|
|
92
|
+
{shown.map((t) => (
|
|
93
|
+
<li key={t.id} className={t.done ? "done" : ""}>
|
|
94
|
+
<input
|
|
95
|
+
type="checkbox"
|
|
96
|
+
checked={t.done}
|
|
97
|
+
onChange={(e) => toggle(t.id, e.target.checked)}
|
|
98
|
+
disabled={busy}
|
|
99
|
+
aria-label="Done"
|
|
100
|
+
/>
|
|
101
|
+
<span className="title">{t.title}</span>
|
|
102
|
+
<span className="pri">{t.priority}</span>
|
|
103
|
+
{t.due && <span className="meta">{t.due}</span>}
|
|
104
|
+
<button type="button" onClick={() => remove(t.id)} disabled={busy}>Delete</button>
|
|
105
|
+
</li>
|
|
106
|
+
))}
|
|
107
|
+
</ul>
|
|
108
|
+
</div>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// Cached MongoDB client for the App Router.
|
|
2
|
+
//
|
|
3
|
+
// The grid injects the connection string as the DATABASE_MONGODB_URL environment
|
|
4
|
+
// variable (plus the legacy MONGODB_URL alias) at dev-time (`grid dev`) and
|
|
5
|
+
// runtime (after `grid plug`). Read the canonical var first, fall back to the
|
|
6
|
+
// legacy alias. Never hardcode a connection string here and never commit a secret.
|
|
7
|
+
//
|
|
8
|
+
// The env var and client are resolved LAZILY (inside getDb), never at module top
|
|
9
|
+
// level — otherwise `next build` throws when it imports this module for route
|
|
10
|
+
// analysis, before the grid injects the var.
|
|
11
|
+
import { MongoClient } from "mongodb";
|
|
12
|
+
|
|
13
|
+
function clientPromise() {
|
|
14
|
+
const uri = process.env.DATABASE_MONGODB_URL || process.env.MONGODB_URL;
|
|
15
|
+
if (!uri) {
|
|
16
|
+
throw new Error(
|
|
17
|
+
"DATABASE_MONGODB_URL is not set. The grid injects it automatically — run " +
|
|
18
|
+
"this app with `grid dev` locally, or deploy it with `grid plug` (the grid " +
|
|
19
|
+
"injects the DB connection string at runtime). Do not set it by hand.",
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
if (!globalThis.__mongoClientPromise) {
|
|
23
|
+
globalThis.__mongoClientPromise = new MongoClient(uri).connect();
|
|
24
|
+
}
|
|
25
|
+
return globalThis.__mongoClientPromise;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export async function getDb() {
|
|
29
|
+
const client = await clientPromise();
|
|
30
|
+
// The default DB comes from the connection-string path segment the grid injects.
|
|
31
|
+
return client.db();
|
|
32
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "my-tasks",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"private": true,
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "next dev",
|
|
7
|
+
"build": "next build",
|
|
8
|
+
"start": "next start"
|
|
9
|
+
},
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"next": "^15.1.0",
|
|
12
|
+
"react": "^19.0.0",
|
|
13
|
+
"react-dom": "^19.0.0",
|
|
14
|
+
"mongodb": "^6.12.0"
|
|
15
|
+
}
|
|
16
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# waitlist
|
|
2
|
+
|
|
3
|
+
A single self-contained HTML launch waitlist / coming-soon page: a hero, an email capture form, and a social-proof counter.
|
|
4
|
+
|
|
5
|
+
Static inspiration — a single self-contained `index.html` (inline CSS and JS,
|
|
6
|
+
no external CDNs). It deploys instantly via `gridctl_drop` and works on every
|
|
7
|
+
CloudGrid edition, including hosted.
|
|
8
|
+
|
|
9
|
+
## Fill it in
|
|
10
|
+
|
|
11
|
+
Fetch the template with `gridctl_fetch("template", "waitlist")`, then replace the
|
|
12
|
+
placeholders:
|
|
13
|
+
|
|
14
|
+
- The product name, coming-soon headline, and subheadline.
|
|
15
|
+
- The signup counter and any social-proof line.
|
|
16
|
+
- The form action: set the `<form>` `action` to a `mailto:` address or an external form endpoint (for example a hosted form provider). The default is a `mailto:` that opens the visitor's mail client.
|
|
17
|
+
|
|
18
|
+
Keep it a single self-contained HTML file. Do not add external scripts,
|
|
19
|
+
stylesheets, fonts, or large embedded media.
|
|
20
|
+
|
|
21
|
+
## Deploy
|
|
22
|
+
|
|
23
|
+
- Hosted MCP edition: call the drop tool with the HTML.
|
|
24
|
+
- Local MCP / CLI edition: write the HTML to a file and run `gridctl plug`.
|
|
25
|
+
|
|
26
|
+
It deploys as an inspiration and returns a live share URL right away. Re-deploy
|
|
27
|
+
with the same entity id to update the same URL.
|
|
28
|
+
|
|
29
|
+
## Note on storing signups
|
|
30
|
+
|
|
31
|
+
The signup form here is **static**. It posts to a configurable action — a
|
|
32
|
+
`mailto:` (the default) or an external form endpoint you set on the `<form>`.
|
|
33
|
+
It does NOT store submissions anywhere on CloudGrid.
|
|
34
|
+
|
|
35
|
+
To actually **store** waitlist signups (persist them, count them, export them),
|
|
36
|
+
you need a runtime app with a database — `needs: { database: true }`. That is a
|
|
37
|
+
CRUD app, coming in the crud-app archetype (Wave 1b). Do not pretend this static
|
|
38
|
+
page persists data.
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
# static — deploys as an inspiration (instant, works on hosted) via gridctl_drop;
|
|
2
|
+
# this yaml is only for plugging it as an OWNED static runtime (async, local
|
|
3
|
+
# edition only). To publish the page, prefer gridctl_drop, not grid plug.
|
|
4
|
+
#
|
|
5
|
+
# needs: {} # none — static, no infrastructure
|
|
6
|
+
name: waitlist
|
|
7
|
+
services:
|
|
8
|
+
web:
|
|
9
|
+
type: static
|
|
10
|
+
path: /
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>{{PRODUCT_NAME}} — {{TAGLINE}}</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
--bg: #0b0f17; --panel: #121826; --fg: #e8edf5; --muted: #9aa7bd;
|
|
10
|
+
--accent: #5b8cff; --accent-2: #7c6bff; --border: #223049; --ok: #34d399;
|
|
11
|
+
}
|
|
12
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
13
|
+
body {
|
|
14
|
+
background:
|
|
15
|
+
radial-gradient(1200px 600px at 50% -10%, rgba(91,140,255,0.16), transparent 60%),
|
|
16
|
+
var(--bg);
|
|
17
|
+
color: var(--fg); min-height: 100vh;
|
|
18
|
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
19
|
+
-webkit-font-smoothing: antialiased; line-height: 1.55;
|
|
20
|
+
display: grid; place-items: center; padding: 1.5rem;
|
|
21
|
+
}
|
|
22
|
+
.card { width: 100%; max-width: 560px; text-align: center; display: grid; gap: 1.5rem; }
|
|
23
|
+
.eyebrow { color: var(--accent); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; }
|
|
24
|
+
h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); letter-spacing: -0.02em; line-height: 1.05; }
|
|
25
|
+
.sub { color: var(--muted); font-size: clamp(1.05rem, 3vw, 1.3rem); max-width: 44ch; margin: 0 auto; }
|
|
26
|
+
|
|
27
|
+
/* Static form: posts to the action below (mailto by default, or an external
|
|
28
|
+
form endpoint). It does NOT store signups on CloudGrid. See README. */
|
|
29
|
+
form { display: flex; gap: 0.6rem; max-width: 440px; margin: 0.5rem auto 0; flex-wrap: wrap; }
|
|
30
|
+
input[type="email"] {
|
|
31
|
+
flex: 1 1 220px; padding: 0.85rem 1rem; border-radius: 10px; border: 1px solid var(--border);
|
|
32
|
+
background: var(--panel); color: var(--fg); font-size: 1rem;
|
|
33
|
+
}
|
|
34
|
+
input[type="email"]::placeholder { color: var(--muted); }
|
|
35
|
+
button {
|
|
36
|
+
padding: 0.85rem 1.5rem; border-radius: 10px; border: none; cursor: pointer;
|
|
37
|
+
background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
|
|
38
|
+
font-weight: 600; font-size: 1rem;
|
|
39
|
+
}
|
|
40
|
+
button:hover { filter: brightness(1.08); }
|
|
41
|
+
|
|
42
|
+
.proof { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--muted); font-size: 0.92rem; }
|
|
43
|
+
.proof .count { color: var(--fg); font-weight: 700; }
|
|
44
|
+
.proof .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
|
|
45
|
+
footer { color: var(--muted); font-size: 0.85rem; margin-top: 1rem; }
|
|
46
|
+
</style>
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
<main class="card">
|
|
50
|
+
<span class="eyebrow">{{HERO_EYEBROW}}</span>
|
|
51
|
+
<h1>{{HEADLINE}}</h1>
|
|
52
|
+
<p class="sub">{{SUBHEAD}}</p>
|
|
53
|
+
|
|
54
|
+
<!-- Static form. Set `action` to a mailto: address or an external form
|
|
55
|
+
endpoint (for example a hosted form provider). Default = mailto. -->
|
|
56
|
+
<form action="mailto:{{SIGNUP_EMAIL}}" method="post" enctype="text/plain">
|
|
57
|
+
<input type="email" name="email" placeholder="you@example.com" required aria-label="Email address" />
|
|
58
|
+
<button type="submit">{{CTA_LABEL}}</button>
|
|
59
|
+
</form>
|
|
60
|
+
|
|
61
|
+
<div class="proof">
|
|
62
|
+
<span class="dot"></span>
|
|
63
|
+
<span><span class="count">{{SIGNUP_COUNT}}</span> {{SOCIAL_PROOF_TEXT}}</span>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<footer>{{FOOTER_TEXT}}</footer>
|
|
67
|
+
</main>
|
|
68
|
+
</body>
|
|
69
|
+
</html>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# Template: waitlist (static)
|
|
2
|
+
|
|
3
|
+
A single self-contained HTML launch waitlist / coming-soon page: a hero, an email capture form, and a social-proof counter. **No infrastructure** — no database, no backend, no `needs:`.
|
|
4
|
+
State (if any) lives only in memory and is lost on refresh.
|
|
5
|
+
|
|
6
|
+
## How it deploys
|
|
7
|
+
|
|
8
|
+
To publish this page, use **`gridctl_drop`** (or `gridctl_plug` with the inline
|
|
9
|
+
HTML): it deploys as an **inspiration** — instant, and works on the **hosted**
|
|
10
|
+
edition (Claude Web) as well as local. The reference `cloudgrid.yaml` in this
|
|
11
|
+
directory (`type: static`) is ONLY for plugging the page as an OWNED static
|
|
12
|
+
runtime (async, local edition only); the fast path is `gridctl_drop`.
|
|
13
|
+
|
|
14
|
+
The fillable HTML is the real template — fetch it with
|
|
15
|
+
`gridctl_fetch("template", "waitlist")` and fill in the user's content.
|
|
16
|
+
|
|
17
|
+
## Note on storing signups
|
|
18
|
+
|
|
19
|
+
The signup form here is **static**. It posts to a configurable action — a
|
|
20
|
+
`mailto:` (the default) or an external form endpoint you set on the `<form>`.
|
|
21
|
+
It does NOT store submissions anywhere on CloudGrid.
|
|
22
|
+
|
|
23
|
+
To actually **store** waitlist signups (persist them, count them, export them),
|
|
24
|
+
you need a runtime app with a database — `needs: { database: true }`. That is a
|
|
25
|
+
CRUD app, coming in the crud-app archetype (Wave 1b). Do not pretend this static
|
|
26
|
+
page persists data.
|
|
27
|
+
|
|
28
|
+
## cloudgrid.yaml (reference only)
|
|
29
|
+
|
|
30
|
+
```yaml
|
|
31
|
+
# static — deploys as an inspiration (instant, works on hosted) via gridctl_drop;
|
|
32
|
+
# this yaml is only for plugging it as an OWNED static runtime (async, local
|
|
33
|
+
# edition only). To publish the page, prefer gridctl_drop, not grid plug.
|
|
34
|
+
#
|
|
35
|
+
# needs: {} # none — static, no infrastructure
|
|
36
|
+
name: waitlist
|
|
37
|
+
services:
|
|
38
|
+
web:
|
|
39
|
+
type: static
|
|
40
|
+
path: /
|
|
41
|
+
```
|