Merge pull request #6 from specta-rs/fumadocs

Fumadocs

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.github/workflows/cd.yaml

@@ -0,0 +1,32 @@
+name: CD
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Install Vercel CLI
+        run: pnpm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=${{ github.ref == 'refs/heads/main' && 'production' || 'preview' }} --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build ${{ github.ref == 'refs/heads/main' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt ${{ github.ref == 'refs/heads/main' && '--prod' || '' }} --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -1,24 +1,34 @@
-# build output
-dist/
-# generated types
-.astro/
+# deps
+/node_modules
 
-# dependencies
-node_modules/
+# generated content
+.contentlayer
+.content-collections
+.source
 
-# logs
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
 
+# others
+.env*.local
+.vercel
+next-env.d.ts
 
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
-.DS_Store
+# next-sitemap
+public/sitemap*.xml
 
-# jetbrains setting folder
-.idea/
+# Cloudflare
+.worker-next

README.md

@@ -2,7 +2,7 @@
 
 The [specta.dev](https://specta.dev) website.
 
-The site is built using [Astro](https://astro.build).
+This site is built using [Next.js](https://nextjs.org) and [Fumadocs](https://fumadocs.vercel.app).
 
 ## Usage
 

app/(home)/Navbar.tsx

@@ -0,0 +1,19 @@
+import { ThemeToggle } from "fumadocs-ui/components/layout/theme-toggle";
+import { SiteLogo } from "./SiteLogo";
+import Link from "next/link";
+
+export function Navbar() {
+  return (
+    <>
+      <div className="backdrop-blur-sm w-full h-16 px-4 flex items-center justify-between fixed top-0">
+        <Link href="/">
+          <SiteLogo />
+        </Link>
+
+        <div className="flex items-center space-x-4">
+          <ThemeToggle />
+        </div>
+      </div>
+    </>
+  );
+}

app/(home)/SiteLogo.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export function SiteLogo(props: { className?: string }) {
+  const router = useRouter();
+
+  return (
+    <h1
+      className={"font-bold text-3xl " + props.className}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        router.push("/docs/brand");
+      }}
+    >
+      specta-rs
+    </h1>
+  );
+}

app/(home)/layout.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { Navbar } from "./Navbar";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      <div className="pt-16 h-full w-full">{children}</div>
+    </>
+  );
+}

app/(home)/page.tsx

@@ -0,0 +1,128 @@
+import Link from "next/link";
+import Image from "next/image";
+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";
+
+export default function HomePage() {
+  return (
+    <div className="w-full h-full flex flex-col items-center justify-center">
+      <main className="px-4 lg:px-12 flex flex-col lg:flex-row justify-center items-center h-full gap-16">
+        <div className="flex flex-col gap-4">
+          <h1 className="text-6xl lg:text-8xl">specta-rs</h1>
+          <h2 className="text-3xl lg:text-4xl">
+            Rust crates for building better web apps
+          </h2>
+          <div className="flex space-x-4">
+            <Link href="/docs" className="hover:underline">
+              Documentation
+            </Link>
+            <a href="https://github.com/specta-rs" className="hover:underline">
+              GitHub
+            </a>
+            <a
+              href="https://discord.com/invite/JgqH8b4ycw"
+              className="hover:underline"
+            >
+              Discord
+            </a>
+          </div>
+        </div>
+
+        <div className="flex gap-4 flex-col">
+          <HeroItem
+            name="specta"
+            logoHref={spectaLogo.src}
+            logoAlt="Specta Logo"
+            githubHref="https://github.com/specta-rs/specta"
+            documentation="docs.io"
+            documentationHref="https://docs.rs/specta"
+            packageManagerHref="https://crates.io/crates/specta"
+          >
+            Export your Rust types to any language!
+          </HeroItem>
+
+          <HeroItem
+            name="rspc"
+            logoHref={rspcLogo.src}
+            logoAlt="rspc Logo"
+            githubHref="https://github.com/specta-rs/rspc"
+            documentationHref="/docs/rspc"
+            packageManagerHref="https://crates.io/crates/rspc"
+          >
+            A framework for building typesafe web backends in Rust
+          </HeroItem>
+
+          <HeroItem
+            name="tauri-specta"
+            logoHref={tauriSpectaLogo.src}
+            logoAlt="Tauri Specta Logo"
+            githubHref="https://github.com/specta-rs/tauri-specta"
+            // packageManagerHref="https://docs.rs/tauri-specta"
+            documentationHref="/docs/tauri-specta"
+            packageManagerHref="https://crates.io/crates/rspc"
+          >
+            Completely typesafe Tauri commands and events
+          </HeroItem>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+function HeroItem(
+  props: PropsWithChildren<{
+    name: string;
+    logoHref?: string;
+    logoAlt: string;
+    githubHref?: string;
+    documentation?: string;
+    documentationHref?: string;
+    packageManager?: string;
+    packageManagerHref?: string;
+  }>,
+) {
+  return (
+    <div className="bg-[#171717] rounded-lg flex flex-row items-center p-6 gap-4 lg:p-8 lg:gap-8 focus-visible:scale-105 shadow">
+      {props.logoHref && (
+        <Image
+          src={props.logoHref}
+          alt={props.logoAlt}
+          draggable="false"
+          height={64}
+          width={64}
+          className="size-24 lg:size-32 object-contain"
+        />
+      )}
+
+      <div className="flex flex-col flex-1 gap-2">
+        <h2 className="text-xl lg:text-3xl tracking-tight">{props.name}</h2>
+        <p className="text-slate-200 font-semibold text-sm lg:text-base">
+          {props.children}
+        </p>
+
+        <div className="flex space-x-3">
+          {props.githubHref ? (
+            <a href={props.githubHref} className="hover:underline">
+              GitHub
+            </a>
+          ) : null}
+
+          {props.documentationHref ? (
+            <Link href={props.documentationHref} className="hover:underline">
+              {props.documentation || "Documentation"}
+            </Link>
+          ) : null}
+
+          {props.packageManagerHref ? (
+            <a href={props.packageManagerHref} className="hover:underline">
+              {props.packageManager || "crates.io"}
+            </a>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  );
+}

app/api/search/route.ts

@@ -0,0 +1,4 @@
+import { source } from "@/lib/source";
+import { createFromSource } from "fumadocs-core/search/server";
+
+export const { GET } = createFromSource(source);

app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,56 @@
+import { source } from "@/lib/source";
+import {
+  DocsPage,
+  DocsBody,
+  DocsDescription,
+  DocsTitle,
+} from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+
+  return (
+    <DocsPage
+      toc={page.data.toc}
+      full={page.data.full}
+      lastUpdate={page.data.lastModified}
+      editOnGithub={{
+        repo: "website",
+        owner: "specta-rs",
+        sha: "main",
+        path: `content/docs/${page.file.path}`,
+      }}
+    >
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX components={{ ...defaultMdxComponents }} />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}

app/docs/layout.tsx

@@ -0,0 +1,12 @@
+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 (
+    <DocsLayout tree={source.pageTree} {...baseOptions}>
+      {children}
+    </DocsLayout>
+  );
+}

app/global.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    background-image: linear-gradient(to bottom, transparent 90%, #171717 10%),
+        linear-gradient(to right, #171717 90%, #2e2e2e 10%);
+
+    background-size:
+        5px 5px,
+        5px 5px;
+
+    font-family: "Raleway", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 600;
+    font-style: normal;
+}