Skip to content

Commit 4698d60

Browse files
NathanFlurryNathanFlurry
authored
chore: switch docs middleware to production URL (#632)
1 parent b8e4a8b commit 4698d60

File tree

3 files changed

+151
-115
lines changed

3 files changed

+151
-115
lines changed

‎docs/introduction.mdx

Lines changed: 97 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ import Bun from "/images/platforms/bun.svg";
5252
</div>
5353
</CardGroup>
5454

55-
<div style={{ height: "24px" }} />
55+
<div style={{ height: "16px" }} />
5656

5757
<CardGroup cols={4}>
5858
<Card title="Durable, In-Memory State" icon="floppy-disk">
@@ -73,11 +73,11 @@ import Bun from "/images/platforms/bun.svg";
7373
</Card>
7474
</CardGroup>
7575

76-
<div class="text-center">
77-
<h2>Features</h2>
78-
</div>
76+
<div style={{ height: "16px" }} />
7977

80-
{" "}
78+
<div class="text-center text-white text-xl font-semibold not-prose mt-8 mb-4">
79+
Features
80+
</div>
8181

8282
<CardGroup cols={3}>
8383
<Card
@@ -113,7 +113,7 @@ import Bun from "/images/platforms/bun.svg";
113113
/>
114114
</CardGroup>
115115

116-
<div style={{ height: "24px" }} />
116+
<div style={{ height: "128px" }} />
117117

118118
<div class="text-center">
119119
<h2>What makes ActorCore different?</h2>
@@ -193,128 +193,129 @@ import Bun from "/images/platforms/bun.svg";
193193
<p class="text-center">† = on supported platforms</p>
194194
</div>
195195

196+
<div style={{ height: "96px" }} />
196197

197198
## Quickstart
198199

199-
<Steps>
200-
<Step title="Install">
201-
<CodeGroup>
202-
```sh npm
203-
npm add actor-core
200+
<Steps>
201+
<Step title="Install">
202+
<CodeGroup>
203+
```sh npm
204+
npm add actor-core
205+
```
206+
207+
```sh pnpm
208+
pnpm add actor-core
204209
```
205210

206-
```sh pnpm
207-
pnpm add actor-core
208-
```
211+
```sh yarn
212+
yarn add actor-core
213+
```
209214

210-
```sh yarn
211-
yarn add actor-core
212-
```
215+
```sh bun
216+
bun add actor-core
217+
```
218+
</CodeGroup>
219+
</Step>
220+
<Step title="Create Actor">
221+
<CodeGroup>
213222

214-
```sh bun
215-
bun add actor-core
216-
```
217-
</CodeGroup>
218-
</Step>
219-
<Step title="Create Actor">
220-
<CodeGroup>
223+
```typescript Actor (TypeScript)
224+
import { Actor, type Rpc } from "actor-core";
221225

222-
```typescript Actor (TypeScript)
223-
import { Actor, type Rpc } from "actor-core";
226+
export interface State {
227+
messages: { username: string; message: string }[];
228+
}
224229

225-
export interface State {
226-
messages: { username: string; message: string }[];
230+
export default class ChatRoom extends Actor<State> {
231+
// initialize this._state
232+
_onInitialize() {
233+
return { messages: [] };
227234
}
228235

229-
export default class ChatRoom extends Actor<State> {
230-
// initialize this._state
231-
_onInitialize() {
232-
return { messages: [] };
233-
}
236+
// receive an remote procedure call from the client
237+
sendMessage(rpc: Rpc<ChatRoom>, username: string, message: string) {
238+
// save message to persistent storage
239+
this._state.messages.push({ username, message });
234240

235-
// receive an remote procedure call from the client
236-
sendMessage(rpc: Rpc<ChatRoom>, username: string, message: string) {
237-
// save message to persistent storage
238-
this._state.messages.push({ username, message });
239-
240-
// broadcast message to all clients
241-
this._broadcast("newMessage", username, message);
242-
}
241+
// broadcast message to all clients
242+
this._broadcast("newMessage", username, message);
243243
}
244-
```
244+
}
245+
```
245246

246-
```javascript Actor (JavaScript)
247-
import { Actor } from "actor-core";
247+
```javascript Actor (JavaScript)
248+
import { Actor } from "actor-core";
248249

249-
export default class ChatRoom extends Actor {
250-
// initialize this._state
251-
_onInitialize() {
252-
return { messages: [] };
253-
}
250+
export default class ChatRoom extends Actor {
251+
// initialize this._state
252+
_onInitialize() {
253+
return { messages: [] };
254+
}
254255

255-
// receive an remote procedure call from the client
256-
sendMessage(rpc, username, message) {
257-
// save message to persistent storage
258-
this._state.messages.push({ username, message });
256+
// receive an remote procedure call from the client
257+
sendMessage(rpc, username, message) {
258+
// save message to persistent storage
259+
this._state.messages.push({ username, message });
259260

260-
// broadcast message to all clients
261-
this._broadcast("newMessage", username, message);
262-
}
261+
// broadcast message to all clients
262+
this._broadcast("newMessage", username, message);
263263
}
264-
```
264+
}
265+
```
265266

266-
</CodeGroup>
267-
</Step>
268-
<Step title="Connect to Actor">
269-
<CodeGroup>
267+
</CodeGroup>
268+
</Step>
269+
<Step title="Connect to Actor">
270+
<CodeGroup>
270271

271-
```typescript Browser (TypeScript)
272-
import { Client } from "actor-core/client";
273-
import type ChatRoom from "../src/chat-room.ts";
272+
```typescript Browser (TypeScript)
273+
import { Client } from "actor-core/client";
274+
import type ChatRoom from "../src/chat-room.ts";
274275

275-
const client = new Client(/* manager endpoint */);
276+
const client = new Client(/* manager endpoint */);
276277

277-
// connect to chat room
278-
const chatRoom = await client.get<ChatRoom>({ name: "chat" });
278+
// connect to chat room
279+
const chatRoom = await client.get<ChatRoom>({ name: "chat" });
279280

280-
// listen for new messages
281-
chatRoom.on("newMessage", (username: string, message: string) =>
282-
console.log(`Message from ${username}: ${message}`),
283-
);
281+
// listen for new messages
282+
chatRoom.on("newMessage", (username: string, message: string) =>
283+
console.log(`Message from ${username}: ${message}`),
284+
);
284285

285-
// send message to room
286-
await chatRoom.sendMessage("william", "All the world's a stage.");
287-
```
286+
// send message to room
287+
await chatRoom.sendMessage("william", "All the world's a stage.");
288+
```
288289

289-
```javascript Browser (JavaScript)
290-
import { Client } from "actor-core/client";
290+
```javascript Browser (JavaScript)
291+
import { Client } from "actor-core/client";
291292

292-
const client = new Client(/* manager endpoint */);
293+
const client = new Client(/* manager endpoint */);
293294

294-
// connect to chat room
295-
const chatRoom = await client.get({ name: "chat" });
295+
// connect to chat room
296+
const chatRoom = await client.get({ name: "chat" });
296297

297-
// listen for new messages
298-
chatRoom.on("newMessage", (username, message) =>
299-
console.log(`Message from ${username}: ${message}`),
300-
);
298+
// listen for new messages
299+
chatRoom.on("newMessage", (username, message) =>
300+
console.log(`Message from ${username}: ${message}`),
301+
);
301302

302-
// send message to room
303-
await chatRoom.sendMessage("william", "All the world's a stage.");
304-
```
303+
// send message to room
304+
await chatRoom.sendMessage("william", "All the world's a stage.");
305+
```
305306

306-
</CodeGroup>
307-
</Step>
308-
<Step title="Deploy">
309-
Deploy to your platform of choice:
307+
</CodeGroup>
308+
</Step>
309+
<Step title="Deploy">
310+
Deploy to your platform of choice:
310311

311-
- [Rivet](/platforms/rivet)
312-
- [Cloudflare Workers](/platforms/cloudflare-workers)
313-
- [Bun](/platforms/bun)
314-
- [Node.js](/platforms/nodejs)
315-
</Step>
312+
- [Rivet](/platforms/rivet)
313+
- [Cloudflare Workers](/platforms/cloudflare-workers)
314+
- [Bun](/platforms/bun)
315+
- [Node.js](/platforms/nodejs)
316+
</Step>
316317

317-
</Steps>
318+
</Steps>
318319

319320
## Community & Support
320321

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@
1616
"build": "npx turbo build",
1717
"check-types": "npx turbo check-types",
1818
"fmt": "yarn biome check --write .",
19-
"docs": "cd docs && yarn dlx mintlify@latest dev",
20-
"docs-proxy": "cd packages/misc/docs-proxy && yarn dev",
19+
"dev-docs": "cd docs && yarn dlx mintlify@latest dev",
20+
"dev-docs-middleware": "cd packages/misc/docs-middleware && yarn dev",
21+
"deploy-docs-middleware": "cd packages/misc/docs-middleware && yarn deploy",
2122
"docs-broken-links": "cd docs && yarn dlx mintlify@latest broken-links"
2223
},
2324
"devDependencies": {

‎packages/misc/docs-middleware/src/index.ts

Lines changed: 51 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
//const PROTO = "https:"
2-
// const HOST = "rivet-c4d395ab-02-13-docs_new_landing_page.mintlify.app";
3-
// const PORT = "443"
1+
const PROTO = "https:"
2+
const HOST = "rivet-c4d395ab.mintlify.app";
3+
const PORT = "443"
44

5-
const PROTO = "http:";
6-
const HOST = "localhost";
7-
const PORT = "3000";
5+
// const PROTO = "http:";
6+
// const HOST = "localhost";
7+
// const PORT = "3000";
88

99
const STYLES = `
1010
.inline-icon {
@@ -26,14 +26,47 @@ const STYLES = `
2626
border-radius: 9999px;
2727
margin-right: 0.75rem;
2828
}
29-
`;
3029
31-
const INTRO_STYLES = `
32-
#header {
30+
[data-page="/"] #header, [data-page="/introduction"] #header {
3331
display: none;
3432
}
3533
`;
3634

35+
const SCRIPT = `
36+
<script>
37+
// Inject script to set page attribute so we can style pages according to the current page
38+
//
39+
// See also HTMLRewriter
40+
document.addEventListener('DOMContentLoaded', function() {
41+
// Add attribute on change
42+
function onPathChange() {
43+
console.log("Path changed to:", window.location.pathname);
44+
document.documentElement.setAttribute('data-page', window.location.pathname);
45+
}
46+
onPathChange();
47+
48+
// Swizzle state changes
49+
const originalPushState = history.pushState;
50+
const originalReplaceState = history.replaceState;
51+
52+
history.pushState = function (...args) {
53+
originalPushState.apply(this, args);
54+
onPathChange();
55+
};
56+
57+
history.replaceState = function (...args) {
58+
originalReplaceState.apply(this, args);
59+
onPathChange();
60+
};
61+
62+
// Add events
63+
window.addEventListener('popstate', updateDataPage);
64+
window.addEventListener('pushstate', updateDataPage);
65+
window.addEventListener('replacestate', updateDataPage);
66+
});
67+
</script>
68+
`;
69+
3770
export default {
3871
async fetch(request, env, ctx): Promise<Response> {
3972
const url = new URL(request.url);
@@ -69,20 +102,21 @@ export default {
69102
}
70103
}
71104

72-
// Inject styles
105+
// Inject styles & scripts
73106
const rewriter = new HTMLRewriter();
74107
rewriter.on("head", {
75108
element(element) {
76109
element.append(`<style>${STYLES}</style>`, { html: true });
110+
element.append(SCRIPT, { html: true });
111+
},
112+
});
113+
114+
// Expose data attribute
115+
rewriter.on("html", {
116+
element(element) {
117+
element.setAttribute("data-page", url.pathname);
77118
},
78119
});
79-
if (url.pathname === "/" || url.pathname === "/introduction") {
80-
rewriter.on("head", {
81-
element(element) {
82-
element.append(`<style>${INTRO_STYLES}</style>`, { html: true });
83-
},
84-
});
85-
}
86120

87121
return rewriter.transform(response);
88122
},

0 commit comments

Comments
 (0)