Adapt Superflare to work with Wrangler 3 and Remix v2 (vite compiler)

.github/workflows/publish-snapshot.yml

@@ -21,4 +21,4 @@ jobs:
       - name: Build
         run: pnpm build
 
-      - run: pnpx pkg-pr-new publish --compact './packages/superflare' './packages/superflare-remix'
+      - run: pnpx pkg-pr-new publish './packages/superflare' './packages/superflare-remix'

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.dev.vars
 
 # turbo
 .turbo

.nvmrc

@@ -1 +1 @@
-16.13.0
+20

apps/site/.env.example

@@ -1,3 +1,3 @@
-NEXT_PUBLIC_DOCSEARCH_APP_ID=RETR9S9VHS
-NEXT_PUBLIC_DOCSEARCH_API_KEY=326c1723a310dfe29004b47608709907
-NEXT_PUBLIC_DOCSEARCH_INDEX_NAME=tailwindui-protocol
+DOCSEARCH_APP_ID=RETR9S9VHS
+DOCSEARCH_API_KEY=326c1723a310dfe29004b47608709907
+DOCSEARCH_INDEX_NAME=tailwindui-protocol

apps/site/README.md

@@ -8,7 +8,7 @@ To get started with this template, first install the npm dependencies:
 
 ```bash
 npm install
-cp .env.example .env.local
+cp .env.example .dev.vars
 ```
 
 Next, run the development server:
@@ -28,9 +28,9 @@ You can start editing this template by modifying the files in the `/src` folder.
 By default this template uses [Algolia DocSearch](https://docsearch.algolia.com) for the global search. DocSearch is free for open-source projects, and you can sign up for an account on their website. Once your DocSearch account is ready, update the following [environment variables](https://nextjs.org/docs/basic-features/environment-variables) in your project with the values provided by Algolia:
 
 ```
-NEXT_PUBLIC_DOCSEARCH_APP_ID=
-NEXT_PUBLIC_DOCSEARCH_API_KEY=
-NEXT_PUBLIC_DOCSEARCH_INDEX_NAME=
+DOCSEARCH_APP_ID=
+DOCSEARCH_API_KEY=
+DOCSEARCH_INDEX_NAME=
 ```
 
 ## License

apps/site/app/components/Button.tsx

@@ -8,21 +8,27 @@ const styles = {
     "rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400",
 };
 
-export function Button({
+export function Button<Href extends string>({
   variant = "primary",
   className,
   href,
   ...props
-}: {
+}: Omit<
+  React.ComponentProps<Href extends string ? typeof Link : "button">,
+  "to"
+> & {
   variant?: keyof typeof styles;
   className?: string;
-  href?: string;
-} & React.ComponentProps<"button" | typeof Link>) {
+  href?: Href;
+}) {
   className = clsx(styles[variant], className);
 
   return href ? (
-    <Link to={href} className={className} {...props} />
+    <Link {...props} to={href} className={className} />
   ) : (
-    <button className={className} {...props} />
+    <button
+      {...(props as React.ComponentProps<"button">)}
+      className={className}
+    />
   );
 }

apps/site/app/components/Fence.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from "react";
-import Highlight, { defaultProps, type Language } from "prism-react-renderer";
+import { Highlight, type Language } from "prism-react-renderer";
 
 export function Fence({
   children,
@@ -9,12 +9,7 @@ export function Fence({
   language: Language;
 }) {
   return (
-    <Highlight
-      {...defaultProps}
-      code={children.trimEnd()}
-      language={language}
-      theme={undefined}
-    >
+    <Highlight code={children.trimEnd()} language={language} theme={undefined}>
       {({ className, style, tokens, getTokenProps }) => (
         <pre className={className} style={style}>
           <code>

apps/site/app/components/Hero.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useState } from "react";
 import clsx from "clsx";
-import Highlight, { defaultProps } from "prism-react-renderer";
+import { Highlight } from "prism-react-renderer";
 
 import { Button } from "~/components/Button";
 import { HeroBackground } from "~/components/HeroBackground";
@@ -153,7 +153,6 @@ export function Hero() {
                       ))}
                     </div>
                     <Highlight
-                      {...defaultProps}
                       code={activeTab.code}
                       language={codeLanguage}
                       theme={undefined}

apps/site/app/components/QuickLinks.jsx

@@ -1,6 +1,6 @@
 import { Link } from "@remix-run/react";
 
-import { Icon } from "~/components/Icon";
+import { Icon } from "./Icon";
 
 export function QuickLinks({ children }) {
   return (

apps/site/app/components/icons/InstallationIcon.jsx

@@ -1,4 +1,4 @@
-import { DarkMode, Gradient, LightMode } from "~/components/Icon";
+import { DarkMode, Gradient, LightMode } from "../Icon";
 
 export function InstallationIcon({ id, color }) {
   return (

apps/site/app/components/icons/LightbulbIcon.jsx

@@ -1,4 +1,4 @@
-import { DarkMode, Gradient, LightMode } from "~/components/Icon";
+import { DarkMode, Gradient, LightMode } from "../Icon";
 
 export function LightbulbIcon({ id, color }) {
   return (

apps/site/app/components/icons/PluginsIcon.jsx

@@ -1,4 +1,4 @@
-import { DarkMode, Gradient, LightMode } from "~/components/Icon";
+import { DarkMode, Gradient, LightMode } from "../Icon";
 
 export function PluginsIcon({ id, color }) {
   return (

apps/site/app/components/icons/PresetsIcon.jsx

@@ -1,4 +1,4 @@
-import { DarkMode, Gradient, LightMode } from "~/components/Icon";
+import { DarkMode, Gradient, LightMode } from "../Icon";
 
 export function PresetsIcon({ id, color }) {
   return (

apps/site/app/components/icons/ThemingIcon.jsx

@@ -1,4 +1,4 @@
-import { DarkMode, Gradient, LightMode } from "~/components/Icon";
+import { DarkMode, Gradient, LightMode } from "../Icon";
 
 export function ThemingIcon({ id, color }) {
   return (

apps/site/app/components/icons/WarningIcon.jsx

@@ -1,4 +1,4 @@
-import { DarkMode, Gradient, LightMode } from "~/components/Icon";
+import { DarkMode, Gradient, LightMode } from "../Icon";
 
 export function WarningIcon({ id, color }) {
   return (

apps/site/app/docs.server.ts

@@ -1,8 +1,8 @@
-import type { RenderableTreeNode } from "@markdoc/markdoc";
+import type { RenderableTreeNode, Schema, Tag } from "@markdoc/markdoc";
+import Markdoc, { nodes as defaultNodes } from "@markdoc/markdoc";
 import { slugifyWithCounter } from "@sindresorhus/slugify";
-import { TableOfContents } from "./components/Layout";
 import yaml from "js-yaml";
-import Markdoc, { nodes as defaultNodes } from "@markdoc/markdoc";
+import { type TableOfContents } from "./components/Layout";
 
 const DOCS_PORT = 3123;
 
@@ -79,7 +79,7 @@ export type Manifest = ManifestEntry[];
 export async function getManifest(
   gitHubToken: string,
   useGitHub: boolean
-): Promise<Manifest> {
+): Promise<Manifest | null> {
   const manifest = useGitHub
     ? await getDocsForPathFromGitHub("manifest.json", gitHubToken)
     : await getDocsForPathFromLocal("manifest.json");
@@ -88,14 +88,17 @@ export async function getManifest(
   return JSON.parse(manifest);
 }
 
-function getNodeText(node: RenderableTreeNode) {
+function getNodeText(renderableNode: RenderableTreeNode) {
+  if (typeof renderableNode === "string") return renderableNode;
+  if (!renderableNode || typeof renderableNode !== "object") return "";
   let text = "";
-  if (typeof node === "string" || !node) return text;
+  let node = renderableNode as Tag;
   for (let child of node.children ?? []) {
     if (typeof child === "string") {
       text += child;
+    } else {
+      text += getNodeText(child);
     }
-    text += getNodeText(child);
   }
   return text;
 }
@@ -104,27 +107,31 @@ export function collectHeadings(
   nodes: RenderableTreeNode[],
   slugify = slugifyWithCounter()
 ): TableOfContents {
-  let sections = [];
+  let sections: TableOfContents = [];
+
+  for (let renderableNode of nodes) {
+    if (!renderableNode || typeof renderableNode !== "object") {
+      continue;
+    }
+
+    let node = renderableNode as Tag;
 
-  for (let node of nodes) {
-    if (!node || typeof node !== "object") continue;
     if (node.name === "h2" || node.name === "h3") {
       let title = getNodeText(node);
       if (title) {
         let id = slugify(title);
-        node.attributes.id = id;
+        let attributes = { children: [], ...node.attributes, id, title };
         if (node.name === "h3") {
-          if (!sections[sections.length - 1]) {
+          let previousSection = sections[sections.length - 1];
+          if (!previousSection) {
             throw new Error(
               "Cannot add `h3` to table of contents without a preceding `h2`"
             );
           }
-          sections[sections.length - 1].children.push({
-            ...node.attributes,
-            title,
-          });
+          (previousSection.children as TableOfContents).push(attributes);
         } else {
-          sections.push({ ...node.attributes, title, children: [] });
+          attributes.children = [];
+          sections.push(attributes);
         }
       }
     }
@@ -136,10 +143,11 @@ export function collectHeadings(
 }
 
 export interface Frontmatter {
+  description?: string;
   title: string;
 }
 
-const tags = {
+const tags: Record<string, Schema> = {
   callout: {
     attributes: {
       title: { type: String },
@@ -205,7 +213,9 @@ export function parseMarkdoc(markdown: string) {
 
   let tableOfContents =
     content && typeof content !== "string"
-      ? collectHeadings(Array.isArray(content) ? content : content.children)
+      ? collectHeadings(
+          Array.isArray(content) ? content : (content as Tag).children
+        )
       : [];
 
   return { content, frontmatter, tableOfContents, title, description };

apps/site/app/root.tsx

@@ -2,38 +2,38 @@ import {
   json,
   type LinksFunction,
   type MetaFunction,
-  type LoaderArgs,
+  type LoaderFunctionArgs,
 } from "@remix-run/cloudflare";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
   useLoaderData,
 } from "@remix-run/react";
-import styles from "./styles/tailwind.css";
 import "focus-visible";
+import "./styles/tailwind.css";
 
-export const meta: MetaFunction = () => ({
-  charset: "utf-8",
-  title: "Superflare",
-  "twitter:title": "Superflare",
-  viewport: "width=device-width,initial-scale=1",
-  description:
-    "Superflare is a full-stack toolkit for building applications on Cloudflare Workers.",
-  "twitter:description":
-    "Superflare is a full-stack toolkit for building applications on Cloudflare Workers.",
-  "twitter:card": "summary_large_image",
-  "twitter:creator": "@jplhomer",
-  "og:type": "website",
-  "og:image": "https://superflare.dev/superflare-og.jpg",
-  "twitter:image": "https://superflare.dev/superflare-og.jpg",
-});
+export const meta: MetaFunction = () => [
+  { title: "Superflare", "twitter:title": "Superflare" },
+  { viewport: "width=device-width,initial-scale=1" },
+  {
+    description:
+      "Superflare is a full-stack toolkit for building applications on Cloudflare Workers.",
+  },
+  {
+    "twitter:description":
+      "Superflare is a full-stack toolkit for building applications on Cloudflare Workers.",
+  },
+  { "twitter:card": "summary_large_image" },
+  { "twitter:creator": "@jplhomer" },
+  { "og:type": "website" },
+  { "og:image": "https://superflare.dev/superflare-og.jpg" },
+  { "twitter:image": "https://superflare.dev/superflare-og.jpg" },
+];
 
 export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: styles },
   {
     rel: "stylesheet",
     href: "https://fonts.googleapis.com/css2?family=Kanit:wght@400&display=swap",
@@ -44,12 +44,12 @@ export const links: LinksFunction = () => [
   },
 ];
 
-export async function loader({ context: { env } }: LoaderArgs) {
+export async function loader({ context: { cloudflare } }: LoaderFunctionArgs) {
   return json({
     ENV: {
-      DOCSEARCH_APP_ID: env.DOCSEARCH_APP_ID,
-      DOCSEARCH_API_KEY: env.DOCSEARCH_API_KEY,
-      DOCSEARCH_INDEX_NAME: env.DOCSEARCH_INDEX_NAME,
+      DOCSEARCH_APP_ID: cloudflare.env.DOCSEARCH_APP_ID,
+      DOCSEARCH_API_KEY: cloudflare.env.DOCSEARCH_API_KEY,
+      DOCSEARCH_INDEX_NAME: cloudflare.env.DOCSEARCH_INDEX_NAME,
     },
   });
 }
@@ -97,6 +97,7 @@ export default function App() {
   return (
     <html lang="en" className="antialiased [font-feature-settings:'ss01']">
       <head>
+        <meta charSet="utf-8" />
         <Meta />
         <Links />
         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
@@ -110,7 +111,6 @@ export default function App() {
         />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

apps/site/app/routes/$.tsx

@@ -1,10 +1,17 @@
 import { MetaFunction } from "@remix-run/react/dist/routeModules";
 
-export { default, loader } from "./index";
-
-export const meta: MetaFunction = ({ data }) => ({
-  title: data?.title ? `${data.title} - Superflare` : "Superflare",
-  "twitter:title": data?.title ? `${data.title} - Superflare` : "Superflare",
-  description: data?.description,
-  "twitter:description": data?.description,
-});
+import { loader as indexLoader } from "./_index";
+
+export { default } from "./_index";
+
+export const loader = indexLoader;
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => [
+  {
+    title: data?.title ? `${data.title} - Superflare` : "Superflare",
+  },
+  {
+    "twitter:title": data?.title ? `${data.title} - Superflare` : "Superflare",
+  },
+  { description: data?.description, "twitter:description": data?.description },
+];