1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4
5// This uses by personal API key, you'll need to provide your own if
1/** @jsxImportSource https://esm.sh/react */
2import { Hono } from "https://esm.sh/hono";
3import React, { useEffect, useState } from "https://esm.sh/react";
4import { hydrateRoot } from "https://esm.sh/react-dom/client";
5import { renderToReadableStream } from "https://esm.sh/react-dom/server";
6import { blob } from "https://esm.town/v/std/blob?v=10";
7
1Migrated from folder: Archive/docsExamples/saving_data_from_web_page/blobCommentsReact
1Idiomatic SSR and hydration of a React app
3This val can be used in other vals to send notifications to a segment using [OneSignal's REST API](https://documentation.onesignal.com/reference/create-notification)
4
5This is really handy if you want to send push notifications to your phone without building a native app! I built a barebones React PWA that asks for a password then loads the OneSignal Web SDK that I deployed to [Netlify](https://www.netlify.com/) for free. OneSignal has [easy to follow docs](https://documentation.onesignal.com/docs/web-sdk-setup) so you can build this functionality into a React, Angular, Vue app or even Wordpress! Then [install the PWA](https://www.bitcot.com/how-to-install-a-pwa-to-your-device/) on your platform of choice and you're off to the races!
6
7## Setup
1
2const websites = [
3 { name: 'React-Client', url: 'https://iamseeley-reactserver.web.val.run/' },
4 { name: 'React-Client-CDN', url: 'https://iamseeley-clientmultiroutereact.web.val.run/' },
5 { name: 'Vue', url: 'https://iamseeley-multiroutevue.web.val.run/' },
6 { name: 'Svelte', url: 'https://iamseeley-multiroutesvelte.web.val.run/' },
7 { name: 'Preact', url: 'https://iamseeley-multiroutepreact.web.val.run/' },
8 { name: 'React', url: 'https://iamseeley-multiroutereact.web.val.run/' },
9 { name: 'Hono', url: 'https://iamseeley-multiroutehono.web.val.run/' },
10 { name: 'HTML-As-String', url: 'https://iamseeley-multiroutehtml.web.val.run/' }
1/** @jsxImportSource https://esm.sh/react */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
3import { html } from "https://esm.town/v/stevekrouse/html";
4import { SparklineSVG } from "https://esm.town/v/stevekrouse/sparklineSVGReact";
5import { renderToString } from "npm:react-dom/server";
6
7function StatusRow({ rows }) {
1/** @jsxImportSource https://esm.sh/preact */
2import { generateNewsletterJsx } from "https://esm.town/v/petermillspaugh/generateNewsletterJsx";
3import { newsletters } from "https://esm.town/v/petermillspaugh/newsletters";
4import { email as sendEmail } from "https://esm.town/v/std/email?v=11";
5import { sqlite } from "https://esm.town/v/std/sqlite?v=4";
6import { render } from "npm:preact-render-to-string";
7
8type SubscriberRow = [
1/** @jsxImportSource https://esm.sh/preact */
2import { sqlite } from "https://esm.town/v/std/sqlite?v=4";
3
1/** @jsxImportSource https://esm.sh/preact */
2import { generateNewsletterJsx } from "https://esm.town/v/petermillspaugh/generateNewsletterJsx";
3import { getJune2024Newsletter } from "https://esm.town/v/petermillspaugh/june2024";
4import { email as sendEmail } from "https://esm.town/v/std/email?v=11";
5import { render } from "npm:preact-render-to-string";
6
7export function sendTestEmailNewsletter(interval: Interval) {
