Update +page.markdoc

This commit is contained in:
Jesse Winton
2024-08-26 22:26:18 -04:00
parent 60d666875f
commit 3105dedd12

View File

@@ -24,7 +24,7 @@ Bun is also fast, like really fast. I ran package installs on fresh containers f
Good ol NPM. Good ol NPM.
```jsx ```bash
$ npm create svelte@latest my-app-node $ npm create svelte@latest my-app-node
$ cd my-app-node && npm install $ cd my-app-node && npm install
@@ -40,7 +40,7 @@ found 0 vulnerabilities
Bun install. Bun install.
```jsx ```bash
$ bun create svelte@latest my-app-bun $ bun create svelte@latest my-app-bun
$ cd my-app-bun && bun install $ cd my-app-bun && bun install
@@ -83,13 +83,13 @@ Bun implements many web standards, like `fetch`, `FormData`, `WebSocket`, and ot
For example, I can write this Appwrite Function to fetch random Capybara with 0 dependencies. For example, I can write this Appwrite Function to fetch random Capybara with 0 dependencies.
```jsx ```js
export default async ({ req, res, log, error }) => { export default async ({ req, res, log, error }) => {
if(req.method !== 'GET') { if(req.method !== 'GET') {
return res.text('Not found', 404); return res.text('Not found', 404);
} }
const response = await fetch(`https://api.giphy.com/v1/gifs/random?api_key=${process.env["GIPHY_API_KEY"]}&tag=capybara`); const response = await fetch(`https://api.giphy.com/v1/gifs/random?api_key=${process.env["GIPHY_API_KEY"]}&tag=capybara`);
const data = await response.json(); const data = await response.json();
const gifUrl = data.data.images.fixed_height.url; const gifUrl = data.data.images.fixed_height.url;
return res.json({ return res.json({
@@ -114,7 +114,7 @@ Then we can return this in our Appwrite Function.
```jsx ```jsx
import { renderToReadableStream } from "react-dom/server"; import { renderToReadableStream } from "react-dom/server";
const styles = ` const css = `
body { body {
font-family: sans-serif; font-family: sans-serif;
text-align: center; text-align: center;
@@ -156,16 +156,16 @@ export default async function handler({ req, res, log, error }: any) {
// We're returning JSX! // We're returning JSX!
const html = await renderToReadableStream( const html = await renderToReadableStream(
<> <>
<style>{styles}</style> <style></style>
<div> <div>
<img src={gifUrl} alt="Random capybara" /> <img src={gifUrl} alt="Random capybara" />
<h1>Capybara of the day!</h1> <h1>Capybara of the day!</h1>
</div> </div>
</> </>
); );
return res.text(html, 200, { return res.text(html, 200, {
"Content-Type": "text/html; charset=utf-8", "Content-Type": "text/html; charset=utf-8",
}); });
} }
``` ```
@@ -180,7 +180,7 @@ Its lightweight, no configuration is needed, and it is perfect for Appwrite F
For example, we can define these tests. For example, we can define these tests.
```jsx ```js
import { describe, expect, test, beforeAll } from "bun:test"; import { describe, expect, test, beforeAll } from "bun:test";
// import some files to test // import some files to test
import { getGif } from "../src/getGif"; import { getGif } from "../src/getGif";