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,39 @@ 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 = () => [
+ { 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 links: LinksFunction = () => [
- { rel: "stylesheet", href: styles },
  {
  rel: "stylesheet",
  href: "https://fonts.googleapis.com/css2?family=Kanit:wght@400&display=swap",
@@ -44,12 +45,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,
  },
  });
 }
@@ -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 },
+];