183 lines
9.5 KiB
HTML
183 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<title>Function - Documentation</title>
|
|
<link rel="icon" type="image/svg+xml"
|
|
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z' /%3E%3C/svg%3E%0A" />
|
|
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
|
|
<script src="/static/js/tailwindcss@3.2.4.js"></script>
|
|
<script src="/static/js/htmx.min.js"></script>
|
|
|
|
<style>
|
|
@import url("https://rsms.me/inter/inter.css");
|
|
|
|
html {
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
|
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
|
"Noto Color Emoji";
|
|
}
|
|
|
|
.gradient {
|
|
background-image: linear-gradient(-225deg, #cbbacc 0%, #2580b3 100%);
|
|
}
|
|
|
|
button,
|
|
.gradient2 {
|
|
background-color: #f39f86;
|
|
background-image: linear-gradient(315deg, #f39f86 0%, #f9d976 74%);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="gradient leading-relaxed tracking-wide flex flex-col">
|
|
<div class="container mx-auto p-4 lg:p-1 min-h-screen h-full">
|
|
|
|
<nav id="header" class="w-full z-30 top-0 text-white py-1 lg:py-1">
|
|
<div class="w-full container mx-auto flex flex-wrap items-center justify-between mt-0 px-2 py-2 lg:py-6">
|
|
<div class="pl-4 flex items-center">
|
|
<a class="text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl"
|
|
href="{{ url_for('home.index') }}">
|
|
<svg class="h-10 w-10 inline-block fill-current text-yellow-700"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
<path d="M13 8V0L8.11 5.87 3 12h4v8L17 8h-4z"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 text-black p-4 lg:p-0 z-20"
|
|
id="nav-content">
|
|
<ul class="list-reset lg:flex justify-end flex-1 items-center">
|
|
<li class="mr-3">
|
|
<a class="inline-block text-black no-underline hover:text-gray-800 hover:text-underline py-2 px-4"
|
|
href="{{ url_for('home.index') }}">Home</a>
|
|
</li>
|
|
<li class="mr-3">
|
|
<a class="inline-block py-2 px-4 text-black font-bold no-underline"
|
|
href="{{ url_for('documentation') }}">Documentation</a>
|
|
</li>
|
|
</ul>
|
|
<a href="{{ url_for('home.index') }}"
|
|
class="mx-auto lg:mx-0 hover:underline gradient2 text-gray-800 font-extrabold rounded my-6 py-4 px-8 shadow-lg cursor-pointer">Login</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="text-center px-3 lg:px-0">
|
|
<h1 class="my-4 text-2xl md:text-3xl lg:text-5xl font-black leading-tight">Documentation</h1>
|
|
<p class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl mb-8">
|
|
Everything you need to know to build powerful functions.
|
|
</p>
|
|
</div>
|
|
|
|
<section class="py-8">
|
|
<div class="container mx-auto flex flex-wrap pt-4 pb-12">
|
|
|
|
<!-- The `request` Object -->
|
|
<div class="w-full p-6">
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">The `request` Object</h3>
|
|
<p class="text-gray-600 mb-4">Your function receives a `request` object containing all the
|
|
details of the incoming HTTP request. It has the following structure:</p>
|
|
<pre class="bg-gray-800 text-white p-4 rounded-md"><code>{
|
|
"method": "GET",
|
|
"headers": { ... },
|
|
"url": "http://...",
|
|
"path": "/sub/path",
|
|
"query": { "param": "value" },
|
|
"json": { "key": "value" },
|
|
"form": { "field": "value" },
|
|
"text": "plain text body"
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The `environment` Object -->
|
|
<div class="w-full p-6">
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">The `environment` Object</h3>
|
|
<p class="text-gray-600 mb-4">The `environment` object is a mutable JSON object that persists
|
|
across function executions. You can read from it and write to it to maintain state.</p>
|
|
<pre class="bg-gray-800 text-white p-4 rounded-md"><code>// Example: A simple counter
|
|
async (req) => {
|
|
if (!environment.counter) {
|
|
environment.counter = 0;
|
|
}
|
|
environment.counter++;
|
|
return JsonResponse({ count: environment.counter });
|
|
}</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Response Helpers -->
|
|
<div class="w-full p-6">
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">Response Helpers</h3>
|
|
<p class="text-gray-600 mb-4">Several helper functions are available globally to make creating
|
|
responses easier:</p>
|
|
<ul class="list-disc list-inside text-gray-700">
|
|
<li>`Response(body, headers, status)`: The base response function.</li>
|
|
<li>`JsonResponse(body, headers, status)`: Creates a response with `Content-Type:
|
|
application/json`.</li>
|
|
<li>`HtmlResponse(body, headers, status)`: Creates a response with `Content-Type:
|
|
text/html`.</li>
|
|
<li>`TextResponse(body, headers, status)`: Creates a response with `Content-Type:
|
|
text/plain`.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Console Logging -->
|
|
<div class="w-full p-6">
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">Console Logging</h3>
|
|
<p class="text-gray-600 mb-4">You can use `console.log()` and `console.error()` within your
|
|
function. The output will be captured and displayed in the function's logs, which you can
|
|
view in your dashboard.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Supported Runtimes -->
|
|
<div class="w-full p-6">
|
|
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-2">Supported Runtimes</h3>
|
|
<p class="text-gray-600 mb-4">You can write your functions in JavaScript, Deno, or Python. The
|
|
runtime is determined by the file extension of your entrypoint.</p>
|
|
|
|
<h4 class="text-xl font-bold text-gray-800 mt-6 mb-2">JavaScript (Node.js)</h4>
|
|
<p class="text-gray-600 mb-4">The JavaScript runtime uses Node.js. You can use modern
|
|
JavaScript features, including `async/await`. NPM packages are not supported.</p>
|
|
<pre class="bg-gray-800 text-white p-4 rounded-md"><code>// Example: A simple JavaScript function
|
|
async (req) => {
|
|
return JsonResponse({ message: "Hello from JavaScript!" });
|
|
}</code></pre>
|
|
|
|
<h4 class="text-xl font-bold text-gray-800 mt-6 mb-2">Deno</h4>
|
|
<p class="text-gray-600 mb-4">The Deno runtime offers a modern, secure, and TypeScript-first
|
|
environment. You can import modules directly from URLs.</p>
|
|
<pre class="bg-gray-800 text-white p-4 rounded-md"><code>// Example: A simple Deno function
|
|
import { serve } from "https://deno.land/std@0.140.0/http/server.ts";
|
|
|
|
async (req) => {
|
|
return JsonResponse({ message: "Hello from Deno!" });
|
|
}</code></pre>
|
|
|
|
<h4 class="text-xl font-bold text-gray-800 mt-6 mb-2">Python</h4>
|
|
<p class="text-gray-600 mb-4">The Python runtime uses Python 3. You can use the standard
|
|
library, but third-party packages are not supported.</p>
|
|
<pre class="bg-gray-800 text-white p-4 rounded-md"><code># Example: A simple Python function
|
|
async def main(req):
|
|
return JsonResponse({"message": "Hello from Python!"})</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |