stars on homepage + a heap of docs changes

app/(home)/page.tsx

@@ -5,6 +5,9 @@ import { PropsWithChildren } from "react";
 import spectaLogo from "../../public/images/logo.png";
 import rspcLogo from "../../public/images/rspc-logo.png";
 import tauriSpectaLogo from "../../public/images/tauri-specta-logo.png";
+import Script from "next/script";
+
+export const revalidate = 3600;
 
 export default function HomePage() {
   return (
@@ -40,6 +43,7 @@ export default function HomePage() {
             documentation="docs.io"
             documentationHref="https://docs.rs/specta"
             packageManagerHref="https://crates.io/crates/specta"
+            starButtonFor="specta-rs/specta"
           >
             Export your Rust types to any language!
           </HeroItem>
@@ -51,6 +55,7 @@ export default function HomePage() {
             githubHref="https://github.com/specta-rs/rspc"
             documentationHref="/docs/rspc"
             packageManagerHref="https://crates.io/crates/rspc"
+            starButtonFor="specta-rs/rspc"
           >
             A framework for building typesafe web backends in Rust
           </HeroItem>
@@ -61,7 +66,8 @@ export default function HomePage() {
             logoAlt="Tauri Specta Logo"
             githubHref="https://github.com/specta-rs/tauri-specta"
             documentationHref="/docs/tauri-specta"
-            packageManagerHref="https://crates.io/crates/rspc"
+            packageManagerHref="https://crates.io/crates/tauri-specta"
+            starButtonFor="specta-rs/tauri-specta"
           >
             Completely typesafe Tauri commands and events
           </HeroItem>
@@ -71,7 +77,7 @@ export default function HomePage() {
   );
 }
 
-function HeroItem(
+async function HeroItem(
   props: PropsWithChildren<{
     name: string;
     logoHref?: string;
@@ -81,8 +87,14 @@ function HeroItem(
     documentationHref?: string;
     packageManager?: string;
     packageManagerHref?: string;
+    starButtonFor: string;
   }>,
 ) {
+  const resp = await fetch(
+    `https://api.github.com/repos/${props.starButtonFor}`,
+  );
+  const stars = resp.ok ? (await resp.json()).stargazers_count : 0;
+
   return (
     <div className="bg-neutral-50 dark:bg-[#171717] rounded-lg flex flex-row items-center py-6 px-3 md:px-6 gap-4 md:gap-8 lg:p-8 focus-visible:scale-105 shadow">
       {props.logoHref && (
@@ -97,7 +109,14 @@ function HeroItem(
       )}
 
       <div className="flex flex-col flex-1 gap-2">
-        <h2 className="text-xl lg:text-3xl tracking-tight">{props.name}</h2>
+        <div className="flex justify-between">
+          <h2 className="text-xl lg:text-3xl tracking-tight">{props.name}</h2>
+          <div>
+            {props.githubHref && (
+              <GitHubStarButton href={props.githubHref} stars={stars} />
+            )}
+          </div>
+        </div>
         <p className="text-slate-800 dark:text-slate-200 font-semibold text-sm lg:text-base">
           {props.children}
         </p>
@@ -115,8 +134,6 @@ function HeroItem(
             </Link>
           ) : null}
 
-          {/* <div className="flex-1" /> */}
-
           {props.packageManagerHref ? (
             <a href={props.packageManagerHref} className="hover:underline">
               {props.packageManager || "crates.io"}
@@ -127,3 +144,28 @@ function HeroItem(
     </div>
   );
 }
+
+function GitHubStarButton(props: { href: string; stars: number }) {
+  // TODO: It would be nice to show this on mobile too. Right now it's hidden.
+  return (
+    <a
+      className="rounded-sm px-2 py-0.5 flex flex-row items-center bg-neutral-200 border-2 border-neutral-300 text-black dark:bg-neutral-800 dark:text-white dark:border-neutral-700 max-[500px]:hidden"
+      href={props.href}
+    >
+      <svg
+        aria-hidden="true"
+        height="16"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        fill="currentColor"
+        data-view-component="true"
+        className="octicon octicon-star d-inline-block mr-1"
+      >
+        <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path>
+      </svg>
+
+      <span className="">{props.stars.toLocaleString()}</span>
+    </a>
+  );
+}

app/docs/layout.tsx

@@ -1,7 +1,7 @@
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import type { ReactNode } from 'react';
-import { baseOptions } from '@/app/layout.config';
-import { source } from '@/lib/source';
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import type { ReactNode } from "react";
+import { baseOptions } from "@/app/layout.config";
+import { source } from "@/lib/source";
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (

app/layout.config.tsx

@@ -1,8 +1,16 @@
 import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
 import { SiteLogo } from "./(home)/SiteLogo";
+import { Banner } from "fumadocs-ui/components/banner";
 
 export const baseOptions: BaseLayoutProps = {
   nav: {
     title: <SiteLogo className="-my-[6px] mx-1" />,
+    // TODO: Remove this once the docs are more stable.
+    component: (
+      <Banner>
+        <b className="mr-1">WARNING:</b> These docs are a work in progress! Some
+        sections are incomplete or incorrect.
+      </Banner>
+    ),
   },
 };

app/layout.tsx

@@ -9,7 +9,6 @@ const inter = Inter({
 });
 
 export const metadata: Metadata = {
-  metadataBase: new URL("https://specta.dev"),
   title: "specta-rs",
   description: "Rust crates for building better web apps",
   authors: [

content/docs/rspc/client/rust.mdx

@@ -0,0 +1,11 @@
+---
+title: Rust
+---
+
+<Callout type="warn">
+
+The Rust client is currently still very experimental and will likely change before it's stable release.
+
+</Callout>
+
+Coming soon...

content/docs/rspc/client/tanstack-query.mdx

@@ -0,0 +1,10 @@
+---
+title: Tanstack Query
+---
+
+Coming soon...
+
+For now you can checkout the old integrations:
+ - [React](./react)
+ - [Solid](./solid)
+ - [Svelte](./svelte)

content/docs/rspc/client/vanilla.mdx

@@ -94,3 +94,5 @@ const client = createClient<Procedures>({
 ### Websocket Authentication
 
 Guide coming soon...
+
+-- TODO: Discuss Single Flight Mutations

content/docs/rspc/index.mdx

@@ -2,22 +2,48 @@
 title: Overview
 ---
 
-rspc is a typesafe router allowing you to build end-to-end type safe APIs.
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
 
-It lets you define your backend logic in a Rust function and use the Typescript client to call it.
+rspc is a typesafe router for Rust which allows you to build end-to-end type safe APIs by generating a typesafe client to call the server from another language.
 
-Your rspc router is transport agnostic which means you can serve it from any HTTP server of your choice such as [Axum](https://github.com/tokio-rs/axum) or even from [Tauri](https://tauri.app).
+### Features
 
-## Features
+- ✅ **Typesafety** - move fast and **eliminate** a whole class of common bugs
+- ✅ **Transport Agnostic** - expose your router via [Axum](https://github.com/tokio-rs/axum), [Tauri](https://tauri.app) or any other official or custom transport.
+- ✅ **Performance** - small runtime footprint so your can get the **full potential of Rust's speed**
+- ✅ **Middleware Ecosystem** - easily extend your procedures with **auth, logging and more**
 
-- ✅ **Typesafety** - allows your team to move faster and **eliminate** a whole class of common bugs
-- ✅ **Developer experience** - you **define a function** in Rust and can **call it from the frontend** with no extra effort
-- ✅ **Minimal runtime** - small runtime footprint so your can get the **full potential of Rust's speed**
-- ✅ **Middleware** - For easily extending your procedures with **auth, logging and more**
+### Frequently Asked Questions
 
-### Production users
+<Accordions>
+  <Accordion title="Why would I use rspc over my existing web framework?">
+    Due to rspc's opinionated nature we are able to push the boundaries of developer experience and optimisations which a regular web framework is not able to.
+    Although many of rspc's features can be achieved with a regular web framework your going to end up with compromises or end up reinventing rspc instead of building your application.
 
-- [Spacedrive](https://spacedrive.com)
-- [CrabNebula Cloud](https://crabnebula.dev/cloud)
-- [Twidge](https://twidge.app)
-- [Reader](https://reader.place)
+    Big features:
+     - End to end type safety as a first-class feature.
+     - Client libraries to make calling your server from another language easy.
+     - Ecosystem of middleware for abstracting common patterns.
+     - Better compiler errors
+     - Potentially better performance due to batching and single flight mutations.
+
+  </Accordion>
+
+  <Accordion title="Who is using rspc in production?">
+
+    It is currently being used by the following projects:
+      - [Spacedrive](https://spacedrive.com)
+      - [CrabNebula Cloud](https://crabnebula.dev/cloud)
+      - [Macrograph](https://macrograph.app)
+      - [Twidge](https://github.com/twidgeapp/twidge)
+
+  </Accordion>
+
+  <Accordion title="Why would I use Rust instead of Typescript?">
+
+    Although programming language choice is generally informed by the requirements of the project and the team's experience
+    a lot of common reasons come down to the way Rust's strong type system, performance and low-level control allow you to build reliable and fast software that is able to stay maintainable for a long time.
+    rspc is great as your primary API, a microservice or even embedded into your desktop application making working with your Rust backend a breeze when you need it.
+
+  </Accordion>
+</Accordions>

content/docs/rspc/integrations/actix-web.mdx

@@ -0,0 +1,5 @@
+---
+title: Actix Web
+---
+
+TODO

content/docs/rspc/integrations/http.mdx

@@ -0,0 +1,12 @@
+---
+title: HTTP
+---
+
+TODO
+
+## TODO:
+
+ - Explain wire protocol w/ reference implementation
+ - Explain extractors and content types
+ - Using Workers, Lambda, Vercel/Netlify functions via Axum adapater
+ - Explain supporting 3rd party web frameworks & contributing them back into rspc.

content/docs/rspc/internal/advanced.mdx

@@ -0,0 +1,6 @@
+---
+title: Advanced
+---
+
+-- TOOD: Zero-copy deserialization
+-- TODO: Custom integration

content/docs/rspc/internal/index.mdx

@@ -0,0 +1,5 @@
+---
+title: Internal
+---
+
+-- TOOD: Crate structure

content/docs/rspc/meta.json

@@ -9,30 +9,36 @@
 
     "---Server---",
     "!server",
+    "./server/procedure",
     "./server/router",
-    "./server/concepts",
-    "./server/error-handling",
-    "./server/middleware",
-    "./server/plugins",
-    "./server/selection",
-    "./server/common-errors",
-    "./server/specta",
+    "./server/integrations",
 
     "---Client---",
     "!client",
     "./client/vanilla",
-    "./client/react",
-    "./client/solid",
-    "./client/svelte",
+    "./client/tanstack-query",
+    "./client/rust",
 
     "---Integrations---",
     "!integrations",
+    "./integrations/http",
     "./integrations/axum",
+    "./integrations/actix-web",
     "./integrations/tauri",
 
+    "---Middleware---",
+    "!middleware",
+    "./middleware/overview",
+    "./middleware/tracing",
+    "./middleware/cache",
+    "./middleware/zer",
+    "./middleware/invalidation",
+    "./middleware/openapi",
+
     "---External---",
     "[Prisma Client Rust](https://prisma.brendonovich.dev/extra/rspc)",
     "[docsRsLogo][crates.io](https://docs.rs/rspc)",
-    "[npmLogo][npm](https://www.npmjs.com/package/@rspc/client)"
+    "[npmLogo][npm](https://www.npmjs.com/package/@rspc/client)",
+    "!internal"
   ]
 }

content/docs/rspc/middleware/cache.mdx

@@ -0,0 +1,5 @@
+---
+title: Cache
+---
+
+# TODO

content/docs/rspc/middleware/invalidation.mdx

@@ -0,0 +1,9 @@
+---
+title: Invalidation
+---
+
+<Callout type="warn">
+
+The invalidation middleware is not yet available but we are actively working on it. Stay tuned!
+
+</Callout>

content/docs/rspc/middleware/openapi.mdx

@@ -0,0 +1,9 @@
+---
+title: OpenAPI
+---
+
+<Callout type="warn">
+
+The OpenAPI middleware is not yet available but we are actively working on it. Stay tuned!
+
+</Callout>

content/docs/rspc/server/middleware.mdx → content/docs/rspc/middleware/overview.mdx

@@ -1,5 +1,5 @@
 ---
-title: Middleware
+title: Overview
 ---
 
 <Callout>
@@ -32,10 +32,6 @@ fn main() {
 }
 ```
 
-## Route metadata
-
-Feature coming soon. Tracking in issue [#21](https://github.com/oscartbeaumont/rspc/issues/21).
-
 ## Examples
 
 ### Logger middleware

content/docs/rspc/middleware/tracing.mdx

@@ -0,0 +1,5 @@
+---
+title: Tracing
+---
+
+# TODO

content/docs/rspc/middleware/zer.mdx

@@ -0,0 +1,10 @@
+---
+title: Zer
+---
+
+# TODO
+
+Focus:
+ - Session management - Refresh token type thing
+ - OAuth
+ - Email auth???

content/docs/rspc/migrations.mdx

@@ -0,0 +1,13 @@
+---
+title: Migrations
+---
+
+You should upgrade each version of rspc in order and ensure you don't run into any issues at each step.
+
+# 0.4.0
+
+TODO: Write this out
+
+# 0.5.0
+
+TODO: Plan this out