Update docs

.vscode/settings.json

@@ -1,6 +1,12 @@
 {
   "editor.formatOnSave": true,
-  "cSpell.words": ["Microtask", "postbuild", "Rehype", "roadmap"],
+  "cSpell.words": [
+    "mergeable",
+    "Microtask",
+    "postbuild",
+    "Rehype",
+    "roadmap"
+  ],
   "files.associations": {
     "styles.scss": "tailwindcss"
   },

docs/custom-domains.md

@@ -0,0 +1,9 @@
+# Custom domains
+
+You can add a custom domain to your worker in the "Domains" section of the worker overview page.
+
+For example, for `example.com` to points to your worker, add `example.com` to the "Domains" section.
+
+Then, add a CNAME record to your DNS provider pointing to `workers.rocks`.
+
+Requests to `example.com` will now be routed to your worker.

docs/environment-variables.md

@@ -0,0 +1,41 @@
+# Environment Variables
+
+Environment variables are key-value pairs that are passed to the worker when it starts, you can use it to pass sensitive information to the worker.
+
+
+![Environment variables](/assets/images/environment-variables.png)
+
+## Setting Environment Variables
+
+Environment variables can be set in the "Environments" tab. 
+
+Click on "Add Environment" to create a new environment set.
+
+Once you have created an environment set, you can add key-value pairs to it.
+
+Then, you can select the environment set you want to use in the worker settings.
+
+![Environment variables](/assets/images/set-environment-variable.png)
+
+## Usage
+
+You can access environment variables in your worker using the `env` global object.
+
+```typescript
+addEventListener('fetch', (event: FetchEvent) => {
+  const name = env.NAME;
+
+  event.respondWith(
+      new Response(`Hello, ${name}!`)
+  );
+});
+```
+
+When your environment variable is correctly set, the [online editor](/docs/online-editor) is able to autocomplete the variable name.
+
+![Autocomplete](/assets/images/environment-completion.png)
+
+## Future Work
+
+- [x] Add support for secrets
+- [ ] Mergeable environments: allow to merge environment variables from different environments sets

docs/index.md

@@ -62,20 +62,3 @@ async function handleRequest(request: Request): Promise<Response> {
 
 From now on, you can edit the code of the worker and it will be automatically deployed.
 
-### Environment variables
-
-You can set environment variables for your worker in the "Environment variables" tab.
-
-Environment variables are key-value pairs that are passed to your worker at runtime.
-
-They should be detected in the online editor.
-
-### Custom domains
-
-You can add a custom domain to your worker in the "Domains" section of the worker overview page.
-
-For example, for `example.com` to points to your worker, add `example.com` to the "Domains" section.
-
-Then, add a CNAME record to your DNS provider pointing to `workers.rocks`.
-
-Requests to `example.com` will now be routed to your worker.

docs/meta.ts

@@ -32,6 +32,37 @@ export const docsConfig: IMarkdownMeta[] = [
     path: 'runtime',
     load: md(() => import('./runtime.md'))
   },
+  {
+    name: 'Custom domains',
+    path: 'custom-domains',
+    load: md(() => import('./custom-domains.md'))
+  },
+  {
+    name: 'Online editor',
+    path: 'online-editor',
+    load: md(() => import('./online-editor.md'))
+  },
+  {
+    name: 'Environment variables',
+    path: 'environment-variables',
+    load: md(() => import('./environment-variables.md'))
+  },
+  {
+    name: 'Workers',
+    path: 'workers',
+    children: [
+      {
+        name: 'Handle HTTP requests',
+        path: 'event-fetch',
+        load: md(() => import('./workers/event-fetch.md'))
+      },
+      {
+        name: 'Scheduled tasks',
+        path: 'scheduled-tasks',
+        load: md(() => import('./workers/event-scheduled.md'))
+      }
+    ]
+  },
   {
     name: 'ChatGPT example prompt',
     path: 'chat-gpt-prompt',

docs/online-editor.md

@@ -0,0 +1,3 @@
+# Online Editor
+
+OpenWorkers provides an online editor to write and run your code. The editor is based on the Monaco Editor, which is the same editor used in Visual Studio Code.

docs/roadmap.md

@@ -5,34 +5,29 @@
 - ### 0.1.0
 
   - [x] Basic functionalities
-  - [ ] Basic documentation
+  - [x] Basic documentation
 
 - ### 0.2.0
 
-  - [ ] Fully functional engine
-
+  - [x] Fully functional runtime
     - [x] Handle `fetch` events
     - [x] Implement console
     - [x] Implement setTimeout
     - [x] Implement setInterval
     - [x] Implement clearTimeout
     - [x] Implement clearInterval
-    - [ ] Implement fetch
+    - [x] Implement fetch
 
-  - [ ] Open source the engine
+  - [x] Open source the runtime [openworkers/openworkers-runtime](https://github.com/openworkers/openworkers-runtime)
 
 - ### 0.3.0
 
-  - [ ] Integrate [swc](https://swc.rs/) for native TypeScript support
-  - [ ] Implement crypto
+  - [x] Integrate [swc](https://swc.rs/) for native TypeScript support
+  - [x] Implement crypto
 
 - ### 0.4.0
 
-  - [ ] Handle `scheduled` events
-
-- ### 0.5.0
-
-  - [ ] Implement caching
+  - [x] Handle `scheduled` events
 
 ## Dashboard
 
@@ -46,10 +41,10 @@
 
 - ### 0.2.0
 
-  - [ ] Store last _n_ logs
+  - [x] Store last _n_ logs
   - [ ] Store last _n_ requests/responses
   - [ ] Store last _n_ errors
-  - [ ] Manage scheduled events
+  - [x] Manage scheduled events
 
 - ### 0.3.0
 
@@ -65,15 +60,15 @@
 
 - ### 0.6.0
 
-  - [ ] Deploy a Prisma database for each user
+  - [ ] Deploy serverless database on demand
   - [ ] Database management
 
 ## CLI
 
 - ### 0.1.0
 
-  - [ ] Login
-  - [ ] Manage worker
-  - [ ] Manage environment variables
-  - [ ] Set custom domains for workers
-  - [ ] Live logs
+  - [x] Login
+  - [x] Manage worker
+  - [x] Manage environment variables
+  - [x] Set custom domains for workers
+  - [x] Live logs

docs/workers/event-fetch.md

@@ -0,0 +1,76 @@
+# Handle HTTP requests
+
+To handle HTTP requests, you need to listen for the `fetch` event. This event is triggered whenever a request is made to your worker.
+
+## Fetch event
+
+The `fetch` event provides the following properties and methods:
+ - `request`: The [Request object](https://developer.mozilla.org/en-US/docs/Web/API/Request) representing the incoming request.
+ - `respondWith`: A callback to send the [Response object](https://developer.mozilla.org/en-US/docs/Web/API/Request).
+
+
+```typescript
+interface FetchEvent {
+  request: Request;
+  respondWith(response: Response | Promise<Response>): void;
+}
+```
+
+## Example
+```typescript
+addEventListener('fetch', (event: FetchEvent) => {
+  event.respondWith(
+    handleRequest(event.request)
+      .catch((err: Error) => new Response(err.stack, { status: 500 }))
+  );
+});
+
+async function handleRequest(request: Request): Promise<Response> {
+  const { pathname } = new URL(request.url);
+
+  // Return a 404 response for requests to /favicon.ico.
+  if (pathname.startsWith('/favicon.ico')) {
+    return new Response('Not found', { status: 404 });
+  }
+
+  // Return a HTML response for all other requests.
+  return new Response('<h3>Hello world!</h3>', {
+    headers: { 'Content-Type': 'text/html' }
+  });
+}
+```
+
+
+--------------
+
+
+Let's break down the code:
+
+```typescript
+addEventListener('fetch', (event: FetchEvent) => { ... })
+```
+
+This line listens for the `fetch` event and calls the provided callback function whenever a request is made to the worker.
+
+
+--------------
+
+
+```typescript
+event.respondWith(...)
+```
+
+This line tells the worker how to respond to the request. You can respond with a `Response` object, a `Promise<Response>` object, or a `Response` object wrapped in a `Promise`.
+
+
+--------------
+
+```typescript
+handleRequest(request: Request): Promise<Response>
+```
+
+This function takes a `Request` object as input and returns a `Promise<Response>`. It is responsible for processing the request and generating a response.
+
+A common pattern is to define a function like `handleRequest` to handle the request processing logic. This function can be as complex or as simple as needed, depending on the requirements of your worker.
+
+A simple example is provided in the code snippet above, where the function checks the requested pathname and returns different responses based on the path.

docs/workers/event-scheduled.md

@@ -0,0 +1,32 @@
+# Scheduled Tasks
+
+Scheduled tasks are tasks that are executed at a specific time or interval. They are useful for running tasks that need to be executed at a specific time, such as sending emails, cleaning up data, or running reports.
+
+OpenWorkers provides a simple way to create and manage scheduled tasks using the `schedule` event.
+
+## Scheduled Event
+
+The `schedule` event provides the following properties and methods:
+ - `scheduledTime`: The time at which the task is scheduled to run.
+ - `waitUntil`: A method to wait for the completion of the task. It is important to call this method to ensure that the task is completed before the worker is terminated. All pending promises must be resolved before the worker is terminated (they will be cancelled otherwise).
+
+```typescript
+interface ScheduledEvent {
+  waitUntil: (handler: Promise<any>) => void;
+  scheduledTime: number;
+}
+```
+
+## Scheduling a task
+
+To schedule a task, you need to listen for the `schedule` event. This event is triggered at the specified time or interval.
+
+```typescript
+addEventListener('scheduled', (event: ScheduledEvent) => {
+  event.waitUntil(handleSchedule(event.scheduledTime));
+});
+
+async function handleSchedule(scheduledTime: number): Promise<void> {
+  // Your task logic here
+}
+```

src/styles.css

@@ -140,6 +140,24 @@
     @apply mb-4;
   }
 
+  /* TODO */
+  .markdown-body .task-list-item input[type='checkbox'] {
+    height: inherit;
+    padding-top: 0.5rem;
+  }
+
+  .markdown-body .task-list-item {
+    @apply my-2;
+  }
+
+  .markdown-body .task-list-item input {
+    @apply me-1;
+  }
+
+  .markdown-body .contains-task-list ul {
+    @apply ps-5;
+  }
+
   .markdown-body pre {
     @apply text-sm;
   }