Symbitic/strapi-demo-mock.tsx

## strapi-demo-mock.tsx
/// <reference path="https://raw.githubusercontent.com/denoland/deployctl/main/types/deploy.fetchevent.d.ts" />
/// <reference path="https://raw.githubusercontent.com/denoland/deployctl/main/types/deploy.window.d.ts" />

import * as React from "https://esm.sh/react@17.0.2";
import * as ReactDOMServer from "https://esm.sh/react-dom@17.0.2/server";

import { createElement as h } from "https://esm.sh/react@17.0.2";

interface Package {
  name: string;
  description: string;
  github: string;
  stars: number;
}

interface Props {
  data: Package[];
}

// Mock data to avoid needing a deployed Strapi server for the demo.
const DATA: Package[] = [
  {
    name: "Deno",
    description: "A secure JavaScript and TypeScript runtime.",
    github: "https://github.com/denoland/deno",
    stars: 76800,
  },
  {
    name: "deployctl",
    description: "Command line tool for Deno Deploy.",
    github: "https://github.com/denoland/deployctl",
    stars: 82,
  },
  {
    id: 3,
    name: "oak",
    description: "A middleware framework for handling HTTP with Deno.",
    github: "https://github.com/oakserver/oak",
    stars: 3400,
  },
  {
    name: "fresh",
    description: "Preact, but super edgy.",
    github: "https://github.com/lucacasonato/fresh",
    stars: 261,
  },
  {
    name: "sift",
    description: "Sift is a routing and utility library for Deno Deploy.",
    github: "https://github.com/satyarohith/sift",
    stars: 91,
  },
];

function App({ data }: Props) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <link
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossOrigin="anonymous"
        />
        <title>Hello from JSX</title>
      </head>
      <body>
        <div className="container">
          <h1>Hello, World!</h1>
          <table className="table">
            <thead>
              <tr>
                <th scope="col">Name</th>
                <th scope="col">Description</th>
                <th scope="col">Stars</th>
                <th scope="col">URL</th>
              </tr>
            </thead>
            <tbody>
              {data.map((pkg: Package) => (
                <tr>
                  <th scope="row">{pkg.name}</th>
                  <td>{pkg.description}</td>
                  <td>{pkg.stars}</td>
                  <td>
                    <a href={pkg.github}>{pkg.github}</a>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </body>
    </html>
  );
}

addEventListener("fetch", (event: FetchEvent) => {
  // Render React components to a string.
  const str = ReactDOMServer.renderToString(<App data={DATA} />);

  // Prepend the DOCTYPE for better compatibility.
  const body = `<!DOCTYPE html>${str}`;

  const response = new Response(body, {
    headers: { "content-type": "text/html; charset=utf-8" },
  });

  event.respondWith(response);
});
	/// <reference path="https://raw.githubusercontent.com/denoland/deployctl/main/types/deploy.fetchevent.d.ts" />
	/// <reference path="https://raw.githubusercontent.com/denoland/deployctl/main/types/deploy.window.d.ts" />

	import * as React from "https://esm.sh/react@17.0.2";
	import * as ReactDOMServer from "https://esm.sh/react-dom@17.0.2/server";

	import { createElement as h } from "https://esm.sh/react@17.0.2";

	interface Package {
	name: string;
	description: string;
	github: string;
	stars: number;
	}

	interface Props {
	data: Package[];
	}

	// Mock data to avoid needing a deployed Strapi server for the demo.
	const DATA: Package[] = [
	{
	name: "Deno",
	description: "A secure JavaScript and TypeScript runtime.",
	github: "https://github.com/denoland/deno",
	stars: 76800,
	},
	{
	name: "deployctl",
	description: "Command line tool for Deno Deploy.",
	github: "https://github.com/denoland/deployctl",
	stars: 82,
	},
	{
	id: 3,
	name: "oak",
	description: "A middleware framework for handling HTTP with Deno.",
	github: "https://github.com/oakserver/oak",
	stars: 3400,
	},
	{
	name: "fresh",
	description: "Preact, but super edgy.",
	github: "https://github.com/lucacasonato/fresh",
	stars: 261,
	},
	{
	name: "sift",
	description: "Sift is a routing and utility library for Deno Deploy.",
	github: "https://github.com/satyarohith/sift",
	stars: 91,
	},
	];

	function App({ data }: Props) {
	return (
	<html lang="en">
	<head>
	<meta charSet="utf-8" />
	<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
	crossOrigin="anonymous"
	/>
	<title>Hello from JSX</title>
	</head>
	<body>
	<div className="container">
	<h1>Hello, World!</h1>
	<table className="table">
	<thead>
	<tr>
	<th scope="col">Name</th>
	<th scope="col">Description</th>
	<th scope="col">Stars</th>
	<th scope="col">URL</th>
	</tr>
	</thead>
	<tbody>
	{data.map((pkg: Package) => (
	<tr>
	<th scope="row">{pkg.name}</th>
	<td>{pkg.description}</td>
	<td>{pkg.stars}</td>
	<td>
	<a href={pkg.github}>{pkg.github}</a>
	</td>
	</tr>
	))}
	</tbody>
	</table>
	</div>
	</body>
	</html>
	);
	}

	addEventListener("fetch", (event: FetchEvent) => {
	// Render React components to a string.
	const str = ReactDOMServer.renderToString(<App data={DATA} />);

	// Prepend the DOCTYPE for better compatibility.
	const body = `<!DOCTYPE html>${str}`;

	const response = new Response(body, {
	headers: { "content-type": "text/html; charset=utf-8" },
	});

	event.respondWith(response);
	});