├── .prettierrc ├── convex.json ├── src ├── vite-env.d.ts ├── components │ ├── Code.tsx │ ├── SignIn │ │ ├── SignInMethodDivider.tsx │ │ ├── SignInDialog.tsx │ │ └── SignInForm.tsx │ ├── Toolbar.tsx │ ├── Markdown.tsx │ ├── ThemeToggle.tsx │ ├── ui │ │ ├── label.tsx │ │ ├── textarea.tsx │ │ ├── input.tsx │ │ ├── toaster.tsx │ │ ├── switch.tsx │ │ ├── toggle.tsx │ │ ├── scroll-area.tsx │ │ ├── toggle-group.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── dialog.tsx │ │ ├── use-toast.ts │ │ ├── form.tsx │ │ ├── toast.tsx │ │ └── dropdown-menu.tsx │ ├── PageTitle.tsx │ ├── Search.tsx │ ├── GetStarted │ │ ├── ConvexLogo.tsx │ │ └── GetStartedDialog.tsx │ ├── UserMenu.tsx │ ├── Author │ │ ├── Profile.tsx │ │ └── Edit.tsx │ ├── PageLayout.tsx │ ├── Blog │ │ ├── History.tsx │ │ ├── Post.tsx │ │ └── Edit.tsx │ └── Inputs.tsx ├── pages │ ├── __layout │ │ ├── about.tsx │ │ ├── __authed │ │ │ ├── new.tsx │ │ │ ├── authors.$user.edit.tsx │ │ │ └── $slug.edit.tsx │ │ ├── authors │ │ │ ├── index.tsx │ │ │ └── $user.tsx │ │ ├── __authed.tsx │ │ ├── index.tsx │ │ └── $slug.tsx │ └── __layout.tsx ├── main.tsx ├── index.css └── lib │ └── utils.ts ├── postcss.config.js ├── convex ├── auth.config.ts ├── crons.ts ├── _generated │ ├── api.js │ ├── api.d.ts │ ├── dataModel.d.ts │ ├── server.js │ └── server.d.ts ├── http.ts ├── tsconfig.json ├── auth.ts ├── sharp.ts ├── versions.ts ├── images.ts ├── users.ts ├── README.md ├── schema.ts ├── posts.ts └── data.ts ├── tsconfig.json ├── vercel.json ├── .gitignore ├── tsconfig.node.json ├── components.json ├── vite.config.ts ├── tsconfig.app.json ├── README.md ├── .github └── workflows │ └── github-pages.yml ├── public └── assets │ └── convex.svg ├── .eslintrc.cjs ├── index.html ├── package.json ├── tailwind.config.js ├── setup.mjs └── LICENSE.txt /.prettierrc: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /convex.json: -------------------------------------------------------------------------------- 1 | { 2 | "node": { 3 | "externalPackages": [ 4 | "sharp" 5 | ] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /convex/auth.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | providers: [ 3 | { 4 | domain: process.env.CONVEX_SITE_URL, 5 | applicationID: "convex", 6 | }, 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.app.json" 6 | }, 7 | { 8 | "path": "./tsconfig.node.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "rewrites": [ 3 | { 4 | "source": "/cms-demo(.*)", 5 | "destination": "/cms-demo" 6 | }, 7 | { 8 | "source": "/(.*)", 9 | "destination": "/" 10 | } 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /src/components/Code.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react"; 2 | 3 | export const Code = ({ children }: { children: ReactNode }) => { 4 | return ( 5 |


 6 |       {children}
 7 |

8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /convex/crons.ts: -------------------------------------------------------------------------------- 1 | import { cronJobs } from "convex/server"; 2 | import { internal } from "./_generated/api"; 3 | 4 | const crons = cronJobs(); 5 | 6 | crons.daily( 7 | "Reset all tables to initial dataset", 8 | { hourUTC: 7, minuteUTC: 0 }, 9 | internal.data.reset, 10 | ); 11 | 12 | export default crons; 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 5 | "skipLibCheck": true, 6 | "module": "ESNext", 7 | "moduleResolution": "bundler", 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "noEmit": true 11 | }, 12 | "include": ["vite.config.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "src/index.css", 9 | "baseColor": "stone", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/pages/__layout/about.tsx: -------------------------------------------------------------------------------- 1 | import { GetStartedContent } from "@/components/GetStarted/GetStartedDialog"; 2 | import { PageTitle } from "@/components/PageTitle"; 3 | 4 | export default function AboutPage() { 5 | return ( 6 |

7 | 11 | 12 |

13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /src/components/SignIn/SignInMethodDivider.tsx: -------------------------------------------------------------------------------- 1 | export function SignInMethodDivider() { 2 | return ( 3 |

4 |

5 | 6 |

7 |

8 | 9 | Or continue with 10 | 11 |

12 |

13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /src/components/Toolbar.tsx: -------------------------------------------------------------------------------- 1 | import { Authenticated } from "convex/react"; 2 | import type { ReactNode } from "react"; 3 | 4 | export function Toolbar({ children }: { children?: ReactNode }) { 5 | return ( 6 |

7 | 8 |

9 |

{children}

10 |

11 | 12 |

13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /src/pages/__layout.tsx: -------------------------------------------------------------------------------- 1 | import { Outlet } from "react-router-dom"; 2 | import { Toaster } from "@/components/ui/toaster"; 3 | import { Footer, Header } from "@/components/PageLayout"; 4 | 5 | export default function Layout() { 6 | return ( 7 |

8 |

9 |

10 | 11 | 12 |

13 |

15 | ); 16 | } 17 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import path from "path"; 4 | import Pages from "vite-plugin-pages"; 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [react(), Pages({ routeStyle: "remix" })], 9 | resolve: { 10 | alias: { 11 | "@": path.resolve(__dirname, "./src"), 12 | }, 13 | }, 14 | esbuild: { 15 | platform: 'node', 16 | }, 17 | build: { 18 | sourcemap: true, 19 | }, 20 | }); 21 | -------------------------------------------------------------------------------- /src/pages/__layout/__authed/new.tsx: -------------------------------------------------------------------------------- 1 | import { Authenticated, Unauthenticated } from "convex/react"; 2 | 3 | import { EditablePost } from "@/components/Blog/Edit"; 4 | 5 | export default function NewPostPage() { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | {/* Should never get here, but just in case */} 13 | Sign in as an editor to access this page 14 | 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /convex/_generated/api.js: -------------------------------------------------------------------------------- 1 | /* prettier-ignore-start */ 2 | 3 | /* eslint-disable */ 4 | /** 5 | * Generated `api` utility. 6 | * 7 | * THIS CODE IS AUTOMATICALLY GENERATED. 8 | * 9 | * To regenerate, run `npx convex dev`. 10 | * @module 11 | */ 12 | 13 | import { anyApi } from "convex/server"; 14 | 15 | /** 16 | * A utility for referencing Convex functions in your app's API. 17 | * 18 | * Usage: 19 | * ```js 20 | * const myFunctionReference = api.myModule.myFunction; 21 | * ``` 22 | */ 23 | export const api = anyApi; 24 | export const internal = anyApi; 25 | 26 | /* prettier-ignore-end */ 27 | -------------------------------------------------------------------------------- /src/pages/__layout/authors/index.tsx: -------------------------------------------------------------------------------- 1 | import { useQuery } from "convex/react"; 2 | import { api } from "../../../../convex/_generated/api"; 3 | import { Message, PageTitle } from "@/components/PageTitle"; 4 | import { AuthorsList } from "@/components/Author/Profile"; 5 | 6 | export default function AuthorsPage() { 7 | const users = useQuery(api.users.listAuthors); 8 | 9 | return ( 10 | <> 11 |

12 | 13 |

14 | {users === undefined ? ( 15 | 16 | ) : ( 17 | 18 | )} 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /convex/http.ts: -------------------------------------------------------------------------------- 1 | import { httpRouter } from "convex/server"; 2 | import { auth } from "./auth"; 3 | import { httpAction } from "./_generated/server"; 4 | 5 | const http = httpRouter(); 6 | 7 | auth.addHttpRoutes(http); 8 | 9 | http.route({ 10 | pathPrefix: "/", 11 | method: "GET", 12 | handler: httpAction(async (_, request) => { 13 | const { 14 | body: { storageId }, 15 | } = await request.json(); 16 | 17 | console.log(`received request.url ${request.url}`); 18 | console.log(`received request.body.storageId ${storageId}`); 19 | 20 | return new Response(null, { 21 | status: 200, 22 | }); 23 | }), 24 | }); 25 | 26 | export default http; 27 | -------------------------------------------------------------------------------- /src/components/SignIn/SignInDialog.tsx: -------------------------------------------------------------------------------- 1 | import { SignInForm } from "./SignInForm"; 2 | import { Button } from "../ui/button"; 3 | import { 4 | Dialog, 5 | DialogClose, 6 | DialogContent, 7 | DialogTitle, 8 | DialogTrigger, 9 | } from "../ui/dialog"; 10 | 11 | export function SignInDialog() { 12 | return ( 13 | 25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/components/Markdown.tsx: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | import Markdown from "react-markdown"; 3 | import rehypeHighlight from "rehype-highlight"; 4 | import remarkGfm from "remark-gfm"; 5 | 6 | export function StyledContent({ children }: { children: ReactNode }) { 7 | return ( 8 |

9 | {children} 10 |

11 | ); 12 | } 13 | 14 | export function StyledMarkdown({ content }: { content: string }) { 15 | return ( 16 | 17 | 18 | {content} 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/pages/__layout/__authed.tsx: -------------------------------------------------------------------------------- 1 | import { Authenticated, AuthLoading, Unauthenticated } from "convex/react"; 2 | import { Navigate, Outlet, useLocation } from "react-router-dom"; 3 | 4 | export default function Authed() { 5 | return ( 6 | <> 7 | 8 |

9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | 20 | function GoBack() { 21 | const { pathname } = useLocation(); 22 | const segments = pathname.split("/"); 23 | const previous = segments.slice(0, -1).join("/"); 24 | return ; 25 | } 26 | -------------------------------------------------------------------------------- /src/components/ThemeToggle.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; 4 | import { DesktopIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons"; 5 | import { useTheme } from "next-themes"; 6 | 7 | export function ThemeToggle() { 8 | const { theme, setTheme } = useTheme(); 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as LabelPrimitive from "@radix-ui/react-label"; 3 | import { cva, type VariantProps } from "class-variance-authority"; 4 | 5 | import { cn } from "@/lib/utils"; 6 | 7 | const labelVariants = cva( 8 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", 9 | ); 10 | 11 | const Label = React.forwardRef< 12 | React.ElementRef, 13 | React.ComponentPropsWithoutRef & 14 | VariantProps 15 | >(({ className, ...props }, ref) => ( 16 | 21 | )); 22 | Label.displayName = LabelPrimitive.Root.displayName; 23 | 24 | export { Label }; 25 | -------------------------------------------------------------------------------- /convex/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | /* This TypeScript project config describes the environment that 3 | * Convex functions run in and is used to typecheck them. 4 | * You can modify it, but some settings required to use Convex. 5 | */ 6 | "compilerOptions": { 7 | /* These settings are not required by Convex and can be modified. */ 8 | "allowJs": true, 9 | "strict": true, 10 | "moduleResolution": "Bundler", 11 | "jsx": "react-jsx", 12 | "skipLibCheck": true, 13 | "allowSyntheticDefaultImports": true, 14 | /* These compiler options are required by Convex */ 15 | "target": "ESNext", 16 | "lib": ["ES2021", "dom"], 17 | "forceConsistentCasingInFileNames": true, 18 | "module": "ESNext", 19 | "isolatedModules": true, 20 | "noEmit": true 21 | }, 22 | "include": ["./**/*"], 23 | "exclude": ["./_generated"] 24 | } 25 | -------------------------------------------------------------------------------- /src/components/PageTitle.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { useLocation } from "react-router-dom"; 3 | 4 | export function PageTitle({ 5 | title, 6 | tagline, 7 | }: { 8 | title: string; 9 | tagline?: string; 10 | }) { 11 | const location = useLocation; 12 | useEffect(() => { 13 | document.title = `Convex Blog${title ? ` | ${title}` : ""}`; 14 | }, [location, title]); 15 | 16 | return ( 17 |

18 | {title && ( 19 |

20 | {title} 21 |

22 | )} 23 | {tagline && ( 24 |

{tagline}

25 | )} 26 |

27 | ); 28 | } 29 | 30 | export function Message({ text }: { text: string }) { 31 | return

{text}

; 32 | } 33 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { cn } from "@/lib/utils"; 4 | 5 | export interface TextareaProps 6 | extends React.TextareaHTMLAttributes {} 7 | 8 | const Textarea = React.forwardRef( 9 | ({ className, ...props }, ref) => { 10 | return ( 11 |

19 |     );
20 |   },
21 | );
22 | Textarea.displayName = "Textarea";
23 | 
24 | export { Textarea };
25 |

--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
15 |           className,
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     );
21 |   },
22 | );
23 | Input.displayName = "Input";
24 | 
25 | export { Input };
26 |

--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Toast,
 3 |   ToastClose,
 4 |   ToastDescription,
 5 |   ToastProvider,
 6 |   ToastTitle,
 7 |   ToastViewport,
 8 | } from "@/components/ui/toast";
 9 | import { useToast } from "@/components/ui/use-toast";
10 | 
11 | export function Toaster() {
12 |   const { toasts } = useToast();
13 | 
14 |   return (
15 |     <ToastProvider>
16 |       {toasts.map(function ({ id, title, description, action, ...props }) {
17 |         return (
18 |           <Toast key={id} {...props}>
19 |             <div className="grid gap-1">
20 |               {title && <ToastTitle>{title}</ToastTitle>}
21 |               {description && (
22 |                 <ToastDescription>{description}</ToastDescription>
23 |               )}
24 |             </div>
25 |             {action}
26 |             <ToastClose />
27 |           </Toast>
28 |         );
29 |       })}
30 |       <ToastViewport />
31 |     </ToastProvider>
32 |   );
33 | }
34 |

--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 5 |     "target": "ESNext",
 6 |     "useDefineForClassFields": true,
 7 |     "lib": [
 8 |       "ESNext",
 9 |       "DOM",
10 |       "DOM.Iterable"
11 |     ],
12 |     "module": "ESNext",
13 |     "skipLibCheck": true,
14 |     /* Bundler mode */
15 |     "moduleResolution": "bundler",
16 |     "allowImportingTsExtensions": true,
17 |     "resolveJsonModule": true,
18 |     "isolatedModules": true,
19 |     "moduleDetection": "force",
20 |     "noEmit": true,
21 |     "jsx": "react-jsx",
22 |     /* Linting */
23 |     "strict": true,
24 |     "noUnusedLocals": true,
25 |     "noUnusedParameters": true,
26 |     "noFallthroughCasesInSwitch": true,
27 |     /* Import paths */
28 |     "paths": {
29 |       "@/*": [
30 |         "./src/*"
31 |       ]
32 |     }
33 |   },
34 |   "include": [
35 |     "src",
36 |     "convex"
37 |   ]
38 | }

--------------------------------------------------------------------------------
/src/pages/__layout/__authed/authors.$user.edit.tsx:
--------------------------------------------------------------------------------
 1 | import { Message } from "@/components/PageTitle";
 2 | import { useQuery } from "convex/react";
 3 | import { useParams } from "react-router-dom";
 4 | import { api } from "../../../../convex/_generated/api";
 5 | import { EditableProfile } from "@/components/Author/Edit";
 6 | 
 7 | export default function EditUserPage() {
 8 |   const { user: userSlug } = useParams();
 9 | 
10 |   const user = useQuery(
11 |     api.users.bySlug,
12 |     userSlug
13 |       ? {
14 |           slug: userSlug,
15 |         }
16 |       : "skip",
17 |   );
18 |   const viewer = useQuery(api.users.viewer);
19 | 
20 |   if (user === undefined || viewer === undefined)
21 |     return <Message text="Loading..." />;
22 |   if (user == null) return <Message text="Not found" />;
23 |   if (viewer === null || viewer._id !== user._id) {
24 |     // Should never get here, but just in case
25 |     return (
26 |       <Message text="You do not have permission to edit this user's profile." />
27 |     );
28 |   }
29 | 
30 |   return <EditableProfile user={user} />;
31 | }
32 |

--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import { ConvexAuthProvider } from "@convex-dev/auth/react";
 2 | import React from "react";
 3 | import ReactDOM from "react-dom/client";
 4 | import { ThemeProvider } from "next-themes";
 5 | import { ConvexReactClient } from "convex/react";
 6 | import { BrowserRouter, useRoutes } from "react-router-dom";
 7 | import Layout from "@/pages/__layout";
 8 | import "./index.css";
 9 | 
10 | //@ts-expect-error using react pages
11 | import routes from "~react-pages";
12 | 
13 | const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
14 | 
15 | export function RouterApp() {
16 |   return (
17 |     <React.Suspense fallback={Layout()}>{useRoutes(routes)}</React.Suspense>
18 |   );
19 | }
20 | 
21 | ReactDOM.createRoot(document.getElementById("root")!).render(
22 |   <React.StrictMode>
23 |     <ThemeProvider attribute="class">
24 |       <BrowserRouter basename={import.meta.env.VITE_BASEPATH}>
25 |         <ConvexAuthProvider client={convex}>
26 |           <RouterApp />
27 |         </ConvexAuthProvider>
28 |       </BrowserRouter>
29 |     </ThemeProvider>
30 |   </React.StrictMode>,
31 | );
32 |

--------------------------------------------------------------------------------
/convex/auth.ts:
--------------------------------------------------------------------------------
 1 | import GitHub from "@auth/core/providers/github";
 2 | import Resend from "@auth/core/providers/resend";
 3 | import { convexAuth } from "@convex-dev/auth/server";
 4 | 
 5 | export const { auth, signIn, signOut, store } = convexAuth({
 6 |   providers: [GitHub, Resend],
 7 |   callbacks: {
 8 |     async redirect(params) {
 9 |       console.log(params);
10 |       if (!params.redirectTo) {
11 |         if (!process.env.SITE_URL) {
12 |           throw new Error("SITE_URL is not set");
13 |         }
14 |         return process.env.SITE_URL;
15 |       }
16 |       const url = new URL(params.redirectTo);
17 |       if (
18 |         [
19 |           new URL(process.env.SITE_URL || process.env.CONVEX_SITE_URL!)
20 |             .hostname,
21 |           "localhost",
22 |           "www.convex-cms.com",
23 |           "vite.convex-cms.com",
24 |           "tanstack.convex-cms.com",
25 |           "convex-cms.com",
26 |           "labs.convex.dev",
27 |         ].includes(url.hostname)
28 |       ) {
29 |         return params.redirectTo;
30 |       }
31 |       throw new Error("Invalid redirect URL");
32 |       // return process.env.SITE_URL;
33 |     },
34 |   },
35 | });
36 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Convex + React + Convex Auth
 2 | 
 3 | This is a template for using [Convex](https://docs.convex.dev/) with React and [Convex Auth](https://labs.convex.dev/auth).
 4 | 
 5 | ## Setting up
 6 | 
 7 | ```
 8 | npm create convex@latest -- -t react-vite-convexauth-shadcn
 9 | ```
10 | 
11 | Navigate to the new directory and run:
12 | 
13 | ```
14 | npm run dev
15 | ```
16 | 
17 | It'll walk you through the auth environment variables setup.
18 | 
19 | ## The app
20 | 
21 | The app is a basic multi-user chat. Walk through of the source code:
22 | 
23 | - [convex/auth.ts](./convex/auth.ts) configures the available authentication methods
24 | - [convex/messages.ts](./convex/messages.ts) is the chat backend implementation
25 | - [src/main.tsx](./src/main.tsx) is the frontend entry-point
26 | - [src/App.tsx](./src/App.tsx) determines which UI to show based on the authentication state
27 | - [src/SignInForm.tsx](./src/SignInForm.tsx) implements the sign-in UI
28 | - [src/Chat/Chat.tsx](./src/Chat/Chat.tsx) is the chat frontend
29 | 
30 | ## Configuring other authentication methods
31 | 
32 | To configure different authentication methods, see [Configuration](https://labs.convex.dev/auth/config) in the Convex Auth docs.
33 |

--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as SwitchPrimitives from "@radix-ui/react-switch";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | const Switch = React.forwardRef<
 7 |   React.ElementRef<typeof SwitchPrimitives.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SwitchPrimitives.Root
11 |     className={cn(
12 |       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
13 |       className,
14 |     )}
15 |     {...props}
16 |     ref={ref}
17 |   >
18 |     <SwitchPrimitives.Thumb
19 |       className={cn(
20 |         "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
21 |       )}
22 |     />
23 |   </SwitchPrimitives.Root>
24 | ));
25 | Switch.displayName = SwitchPrimitives.Root.displayName;
26 | 
27 | export { Switch };
28 |

--------------------------------------------------------------------------------
/src/components/Search.tsx:
--------------------------------------------------------------------------------
 1 | import { Input } from "./ui/input";
 2 | import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 3 | import { useState, useEffect, useCallback } from "react";
 4 | import { useSearchParams } from "react-router-dom";
 5 | 
 6 | export function Search() {
 7 |   const [_, setSearchParams] = useSearchParams();
 8 |   const [searchTerm, setSearchTerm] = useState("");
 9 | 
10 |   const updateSearch = useCallback(() => {
11 |     if (searchTerm) {
12 |       setSearchParams((params) => {
13 |         params.set("s", searchTerm.trim());
14 |         return params;
15 |       });
16 |     } else {
17 |       setSearchParams((params) => {
18 |         params.delete("s");
19 |         return params;
20 |       });
21 |     }
22 |   }, [searchTerm, setSearchParams]);
23 | 
24 |   // Debounce input to avoid updating search params on each keystroke
25 |   useEffect(() => {
26 |     const timeout = setTimeout(updateSearch, 600);
27 |     return () => clearTimeout(timeout);
28 |   }, [updateSearch]);
29 | 
30 |   return (
31 |     <div className="relative">
32 |       <MagnifyingGlassIcon className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
33 |       <Input
34 |         placeholder="Search posts"
35 |         className="pl-8"
36 |         value={searchTerm}
37 |         onChange={(e) => {
38 |           setSearchTerm(e.target.value);
39 |         }}
40 |       />
41 |     </div>
42 |   );
43 | }
44 |

--------------------------------------------------------------------------------
/convex/_generated/api.d.ts:
--------------------------------------------------------------------------------
 1 | /* prettier-ignore-start */
 2 | 
 3 | /* eslint-disable */
 4 | /**
 5 |  * Generated `api` utility.
 6 |  *
 7 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 8 |  *
 9 |  * To regenerate, run `npx convex dev`.
10 |  * @module
11 |  */
12 | 
13 | import type {
14 |   ApiFromModules,
15 |   FilterApi,
16 |   FunctionReference,
17 | } from "convex/server";
18 | import type * as auth from "../auth.js";
19 | import type * as crons from "../crons.js";
20 | import type * as data from "../data.js";
21 | import type * as http from "../http.js";
22 | import type * as images from "../images.js";
23 | import type * as posts from "../posts.js";
24 | import type * as sharp from "../sharp.js";
25 | import type * as users from "../users.js";
26 | import type * as versions from "../versions.js";
27 | 
28 | /**
29 |  * A utility for referencing Convex functions in your app's API.
30 |  *
31 |  * Usage:
32 |  * ```js
33 |  * const myFunctionReference = api.myModule.myFunction;
34 |  * ```
35 |  */
36 | declare const fullApi: ApiFromModules<{
37 |   auth: typeof auth;
38 |   crons: typeof crons;
39 |   data: typeof data;
40 |   http: typeof http;
41 |   images: typeof images;
42 |   posts: typeof posts;
43 |   sharp: typeof sharp;
44 |   users: typeof users;
45 |   versions: typeof versions;
46 | }>;
47 | export declare const api: FilterApi<
48 |   typeof fullApi,
49 |   FunctionReference<any, "public">
50 | >;
51 | export declare const internal: FilterApi<
52 |   typeof fullApi,
53 |   FunctionReference<any, "internal">
54 | >;
55 | 
56 | /* prettier-ignore-end */
57 |

--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as TogglePrimitive from "@radix-ui/react-toggle";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const toggleVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-transparent",
13 |         outline:
14 |           "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
15 |       },
16 |       size: {
17 |         default: "h-9 px-3",
18 |         sm: "h-8 px-2",
19 |         lg: "h-10 px-3",
20 |       },
21 |     },
22 |     defaultVariants: {
23 |       variant: "default",
24 |       size: "default",
25 |     },
26 |   },
27 | );
28 | 
29 | const Toggle = React.forwardRef<
30 |   React.ElementRef<typeof TogglePrimitive.Root>,
31 |   React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
32 |     VariantProps<typeof toggleVariants>
33 | >(({ className, variant, size, ...props }, ref) => (
34 |   <TogglePrimitive.Root
35 |     ref={ref}
36 |     className={cn(toggleVariants({ variant, size, className }))}
37 |     {...props}
38 |   />
39 | ));
40 | 
41 | Toggle.displayName = TogglePrimitive.Root.displayName;
42 | 
43 | export { Toggle, toggleVariants };
44 |

--------------------------------------------------------------------------------
/.github/workflows/github-pages.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ['main']
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow one concurrent deployment
19 | concurrency:
20 |   group: 'pages'
21 |   cancel-in-progress: true
22 | 
23 | 
24 | 
25 | 
26 | jobs:
27 |   # Single deploy job since we're just deploying
28 |   deploy:
29 |     environment:
30 |       name: github-pages
31 |       url: ${{ steps.deployment.outputs.page_url }}
32 |     runs-on: ubuntu-latest
33 |     env:
34 |       VITE_CONVEX_URL: ${{ vars.VITE_CONVEX_URL }}  
35 |     steps:
36 |       - name: Checkout
37 |         uses: actions/checkout@v4
38 |       - name: Set up Node
39 |         uses: actions/setup-node@v4
40 |         with:
41 |           node-version: 20
42 |           cache: 'npm'
43 |       - name: Install dependencies
44 |         run: npm ci
45 |       - name: Build
46 |         run: npm run build
47 |       - name: Setup Pages
48 |         uses: actions/configure-pages@v4
49 |       - name: Upload artifact
50 |         uses: actions/upload-pages-artifact@v3
51 |         with:
52 |           # Upload dist folder
53 |           path: './dist'
54 |       - name: Deploy to GitHub Pages
55 |         id: deployment
56 |         uses: actions/deploy-pages@v4
57 |

--------------------------------------------------------------------------------
/convex/sharp.ts:
--------------------------------------------------------------------------------
 1 | "use node";
 2 | 
 3 | import sharp from "sharp";
 4 | import { v } from "convex/values";
 5 | import { internalAction } from "./_generated/server";
 6 | import { internal } from "./_generated/api";
 7 | 
 8 | export const convertAndUpdate = internalAction({
 9 |   args: {
10 |     imageId: v.id("images"),
11 |     width: v.optional(v.number()),
12 |   },
13 |   handler: async (ctx, args) => {
14 |     const { imageId, width } = args;
15 |     const image = await ctx.runQuery(internal.images.read, { id: imageId });
16 |     if (!image) throw new Error(`Image not found: ${imageId}`);
17 | 
18 |     const original = await ctx.storage.get(image.storageId);
19 |     if (original === null)
20 |       throw new Error(`Storage ID not found: ${image.storageId}`);
21 | 
22 |     const buffer = await original.arrayBuffer();
23 | 
24 |     let sharped = sharp(buffer);
25 |     if (width) {
26 |       sharped = sharped.resize(width);
27 |     }
28 |     const webp = await sharped.webp().toBuffer();
29 |     const type = "image/webp";
30 |     const blob = new Blob([webp], { type });
31 | 
32 |     const convertedId = await ctx.storage.store(blob);
33 |     const convertedUrl = await ctx.storage.getUrl(convertedId);
34 |     if (!convertedUrl)
35 |       throw new Error(`No url found for storageId ${convertedId}`);
36 | 
37 |     const oldName = image.name || `Image_${imageId}`;
38 |     const newName = oldName + `_w${width}.webp`;
39 | 
40 |     await ctx.runMutation(internal.images.update, {
41 |       id: imageId,
42 |       patch: {
43 |         storageId: convertedId,
44 |         type,
45 |         name: newName,
46 |         size: blob.size,
47 |         url: convertedUrl,
48 |       },
49 |     });
50 |   },
51 | });
52 |

--------------------------------------------------------------------------------
/src/pages/__layout/__authed/$slug.edit.tsx:
--------------------------------------------------------------------------------
 1 | import { useQuery } from "convex/react";
 2 | import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 3 | import { api } from "../../../../convex/_generated/api";
 4 | import { EditablePost } from "@/components/Blog/Edit";
 5 | import type { Id } from "../../../../convex/_generated/dataModel";
 6 | import type { PostOrVersion } from "@/components/Blog/Post";
 7 | 
 8 | export function Message({ text }: { text: string }) {
 9 |   return <p className="container">{text}</p>;
10 | }
11 | 
12 | export default function EditPostPage() {
13 |   const { slug } = useParams();
14 |   const [searchParams, _] = useSearchParams();
15 |   const navigate = useNavigate();
16 | 
17 |   // If we navigated here from a link on the site,
18 |   // the searchParams should include a versionId
19 |   const versionId = searchParams.get("v") as Id<"versions">;
20 |   const versionById = useQuery(
21 |     api.versions.getById,
22 |     versionId ? { versionId, withUsers: true } : "skip",
23 |   ) as PostOrVersion | undefined | null;
24 | 
25 |   // If we navigated here manually or the versionId
26 |   // is otherwise missing, fall back to lookup by slug
27 |   const postBySlug = useQuery(
28 |     api.posts.getBySlug,
29 |     versionId
30 |       ? "skip"
31 |       : {
32 |           slug: slug!,
33 |           withDraft: true,
34 |           withAuthor: true,
35 |         },
36 |   ) as PostOrVersion | undefined | null;
37 | 
38 |   const post = versionById || postBySlug;
39 | 
40 |   if (post === undefined) return <Message text="Loading..." />;
41 |   if (post == null) return <Message text="Not found" />;
42 |   if (post.slug !== slug) {
43 |     return navigate(`/${post.slug}/edit`);
44 |   }
45 |   return <EditablePost version={post} />;
46 | }
47 |

--------------------------------------------------------------------------------
/public/assets/convex.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 3 | <svg width="100%" height="100%" viewBox="0 0 367 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
 4 |     <g transform="matrix(1,0,0,1,-129.225,-127.948)">
 5 |         <g id="Layer-1" serif:id="Layer 1" transform="matrix(4.16667,0,0,4.16667,0,0)">
 6 |             <g transform="matrix(1,0,0,1,86.6099,107.074)">
 7 |                 <path d="M0,-6.544C13.098,-7.973 25.449,-14.834 32.255,-26.287C29.037,2.033 -2.48,19.936 -28.196,8.94C-30.569,7.925 -32.605,6.254 -34.008,4.088C-39.789,-4.83 -41.69,-16.18 -38.963,-26.48C-31.158,-13.247 -15.3,-5.131 0,-6.544" style="fill:rgb(245,176,26);fill-rule:nonzero;"/>
 8 |             </g>
 9 |             <g transform="matrix(1,0,0,1,47.1708,74.7779)">
10 |                 <path d="M0,-2.489C-5.312,9.568 -5.545,23.695 0.971,35.316C-21.946,18.37 -21.692,-17.876 0.689,-34.65C2.754,-36.197 5.219,-37.124 7.797,-37.257C18.41,-37.805 29.19,-33.775 36.747,-26.264C21.384,-26.121 6.427,-16.446 0,-2.489" style="fill:rgb(141,37,118);fill-rule:nonzero;"/>
11 |             </g>
12 |             <g transform="matrix(1,0,0,1,91.325,66.4152)">
13 |                 <path d="M0,-14.199C-7.749,-24.821 -19.884,-32.044 -33.173,-32.264C-7.482,-43.726 24.112,-25.143 27.557,2.322C27.877,4.876 27.458,7.469 26.305,9.769C21.503,19.345 12.602,26.776 2.203,29.527C9.838,15.64 8.889,-1.328 0,-14.199" style="fill:rgb(238,52,47);fill-rule:nonzero;"/>
14 |             </g>
15 |         </g>
16 |     </g>
17 | </svg>
18 |

--------------------------------------------------------------------------------
/src/pages/__layout/index.tsx:
--------------------------------------------------------------------------------
 1 | import { PreviewGallery } from "@/components/Blog/Post";
 2 | import { useQuery } from "convex/react";
 3 | import { api } from "../../../convex/_generated/api";
 4 | import { Toolbar } from "@/components/Toolbar";
 5 | import { Button } from "@/components/ui/button";
 6 | import { FilePlusIcon } from "@radix-ui/react-icons";
 7 | import { Link, useSearchParams } from "react-router-dom";
 8 | import { PageTitle } from "@/components/PageTitle";
 9 | import type { FC } from "react";
10 | import { useStableQuery } from "@/lib/utils";
11 | 
12 | const Component: FC = () => {
13 |   const [searchParams, _] = useSearchParams();
14 |   const searchTerm = searchParams.get("s");
15 |   const searchResults = useStableQuery(
16 |     api.posts.search,
17 |     searchTerm ? { searchTerm } : "skip",
18 |   );
19 |   const allPosts = useQuery(api.posts.list);
20 | 
21 |   return (
22 |     <>
23 |       <Toolbar>
24 |         <div className="w-full flex justify-end">
25 |           <Link to={`/new`} className={`flex gap-2 items-center`}>
26 |             <Button>
27 |               New post
28 |               <FilePlusIcon className="h-6 w-6 pl-2" />
29 |             </Button>
30 |           </Link>
31 |         </div>
32 |       </Toolbar>
33 | 
34 |       <div className="container">
35 |         <PageTitle
36 |           title=""
37 |           tagline="A minimalist CMS / Blog open-source template created with Convex, Vite, React and shadcn/ui."
38 |         />
39 |         <div className="mt-4">
40 |           {searchTerm ? (
41 |             <PreviewGallery posts={searchResults || []} />
42 |           ) : (
43 |             allPosts && <PreviewGallery posts={allPosts} />
44 |           )}
45 |         </div>
46 |       </div>
47 |     </>
48 |   );
49 | };
50 | 
51 | export default Component;
52 |

--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 3 | 
 4 | import { cn } from "@/lib/utils";
 5 | 
 6 | const ScrollArea = React.forwardRef<
 7 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 9 | >(({ className, children, ...props }, ref) => (
10 |   <ScrollAreaPrimitive.Root
11 |     ref={ref}
12 |     className={cn("relative overflow-hidden", className)}
13 |     {...props}
14 |   >
15 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
16 |       {children}
17 |     </ScrollAreaPrimitive.Viewport>
18 |     <ScrollBar />
19 |     <ScrollAreaPrimitive.Corner />
20 |   </ScrollAreaPrimitive.Root>
21 | ));
22 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
23 | 
24 | const ScrollBar = React.forwardRef<
25 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
26 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
27 | >(({ className, orientation = "vertical", ...props }, ref) => (
28 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
29 |     ref={ref}
30 |     orientation={orientation}
31 |     className={cn(
32 |       "flex touch-none select-none transition-colors",
33 |       orientation === "vertical" &&
34 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
35 |       orientation === "horizontal" &&
36 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
37 |       className,
38 |     )}
39 |     {...props}
40 |   >
41 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
42 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
43 | ));
44 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
45 | 
46 | export { ScrollArea, ScrollBar };
47 |

--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true, node: true },
 4 |   extends: [
 5 |     "eslint:recommended",
 6 |     "plugin:@typescript-eslint/recommended-type-checked",
 7 |     "plugin:react-hooks/recommended",
 8 |   ],
 9 |   ignorePatterns: [
10 |     "dist",
11 |     ".eslintrc.cjs",
12 |     "convex/_generated",
13 |     "postcss.config.js",
14 |     "tailwind.config.js",
15 |     "vite.config.ts",
16 |     // shadcn components by default violate some rules
17 |     "src/components/ui",
18 |   ],
19 |   parser: "@typescript-eslint/parser",
20 |   parserOptions: {
21 |     EXPERIMENTAL_useProjectService: true,
22 |   },
23 |   plugins: ["react-refresh"],
24 |   rules: {
25 |     "react-refresh/only-export-components": [
26 |       "warn",
27 |       { allowConstantExport: true },
28 |     ],
29 | 
30 |     // All of these overrides ease getting into
31 |     // TypeScript, and can be removed for stricter
32 |     // linting down the line.
33 | 
34 |     // Only warn on unused variables, and ignore variables starting with `_`
35 |     "@typescript-eslint/no-unused-vars": [
36 |       "warn",
37 |       { varsIgnorePattern: "^_", argsIgnorePattern: "^_" },
38 |     ],
39 | 
40 |     // Allow escaping the compiler
41 |     "@typescript-eslint/ban-ts-comment": "error",
42 | 
43 |     // Allow explicit `any`s
44 |     "@typescript-eslint/no-explicit-any": "off",
45 | 
46 |     // START: Allow implicit `any`s
47 |     "@typescript-eslint/no-unsafe-argument": "off",
48 |     "@typescript-eslint/no-unsafe-assignment": "off",
49 |     "@typescript-eslint/no-unsafe-call": "off",
50 |     "@typescript-eslint/no-unsafe-member-access": "off",
51 |     "@typescript-eslint/no-unsafe-return": "off",
52 |     // END: Allow implicit `any`s
53 | 
54 |     // Allow async functions without await
55 |     // for consistency (esp. Convex `handler`s)
56 |     "@typescript-eslint/require-await": "off",
57 |   },
58 | };
59 |

--------------------------------------------------------------------------------
/src/pages/__layout/authors/$user.tsx:
--------------------------------------------------------------------------------
 1 | import { Message } from "@/components/PageTitle";
 2 | import { useQuery } from "convex/react";
 3 | import { Link, useParams } from "react-router-dom";
 4 | import { api } from "../../../../convex/_generated/api";
 5 | import { AuthorProfile } from "@/components/Author/Profile";
 6 | import { Toolbar } from "@/components/Toolbar";
 7 | import { Button } from "@/components/ui/button";
 8 | import { Pencil1Icon } from "@radix-ui/react-icons";
 9 | 
10 | export default function UserPage() {
11 |   const { user: userSlug } = useParams();
12 | 
13 |   const viewer = useQuery(api.users.viewer);
14 |   const user = useQuery(
15 |     api.users.bySlug,
16 |     userSlug
17 |       ? {
18 |           slug: userSlug,
19 |         }
20 |       : "skip",
21 |   );
22 |   const posts = useQuery(
23 |     api.users.authoredPosts,
24 |     user
25 |       ? {
26 |           userId: user._id,
27 |         }
28 |       : "skip",
29 |   );
30 |   const viewerIsUser = viewer?._id === user?._id;
31 | 
32 |   if (user === undefined) return <Message text="Loading..." />;
33 |   if (user == null) return <Message text="Not found" />;
34 |   return (
35 |     <div>
36 |       {user ? (
37 |         <>
38 |           {viewerIsUser && (
39 |             <Toolbar>
40 |               <div className="w-full flex justify-end">
41 |                 <Link
42 |                   to={`/authors/${user.slug}/edit`}
43 |                   className={`flex gap-2 items-center`}
44 |                 >
45 |                   <Button>
46 |                     Edit
47 |                     <Pencil1Icon className="h-6 w-6 pl-2" />
48 |                   </Button>
49 |                 </Link>
50 |               </div>
51 |             </Toolbar>
52 |           )}
53 |           <AuthorProfile user={user} posts={posts} />
54 |         </>
55 |       ) : (
56 |         <Message text={user === null ? "Not found" : "Loading..."} />
57 |       )}
58 |     </div>
59 |   );
60 | }
61 |

--------------------------------------------------------------------------------
/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 3 | import { VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | import { toggleVariants } from "@/components/ui/toggle";
 7 | 
 8 | const ToggleGroupContext = React.createContext<
 9 |   VariantProps<typeof toggleVariants>
10 | >({
11 |   size: "default",
12 |   variant: "default",
13 | });
14 | 
15 | const ToggleGroup = React.forwardRef<
16 |   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
17 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
18 |     VariantProps<typeof toggleVariants>
19 | >(({ className, variant, size, children, ...props }, ref) => (
20 |   <ToggleGroupPrimitive.Root
21 |     ref={ref}
22 |     className={cn("flex items-center justify-center gap-1", className)}
23 |     {...props}
24 |   >
25 |     <ToggleGroupContext.Provider value={{ variant, size }}>
26 |       {children}
27 |     </ToggleGroupContext.Provider>
28 |   </ToggleGroupPrimitive.Root>
29 | ));
30 | 
31 | ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
32 | 
33 | const ToggleGroupItem = React.forwardRef<
34 |   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
35 |   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
36 |     VariantProps<typeof toggleVariants>
37 | >(({ className, children, variant, size, ...props }, ref) => {
38 |   const context = React.useContext(ToggleGroupContext);
39 | 
40 |   return (
41 |     <ToggleGroupPrimitive.Item
42 |       ref={ref}
43 |       className={cn(
44 |         toggleVariants({
45 |           variant: context.variant || variant,
46 |           size: context.size || size,
47 |         }),
48 |         className,
49 |       )}
50 |       {...props}
51 |     >
52 |       {children}
53 |     </ToggleGroupPrimitive.Item>
54 |   );
55 | });
56 | 
57 | ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
58 | 
59 | export { ToggleGroup, ToggleGroupItem };
60 |

--------------------------------------------------------------------------------
/convex/versions.ts:
--------------------------------------------------------------------------------
 1 | import { v } from "convex/values";
 2 | import { mutation, query, type QueryCtx } from "./_generated/server";
 3 | import type { Doc } from "./_generated/dataModel";
 4 | import { isSlugTaken } from "./posts";
 5 | import schema from "./schema";
 6 | 
 7 | export const saveDraft = mutation({
 8 |   args: {
 9 |     ...schema.tables.versions.validator.fields,
10 |     postId: v.optional(v.union(v.literal(""), v.id("posts"))),
11 |   },
12 |   handler: async (ctx, args) => {
13 |     const { postId, editorId, ...data } = args;
14 |     const slugTaken = await isSlugTaken(ctx, {
15 |       slug: data.slug,
16 |       postId: postId || undefined,
17 |     });
18 |     if (slugTaken) throw new Error(slugTaken);
19 | 
20 |     let id = postId;
21 |     if (!id) {
22 |       id = await ctx.db.insert("posts", data);
23 |     }
24 |     return (await ctx.db.get(
25 |       await ctx.db.insert("versions", { ...data, editorId, postId: id }),
26 |     ))!;
27 |   },
28 | });
29 | 
30 | const joinUsers = async (ctx: QueryCtx, version: Doc<"versions">) => {
31 |   const author = (await ctx.db.get(version.authorId))!;
32 |   const editor = (await ctx.db.get(version.editorId))!;
33 |   return { ...version, author, editor };
34 | };
35 | 
36 | export const getById = query({
37 |   args: {
38 |     versionId: v.id("versions"),
39 |     withUsers: v.optional(v.boolean()),
40 |   },
41 |   handler: async (ctx, args) => {
42 |     const version = await ctx.db.get(args.versionId);
43 |     if (!version) return null;
44 |     return args.withUsers ? await joinUsers(ctx, version) : version;
45 |   },
46 | });
47 | 
48 | export const getPostHistory = query({
49 |   args: {
50 |     postId: v.id("posts"),
51 |   },
52 |   handler: async (ctx, args) => {
53 |     const versions = await ctx.db
54 |       .query("versions")
55 |       .withIndex("by_postId", (q) => q.eq("postId", args.postId))
56 |       .order("desc")
57 |       .collect();
58 | 
59 |     const withUsers = await Promise.all(versions.map((v) => joinUsers(ctx, v)));
60 |     return withUsers;
61 |   },
62 | });
63 |

--------------------------------------------------------------------------------
/convex/_generated/dataModel.d.ts:
--------------------------------------------------------------------------------
 1 | /* prettier-ignore-start */
 2 | 
 3 | /* eslint-disable */
 4 | /**
 5 |  * Generated data model types.
 6 |  *
 7 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 8 |  *
 9 |  * To regenerate, run `npx convex dev`.
10 |  * @module
11 |  */
12 | 
13 | import type {
14 |   DataModelFromSchemaDefinition,
15 |   DocumentByName,
16 |   TableNamesInDataModel,
17 |   SystemTableNames,
18 | } from "convex/server";
19 | import type { GenericId } from "convex/values";
20 | import schema from "../schema.js";
21 | 
22 | /**
23 |  * The names of all of your Convex tables.
24 |  */
25 | export type TableNames = TableNamesInDataModel<DataModel>;
26 | 
27 | /**
28 |  * The type of a document stored in Convex.
29 |  *
30 |  * @typeParam TableName - A string literal type of the table name (like "users").
31 |  */
32 | export type Doc<TableName extends TableNames> = DocumentByName<
33 |   DataModel,
34 |   TableName
35 | >;
36 | 
37 | /**
38 |  * An identifier for a document in Convex.
39 |  *
40 |  * Convex documents are uniquely identified by their `Id`, which is accessible
41 |  * on the `_id` field. To learn more, see [Document IDs](https://docs.convex.dev/using/document-ids).
42 |  *
43 |  * Documents can be loaded using `db.get(id)` in query and mutation functions.
44 |  *
45 |  * IDs are just strings at runtime, but this type can be used to distinguish them from other
46 |  * strings when type checking.
47 |  *
48 |  * @typeParam TableName - A string literal type of the table name (like "users").
49 |  */
50 | export type Id<TableName extends TableNames | SystemTableNames> =
51 |   GenericId<TableName>;
52 | 
53 | /**
54 |  * A type describing your Convex data model.
55 |  *
56 |  * This type includes information about what tables you have, the type of
57 |  * documents stored in those tables, and the indexes defined on them.
58 |  *
59 |  * This type is used to parameterize methods like `queryGeneric` and
60 |  * `mutationGeneric` to make them type-safe.
61 |  */
62 | export type DataModel = DataModelFromSchemaDefinition<typeof schema>;
63 | 
64 | /* prettier-ignore-end */
65 |

--------------------------------------------------------------------------------
/src/components/GetStarted/ConvexLogo.tsx:
--------------------------------------------------------------------------------
 1 | export const ConvexLogo = ({
 2 |   width,
 3 |   height,
 4 | }: {
 5 |   width?: number;
 6 |   height?: number;
 7 | }) => (
 8 |   <svg
 9 |     xmlns="http://www.w3.org/2000/svg"
10 |     fill="none"
11 |     className="fill-black dark:fill-white"
12 |     viewBox="0 0 126 20"
13 |     width={width ?? 63}
14 |     height={height ?? 10}
15 |   >
16 |     <g clipPath="url(#logo_svg__a)">
17 |       <path d="M3.185 17.467Q.358 14.938.358 10 .357 5.063 3.243 2.533 6.125.004 11.127.003q2.075-.001 3.672.305a11.6 11.6 0 0 1 3.055 1.034v5.339q-2.269-1.133-5.15-1.133-2.54 0-3.749 1.01Q7.744 7.57 7.745 10q-.001 2.35 1.192 3.4 1.19 1.054 3.77 1.053 2.73 0 5.19-1.335v5.585q-2.73 1.295-6.807 1.294c-3.388 0-6.02-.844-7.905-2.53M19.538 9.997q0-4.897 2.653-7.448 2.654-2.55 8-2.549c3.59 0 6.273.85 8.058 2.549q2.67 2.549 2.671 7.448 0 9.996-10.73 9.997-10.652.004-10.652-9.997M32.75 13.4q.786-1.055.786-3.4 0-2.307-.786-3.38-.788-1.073-2.56-1.073-1.73.002-2.5 1.073-.768 1.073-.768 3.38 0 2.35.768 3.4.768 1.054 2.5 1.053 1.77-.002 2.56-1.053M42.603.404h6.767l.193 1.458q1.116-.81 2.845-1.336A12.3 12.3 0 0 1 55.985 0q3.422 0 5 1.782c1.051 1.188 1.576 3.02 1.576 5.505v12.305h-7.228V8.055q0-1.296-.558-1.862c-.372-.38-.995-.565-1.867-.565q-.806 0-1.653.385a4.6 4.6 0 0 0-1.424.992v12.587h-7.228zM62.582.405h7.536l3.461 11.252L77.041.405h7.536l-7.192 19.187H69.77zM86.852 17.942c-2.171-1.714-3.187-4.69-3.187-7.903 0-3.13.808-5.708 2.654-7.49S90.976 0 94.526 0q4.898 0 7.71 2.388 2.81 2.39 2.811 6.517v3.362H91.302c.342.998.775 1.72 1.839 2.166q1.598.67 4.45.668 1.703 0 3.47-.282c.415-.068 1.098-.174 1.458-.254v4.665c-1.796.513-4.19.77-6.89.77-3.632-.003-6.605-.343-8.777-2.058m10.601-9.804c0-.95-1.04-2.995-3.129-2.995-1.884 0-3.129 2.013-3.129 2.995z"></path>
18 |       <path d="M110.723 9.836 103.955.405h7.844l13.843 19.187h-7.92l-3.077-4.292-3.078 4.292h-7.883zM117.548.405h7.808l-5.993 8.4-3.965-5.383z"></path>
19 |     </g>
20 |     <defs>
21 |       <clipPath id="logo_svg__a">
22 |         <path d="M0 0h126v20H0z"></path>
23 |       </clipPath>
24 |     </defs>
25 |   </svg>
26 | );
27 |

--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background text-primary shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   },
35 | );
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean;
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button";
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     );
53 |   },
54 | );
55 | Button.displayName = "Button";
56 | 
57 | export { Button, buttonVariants };
58 |

--------------------------------------------------------------------------------
/src/pages/__layout/$slug.tsx:
--------------------------------------------------------------------------------
 1 | import { useQuery } from "convex/react";
 2 | import { Link, useNavigate, useParams } from "react-router-dom";
 3 | import { api } from "../../../convex/_generated/api";
 4 | import { DisplayPost, type PostOrVersion } from "@/components/Blog/Post";
 5 | import { Toolbar } from "@/components/Toolbar";
 6 | import { Message } from "@/components/PageTitle";
 7 | import { Button } from "@/components/ui/button";
 8 | import { Pencil1Icon } from "@radix-ui/react-icons";
 9 | import { useEffect } from "react";
10 | 
11 | export default function PostPage() {
12 |   const { slug } = useParams();
13 |   const navigate = useNavigate();
14 |   const viewer = useQuery(api.users.viewer);
15 |   const loading = slug === undefined || viewer === undefined;
16 | 
17 |   const post = useQuery(
18 |     api.posts.getBySlug,
19 |     loading
20 |       ? "skip"
21 |       : {
22 |           slug,
23 |           withAuthor: true,
24 |           withDraft: !!viewer,
25 |         },
26 |   );
27 |   const publicVersion = post?.publicVersion?._id;
28 |   const draftVersion = post?.draft && post.draft._id;
29 |   const version = draftVersion || publicVersion;
30 | 
31 |   useEffect(() => {
32 |     if (post?.slug && post.slug !== slug) navigate(`/${post.slug}`);
33 |   }, [slug, post, navigate]);
34 | 
35 |   if (post === undefined) return <Message text="Loading..." />;
36 |   if (post == null) return <Message text="Not found" />;
37 |   return (
38 |     <>
39 |       <Toolbar>
40 |         <div className="flex grow justify-end items-center">
41 |           {post && (
42 |             <Link
43 |               to={`/${post.slug}/edit${version ? `?v=${version}` : ""}`}
44 |               className={`flex gap-2 items-center`}
45 |             >
46 |               <Button>
47 |                 Edit post
48 |                 <Pencil1Icon className="h-6 w-6 pl-2" />
49 |               </Button>
50 |             </Link>
51 |           )}
52 |         </div>
53 |       </Toolbar>
54 |       {post ? (
55 |         <DisplayPost post={post as PostOrVersion} />
56 |       ) : (
57 |         <Message text={post === null ? "Not found" : "Loading..."} />
58 |       )}
59 |     </>
60 |   );
61 | }
62 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | /* To change the theme colors, change the values below
 6 |   or use the "Copy code" button at https://ui.shadcn.com/themes */
 7 | @layer base {
 8 |   :root {
 9 |     --background: 0 0% 100%;
10 |     --foreground: 20 14.3% 4.1%;
11 | 
12 |     --card: 0 0% 100%;
13 |     --card-foreground: 20 14.3% 4.1%;
14 | 
15 |     --popover: 0 0% 100%;
16 |     --popover-foreground: 20 14.3% 4.1%;
17 | 
18 |     --primary: 24 9.8% 10%;
19 |     --primary-foreground: 60 9.1% 97.8%;
20 | 
21 |     --secondary: 60 4.8% 95.9%;
22 |     --secondary-foreground: 24 9.8% 10%;
23 | 
24 |     --muted: 60 4.8% 95.9%;
25 |     --muted-foreground: 25 5.3% 44.7%;
26 | 
27 |     --accent: 60 4.8% 95.9%;
28 |     --accent-foreground: 24 9.8% 10%;
29 | 
30 |     --destructive: 0 84.2% 60.2%;
31 |     --destructive-foreground: 60 9.1% 97.8%;
32 | 
33 |     --border: 20 5.9% 90%;
34 |     --input: 20 5.9% 90%;
35 |     --ring: 20 14.3% 4.1%;
36 | 
37 |     --radius: 0.5rem;
38 | 
39 |     --convex-red: 2 85% 56%;
40 |     /* #EE342F */
41 |     --convex-yellow: 41 90% 53%;
42 |     /* #F3B01C */
43 |     --convex-purple: 313 58% 35%;
44 |     /* #8D2676 */
45 |   }
46 | 
47 |   .dark {
48 |     --background: 20 14.3% 4.1%;
49 |     --foreground: 60 9.1% 97.8%;
50 | 
51 |     --card: 20 14.3% 4.1%;
52 |     --card-foreground: 60 9.1% 97.8%;
53 | 
54 |     --popover: 20 14.3% 4.1%;
55 |     --popover-foreground: 60 9.1% 97.8%;
56 | 
57 |     --primary: 60 9.1% 97.8%;
58 |     --primary-foreground: 24 9.8% 10%;
59 | 
60 |     --secondary: 12 6.5% 15.1%;
61 |     --secondary-foreground: 60 9.1% 97.8%;
62 | 
63 |     --muted: 12 6.5% 15.1%;
64 |     --muted-foreground: 24 5.4% 63.9%;
65 | 
66 |     --accent: 12 6.5% 15.1%;
67 |     --accent-foreground: 60 9.1% 97.8%;
68 | 
69 |     --destructive: 0 62.8% 30.6%;
70 |     --destructive-foreground: 60 9.1% 97.8%;
71 | 
72 |     --border: 12 6.5% 15.1%;
73 |     --input: 12 6.5% 15.1%;
74 |     --ring: 24 5.7% 82.9%;
75 |   }
76 | }
77 | 
78 | @layer base {
79 |   * {
80 |     @apply border-border;
81 |   }
82 | 
83 |   body {
84 |     @apply bg-background text-foreground;
85 |   }
86 | }
87 |

--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 | 
 7 |   
 8 |   <meta property="og:title" content="Convex open-source CMS Template" />
 9 | 
10 |   
11 |   <meta property="og:description"
12 |     content="A minimalist CMS / Blog open-source template created with Convex, Vite, React and shadcn/ui." />
13 | 
14 |   
15 |   <meta property="og:url" content="https://www.convex-cms.com/" />
16 | 
17 |   
18 |   <meta property="og:type" content="website" />
19 | 
20 |   
21 |   <meta property="og:image"
22 |     content="https://pleasant-albatross-666.convex.cloud/api/storage/4d401e1b-9c01-463e-80d6-0289c85d4416" />
23 | 
24 |   
25 |   <meta property="og:site_name" content="Convex CMS Template" />
26 | 
27 |   
28 |   <meta property="og:locale" content="en_US" />
29 | 
30 |   
31 |   <meta name="twitter:card" content="summary_large_image" />
32 |   <meta name="twitter:site" content="@Convex_dev" />
33 |   <meta name="twitter:title" content="Convex open-source CMS Template" />
34 |   <meta name="twitter:description"
35 |     content="A minimalist CMS / Blog open-source template created with Convex, Vite, React and shadcn/ui." />
36 |   <meta name="twitter:image"
37 |     content="https://pleasant-albatross-666.convex.cloud/api/storage/4d401e1b-9c01-463e-80d6-0289c85d4416" />
38 | 
39 | 
40 | 
41 |   <link rel="icon" type="image/svg+xml" href="/assets/convex.svg" />
42 |   <link rel="canonical" href="https://labs.convex.dev/cms-demo/" />
43 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
44 |   <title>Convex CMS Template</title>
45 | </head>
46 | 
47 | <body>
48 |   <div id="root"></div>
49 |   <script type="module" src="/src/main.tsx"></script>
50 | </body>
51 | 
52 | </html>

--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className,
14 |     )}
15 |     {...props}
16 |   />
17 | ));
18 | Card.displayName = "Card";
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ));
30 | CardHeader.displayName = "CardHeader";
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ));
42 | CardTitle.displayName = "CardTitle";
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ));
54 | CardDescription.displayName = "CardDescription";
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ));
62 | CardContent.displayName = "CardContent";
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ));
74 | CardFooter.displayName = "CardFooter";
75 | 
76 | export {
77 |   Card,
78 |   CardHeader,
79 |   CardFooter,
80 |   CardTitle,
81 |   CardDescription,
82 |   CardContent,
83 | };
84 |

--------------------------------------------------------------------------------
/src/components/UserMenu.tsx:
--------------------------------------------------------------------------------
 1 | import { ThemeToggle } from "@/components/ThemeToggle";
 2 | import { Button } from "@/components/ui/button";
 3 | import {
 4 |   DropdownMenu,
 5 |   DropdownMenuContent,
 6 |   DropdownMenuItem,
 7 |   DropdownMenuLabel,
 8 |   DropdownMenuSeparator,
 9 |   DropdownMenuTrigger,
10 | } from "@/components/ui/dropdown-menu";
11 | import { useAuthActions } from "@convex-dev/auth/react";
12 | import { SignInDialog } from "./SignIn/SignInDialog";
13 | import { Link } from "react-router-dom";
14 | import type { Doc } from "../../convex/_generated/dataModel";
15 | import { useQuery } from "convex/react";
16 | import { api } from "../../convex/_generated/api";
17 | import { UserImage } from "./Author/Profile";
18 | 
19 | export function AuthedUserMenu({ user }: { user: Doc<"users"> }) {
20 |   const userName = user.name || user.email;
21 |   return (
22 |     <div className="flex items-center gap-2 text-sm font-medium">
23 |       <span className="max-sm:hidden">{userName}</span>
24 |       <DropdownMenu>
25 |         <DropdownMenuTrigger asChild>
26 |           <Button variant="secondary" size="icon" className="rounded-full">
27 |             <UserImage src={user.image} size="full" />
28 |             <span className="sr-only">Toggle user menu</span>
29 |           </Button>
30 |         </DropdownMenuTrigger>
31 |         <DropdownMenuContent align="end">
32 |           <DropdownMenuLabel>{userName}</DropdownMenuLabel>
33 |           <DropdownMenuSeparator />
34 |           <DropdownMenuLabel className="font-normal">
35 |             <Link to={`/authors/${user._id}/edit`}>View/edit profile</Link>
36 |           </DropdownMenuLabel>
37 |           <DropdownMenuLabel className="flex items-center gap-2 py-0 font-normal">
38 |             Theme
39 |             <ThemeToggle />
40 |           </DropdownMenuLabel>
41 |           <SignOutButton />
42 |         </DropdownMenuContent>
43 |       </DropdownMenu>
44 |     </div>
45 |   );
46 | }
47 | 
48 | function SignOutButton() {
49 |   const { signOut } = useAuthActions();
50 |   return (
51 |     <DropdownMenuItem onClick={() => void signOut()}>Sign out</DropdownMenuItem>
52 |   );
53 | }
54 | 
55 | export function UserMenu() {
56 |   const viewer = useQuery(api.users.viewer);
57 | 
58 |   return viewer ? <AuthedUserMenu user={viewer} /> : <SignInDialog />;
59 | }
60 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "convex-cms-vite",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "npm-run-all --parallel dev:frontend dev:backend",
 8 |     "dev:frontend": "vite --open",
 9 |     "dev:backend": "convex dev",
10 |     "predev": "convex dev --until-success",
11 |     "build": "tsc -b && vite build",
12 |     "lint": "tsc && eslint .  --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
13 |     "preview": "vite preview"
14 |   },
15 |   "dependencies": {
16 |     "@auth/core": "^0.34.1",
17 |     "@convex-dev/auth": "^0.0.32",
18 |     "@hookform/resolvers": "^3.9.0",
19 |     "@radix-ui/react-dialog": "^1.0.5",
20 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
21 |     "@radix-ui/react-icons": "^1.3.0",
22 |     "@radix-ui/react-label": "^2.1.0",
23 |     "@radix-ui/react-scroll-area": "^1.1.0",
24 |     "@radix-ui/react-slot": "^1.1.0",
25 |     "@radix-ui/react-switch": "^1.1.0",
26 |     "@radix-ui/react-toast": "^1.2.1",
27 |     "@radix-ui/react-toggle": "^1.0.3",
28 |     "@radix-ui/react-toggle-group": "^1.0.4",
29 |     "@xixixao/uploadstuff": "^0.0.5",
30 |     "class-variance-authority": "^0.7.0",
31 |     "clsx": "^2.1.1",
32 |     "convex": "^1.13.0",
33 |     "convex-helpers": "^0.1.60",
34 |     "next-themes": "^0.3.0",
35 |     "react": "^18.3.1",
36 |     "react-dom": "^18.3.1",
37 |     "react-hook-form": "^7.52.2",
38 |     "react-markdown": "^9.0.1",
39 |     "react-router": "^6.26.0",
40 |     "react-router-dom": "^6.26.0",
41 |     "rehype-highlight": "^7.0.0",
42 |     "remark-gfm": "^4.0.0",
43 |     "sharp": "^0.33.5",
44 |     "tailwind-merge": "^2.3.0",
45 |     "tailwindcss-animate": "^1.0.7",
46 |     "zod": "^3.23.8"
47 |   },
48 |   "devDependencies": {
49 |     "@tailwindcss/typography": "^0.5.13",
50 |     "@types/node": "^20.14.9",
51 |     "@types/react": "^18.3.3",
52 |     "@types/react-dom": "^18.3.0",
53 |     "@typescript-eslint/eslint-plugin": "^7.13.1",
54 |     "@typescript-eslint/parser": "^7.13.1",
55 |     "@vitejs/plugin-react": "^4.3.1",
56 |     "autoprefixer": "^10.4.19",
57 |     "dotenv": "^16.4.5",
58 |     "eslint": "^8.57.0",
59 |     "eslint-plugin-react-hooks": "^4.6.2",
60 |     "eslint-plugin-react-refresh": "^0.4.7",
61 |     "npm-run-all": "^4.1.5",
62 |     "postcss": "^8.4.39",
63 |     "prettier": "3.3.2",
64 |     "tailwindcss": "^3.4.4",
65 |     "typescript": "^5.2.2",
66 |     "vite": "^5.3.1",
67 |     "vite-plugin-pages": "^0.32.3"
68 |   }
69 | }
70 |

--------------------------------------------------------------------------------
/convex/images.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   query,
 3 |   mutation,
 4 |   internalMutation,
 5 |   internalQuery,
 6 | } from "./_generated/server";
 7 | import { viewer as getViewer } from "./users";
 8 | import schema from "./schema";
 9 | import { omit } from "convex-helpers";
10 | import { crud } from "convex-helpers/server/crud";
11 | import { internal } from "./_generated/api";
12 | import { v } from "convex/values";
13 | 
14 | export const { read, update } = crud(
15 |   schema,
16 |   "images",
17 |   internalQuery,
18 |   internalMutation,
19 | );
20 | 
21 | export const getUrl = query({
22 |   args: { id: v.id("images") },
23 |   handler: async (ctx, args) => {
24 |     return (await ctx.db.get(args.id))?.url;
25 |   },
26 | });
27 | 
28 | export const generateUploadUrl = mutation({
29 |   args: {},
30 |   handler: async (ctx) => {
31 |     // Verify the user is authenticated
32 |     const viewer = await getViewer(ctx, {});
33 |     if (!viewer)
34 |       throw new Error("User not authenticated; cannot generate upload URL");
35 | 
36 |     // Return an upload URL
37 |     return await ctx.storage.generateUploadUrl();
38 |   },
39 | });
40 | 
41 | const imageFields = schema.tables.images.validator.fields;
42 | export const saveOptimized = mutation({
43 |   args: omit(imageFields, ["url"]),
44 |   handler: async (ctx, args) => {
45 |     // Verify the user is still authenticated
46 |     const viewer = await getViewer(ctx, {});
47 |     if (!viewer) throw new Error("User not authenticated; cannot save file");
48 | 
49 |     // Save the original file metadata & storageId to 'images' table
50 |     const url = await ctx.storage.getUrl(args.storageId);
51 |     if (!url) throw new Error(`No url found for storageId ${args.storageId}`);
52 |     const imageId = await ctx.db.insert("images", { ...args, url });
53 | 
54 |     // Trigger the optimizeAndSave action
55 |     await ctx.scheduler.runAfter(0, internal.sharp.convertAndUpdate, {
56 |       imageId,
57 |     });
58 |     return (await ctx.db.get(imageId))!;
59 |   },
60 | });
61 | 
62 | export const save = mutation({
63 |   args: omit(imageFields, ["url"]),
64 |   handler: async (ctx, args) => {
65 |     // Verify the user is still authenticated
66 |     const viewer = await getViewer(ctx, {});
67 |     if (!viewer) throw new Error("User not authenticated; cannot save file");
68 | 
69 |     // Get the URL
70 |     const url = await ctx.storage.getUrl(args.storageId);
71 |     if (!url) throw new Error(`No url found for storageId ${args.storageId}`);
72 | 
73 |     // Save the file metadata, url & storageId to 'images' table
74 |     const docId = await ctx.db.insert("images", { ...args, url });
75 |     return (await ctx.db.get(docId))!;
76 |   },
77 | });
78 |

--------------------------------------------------------------------------------
/convex/users.ts:
--------------------------------------------------------------------------------
 1 | import { v } from "convex/values";
 2 | import { query, mutation } from "./_generated/server";
 3 | import { auth } from "./auth";
 4 | import schema from "./schema";
 5 | import { partial } from "convex-helpers/validators";
 6 | 
 7 | export const update = mutation({
 8 |   args: {
 9 |     id: v.id("users"),
10 |     patch: v.object(partial(schema.tables.users.validator.fields)),
11 |   },
12 |   handler: async (ctx, args) => {
13 |     const userId = await auth.getUserId(ctx);
14 |     if (!userId) throw new Error("User not authenticated");
15 |     await ctx.db.patch(args.id, args.patch);
16 |   },
17 | });
18 | 
19 | export const viewer = query({
20 |   args: {},
21 |   handler: async (ctx) => {
22 |     const userId = await auth.getUserId(ctx);
23 |     return userId ? await ctx.db.get(userId) : null;
24 |   },
25 | });
26 | 
27 | export const authoredPosts = query({
28 |   args: { userId: v.id("users") },
29 |   handler: async (ctx, args) => {
30 |     return await ctx.db
31 |       .query("posts")
32 |       .withIndex("by_authorId", (q) => q.eq("authorId", args.userId))
33 |       .collect();
34 |   },
35 | });
36 | 
37 | export const listAuthors = query({
38 |   args: {},
39 |   handler: async (ctx) => {
40 |     const users = await ctx.db.query("users").collect();
41 |     const withPosts = await Promise.all(
42 |       users.map(async (u) => {
43 |         const posts = await authoredPosts(ctx, { userId: u._id });
44 |         return posts.length ? { ...u, posts } : null;
45 |       }),
46 |     );
47 |     return withPosts.filter((u) => !!u);
48 |   },
49 | });
50 | 
51 | export const byEmail = query({
52 |   args: {
53 |     email: v.string(),
54 |   },
55 |   handler: async (ctx, args) => {
56 |     return await ctx.db
57 |       .query("users")
58 |       .filter((q) => q.eq(q.field("email"), args.email))
59 |       .unique();
60 |   },
61 | });
62 | 
63 | export const getOrSetSlug = mutation({
64 |   args: { id: v.id("users") },
65 |   handler: async (ctx, args) => {
66 |     const user = await ctx.db.get(args.id);
67 |     if (user === null) return null;
68 |     if (user.slug) return user.slug;
69 | 
70 |     let slug;
71 |     if (user.name) {
72 |       slug = encodeURIComponent(user.name.toLowerCase().replaceAll(" ", "-"));
73 |     } else if (user.email) {
74 |       slug = encodeURIComponent(user.email);
75 |     } else {
76 |       slug = user._id;
77 |     }
78 |     await ctx.db.patch(user._id, { slug });
79 |     return slug;
80 |   },
81 | });
82 | 
83 | export const bySlug = query({
84 |   args: { slug: v.string() },
85 |   handler: async (ctx, args) => {
86 |     return await ctx.db
87 |       .query("users")
88 |       .filter((q) => q.eq(q.field("slug"), args.slug))
89 |       .unique();
90 |   },
91 | });
92 |

--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { useRef } from "react";
 2 | import { useQuery } from "convex/react";
 3 | import { twMerge } from "tailwind-merge";
 4 | import { type ClassValue, clsx } from "clsx";
 5 | 
 6 | export function cn(...inputs: ClassValue[]) {
 7 |   return twMerge(clsx(inputs));
 8 | }
 9 | 
10 | // Display creation time relative to current time, e.g. "6 days ago"
11 | export function showTimeAgo(created: number) {
12 |   const now = Date.now();
13 |   const secondsAgo = Math.round((now - created) / 1000);
14 |   if (secondsAgo < 60) return "just now";
15 |   const minutesAgo = Math.round(secondsAgo / 60);
16 |   if (minutesAgo < 60) {
17 |     return `${minutesAgo} minute${minutesAgo === 1 ? "" : "s"} ago`;
18 |   }
19 |   const hoursAgo = Math.round(minutesAgo / 60);
20 |   if (hoursAgo < 24) {
21 |     return `${hoursAgo} hour${hoursAgo === 1 ? "" : "s"} ago`;
22 |   }
23 |   const daysAgo = Math.round(hoursAgo / 24);
24 |   return `${daysAgo} day${daysAgo === 1 ? "" : "s"} ago`;
25 | }
26 | 
27 | export function showTimeAgoShort(created: number) {
28 |   const now = Date.now();
29 |   const secondsAgo = Math.round((now - created) / 1000);
30 |   if (secondsAgo < 60) return "now";
31 |   const minutesAgo = Math.round(secondsAgo / 60);
32 |   if (minutesAgo < 60) {
33 |     return `${minutesAgo}m ago`;
34 |   }
35 |   const hoursAgo = Math.round(minutesAgo / 60);
36 |   if (hoursAgo < 24) {
37 |     return `${hoursAgo}h ago`;
38 |   }
39 |   const daysAgo = Math.round(hoursAgo / 24);
40 |   return `${daysAgo}d ago`;
41 | }
42 | 
43 | /**
44 |  * https://github.com/get-convex/convex-helpers/blob/main/src/hooks/useStableQuery.ts
45 |  * Drop-in replacement for useQuery intended to be used with a parametrized query.
46 |  * Unlike useQuery, useStableQuery does not return undefined while loading new
47 |  * data when the query arguments change, but instead will continue to return
48 |  * the previously loaded data until the new data has finished loading.
49 |  *
50 |  * See https://stack.convex.dev/help-my-app-is-overreacting for details.
51 |  *
52 |  * @param name - string naming the query function
53 |  * @param ...args - arguments to be passed to the query function
54 |  * @returns UseQueryResult
55 |  */
56 | export const useStableQuery = ((name, ...args) => {
57 |   const result = useQuery(name, ...args);
58 |   const stored = useRef(result); // ref objects are stable between rerenders
59 | 
60 |   // result is only undefined while data is loading
61 |   // if a freshly loaded result is available, use the ref to store it
62 |   if (result !== undefined) {
63 |     stored.current = result;
64 |   }
65 | 
66 |   // undefined on first load, stale data while loading, fresh data after loading
67 |   return stored.current;
68 | }) as typeof useQuery;
69 |

--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   darkMode: "selector",
 4 |   content: [
 5 |     "./pages/**/*.{ts,tsx}",
 6 |     "./src/components/**/*.{ts,tsx}",
 7 |     "./lib/**/*.{ts,tsx}",
 8 |     "./src/**/*.{ts,tsx}",
 9 |   ],
10 |   safelist: ["dark"],
11 |   prefix: "",
12 |   theme: {
13 |     container: {
14 |       center: true,
15 |       padding: "2rem",
16 |       screens: {
17 |         sm: "1000px",
18 |       },
19 |     },
20 |     extend: {
21 |       colors: {
22 |         border: "hsl(var(--border))",
23 |         input: "hsl(var(--input))",
24 |         ring: "hsl(var(--ring))",
25 |         background: "hsl(var(--background))",
26 |         foreground: "hsl(var(--foreground))",
27 |         primary: {
28 |           DEFAULT: "hsl(var(--primary))",
29 |           foreground: "hsl(var(--primary-foreground))",
30 |         },
31 |         secondary: {
32 |           DEFAULT: "hsl(var(--secondary))",
33 |           foreground: "hsl(var(--secondary-foreground))",
34 |         },
35 |         destructive: {
36 |           DEFAULT: "hsl(var(--destructive))",
37 |           foreground: "hsl(var(--destructive-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         popover: {
48 |           DEFAULT: "hsl(var(--popover))",
49 |           foreground: "hsl(var(--popover-foreground))",
50 |         },
51 |         card: {
52 |           DEFAULT: "hsl(var(--card))",
53 |           foreground: "hsl(var(--card-foreground))",
54 |         },
55 |         convex: {
56 |           red: "hsl(var(--convex-red))",
57 |           yellow: "hsl(var(--convex-yellow))",
58 |           purple: "hsl(var(--convex-purple))"
59 |         }
60 |       },
61 |       borderRadius: {
62 |         lg: "var(--radius)",
63 |         md: "calc(var(--radius) - 2px)",
64 |         sm: "calc(var(--radius) - 4px)",
65 |       },
66 |       keyframes: {
67 |         "accordion-down": {
68 |           from: { height: "0" },
69 |           to: { height: "var(--radix-accordion-content-height)" },
70 |         },
71 |         "accordion-up": {
72 |           from: { height: "var(--radix-accordion-content-height)" },
73 |           to: { height: "0" },
74 |         },
75 |       },
76 |       animation: {
77 |         "accordion-down": "accordion-down 0.2s ease-out",
78 |         "accordion-up": "accordion-up 0.2s ease-out",
79 |       },
80 |     },
81 |   },
82 |   plugins: [
83 |     require("tailwindcss-animate"),
84 |     require('@tailwindcss/typography'),],
85 | };
86 |

--------------------------------------------------------------------------------
/setup.mjs:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This script runs `npx @convex-dev/auth` to help with setting up
 3 |  * environment variables for Convex Auth.
 4 |  *
 5 |  * You can safely delete it and remove it from package.json scripts.
 6 |  */
 7 | 
 8 | import fs from "fs";
 9 | import { config as loadEnvFile } from "dotenv";
10 | import { spawnSync } from "child_process";
11 | 
12 | if (!fs.existsSync(".env.local")) {
13 |   // Something is off, skip the script.
14 |   process.exit(0);
15 | }
16 | 
17 | const config = {};
18 | loadEnvFile({ path: ".env.local", processEnv: config });
19 | 
20 | const runOnceWorkflow = process.argv.includes("--once");
21 | 
22 | if (runOnceWorkflow && config.SETUP_SCRIPT_RAN !== undefined) {
23 |   // The script has already ran once, skip.
24 |   process.exit(0);
25 | }
26 | 
27 | // The fallback should never be used.
28 | const deploymentName =
29 |   config.CONVEX_DEPLOYMENT.split(":").slice(-1)[0] ?? "<your deployment name>";
30 | 
31 | const variables = JSON.stringify({
32 |   help:
33 |     "This template includes prebuilt sign-in via GitHub OAuth and " +
34 |     "magic links via Resend. " +
35 |     "This command can help you configure the credentials for these services " +
36 |     "via additional Convex environment variables.",
37 |   providers: [
38 |     {
39 |       name: "GitHub OAuth",
40 |       help:
41 |         "Create a GitHub OAuth App, follow the instruction here: " +
42 |         "https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app\n\n" +
43 |         `When you're asked for a callback URL use:\n\n` +
44 |         `  https://${deploymentName}.convex.site/api/auth/callback/github`,
45 |       variables: [
46 |         {
47 |           name: "AUTH_GITHUB_ID",
48 |           description: "the Client ID of your GitHub OAuth App",
49 |         },
50 |         {
51 |           name: "AUTH_GITHUB_SECRET",
52 |           description: "the generated client secret",
53 |         },
54 |       ],
55 |     },
56 |     {
57 |       name: "Resend",
58 |       help: "Sign up for Resend at https://resend.com/signup. Then create an API Key.",
59 |       variables: [
60 |         {
61 |           name: "AUTH_RESEND_KEY",
62 |           description: "the API Key",
63 |         },
64 |       ],
65 |     },
66 |   ],
67 |   success:
68 |     "You're all set. If you need to, you can rerun this command with `node setup.mjs`.",
69 | });
70 | 
71 | console.error(
72 |   "You chose Convex Auth as the auth solution. " +
73 |     "This command will walk you through setting up " +
74 |     "the required Convex environment variables",
75 | );
76 | 
77 | const result = spawnSync(
78 |   "npx",
79 |   ["@convex-dev/auth", "--variables", variables, "--skip-git-check"],
80 |   { stdio: "inherit" },
81 | );
82 | 
83 | if (runOnceWorkflow) {
84 |   fs.writeFileSync(".env.local", `\nSETUP_SCRIPT_RAN=1\n`, { flag: "a" });
85 | }
86 | 
87 | process.exit(result.status);
88 |

--------------------------------------------------------------------------------
/convex/README.md:
--------------------------------------------------------------------------------
 1 | # Welcome to your Convex functions directory!
 2 | 
 3 | Write your Convex functions here.
 4 | See https://docs.convex.dev/functions for more.
 5 | 
 6 | A query function that takes two arguments looks like:
 7 | 
 8 | ```ts
 9 | // functions.js
10 | import { query } from "./_generated/server";
11 | import { v } from "convex/values";
12 | 
13 | export const myQueryFunction = query({
14 |   // Validators for arguments.
15 |   args: {
16 |     first: v.number(),
17 |     second: v.string(),
18 |   },
19 | 
20 |   // Function implementation.
21 |   handler: async (ctx, args) => {
22 |     // Read the database as many times as you need here.
23 |     // See https://docs.convex.dev/database/reading-data.
24 |     const documents = await ctx.db.query("tablename").collect();
25 | 
26 |     // Arguments passed from the client are properties of the args object.
27 |     console.log(args.first, args.second);
28 | 
29 |     // Write arbitrary JavaScript here: filter, aggregate, build derived data,
30 |     // remove non-public properties, or create new objects.
31 |     return documents;
32 |   },
33 | });
34 | ```
35 | 
36 | Using this query function in a React component looks like:
37 | 
38 | ```ts
39 | const data = useQuery(api.functions.myQueryFunction, {
40 |   first: 10,
41 |   second: "hello",
42 | });
43 | ```
44 | 
45 | A mutation function looks like:
46 | 
47 | ```ts
48 | // functions.js
49 | import { mutation } from "./_generated/server";
50 | import { v } from "convex/values";
51 | 
52 | export const myMutationFunction = mutation({
53 |   // Validators for arguments.
54 |   args: {
55 |     first: v.string(),
56 |     second: v.string(),
57 |   },
58 | 
59 |   // Function implementation.
60 |   handler: async (ctx, args) => {
61 |     // Insert or modify documents in the database here.
62 |     // Mutations can also read from the database like queries.
63 |     // See https://docs.convex.dev/database/writing-data.
64 |     const message = { body: args.first, author: args.second };
65 |     const id = await ctx.db.insert("messages", message);
66 | 
67 |     // Optionally, return a value from your mutation.
68 |     return await ctx.db.get(id);
69 |   },
70 | });
71 | ```
72 | 
73 | Using this mutation function in a React component looks like:
74 | 
75 | ```ts
76 | const mutation = useMutation(api.functions.myMutationFunction);
77 | function handleButtonPress() {
78 |   // fire and forget, the most common way to use mutations
79 |   mutation({ first: "Hello!", second: "me" });
80 |   // OR
81 |   // use the result once the mutation has completed
82 |   mutation({ first: "Hello!", second: "me" }).then((result) =>
83 |     console.log(result),
84 |   );
85 | }
86 | ```
87 | 
88 | Use the Convex CLI to push your functions to a deployment. See everything
89 | the Convex CLI can do by running `npx convex -h` in your project root
90 | directory. To learn more, launch the docs with `npx convex docs`.
91 |

--------------------------------------------------------------------------------
/src/components/SignIn/SignInForm.tsx:
--------------------------------------------------------------------------------
 1 | import { SignInMethodDivider } from "@/components/SignIn/SignInMethodDivider";
 2 | import { Button } from "@/components/ui/button";
 3 | import { Input } from "@/components/ui/input";
 4 | import { Toaster } from "@/components/ui/toaster";
 5 | import { useToast } from "@/components/ui/use-toast";
 6 | import { useAuthActions } from "@convex-dev/auth/react";
 7 | import { GitHubLogoIcon } from "@radix-ui/react-icons";
 8 | import { useState } from "react";
 9 | 
10 | export function SignInForm() {
11 |   const [step, setStep] = useState<"signIn" | "linkSent">("signIn");
12 | 
13 |   return (
14 |     <div className="container my-auto">
15 |       <div className="max-w-[384px] mx-auto flex flex-col my-auto gap-4 pb-8">
16 |         {step === "signIn" ? (
17 |           <>
18 |             <SignInWithGitHub />
19 |             <SignInMethodDivider />
20 |             <SignInWithMagicLink handleLinkSent={() => setStep("linkSent")} />
21 |           </>
22 |         ) : (
23 |           <>
24 |             <h2 className="font-semibold text-2xl tracking-tight">
25 |               Check your email
26 |             </h2>
27 |             <p>A sign-in link has been sent to your email address.</p>
28 |             <Button
29 |               className="p-0 self-start"
30 |               variant="link"
31 |               onClick={() => setStep("signIn")}
32 |             >
33 |               Cancel
34 |             </Button>
35 |           </>
36 |         )}
37 |       </div>
38 |     </div>
39 |   );
40 | }
41 | 
42 | export function SignInWithGitHub() {
43 |   const { signIn } = useAuthActions();
44 |   return (
45 |     <Button
46 |       className="flex-1"
47 |       variant="outline"
48 |       type="button"
49 |       onClick={() =>
50 |         void signIn("github", { redirectTo: window.location.href })
51 |       }
52 |     >
53 |       <GitHubLogoIcon className="mr-2 h-4 w-4" /> GitHub
54 |     </Button>
55 |   );
56 | }
57 | 
58 | function SignInWithMagicLink({
59 |   handleLinkSent,
60 | }: {
61 |   handleLinkSent: () => void;
62 | }) {
63 |   const { signIn } = useAuthActions();
64 |   const { toast } = useToast();
65 |   return (
66 |     <form
67 |       className="flex flex-col"
68 |       onSubmit={(event) => {
69 |         event.preventDefault();
70 |         const formData = new FormData(event.currentTarget);
71 |         signIn("resend", formData)
72 |           .then(handleLinkSent)
73 |           .catch((error) => {
74 |             console.error(error);
75 |             toast({
76 |               title: "Could not send sign-in link",
77 |               variant: "destructive",
78 |             });
79 |           });
80 |       }}
81 |     >
82 |       <label htmlFor="email">Email</label>
83 |       <Input name="email" id="email" className="mb-4" autoComplete="email" />
84 |       <Button type="submit">Send sign-in link</Button>
85 |       <Toaster />
86 |     </form>
87 |   );
88 | }
89 |

--------------------------------------------------------------------------------
/convex/schema.ts:
--------------------------------------------------------------------------------
 1 | import { defineSchema, defineTable } from "convex/server";
 2 | import { authTables } from "@convex-dev/auth/server";
 3 | import { z, type ZodString } from "zod";
 4 | import { zid, zodToConvexFields } from "convex-helpers/server/zod";
 5 | 
 6 | //// Zod validation helpers ////
 7 | const required = { required_error: "Required" };
 8 | export const slugRegEx = /^(\w+)((-\w+)+)?$/;
 9 | export const zodSlug = z
10 |   .string(required)
11 |   .regex(
12 |     slugRegEx,
13 |     "Slug can only contain letters, numbers, hyphens or underscores",
14 |   );
15 | // Accept empty strings in addition to undefined for form validation
16 | export const zodOptionalString = (zs?: ZodString) =>
17 |   z.optional(z.union([z.literal(""), zs || z.string()]));
18 | const zodOptionalUrl = zodOptionalString(z.string().url());
19 | 
20 | //// Content schema & Validation ////
21 | 
22 | // When a new post is created, we add a new `posts` document.
23 | // To track version history, each time a post is edited
24 | // (published or not) we add a new `versions` document with the
25 | // edited content, adding metadata like editorId.
26 | // When a version is (un)published, we update the `posts` document
27 | // with the given version content, and metadata like the publishTime.
28 | export const postContentZod = {
29 |   title: z.string(required).min(2).max(60),
30 |   slug: zodSlug,
31 |   summary: zodOptionalString(
32 |     z.string().min(10, "10 characters min").max(200, "200 characters max"),
33 |   ),
34 |   content: z.string(),
35 |   imageUrl: zodOptionalUrl,
36 |   authorId: zid("users"),
37 |   published: z.boolean(),
38 |   search: zodOptionalString(), // aggregates all searchable fields
39 | };
40 | export const postsZod = {
41 |   ...postContentZod,
42 |   publishTime: z.optional(z.number()),
43 |   updateTime: z.optional(z.number()),
44 |   // deprecated
45 |   postId: zodOptionalString(),
46 | };
47 | 
48 | export const versionsZod = {
49 |   ...postContentZod,
50 |   postId: zid("posts"),
51 |   editorId: zid("users"),
52 | };
53 | 
54 | export const usersZod = {
55 |   image: zodOptionalUrl,
56 |   url: zodOptionalUrl,
57 |   tagline: zodOptionalString(z.string().max(100, "100 characters max")),
58 |   bio: zodOptionalString(z.string().max(500, "500 characters max")),
59 |   name: zodOptionalString(),
60 |   slug: zodOptionalString(),
61 |   email: zodOptionalString(z.string().email()),
62 |   emailVerificationTime: z.optional(z.number()),
63 |   phone: zodOptionalString(),
64 |   phoneVerificationTime: z.optional(z.number()),
65 |   isAnonymous: z.optional(z.boolean()),
66 |   // deprecated
67 |   userId: z.optional(zid("users")),
68 | };
69 | 
70 | export const imagesZod = {
71 |   name: zodOptionalString(),
72 |   storageId: zid("_storage"),
73 |   url: z.string().url(),
74 |   type: zodOptionalString(),
75 |   size: z.optional(z.number()),
76 | };
77 | 
78 | //// Convex DB ////
79 | export default defineSchema({
80 |   ...authTables,
81 |   users: defineTable(zodToConvexFields(usersZod)).index("email", ["email"]),
82 |   posts: defineTable(zodToConvexFields(postsZod))
83 |     .index("by_slug", ["slug"])
84 |     .index("by_published", ["published", "publishTime", "updateTime"])
85 |     .index("by_authorId", ["authorId"])
86 |     .searchIndex("search_all", {
87 |       searchField: "search",
88 |       filterFields: ["published"],
89 |     }),
90 |   versions: defineTable(zodToConvexFields(versionsZod))
91 |     .index("by_postId", ["postId"])
92 |     .index("by_slug", ["slug"]), // to lookup old slugs for redirects
93 |   images: defineTable(zodToConvexFields(imagesZod)).index("by_storageID", [
94 |     "storageId",
95 |   ]),
96 | });
97 |

--------------------------------------------------------------------------------
/src/components/Author/Profile.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   AvatarIcon,
  3 |   EnvelopeClosedIcon,
  4 |   GlobeIcon,
  5 | } from "@radix-ui/react-icons";
  6 | import type { Doc } from "../../../convex/_generated/dataModel";
  7 | import { Link } from "react-router-dom";
  8 | import { StyledContent, StyledMarkdown } from "../Markdown";
  9 | import { PreviewGallery } from "../Blog/Post";
 10 | import { PageTitle } from "../PageTitle";
 11 | 
 12 | const sizeClass = {
 13 |   s: `h-5 w-5`,
 14 |   m: `h-10 w-10`,
 15 |   l: `h-24 w-24`,
 16 |   full: `h-full w-full`,
 17 | };
 18 | 
 19 | export function UserImage({
 20 |   src,
 21 |   size,
 22 | }: {
 23 |   src?: string;
 24 |   size?: keyof typeof sizeClass;
 25 | }) {
 26 |   if (src) {
 27 |     return (
 28 |       <img
 29 |         alt="Profile image"
 30 |         src={src}
 31 |         className={"relative rounded-full " + sizeClass[size || "m"]}
 32 |       />
 33 |     );
 34 |   } else {
 35 |     return <AvatarIcon className={"relative " + sizeClass[size || "m"]} />;
 36 |   }
 37 | }
 38 | 
 39 | export function CompactProfile({ user }: { user: Doc<"users"> }) {
 40 |   return (
 41 |     <Link
 42 |       to={`/authors/${user.slug}`}
 43 |       className="flex flex-row items-center gap-4"
 44 |     >
 45 |       <UserImage src={user.image} />
 46 |       <div className="flex flex-col gap-2">
 47 |         <h2 className="text-xl">{user.name || `User ${user._id}`}</h2>
 48 |         {user.tagline && <StyledMarkdown content={user.tagline} />}
 49 |       </div>
 50 |     </Link>
 51 |   );
 52 | }
 53 | 
 54 | export function AuthorProfile({
 55 |   user,
 56 |   posts,
 57 | }: {
 58 |   user: Doc<"users">;
 59 |   posts?: Doc<"posts">[];
 60 | }) {
 61 |   return (
 62 |     <div className="container flex flex-col gap-8">
 63 |       <div className="flex flex-row items-center gap-4 mb-4 h-">
 64 |         <UserImage src={user.image} size="l" />
 65 |         <div className="flex flex-col items-start gap-2">
 66 |           <PageTitle title={user.name || `User ${user._id}`} />
 67 |           {user.tagline && <StyledMarkdown content={user.tagline} />}
 68 |           <StyledContent>
 69 |             <div className="flex flex-row gap-4 text-sm">
 70 |               {user.url && (
 71 |                 <a
 72 |                   className="flex flex-row items-center gap-2  no-underline"
 73 |                   href={user.url}
 74 |                   target="_blank"
 75 |                 >
 76 |                   <GlobeIcon className="text-primary h-4" />
 77 |                   {user.url.replace(/http(s?):\/\//, "")}
 78 |                 </a>
 79 |               )}
 80 |               {user.email && (
 81 |                 <a
 82 |                   className="flex flex-row items-center gap-2  no-underline"
 83 |                   href={`mailto:${user.email}`}
 84 |                 >
 85 |                   <EnvelopeClosedIcon className="text-primary h-4" />
 86 |                   {user.email}
 87 |                 </a>
 88 |               )}
 89 |             </div>
 90 |           </StyledContent>
 91 |         </div>
 92 |       </div>
 93 |       {user.bio && <StyledMarkdown content={user.bio} />}
 94 |       {posts && (
 95 |         <div>
 96 |           <h3 className="text-muted-foreground text-lg mb-4">
 97 |             Posts by this author
 98 |           </h3>
 99 |           <PreviewGallery posts={posts} />
100 |         </div>
101 |       )}
102 |     </div>
103 |   );
104 | }
105 | 
106 | export function AuthorsList({ users }: { users: Doc<"users">[] }) {
107 |   return (
108 |     <div className="container flex flex-col gap-4">
109 |       {users.map((u) => (
110 |         <CompactProfile key={u._id} user={u} />
111 |       ))}
112 |     </div>
113 |   );
114 | }
115 |

--------------------------------------------------------------------------------
/src/components/PageLayout.tsx:
--------------------------------------------------------------------------------
  1 | import { Link, useLocation } from "react-router-dom";
  2 | import { UserMenu } from "@/components/UserMenu";
  3 | import { Search } from "@/components/Search";
  4 | import type { ReactNode } from "react";
  5 | import { GitHubLogoIcon, StarFilledIcon } from "@radix-ui/react-icons";
  6 | import { cn } from "@/lib/utils";
  7 | import { buttonVariants } from "./ui/button";
  8 | 
  9 | function StarUsLink() {
 10 |   return (
 11 |     <a
 12 |       href="https://github.com/get-convex/cms-template"
 13 |       target="_blank"
 14 |       rel="noreferrer"
 15 |       className={cn(
 16 |         buttonVariants({ variant: "link", size: "sm" }),
 17 |         "group flex gap-3 px-0 text-primary/80 hover:text-primary hover:no-underline",
 18 |       )}
 19 |     >
 20 |       <span className="flex lg:hidden">
 21 |         <GitHubLogoIcon />
 22 |       </span>
 23 |       <span className="hidden select-none items-center gap-1 rounded-full bg-green-500/5 px-2 py-1 pr-2.5 text-xs font-medium tracking-tight text-green-600 ring-1 ring-inset ring-green-600/20 backdrop-blur-sm dark:bg-yellow-800/40 dark:text-yellow-100 dark:ring-yellow-200/50 lg:flex">
 24 |         <StarFilledIcon
 25 |           className="h-3 w-3 text-green-600 dark:text-yellow-100"
 26 |           fill="currentColor"
 27 |         />
 28 |         Star us on GitHub
 29 |       </span>
 30 |     </a>
 31 |   );
 32 | }
 33 | 
 34 | export function Header() {
 35 |   const location = useLocation();
 36 |   return (
 37 |     <header className="sticky top-0 z-10 flex min-h-20 border-b bg-background/80 backdrop-blur">
 38 |       <nav className="container w-full justify-between flex flex-row items-center gap-6">
 39 |         <div className="flex items-center gap-6 md:gap-10">
 40 |           <Link to="/">
 41 |             <h1 className="text-3xl font-semibold">Convex Blog</h1>
 42 |           </Link>
 43 |           <div className="flex items-center gap-4 text-sm">
 44 |             <Link
 45 |               to="/"
 46 |               className="text-muted-foreground transition-colors hover:text-foreground"
 47 |             >
 48 |               Posts
 49 |             </Link>
 50 |             <Link
 51 |               to="/authors"
 52 |               className="text-muted-foreground transition-colors hover:text-foreground"
 53 |             >
 54 |               Authors
 55 |             </Link>
 56 |             <Link
 57 |               to="/about"
 58 |               className="text-muted-foreground transition-colors hover:text-foreground"
 59 |             >
 60 |               About
 61 |             </Link>
 62 |             <StarUsLink />
 63 |           </div>
 64 |         </div>
 65 | 
 66 |         {location.pathname === "/" && <Search />}
 67 | 
 68 |         <UserMenu />
 69 |       </nav>
 70 |     </header>
 71 |   );
 72 | }
 73 | 
 74 | export function Footer() {
 75 |   return (
 76 |     <footer className="border-t hidden sm:block">
 77 |       <div className="container py-4 text-sm leading-loose">
 78 |         Built with ❤️ at{" "}
 79 |         <FooterLink href="https://convex.dev/c/convexcmstemplate">
 80 |           Convex
 81 |         </FooterLink>
 82 |         . Powered by Convex,{" "}
 83 |         <FooterLink href="https://vitejs.dev">Vite</FooterLink>,{" "}
 84 |         <FooterLink href="https://react.dev/">React</FooterLink> and{" "}
 85 |         <FooterLink href="https://ui.shadcn.com/">shadcn/ui</FooterLink>.
 86 |       </div>
 87 |     </footer>
 88 |   );
 89 | }
 90 | 
 91 | function FooterLink({ href, children }: { href: string; children: ReactNode }) {
 92 |   return (
 93 |     <a
 94 |       href={href}
 95 |       className="underline underline-offset-4 hover:no-underline"
 96 |       target="_blank"
 97 |     >
 98 |       {children}
 99 |     </a>
100 |   );
101 | }
102 |

--------------------------------------------------------------------------------
/convex/_generated/server.js:
--------------------------------------------------------------------------------
 1 | /* prettier-ignore-start */
 2 | 
 3 | /* eslint-disable */
 4 | /**
 5 |  * Generated utilities for implementing server-side Convex query and mutation functions.
 6 |  *
 7 |  * THIS CODE IS AUTOMATICALLY GENERATED.
 8 |  *
 9 |  * To regenerate, run `npx convex dev`.
10 |  * @module
11 |  */
12 | 
13 | import {
14 |   actionGeneric,
15 |   httpActionGeneric,
16 |   queryGeneric,
17 |   mutationGeneric,
18 |   internalActionGeneric,
19 |   internalMutationGeneric,
20 |   internalQueryGeneric,
21 | } from "convex/server";
22 | 
23 | /**
24 |  * Define a query in this Convex app's public API.
25 |  *
26 |  * This function will be allowed to read your Convex database and will be accessible from the client.
27 |  *
28 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
29 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
30 |  */
31 | export const query = queryGeneric;
32 | 
33 | /**
34 |  * Define a query that is only accessible from other Convex functions (but not from the client).
35 |  *
36 |  * This function will be allowed to read from your Convex database. It will not be accessible from the client.
37 |  *
38 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
39 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
40 |  */
41 | export const internalQuery = internalQueryGeneric;
42 | 
43 | /**
44 |  * Define a mutation in this Convex app's public API.
45 |  *
46 |  * This function will be allowed to modify your Convex database and will be accessible from the client.
47 |  *
48 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
49 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
50 |  */
51 | export const mutation = mutationGeneric;
52 | 
53 | /**
54 |  * Define a mutation that is only accessible from other Convex functions (but not from the client).
55 |  *
56 |  * This function will be allowed to modify your Convex database. It will not be accessible from the client.
57 |  *
58 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
59 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
60 |  */
61 | export const internalMutation = internalMutationGeneric;
62 | 
63 | /**
64 |  * Define an action in this Convex app's public API.
65 |  *
66 |  * An action is a function which can execute any JavaScript code, including non-deterministic
67 |  * code and code with side-effects, like calling third-party services.
68 |  * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
69 |  * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
70 |  *
71 |  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
72 |  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
73 |  */
74 | export const action = actionGeneric;
75 | 
76 | /**
77 |  * Define an action that is only accessible from other Convex functions (but not from the client).
78 |  *
79 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
80 |  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
81 |  */
82 | export const internalAction = internalActionGeneric;
83 | 
84 | /**
85 |  * Define a Convex HTTP action.
86 |  *
87 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument, and a `Request` object
88 |  * as its second.
89 |  * @returns The wrapped endpoint function. Route a URL path to this function in `convex/http.js`.
90 |  */
91 | export const httpAction = httpActionGeneric;
92 | 
93 | /* prettier-ignore-end */
94 |

--------------------------------------------------------------------------------
/src/components/Author/Edit.tsx:
--------------------------------------------------------------------------------
  1 | import { useMutation } from "convex/react";
  2 | import { api } from "../../../convex/_generated/api";
  3 | import { zodResolver } from "@hookform/resolvers/zod";
  4 | import { Label } from "@/components/ui/label";
  5 | import { Switch } from "@/components/ui/switch";
  6 | import { Form } from "@/components/ui/form";
  7 | import { useState, type FormEventHandler } from "react";
  8 | import { useForm, type SubmitHandler } from "react-hook-form";
  9 | import { useNavigate } from "react-router-dom";
 10 | import { z } from "zod";
 11 | import { Toolbar } from "@/components/Toolbar";
 12 | import { TextField, MarkdownField } from "@/components/Inputs";
 13 | import { Button } from "@/components/ui/button";
 14 | import { useToast } from "@/components/ui/use-toast";
 15 | import type { Doc } from "../../../convex/_generated/dataModel";
 16 | import { usersZod } from "../../../convex/schema";
 17 | import { AuthorProfile } from "./Profile";
 18 | 
 19 | export function EditableProfile({ user }: { user: Doc<"users"> }) {
 20 |   const { toast } = useToast();
 21 |   const navigate = useNavigate();
 22 | 
 23 |   const [previewing, setPreviewing] = useState(false);
 24 | 
 25 |   const update = useMutation(api.users.update);
 26 | 
 27 |   const zodSchema = z.object(usersZod);
 28 |   const defaultValues = user;
 29 | 
 30 |   const form = useForm<z.infer<typeof zodSchema>>({
 31 |     defaultValues,
 32 |     resolver: zodResolver(zodSchema),
 33 |   });
 34 | 
 35 |   const onReset = () => {
 36 |     form.reset(defaultValues);
 37 |     navigate(`/authors/${user._id}`);
 38 |   };
 39 | 
 40 |   const onSubmit: SubmitHandler<z.infer<typeof zodSchema>> = async (data) => {
 41 |     try {
 42 |       await update({ id: user._id, patch: data });
 43 |       toast({
 44 |         title: "User Profile Updated",
 45 |       });
 46 |       form.reset(data);
 47 |       navigate(`/authors/${user._id}`);
 48 |     } catch (e) {
 49 |       const error = e as Error;
 50 |       toast({
 51 |         variant: "destructive",
 52 |         title: "Error Updating Profile",
 53 |         description: error.message,
 54 |       });
 55 |     }
 56 |   };
 57 | 
 58 |   // Wrapper for form.handleSubmit to avoid no-misused-promises error;
 59 |   // see https://github.com/orgs/react-hook-form/discussions/8020
 60 |   const submitHandler: FormEventHandler = (...args) =>
 61 |     void form.handleSubmit(onSubmit)(...args);
 62 | 
 63 |   const { isValid, isDirty } = form.formState;
 64 |   const values = form.getValues();
 65 | 
 66 |   return (
 67 |     <>
 68 |       <Toolbar>
 69 |         <div className="w-full flex max-sm:flex-col sm:flex-row gap-2 justify-between items-center">
 70 |           <div className="flex gap-2 items-center">
 71 |             <Switch
 72 |               id="editing"
 73 |               checked={previewing}
 74 |               onCheckedChange={(checked) => setPreviewing(checked)}
 75 |             />
 76 |             <Label htmlFor="editing">Preview</Label>
 77 |           </div>
 78 | 
 79 |           <div className={`flex gap-2 items-center`}>
 80 |             <Button variant="outline" onClick={onReset}>
 81 |               {isDirty ? "Discard" : "Cancel"}
 82 |             </Button>
 83 | 
 84 |             <Button onClick={submitHandler} disabled={!isValid || !isDirty}>
 85 |               Save
 86 |             </Button>
 87 |           </div>
 88 |         </div>
 89 |       </Toolbar>
 90 |       <div className="container my-8">
 91 |         {previewing ? (
 92 |           <AuthorProfile user={{ ...user, ...values }} />
 93 |         ) : (
 94 |           <Form {...form}>
 95 |             <form onSubmit={submitHandler}>
 96 |               <TextField name="name" form={form} />
 97 |               <TextField name="image" form={form} />
 98 |               <TextField name="slug" form={form} />
 99 |               <TextField name="url" form={form} />
100 |               <TextField name="email" form={form} />
101 |               <MarkdownField name="tagline" rows={1} form={form} />
102 |               <MarkdownField name="bio" rows={5} form={form} />
103 |             </form>
104 |           </Form>
105 |         )}
106 |       </div>
107 |     </>
108 |   );
109 | }
110 |

--------------------------------------------------------------------------------
/src/components/Blog/History.tsx:
--------------------------------------------------------------------------------
  1 | import { ArrowRightIcon, ClockIcon, ReloadIcon } from "@radix-ui/react-icons";
  2 | import { useQuery } from "convex/react";
  3 | import { api } from "../../../convex/_generated/api";
  4 | import { ScrollArea } from "@/components/ui/scroll-area";
  5 | import type { Doc, Id } from "../../../convex/_generated/dataModel";
  6 | import { showTimeAgo } from "@/lib/utils";
  7 | import { Button } from "../ui/button";
  8 | import {
  9 |   DropdownMenu,
 10 |   DropdownMenuContent,
 11 |   DropdownMenuItem,
 12 |   DropdownMenuLabel,
 13 |   DropdownMenuSeparator,
 14 |   DropdownMenuTrigger,
 15 | } from "@/components/ui/dropdown-menu";
 16 | import { useSearchParams } from "react-router-dom";
 17 | import { useToast } from "../ui/use-toast";
 18 | 
 19 | export function VersionHistory({
 20 |   postId,
 21 |   currentVersion,
 22 |   isDirty,
 23 | }: {
 24 |   postId: Id<"posts">;
 25 |   currentVersion: Id<"versions">;
 26 |   isDirty: boolean;
 27 | }) {
 28 |   const { toast } = useToast();
 29 |   const [_, setSearchParams] = useSearchParams();
 30 | 
 31 |   const history = useQuery(api.versions.getPostHistory, { postId });
 32 |   const totalCount = history?.length;
 33 | 
 34 |   const restoreVersion = (id: Id<"versions">) => {
 35 |     if (isDirty) {
 36 |       return toast({
 37 |         title: "Cannot restore history with unsaved edits.",
 38 |         description:
 39 |           "You have unsaved edits. Save or discard your changes before restoring.",
 40 |         variant: "destructive",
 41 |       });
 42 |     }
 43 |     setSearchParams((params) => ({ ...params, v: id }));
 44 |     toast({
 45 |       title: `Now editing version ${id}`,
 46 |       description: `Publish to restore this version, or edit and save as a new version`,
 47 |     });
 48 |   };
 49 | 
 50 |   return (
 51 |     <DropdownMenu>
 52 |       <DropdownMenuTrigger asChild>
 53 |         <Button
 54 |           variant="outline"
 55 |           className="mx-0 flex gap-1 sm:gap-2 items-center"
 56 |         >
 57 |           <ClockIcon />
 58 |           <span>History</span>
 59 |         </Button>
 60 |       </DropdownMenuTrigger>
 61 |       <DropdownMenuContent>
 62 |         <DropdownMenuLabel className="flex gap-2 items-center">
 63 |           {totalCount
 64 |             ? `${totalCount} Version${totalCount === 1 ? "" : "s"}`
 65 |             : "Version History"}
 66 |         </DropdownMenuLabel>
 67 |         <DropdownMenuSeparator />
 68 |         <ScrollArea className="w-full h-52">
 69 |           {history?.map((v) => (
 70 |             <HistoryDropdownItem
 71 |               key={v._id}
 72 |               selected={v._id === currentVersion}
 73 |               version={v}
 74 |               onRestore={() => restoreVersion(v._id)}
 75 |             />
 76 |           ))}
 77 |         </ScrollArea>
 78 |       </DropdownMenuContent>
 79 |     </DropdownMenu>
 80 |   );
 81 | }
 82 | 
 83 | function HistoryDropdownItem({
 84 |   version,
 85 |   selected,
 86 |   onRestore,
 87 | }: {
 88 |   version: Doc<"versions"> & { editor: Doc<"users">; author: Doc<"users"> };
 89 |   selected: boolean;
 90 |   onRestore: () => void;
 91 | }) {
 92 |   const { _id, _creationTime } = version;
 93 |   const created = new Date(_creationTime).toUTCString();
 94 |   const ago = showTimeAgo(_creationTime);
 95 | 
 96 |   const viewing = selected
 97 |     ? "Currently viewing this version"
 98 |     : "Click to restore this version";
 99 |   const details = `${version.editor.name} edited at ${created}`;
100 | 
101 |   return (
102 |     <DropdownMenuItem
103 |       key={_id}
104 |       className={`w-full text-sm mx-0 py-2 px-0 whitespace-nowrap stroke-background hover:stroke-current`}
105 |       title={[viewing, details].join("\n")}
106 |     >
107 |       <Button
108 |         variant="ghost"
109 |         className={`w-full mx-0 gap-2 flex items-center justify-start  font-normal ${selected ? "text-convex-yellow stroke-convex-yellow disabled:opacity-100" : ""}`}
110 |         onClick={onRestore}
111 |       >
112 |         {selected ? <ArrowRightIcon /> : <ReloadIcon />}
113 |         <div className="text-current">{version.editor.name}</div>
114 |         <span>{ago}</span>
115 |       </Button>
116 |     </DropdownMenuItem>
117 |   );
118 | }
119 |

--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as DialogPrimitive from "@radix-ui/react-dialog";
  3 | import { Cross2Icon } from "@radix-ui/react-icons";
  4 | 
  5 | import { cn } from "@/lib/utils";
  6 | 
  7 | const Dialog = DialogPrimitive.Root;
  8 | 
  9 | const DialogTrigger = DialogPrimitive.Trigger;
 10 | 
 11 | const DialogPortal = DialogPrimitive.Portal;
 12 | 
 13 | const DialogClose = DialogPrimitive.Close;
 14 | 
 15 | const DialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <DialogPrimitive.Overlay
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 23 |       className,
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ));
 28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 29 | 
 30 | const DialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof DialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 33 | >(({ className, children, ...props }, ref) => (
 34 |   <DialogPortal>
 35 |     <DialogOverlay />
 36 |     <DialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 40 |         className,
 41 |       )}
 42 |       {...props}
 43 |     >
 44 |       {children}
 45 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 46 |         <Cross2Icon className="h-4 w-4" />
 47 |         <span className="sr-only">Close</span>
 48 |       </DialogPrimitive.Close>
 49 |     </DialogPrimitive.Content>
 50 |   </DialogPortal>
 51 | ));
 52 | DialogContent.displayName = DialogPrimitive.Content.displayName;
 53 | 
 54 | const DialogHeader = ({
 55 |   className,
 56 |   ...props
 57 | }: React.HTMLAttributes<HTMLDivElement>) => (
 58 |   <div
 59 |     className={cn(
 60 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 61 |       className,
 62 |     )}
 63 |     {...props}
 64 |   />
 65 | );
 66 | DialogHeader.displayName = "DialogHeader";
 67 | 
 68 | const DialogFooter = ({
 69 |   className,
 70 |   ...props
 71 | }: React.HTMLAttributes<HTMLDivElement>) => (
 72 |   <div
 73 |     className={cn(
 74 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 75 |       className,
 76 |     )}
 77 |     {...props}
 78 |   />
 79 | );
 80 | DialogFooter.displayName = "DialogFooter";
 81 | 
 82 | const DialogTitle = React.forwardRef<
 83 |   React.ElementRef<typeof DialogPrimitive.Title>,
 84 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 85 | >(({ className, ...props }, ref) => (
 86 |   <DialogPrimitive.Title
 87 |     ref={ref}
 88 |     className={cn(
 89 |       "text-lg font-semibold leading-none tracking-tight",
 90 |       className,
 91 |     )}
 92 |     {...props}
 93 |   />
 94 | ));
 95 | DialogTitle.displayName = DialogPrimitive.Title.displayName;
 96 | 
 97 | const DialogDescription = React.forwardRef<
 98 |   React.ElementRef<typeof DialogPrimitive.Description>,
 99 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
100 | >(({ className, ...props }, ref) => (
101 |   <DialogPrimitive.Description
102 |     ref={ref}
103 |     className={cn("text-sm text-muted-foreground", className)}
104 |     {...props}
105 |   />
106 | ));
107 | DialogDescription.displayName = DialogPrimitive.Description.displayName;
108 | 
109 | export {
110 |   Dialog,
111 |   DialogPortal,
112 |   DialogOverlay,
113 |   DialogTrigger,
114 |   DialogClose,
115 |   DialogContent,
116 |   DialogHeader,
117 |   DialogFooter,
118 |   DialogTitle,
119 |   DialogDescription,
120 | };
121 |

--------------------------------------------------------------------------------
/src/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | // Inspired by react-hot-toast library
  2 | import * as React from "react";
  3 | 
  4 | import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
  5 | 
  6 | const TOAST_LIMIT = 1;
  7 | const TOAST_REMOVE_DELAY = 1000000;
  8 | 
  9 | type ToasterToast = ToastProps & {
 10 |   id: string;
 11 |   title?: React.ReactNode;
 12 |   description?: React.ReactNode;
 13 |   action?: ToastActionElement;
 14 | };
 15 | 
 16 | const actionTypes = {
 17 |   ADD_TOAST: "ADD_TOAST",
 18 |   UPDATE_TOAST: "UPDATE_TOAST",
 19 |   DISMISS_TOAST: "DISMISS_TOAST",
 20 |   REMOVE_TOAST: "REMOVE_TOAST",
 21 | } as const;
 22 | 
 23 | let count = 0;
 24 | 
 25 | function genId() {
 26 |   count = (count + 1) % Number.MAX_SAFE_INTEGER;
 27 |   return count.toString();
 28 | }
 29 | 
 30 | type ActionType = typeof actionTypes;
 31 | 
 32 | type Action =
 33 |   | {
 34 |       type: ActionType["ADD_TOAST"];
 35 |       toast: ToasterToast;
 36 |     }
 37 |   | {
 38 |       type: ActionType["UPDATE_TOAST"];
 39 |       toast: Partial<ToasterToast>;
 40 |     }
 41 |   | {
 42 |       type: ActionType["DISMISS_TOAST"];
 43 |       toastId?: ToasterToast["id"];
 44 |     }
 45 |   | {
 46 |       type: ActionType["REMOVE_TOAST"];
 47 |       toastId?: ToasterToast["id"];
 48 |     };
 49 | 
 50 | interface State {
 51 |   toasts: ToasterToast[];
 52 | }
 53 | 
 54 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 55 | 
 56 | const addToRemoveQueue = (toastId: string) => {
 57 |   if (toastTimeouts.has(toastId)) {
 58 |     return;
 59 |   }
 60 | 
 61 |   const timeout = setTimeout(() => {
 62 |     toastTimeouts.delete(toastId);
 63 |     dispatch({
 64 |       type: "REMOVE_TOAST",
 65 |       toastId: toastId,
 66 |     });
 67 |   }, TOAST_REMOVE_DELAY);
 68 | 
 69 |   toastTimeouts.set(toastId, timeout);
 70 | };
 71 | 
 72 | export const reducer = (state: State, action: Action): State => {
 73 |   switch (action.type) {
 74 |     case "ADD_TOAST":
 75 |       return {
 76 |         ...state,
 77 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 78 |       };
 79 | 
 80 |     case "UPDATE_TOAST":
 81 |       return {
 82 |         ...state,
 83 |         toasts: state.toasts.map((t) =>
 84 |           t.id === action.toast.id ? { ...t, ...action.toast } : t,
 85 |         ),
 86 |       };
 87 | 
 88 |     case "DISMISS_TOAST": {
 89 |       const { toastId } = action;
 90 | 
 91 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 92 |       // but I'll keep it here for simplicity
 93 |       if (toastId) {
 94 |         addToRemoveQueue(toastId);
 95 |       } else {
 96 |         state.toasts.forEach((toast) => {
 97 |           addToRemoveQueue(toast.id);
 98 |         });
 99 |       }
100 | 
101 |       return {
102 |         ...state,
103 |         toasts: state.toasts.map((t) =>
104 |           t.id === toastId || toastId === undefined
105 |             ? {
106 |                 ...t,
107 |                 open: false,
108 |               }
109 |             : t,
110 |         ),
111 |       };
112 |     }
113 |     case "REMOVE_TOAST":
114 |       if (action.toastId === undefined) {
115 |         return {
116 |           ...state,
117 |           toasts: [],
118 |         };
119 |       }
120 |       return {
121 |         ...state,
122 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
123 |       };
124 |   }
125 | };
126 | 
127 | const listeners: Array<(state: State) => void> = [];
128 | 
129 | let memoryState: State = { toasts: [] };
130 | 
131 | function dispatch(action: Action) {
132 |   memoryState = reducer(memoryState, action);
133 |   listeners.forEach((listener) => {
134 |     listener(memoryState);
135 |   });
136 | }
137 | 
138 | type Toast = Omit<ToasterToast, "id">;
139 | 
140 | function toast({ ...props }: Toast) {
141 |   const id = genId();
142 | 
143 |   const update = (props: ToasterToast) =>
144 |     dispatch({
145 |       type: "UPDATE_TOAST",
146 |       toast: { ...props, id },
147 |     });
148 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
149 | 
150 |   dispatch({
151 |     type: "ADD_TOAST",
152 |     toast: {
153 |       ...props,
154 |       id,
155 |       open: true,
156 |       onOpenChange: (open) => {
157 |         if (!open) dismiss();
158 |       },
159 |     },
160 |   });
161 | 
162 |   return {
163 |     id: id,
164 |     dismiss,
165 |     update,
166 |   };
167 | }
168 | 
169 | function useToast() {
170 |   const [state, setState] = React.useState<State>(memoryState);
171 | 
172 |   React.useEffect(() => {
173 |     listeners.push(setState);
174 |     return () => {
175 |       const index = listeners.indexOf(setState);
176 |       if (index > -1) {
177 |         listeners.splice(index, 1);
178 |       }
179 |     };
180 |   }, [state]);
181 | 
182 |   return {
183 |     ...state,
184 |     toast,
185 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
186 |   };
187 | }
188 | 
189 | export { useToast, toast };
190 |

--------------------------------------------------------------------------------
/src/components/Blog/Post.tsx:
--------------------------------------------------------------------------------
  1 | import { PageTitle } from "../PageTitle";
  2 | import { StyledMarkdown } from "../Markdown";
  3 | import { Link } from "react-router-dom";
  4 | import { UserImage } from "../Author/Profile";
  5 | import type { Id, Doc } from "../../../convex/_generated/dataModel";
  6 | import { FileTextIcon } from "@radix-ui/react-icons";
  7 | 
  8 | export type PostWithAuthor = Doc<"posts"> & {
  9 |   author?: Doc<"users">;
 10 | };
 11 | 
 12 | // Either a `posts` or `versions` document, or unsaved version
 13 | export type PostOrVersion = Doc<"posts"> &
 14 |   Doc<"versions"> & {
 15 |     _id?: Id<"posts"> | Id<"versions">;
 16 |     editorId?: Id<"users"> | null;
 17 |     postId?: Id<"posts">;
 18 |     author?: Doc<"users"> | null;
 19 |   };
 20 | 
 21 | export function Byline({
 22 |   author,
 23 |   timestamp,
 24 | }: {
 25 |   author: Doc<"users"> | null;
 26 |   timestamp?: number;
 27 | }) {
 28 |   // If no timestamp given, this is a draft/preview; show today's date
 29 |   const date = new Date(timestamp || Date.now()).toDateString();
 30 | 
 31 |   return (
 32 |     author && (
 33 |       <div className="flex items-center gap-2">
 34 |         <UserImage src={author.image} />
 35 |         <div className="flex flex-col">
 36 |           <Link
 37 |             to={`/authors/${author.slug}`}
 38 |             className="text-sm underline-offset-2 hover:underline"
 39 |           >
 40 |             {author.name}
 41 |           </Link>
 42 |           <div className="font-mono text-sm text-neutral-n6">{date}</div>
 43 |         </div>
 44 |       </div>
 45 |     )
 46 |   );
 47 | }
 48 | 
 49 | export function PostImage({
 50 |   imageUrl,
 51 |   title,
 52 | }: Partial<Pick<PostOrVersion, "imageUrl" | "title">>) {
 53 |   if (imageUrl) {
 54 |     return (
 55 |       <img
 56 |         src={imageUrl}
 57 |         className="w-full rounded-lg"
 58 |         alt={`Cover image for blog post ${title || ""}`}
 59 |       />
 60 |     );
 61 |   } else {
 62 |     return (
 63 |       <div className="bg-gradient-to-br from-convex-yellow to-convex-purple col-span-1 rounded-lg flex items-center justify-center">
 64 |         <FileTextIcon className="w-20 h-20" />
 65 |       </div>
 66 |     );
 67 |   }
 68 | }
 69 | 
 70 | export function PostPreview({ post }: { post: PostWithAuthor }) {
 71 |   return (
 72 |     post && (
 73 |       <div
 74 |         className={`p-5 md:pr-4  lg:pr-4 grid grid-cols-1 md:grid-cols-3 gap-6 ${
 75 |           post.published ? "" : "italic bg-muted text-muted-foreground"
 76 |         }`}
 77 |       >
 78 |         <PostImage imageUrl={post.imageUrl} title={post.title} />
 79 |         <div className={`flex flex-col gap-6 ${"md:col-span-2"} `}>
 80 |           <div className="flex flex-row items-center gap-3">
 81 |             <div className="flex flex-col gap-3">
 82 |               <div className="line-clamp-2 text-2xl leading-tight decoration-neutral-n6 underline-offset-4 hover:underline">
 83 |                 <Link to={`/${post.slug}`}>{post.title}</Link>
 84 |               </div>
 85 |               {post.summary && (
 86 |                 <div className="line-clamp-2 max-w-xl shrink-0 text-sm">
 87 |                   <StyledMarkdown content={post.summary} />
 88 |                 </div>
 89 |               )}
 90 |             </div>
 91 |           </div>
 92 |           {post.author && (
 93 |             <Byline author={post.author} timestamp={post.publishTime} />
 94 |           )}
 95 |         </div>
 96 |       </div>
 97 |     )
 98 |   );
 99 | }
100 | 
101 | export function PreviewGallery({ posts }: { posts: Doc<"posts">[] }) {
102 |   if (!posts?.length) {
103 |     return (
104 |       <h1 className="text-xl font-semibold sm:text-2xl lg:text-4xl py-2">
105 |         No posts found
106 |       </h1>
107 |     );
108 |   } else {
109 |     return (
110 |       <div>
111 |         {posts?.map((post) => <PostPreview key={post._id} post={post} />)}
112 |       </div>
113 |     );
114 |   }
115 | }
116 | 
117 | export function DisplayPost({ post }: { post: PostOrVersion }) {
118 |   return (
119 |     post && (
120 |       <article className="container">
121 |         <div className="mb-4 grid grid-cols-1 items-start gap-2">
122 |           <div className="flex flex-col h-full gap-8 px-0 sm:px-20 lg:px-32">
123 |             <PageTitle title={post.title} />
124 |             {post.author && (
125 |               <Byline author={post.author} timestamp={post.publishTime} />
126 |             )}
127 | 
128 |             {post.summary && (
129 |               <div className="text-muted-foreground italic">
130 |                 <StyledMarkdown content={post.summary} />
131 |               </div>
132 |             )}
133 |           </div>
134 |           <div className="my-4">
135 |             {post.imageUrl && (
136 |               <PostImage imageUrl={post.imageUrl} title={post.title} />
137 |             )}
138 |           </div>
139 | 
140 |           <div className="px-0 sm:px-20 lg:px-32">
141 |             <StyledMarkdown content={post.content} />
142 |           </div>
143 |         </div>
144 |       </article>
145 |     )
146 |   );
147 | }
148 |

--------------------------------------------------------------------------------
/src/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as LabelPrimitive from "@radix-ui/react-label";
  3 | import { Slot } from "@radix-ui/react-slot";
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from "react-hook-form";
 12 | 
 13 | import { cn } from "@/lib/utils";
 14 | import { Label } from "@/components/ui/label";
 15 | 
 16 | const Form = FormProvider;
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 21 | > = {
 22 |   name: TName;
 23 | };
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue,
 27 | );
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   );
 40 | };
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext);
 44 |   const itemContext = React.useContext(FormItemContext);
 45 |   const { getFieldState, formState } = useFormContext();
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState);
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error("useFormField should be used within <FormField>");
 51 |   }
 52 | 
 53 |   const { id } = itemContext;
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   };
 63 | };
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string;
 67 | };
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue,
 71 | );
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId();
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn("space-y-2", className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   );
 84 | });
 85 | FormItem.displayName = "FormItem";
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField();
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && "text-destructive", className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   );
101 | });
102 | FormLabel.displayName = "FormLabel";
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } =
109 |     useFormField();
110 | 
111 |   return (
112 |     <Slot
113 |       ref={ref}
114 |       id={formItemId}
115 |       aria-describedby={
116 |         !error
117 |           ? `${formDescriptionId}`
118 |           : `${formDescriptionId} ${formMessageId}`
119 |       }
120 |       aria-invalid={!!error}
121 |       {...props}
122 |     />
123 |   );
124 | });
125 | FormControl.displayName = "FormControl";
126 | 
127 | const FormDescription = React.forwardRef<
128 |   HTMLParagraphElement,
129 |   React.HTMLAttributes<HTMLParagraphElement>
130 | >(({ className, ...props }, ref) => {
131 |   const { formDescriptionId } = useFormField();
132 | 
133 |   return (
134 |     <p
135 |       ref={ref}
136 |       id={formDescriptionId}
137 |       className={cn("text-[0.8rem] text-muted-foreground", className)}
138 |       {...props}
139 |     />
140 |   );
141 | });
142 | FormDescription.displayName = "FormDescription";
143 | 
144 | const FormMessage = React.forwardRef<
145 |   HTMLParagraphElement,
146 |   React.HTMLAttributes<HTMLParagraphElement>
147 | >(({ className, children, ...props }, ref) => {
148 |   const { error, formMessageId } = useFormField();
149 |   const body = error ? String(error?.message) : children;
150 | 
151 |   if (!body) {
152 |     return null;
153 |   }
154 | 
155 |   return (
156 |     <p
157 |       ref={ref}
158 |       id={formMessageId}
159 |       className={cn("text-[0.8rem] font-medium text-destructive", className)}
160 |       {...props}
161 |     >
162 |       {body}
163 |     </p>
164 |   );
165 | });
166 | FormMessage.displayName = "FormMessage";
167 | 
168 | export {
169 |   useFormField,
170 |   Form,
171 |   FormItem,
172 |   FormLabel,
173 |   FormControl,
174 |   FormDescription,
175 |   FormMessage,
176 |   FormField,
177 | };
178 |

--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import { Cross2Icon } from "@radix-ui/react-icons";
  3 | import * as ToastPrimitives from "@radix-ui/react-toast";
  4 | import { cva, type VariantProps } from "class-variance-authority";
  5 | 
  6 | import { cn } from "@/lib/utils";
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider;
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 18 |       className,
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ));
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 24 | 
 25 | const toastVariants = cva(
 26 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: "border bg-background text-foreground",
 31 |         destructive:
 32 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: "default",
 37 |     },
 38 |   },
 39 | );
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   );
 53 | });
 54 | Toast.displayName = ToastPrimitives.Root.displayName;
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 64 |       className,
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ));
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName;
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 79 |       className,
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <Cross2Icon className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ));
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName;
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn("text-sm font-semibold [&+div]:text-xs", className)}
 96 |     {...props}
 97 |   />
 98 | ));
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName;
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn("text-sm opacity-90", className)}
108 |     {...props}
109 |   />
110 | ));
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName;
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>;
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | };
128 |

--------------------------------------------------------------------------------
/src/components/GetStarted/GetStartedDialog.tsx:
--------------------------------------------------------------------------------
  1 | import { ConvexLogo } from "@/components/GetStarted/ConvexLogo";
  2 | import { Code } from "@/components/Code";
  3 | import { Button } from "@/components/ui/button";
  4 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
  5 | import {
  6 |   Dialog,
  7 |   DialogClose,
  8 |   DialogContent,
  9 |   DialogFooter,
 10 |   DialogHeader,
 11 |   DialogTitle,
 12 |   DialogTrigger,
 13 | } from "@/components/ui/dialog";
 14 | import {
 15 |   CodeIcon,
 16 |   ExternalLinkIcon,
 17 |   MagicWandIcon,
 18 |   StackIcon,
 19 | } from "@radix-ui/react-icons";
 20 | import { ReactNode } from "react";
 21 | 
 22 | export function GetStartedDialog({ children }: { children: ReactNode }) {
 23 |   return (
 24 |     <Dialog>
 25 |       <DialogTrigger asChild>{children}</DialogTrigger>
 26 |       <DialogContent className="max-w-2xl max-h-[calc(100vh-8rem)] grid-rows-[1fr_auto]">
 27 |         <DialogHeader>
 28 |           <DialogTitle className="flex items-baseline gap-2">
 29 |             Your app powered by <ConvexLogo width={69} height={11} />
 30 |           </DialogTitle>
 31 |         </DialogHeader>
 32 |         <GetStartedContent />
 33 |         <DialogFooter>
 34 |           <DialogClose asChild>
 35 |             <Button variant="secondary">Got it</Button>
 36 |           </DialogClose>
 37 |         </DialogFooter>
 38 |       </DialogContent>
 39 |     </Dialog>
 40 |   );
 41 | }
 42 | 
 43 | export function GetStartedContent() {
 44 |   return (
 45 |     <div className="">
 46 |       <p className="text-foreground py-2">
 47 |         This template is a starting point for building your content-driven
 48 |         fullstack web application.
 49 |       </p>
 50 |       <p className="text-foreground italic py-4">
 51 |         To prevent abuse, the content in the public demo app hosted at{" "}
 52 |         <a
 53 |           href="https://www.convex-cms.com/"
 54 |           className="underline underline-offset-4 hover:no-underline"
 55 |           target="_blank"
 56 |         >
 57 |           convex-cms.com
 58 |         </a>{" "}
 59 |         is reset daily using a Convex{" "}
 60 |         <a
 61 |           href="https://docs.convex.dev/scheduling/cron-jobs"
 62 |           className="underline underline-offset-4 hover:no-underline"
 63 |           target="_blank"
 64 |         >
 65 |           cron job
 66 |         </a>{" "}
 67 |         defined in <Code>convex/crons.ts</Code>. You can edit & create new
 68 |         posts, but your changes will be deleted within 24 hours.
 69 |       </p>
 70 |       <h2 className="mt-6 mb-3 font-semibold">Explore the code</h2>
 71 |       <div className="grid gap-4 md:grid-cols-3 mb-4">
 72 |         <Card>
 73 |           <CardHeader>
 74 |             <CardTitle className="flex gap-2">
 75 |               <StackIcon /> Inspect the database
 76 |             </CardTitle>
 77 |           </CardHeader>
 78 |           <CardContent>
 79 |             Open the{" "}
 80 |             <a
 81 |               href="https://dashboard.convex.dev/"
 82 |               className="underline underline-offset-4 hover:no-underline"
 83 |               target="_blank"
 84 |             >
 85 |               Convex dashboard
 86 |             </a>{" "}
 87 |             in another window.
 88 |           </CardContent>
 89 |         </Card>
 90 |         <Card>
 91 |           <CardHeader>
 92 |             <CardTitle className="flex gap-2">
 93 |               <CodeIcon />
 94 |               Change the backend
 95 |             </CardTitle>
 96 |           </CardHeader>
 97 |           <CardContent>
 98 |             Edit the functions in the <Code>convex/</Code> directory to change
 99 |             the backend functionality.
100 |           </CardContent>
101 |         </Card>
102 |         <Card>
103 |           <CardHeader>
104 |             <CardTitle className="flex gap-2">
105 |               <MagicWandIcon />
106 |               Change the frontend
107 |             </CardTitle>
108 |           </CardHeader>
109 |           <CardContent>
110 |             Edit <Code>src/components</Code> and <Code>src/pages</Code> to
111 |             change your frontend.
112 |           </CardContent>
113 |         </Card>
114 |       </div>
115 |       <div>
116 |         <h2 className="mt-6 mb-3 font-semibold">Helpful resources</h2>
117 |         <div className="grid md:grid-cols-2 gap-3">
118 |           <Resource title="Convex Docs" href="https://docs.convex.dev/home">
119 |             Read comprehensive documentation for all Convex features.
120 |           </Resource>
121 |           <Resource title="Stack articles" href="https://stack.convex.dev/">
122 |             Learn about best practices, use cases, and more from a growing
123 |             collection of articles, videos, and walkthroughs.
124 |           </Resource>
125 |           <Resource title="Discord" href="https://www.convex.dev/community">
126 |             Join our developer community to ask questions, trade tips & tricks,
127 |             and show off your projects.
128 |           </Resource>
129 |           <Resource title="Search them all" href="https://search.convex.dev/">
130 |             Get unblocked quickly by searching across the docs, Stack, and
131 |             Discord chats.
132 |           </Resource>
133 |         </div>
134 |       </div>
135 |     </div>
136 |   );
137 | }
138 | 
139 | function Resource({
140 |   title,
141 |   children,
142 |   href,
143 | }: {
144 |   title: string;
145 |   children: ReactNode;
146 |   href: string;
147 | }) {
148 |   return (
149 |     <Button
150 |       asChild
151 |       variant="secondary"
152 |       className="flex h-auto flex-col items-start justify-start gap-2 whitespace-normal p-4 font-normal"
153 |     >
154 |       <a href={href} target="_blank">
155 |         <div className="text-sm font-bold flex items-center gap-1">
156 |           {title}
157 |           <ExternalLinkIcon />
158 |         </div>
159 |         <div className="text-muted-foreground">{children}</div>
160 |       </a>
161 |     </Button>
162 |   );
163 | }
164 |

--------------------------------------------------------------------------------
/convex/_generated/server.d.ts:
--------------------------------------------------------------------------------
  1 | /* prettier-ignore-start */
  2 | 
  3 | /* eslint-disable */
  4 | /**
  5 |  * Generated utilities for implementing server-side Convex query and mutation functions.
  6 |  *
  7 |  * THIS CODE IS AUTOMATICALLY GENERATED.
  8 |  *
  9 |  * To regenerate, run `npx convex dev`.
 10 |  * @module
 11 |  */
 12 | 
 13 | import {
 14 |   ActionBuilder,
 15 |   HttpActionBuilder,
 16 |   MutationBuilder,
 17 |   QueryBuilder,
 18 |   GenericActionCtx,
 19 |   GenericMutationCtx,
 20 |   GenericQueryCtx,
 21 |   GenericDatabaseReader,
 22 |   GenericDatabaseWriter,
 23 | } from "convex/server";
 24 | import type { DataModel } from "./dataModel.js";
 25 | 
 26 | /**
 27 |  * Define a query in this Convex app's public API.
 28 |  *
 29 |  * This function will be allowed to read your Convex database and will be accessible from the client.
 30 |  *
 31 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 32 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 33 |  */
 34 | export declare const query: QueryBuilder<DataModel, "public">;
 35 | 
 36 | /**
 37 |  * Define a query that is only accessible from other Convex functions (but not from the client).
 38 |  *
 39 |  * This function will be allowed to read from your Convex database. It will not be accessible from the client.
 40 |  *
 41 |  * @param func - The query function. It receives a {@link QueryCtx} as its first argument.
 42 |  * @returns The wrapped query. Include this as an `export` to name it and make it accessible.
 43 |  */
 44 | export declare const internalQuery: QueryBuilder<DataModel, "internal">;
 45 | 
 46 | /**
 47 |  * Define a mutation in this Convex app's public API.
 48 |  *
 49 |  * This function will be allowed to modify your Convex database and will be accessible from the client.
 50 |  *
 51 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 52 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 53 |  */
 54 | export declare const mutation: MutationBuilder<DataModel, "public">;
 55 | 
 56 | /**
 57 |  * Define a mutation that is only accessible from other Convex functions (but not from the client).
 58 |  *
 59 |  * This function will be allowed to modify your Convex database. It will not be accessible from the client.
 60 |  *
 61 |  * @param func - The mutation function. It receives a {@link MutationCtx} as its first argument.
 62 |  * @returns The wrapped mutation. Include this as an `export` to name it and make it accessible.
 63 |  */
 64 | export declare const internalMutation: MutationBuilder<DataModel, "internal">;
 65 | 
 66 | /**
 67 |  * Define an action in this Convex app's public API.
 68 |  *
 69 |  * An action is a function which can execute any JavaScript code, including non-deterministic
 70 |  * code and code with side-effects, like calling third-party services.
 71 |  * They can be run in Convex's JavaScript environment or in Node.js using the "use node" directive.
 72 |  * They can interact with the database indirectly by calling queries and mutations using the {@link ActionCtx}.
 73 |  *
 74 |  * @param func - The action. It receives an {@link ActionCtx} as its first argument.
 75 |  * @returns The wrapped action. Include this as an `export` to name it and make it accessible.
 76 |  */
 77 | export declare const action: ActionBuilder<DataModel, "public">;
 78 | 
 79 | /**
 80 |  * Define an action that is only accessible from other Convex functions (but not from the client).
 81 |  *
 82 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 83 |  * @returns The wrapped function. Include this as an `export` to name it and make it accessible.
 84 |  */
 85 | export declare const internalAction: ActionBuilder<DataModel, "internal">;
 86 | 
 87 | /**
 88 |  * Define an HTTP action.
 89 |  *
 90 |  * This function will be used to respond to HTTP requests received by a Convex
 91 |  * deployment if the requests matches the path and method where this action
 92 |  * is routed. Be sure to route your action in `convex/http.js`.
 93 |  *
 94 |  * @param func - The function. It receives an {@link ActionCtx} as its first argument.
 95 |  * @returns The wrapped function. Import this function from `convex/http.js` and route it to hook it up.
 96 |  */
 97 | export declare const httpAction: HttpActionBuilder;
 98 | 
 99 | /**
100 |  * A set of services for use within Convex query functions.
101 |  *
102 |  * The query context is passed as the first argument to any Convex query
103 |  * function run on the server.
104 |  *
105 |  * This differs from the {@link MutationCtx} because all of the services are
106 |  * read-only.
107 |  */
108 | export type QueryCtx = GenericQueryCtx<DataModel>;
109 | 
110 | /**
111 |  * A set of services for use within Convex mutation functions.
112 |  *
113 |  * The mutation context is passed as the first argument to any Convex mutation
114 |  * function run on the server.
115 |  */
116 | export type MutationCtx = GenericMutationCtx<DataModel>;
117 | 
118 | /**
119 |  * A set of services for use within Convex action functions.
120 |  *
121 |  * The action context is passed as the first argument to any Convex action
122 |  * function run on the server.
123 |  */
124 | export type ActionCtx = GenericActionCtx<DataModel>;
125 | 
126 | /**
127 |  * An interface to read from the database within Convex query functions.
128 |  *
129 |  * The two entry points are {@link DatabaseReader.get}, which fetches a single
130 |  * document by its {@link Id}, or {@link DatabaseReader.query}, which starts
131 |  * building a query.
132 |  */
133 | export type DatabaseReader = GenericDatabaseReader<DataModel>;
134 | 
135 | /**
136 |  * An interface to read from and write to the database within Convex mutation
137 |  * functions.
138 |  *
139 |  * Convex guarantees that all writes within a single mutation are
140 |  * executed atomically, so you never have to worry about partial writes leaving
141 |  * your data in an inconsistent state. See [the Convex Guide](https://docs.convex.dev/understanding/convex-fundamentals/functions#atomicity-and-optimistic-concurrency-control)
142 |  * for the guarantees Convex provides your functions.
143 |  */
144 | export type DatabaseWriter = GenericDatabaseWriter<DataModel>;
145 | 
146 | /* prettier-ignore-end */
147 |

--------------------------------------------------------------------------------
/src/components/Inputs.tsx:
--------------------------------------------------------------------------------
  1 | import { Input } from "./ui/input";
  2 | import type {
  3 |   FieldPath,
  4 |   FieldValue,
  5 |   FieldValues,
  6 |   UseFormReturn,
  7 | } from "react-hook-form";
  8 | import {
  9 |   FormField,
 10 |   FormItem,
 11 |   FormLabel,
 12 |   FormControl,
 13 |   FormMessage,
 14 |   FormDescription,
 15 | } from "./ui/form";
 16 | import { Textarea } from "./ui/textarea";
 17 | import { useMutation, useQuery } from "convex/react";
 18 | import { api } from "../../convex/_generated/api";
 19 | import {
 20 |   UploadButton,
 21 |   type UploadFileResponse,
 22 | } from "@xixixao/uploadstuff/react";
 23 | import "@xixixao/uploadstuff/react/styles.css";
 24 | import type { Id } from "../../convex/_generated/dataModel";
 25 | import { useToast } from "./ui/use-toast";
 26 | import { useEffect, useState } from "react";
 27 | 
 28 | interface CommonProps<Schema extends FieldValues> {
 29 |   name: FieldPath<Schema>;
 30 |   form: UseFormReturn<Schema>;
 31 | }
 32 | 
 33 | interface TextFieldProps<Schema extends FieldValues>
 34 |   extends CommonProps<Schema> {
 35 |   hidden?: boolean;
 36 |   required?: boolean;
 37 |   itemClass?: string;
 38 |   controlClass?: string;
 39 | }
 40 | 
 41 | export function TextField<Schema extends FieldValues>({
 42 |   name,
 43 |   form,
 44 |   hidden,
 45 |   required,
 46 |   itemClass,
 47 |   controlClass,
 48 | }: TextFieldProps<Schema>) {
 49 |   const ifRequired = required ? { required: true, "aria-required": true } : {};
 50 |   return (
 51 |     <FormField
 52 |       control={form.control}
 53 |       name={name}
 54 |       render={({ field }) => (
 55 |         <FormItem
 56 |           className={itemClass || "grid grid-cols-4 gap-4 mb-4 items-center"}
 57 |         >
 58 |           <div className="col-span-1 row-span-2 text-right">
 59 |             <FormLabel className="text-primary">
 60 |               {name}
 61 |               {required && "*"}
 62 |             </FormLabel>
 63 |             <FormMessage className="w-full text-convex-yellow italic" />
 64 |           </div>
 65 |           <FormControl className={controlClass || "col-span-3 row-span-2"}>
 66 |             <Input
 67 |               type={hidden ? "hidden" : "text"}
 68 |               {...field}
 69 |               onBlur={() => void form.trigger()}
 70 |               {...ifRequired}
 71 |             />
 72 |           </FormControl>
 73 |         </FormItem>
 74 |       )}
 75 |     />
 76 |   );
 77 | }
 78 | 
 79 | interface MarkdownFieldProps<Schema extends FieldValues>
 80 |   extends TextFieldProps<Schema> {
 81 |   rows?: number;
 82 | }
 83 | 
 84 | export function MarkdownField<Schema extends FieldValues>({
 85 |   name,
 86 |   form,
 87 |   rows,
 88 |   required,
 89 | }: MarkdownFieldProps<Schema>) {
 90 |   const ifRequired = required ? { required: true, "aria-required": true } : {};
 91 |   return (
 92 |     <FormField
 93 |       control={form.control}
 94 |       name={name}
 95 |       render={({ field }) => (
 96 |         <FormItem className="grid grid-cols-4 gap-4 mb-4 items-center">
 97 |           <div className="col-span-1 row-span-2 text-right">
 98 |             <FormLabel className="text-primary font-mono">
 99 |               {name}
100 |               {required && "*"}
101 |             </FormLabel>
102 |             <FormDescription>Markdown allowed</FormDescription>
103 |             <FormMessage className="w-full text-convex-yellow italic" />
104 |           </div>
105 |           <FormControl className="col-span-3 row-span-2">
106 |             <Textarea
107 |               rows={rows || 5}
108 |               {...field}
109 |               onBlur={() => void form.trigger()}
110 |               {...ifRequired}
111 |             />
112 |           </FormControl>
113 |         </FormItem>
114 |       )}
115 |     />
116 |   );
117 | }
118 | 
119 | export function ImageField<Schema extends FieldValues>({
120 |   form,
121 | }: CommonProps<Schema>) {
122 |   const { toast } = useToast();
123 | 
124 |   const generateUploadUrl = useMutation(api.images.generateUploadUrl);
125 |   const save = useMutation(api.images.saveOptimized);
126 | 
127 |   const [imageId, setImageId] = useState<Id<"images">>();
128 |   const imageUrl = useQuery(
129 |     api.images.getUrl,
130 |     imageId ? { id: imageId } : "skip",
131 |   );
132 |   const { setValue } = form;
133 | 
134 |   useEffect(() => {
135 |     if (imageUrl) {
136 |       setValue(
137 |         "imageUrl" as FieldPath<Schema>,
138 |         imageUrl as FieldValue<Schema>,
139 |         { shouldDirty: true },
140 |       );
141 |     }
142 |   }, [imageUrl, setValue]);
143 | 
144 |   const saveAfterUpload = async (uploaded: UploadFileResponse[]) => {
145 |     const { name, type, size, response } = uploaded[0];
146 |     const { storageId } = response as { storageId: Id<"_storage"> };
147 |     const { _id } = await save({
148 |       name,
149 |       type,
150 |       size,
151 |       storageId,
152 |     });
153 |     if (!_id) {
154 |       toast({
155 |         title: "Error saving image file",
156 |         variant: "destructive",
157 |         description: `Null result for storageId ${storageId}`,
158 |       });
159 |     } else {
160 |       toast({
161 |         title: `Saved image file ${name}`,
162 |         description: `ID: ${_id}`,
163 |       });
164 |       setImageId(_id);
165 |     }
166 |   };
167 | 
168 |   return (
169 |     <div className="grid grid-cols-4 gap-x-4 items-center">
170 |       <TextField
171 |         name={"imageUrl" as FieldPath<Schema>}
172 |         form={form}
173 |         itemClass="space-y-2 grid grid-cols-subgrid col-span-4 sm:col-span-3 gap-4 mb-4 items-center"
174 |         controlClass="col-span-3 sm:col-span-2 row-span-2"
175 |       />
176 |       <div className="col-start-2 sm:col-start-4 col-span-1 pb-2">
177 |         <UploadButton
178 |           uploadUrl={generateUploadUrl}
179 |           fileTypes={[".png", ".gif", ".jpeg", ".jpg"]}
180 |           onUploadComplete={saveAfterUpload}
181 |           onUploadError={(error: unknown) => {
182 |             toast({
183 |               title: "Error uploading image",
184 |               description: `Error: ${error as string}`,
185 |               variant: "destructive",
186 |             });
187 |           }}
188 |           content={(progress) => (progress ? "Uploading..." : "Upload image")}
189 |         />
190 |       </div>
191 |     </div>
192 |   );
193 | }
194 |

--------------------------------------------------------------------------------
/src/components/Blog/Edit.tsx:
--------------------------------------------------------------------------------
  1 | import { useMutation, useQuery } from "convex/react";
  2 | import { api } from "../../../convex/_generated/api";
  3 | import { useEffect, useState, type FormEventHandler } from "react";
  4 | import { ImageField, MarkdownField, TextField } from "@/components/Inputs";
  5 | import { Button } from "@/components/ui/button";
  6 | import { versionsZod } from "../../../convex/schema";
  7 | import { useForm, type SubmitHandler } from "react-hook-form";
  8 | import { z } from "zod";
  9 | import { zodResolver } from "@hookform/resolvers/zod";
 10 | import { useToast } from "@/components/ui/use-toast";
 11 | import { Form } from "@/components/ui/form";
 12 | import { Switch } from "@/components/ui/switch";
 13 | import { Label } from "../ui/label";
 14 | import { DisplayPost, type PostOrVersion } from "./Post";
 15 | import { useNavigate, useSearchParams } from "react-router-dom";
 16 | import { VersionHistory } from "@/components/Blog/History";
 17 | import { Toolbar } from "../Toolbar";
 18 | import type { Doc } from "../../../convex/_generated/dataModel";
 19 | 
 20 | const versionDefaults = {
 21 |   postId: "",
 22 |   slug: "",
 23 |   title: "",
 24 |   summary: "",
 25 |   content: "",
 26 |   imageUrl: "",
 27 |   authorId: "",
 28 |   editorId: "",
 29 |   published: false,
 30 | };
 31 | 
 32 | export function EditablePost({ version }: { version: Doc<"versions"> | null }) {
 33 |   const { toast } = useToast();
 34 |   const navigate = useNavigate();
 35 |   const [_, setSearchParams] = useSearchParams();
 36 | 
 37 |   const [previewing, setPreviewing] = useState(false);
 38 | 
 39 |   const viewer = useQuery(api.users.viewer);
 40 | 
 41 |   const saveDraft = useMutation(api.versions.saveDraft);
 42 |   const publishPost = useMutation(api.posts.publish);
 43 | 
 44 |   const zodSchema = z.object({ ...versionsZod, image: z.any() });
 45 |   type Schema = z.infer<typeof zodSchema>;
 46 | 
 47 |   const defaultValues = version || versionDefaults;
 48 | 
 49 |   const form = useForm<Schema>({
 50 |     defaultValues,
 51 |     resolver: zodResolver(zodSchema),
 52 |   });
 53 | 
 54 |   const { getValues, setValue, setError } = form;
 55 | 
 56 |   const slugTaken = useQuery(
 57 |     api.posts.isSlugTaken,
 58 |     getValues("slug")
 59 |       ? {
 60 |           slug: getValues("slug"),
 61 |           postId: getValues("postId"),
 62 |         }
 63 |       : "skip",
 64 |   );
 65 | 
 66 |   useEffect(() => {
 67 |     if (slugTaken) {
 68 |       setError("slug", { message: "Slug already in use" });
 69 |     }
 70 |   }, [slugTaken, setError]);
 71 | 
 72 |   useEffect(() => {
 73 |     if (viewer) {
 74 |       if (!getValues("authorId") && viewer) {
 75 |         setValue("authorId", viewer._id);
 76 |       }
 77 |       setValue("editorId", viewer._id);
 78 |     }
 79 |   }, [viewer, getValues, setValue]);
 80 | 
 81 |   const onSaveDraft: SubmitHandler<Schema> = async (data) => {
 82 |     try {
 83 |       const newVersion = await saveDraft({
 84 |         ...data,
 85 |         published: false,
 86 |       });
 87 |       if (!newVersion) throw new Error("Error saving draft");
 88 | 
 89 |       toast({
 90 |         title: "Draft saved",
 91 |         description: `Saved new draft version ${newVersion._id}. This draft is not published yet.`,
 92 |       });
 93 | 
 94 |       if (newVersion.slug !== version?.slug) {
 95 |         navigate(`/${newVersion.slug}/edit?v=${newVersion._id}`);
 96 |       } else {
 97 |         setSearchParams((params) => ({ ...params, v: newVersion._id }));
 98 |       }
 99 |     } catch (e) {
100 |       const error = e as Error;
101 |       toast({
102 |         variant: "destructive",
103 |         title: "Error saving draft",
104 |         description: error.message,
105 |       });
106 |     }
107 |   };
108 | 
109 |   const onPublish: SubmitHandler<Schema> = async (data) => {
110 |     try {
111 |       const newVersion = await saveDraft({ ...data, published: true });
112 |       if (!newVersion) throw new Error("Error saving version");
113 | 
114 |       const updatedPost = await publishPost({
115 |         versionId: newVersion._id,
116 |       });
117 |       if (!updatedPost) throw new Error("Error publishing post");
118 | 
119 |       toast({
120 |         title: "Post published",
121 |         description: `Published version ${newVersion._id} of post ${updatedPost._id}`,
122 |       });
123 |       form.reset(data);
124 |       navigate(`/${newVersion.slug}`);
125 |     } catch (e) {
126 |       const error = e as Error;
127 |       toast({
128 |         variant: "destructive",
129 |         title: "Error publishing post",
130 |         description: error.message,
131 |       });
132 |     }
133 |   };
134 | 
135 |   // Wrapper for form.handleSubmit to avoid no-misused-promises error;
136 |   // see https://github.com/orgs/react-hook-form/discussions/8020
137 |   const getSubmitHandler = function (
138 |     handler: SubmitHandler<Schema>,
139 |   ): FormEventHandler {
140 |     return (...args) => void form.handleSubmit(handler)(...args);
141 |   };
142 | 
143 |   const { isValid, isDirty } = form.formState;
144 | 
145 |   return (
146 |     <>
147 |       <Toolbar>
148 |         <div className="w-full flex max-sm:flex-col sm:flex-row gap-2 justify-between items-center">
149 |           <div className="flex flex-grow flex-row gap-1 sm:gap-2 justify-between items-center">
150 |             <div className="flex flex-row gap-1 items-center">
151 |               <Switch
152 |                 id="editing"
153 |                 checked={previewing}
154 |                 onCheckedChange={(checked) => setPreviewing(checked)}
155 |               />
156 |               <Label htmlFor="editing" className="text-primary">
157 |                 Preview
158 |               </Label>
159 |             </div>
160 | 
161 |             {version && (
162 |               <VersionHistory
163 |                 postId={version.postId}
164 |                 currentVersion={version._id}
165 |                 isDirty={isDirty}
166 |               />
167 |             )}
168 |           </div>
169 | 
170 |           <div
171 |             className={`flex flex-row gap-1 sm:gap-2 items-center justify-between`}
172 |           >
173 |             <Button
174 |               variant="secondary"
175 |               type="reset"
176 |               onClick={() =>
177 |                 isDirty
178 |                   ? form.reset(defaultValues)
179 |                   : navigate(`/${version ? version.slug : ""}`)
180 |               }
181 |             >
182 |               <span>{isDirty ? "Reset" : "Cancel"}</span>
183 |             </Button>
184 | 
185 |             <Button
186 |               variant="outline"
187 |               type="button"
188 |               onClick={getSubmitHandler(onSaveDraft)}
189 |               disabled={!isValid || !isDirty}
190 |             >
191 |               Save draft
192 |             </Button>
193 | 
194 |             <Button
195 |               onClick={getSubmitHandler(onPublish)}
196 |               type="button"
197 |               disabled={!isValid || (form.getValues("published") && !isDirty)}
198 |             >
199 |               Publish
200 |             </Button>
201 |           </div>
202 |         </div>
203 |       </Toolbar>
204 | 
205 |       {previewing ? (
206 |         <div className="my-8">
207 |           <DisplayPost
208 |             post={{ ...version, ...form.getValues() } as PostOrVersion}
209 |           />
210 |         </div>
211 |       ) : (
212 |         <Form {...form}>
213 |           <form>
214 |             <div className="container">
215 |               <TextField name="title" form={form} />
216 |               <TextField name="slug" form={form} />
217 |               <ImageField name="image" form={form} />
218 |               <MarkdownField name="summary" rows={3} form={form} />
219 |               <MarkdownField name="content" rows={10} form={form} />
220 |             </div>
221 |           </form>
222 |         </Form>
223 |       )}
224 |     </>
225 |   );
226 | }
227 |

--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
  3 | import {
  4 |   CheckIcon,
  5 |   ChevronRightIcon,
  6 |   DotFilledIcon,
  7 | } from "@radix-ui/react-icons";
  8 | 
  9 | import { cn } from "@/lib/utils";
 10 | 
 11 | const DropdownMenu = DropdownMenuPrimitive.Root;
 12 | 
 13 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 14 | 
 15 | const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 16 | 
 17 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 18 | 
 19 | const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 20 | 
 21 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 22 | 
 23 | const DropdownMenuSubTrigger = React.forwardRef<
 24 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 25 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 26 |     inset?: boolean;
 27 |   }
 28 | >(({ className, inset, children, ...props }, ref) => (
 29 |   <DropdownMenuPrimitive.SubTrigger
 30 |     ref={ref}
 31 |     className={cn(
 32 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 33 |       inset && "pl-8",
 34 |       className,
 35 |     )}
 36 |     {...props}
 37 |   >
 38 |     {children}
 39 |     <ChevronRightIcon className="ml-auto h-4 w-4" />
 40 |   </DropdownMenuPrimitive.SubTrigger>
 41 | ));
 42 | DropdownMenuSubTrigger.displayName =
 43 |   DropdownMenuPrimitive.SubTrigger.displayName;
 44 | 
 45 | const DropdownMenuSubContent = React.forwardRef<
 46 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 47 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 48 | >(({ className, ...props }, ref) => (
 49 |   <DropdownMenuPrimitive.SubContent
 50 |     ref={ref}
 51 |     className={cn(
 52 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 53 |       className,
 54 |     )}
 55 |     {...props}
 56 |   />
 57 | ));
 58 | DropdownMenuSubContent.displayName =
 59 |   DropdownMenuPrimitive.SubContent.displayName;
 60 | 
 61 | const DropdownMenuContent = React.forwardRef<
 62 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 63 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 64 | >(({ className, sideOffset = 4, ...props }, ref) => (
 65 |   <DropdownMenuPrimitive.Portal>
 66 |     <DropdownMenuPrimitive.Content
 67 |       ref={ref}
 68 |       sideOffset={sideOffset}
 69 |       className={cn(
 70 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
 71 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 72 |         className,
 73 |       )}
 74 |       {...props}
 75 |     />
 76 |   </DropdownMenuPrimitive.Portal>
 77 | ));
 78 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 79 | 
 80 | const DropdownMenuItem = React.forwardRef<
 81 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 82 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 83 |     inset?: boolean;
 84 |   }
 85 | >(({ className, inset, ...props }, ref) => (
 86 |   <DropdownMenuPrimitive.Item
 87 |     ref={ref}
 88 |     className={cn(
 89 |       "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 90 |       inset && "pl-8",
 91 |       className,
 92 |     )}
 93 |     {...props}
 94 |   />
 95 | ));
 96 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 97 | 
 98 | const DropdownMenuCheckboxItem = React.forwardRef<
 99 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
100 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
101 | >(({ className, children, checked, ...props }, ref) => (
102 |   <DropdownMenuPrimitive.CheckboxItem
103 |     ref={ref}
104 |     className={cn(
105 |       "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
106 |       className,
107 |     )}
108 |     checked={checked}
109 |     {...props}
110 |   >
111 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
112 |       <DropdownMenuPrimitive.ItemIndicator>
113 |         <CheckIcon className="h-4 w-4" />
114 |       </DropdownMenuPrimitive.ItemIndicator>
115 |     </span>
116 |     {children}
117 |   </DropdownMenuPrimitive.CheckboxItem>
118 | ));
119 | DropdownMenuCheckboxItem.displayName =
120 |   DropdownMenuPrimitive.CheckboxItem.displayName;
121 | 
122 | const DropdownMenuRadioItem = React.forwardRef<
123 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
124 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
125 | >(({ className, children, ...props }, ref) => (
126 |   <DropdownMenuPrimitive.RadioItem
127 |     ref={ref}
128 |     className={cn(
129 |       "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
130 |       className,
131 |     )}
132 |     {...props}
133 |   >
134 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
135 |       <DropdownMenuPrimitive.ItemIndicator>
136 |         <DotFilledIcon className="h-4 w-4 fill-current" />
137 |       </DropdownMenuPrimitive.ItemIndicator>
138 |     </span>
139 |     {children}
140 |   </DropdownMenuPrimitive.RadioItem>
141 | ));
142 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
143 | 
144 | const DropdownMenuLabel = React.forwardRef<
145 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
146 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
147 |     inset?: boolean;
148 |   }
149 | >(({ className, inset, ...props }, ref) => (
150 |   <DropdownMenuPrimitive.Label
151 |     ref={ref}
152 |     className={cn(
153 |       "px-2 py-1.5 text-sm font-semibold",
154 |       inset && "pl-8",
155 |       className,
156 |     )}
157 |     {...props}
158 |   />
159 | ));
160 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
161 | 
162 | const DropdownMenuSeparator = React.forwardRef<
163 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
164 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
165 | >(({ className, ...props }, ref) => (
166 |   <DropdownMenuPrimitive.Separator
167 |     ref={ref}
168 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
169 |     {...props}
170 |   />
171 | ));
172 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
173 | 
174 | const DropdownMenuShortcut = ({
175 |   className,
176 |   ...props
177 | }: React.HTMLAttributes<HTMLSpanElement>) => {
178 |   return (
179 |     <span
180 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
181 |       {...props}
182 |     />
183 |   );
184 | };
185 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
186 | 
187 | export {
188 |   DropdownMenu,
189 |   DropdownMenuTrigger,
190 |   DropdownMenuContent,
191 |   DropdownMenuItem,
192 |   DropdownMenuCheckboxItem,
193 |   DropdownMenuRadioItem,
194 |   DropdownMenuLabel,
195 |   DropdownMenuSeparator,
196 |   DropdownMenuShortcut,
197 |   DropdownMenuGroup,
198 |   DropdownMenuPortal,
199 |   DropdownMenuSub,
200 |   DropdownMenuSubContent,
201 |   DropdownMenuSubTrigger,
202 |   DropdownMenuRadioGroup,
203 | };
204 |

--------------------------------------------------------------------------------
/convex/posts.ts:
--------------------------------------------------------------------------------
  1 | import { v } from "convex/values";
  2 | import { mutation as rawMutation, query } from "./_generated/server";
  3 | import schema from "./schema";
  4 | import { Triggers } from "convex-helpers/server/triggers";
  5 | import { DataModel, type Doc } from "./_generated/dataModel";
  6 | import {
  7 |   customMutation,
  8 |   customCtx,
  9 | } from "convex-helpers/server/customFunctions";
 10 | 
 11 | // Use Triggers to keep aggregated 'search' field up-to-date
 12 | // by automatically updating it whenever a post is created/updated.
 13 | // See also: https://stack.convex.dev/triggers#denormalizing-a-field
 14 | const triggers = new Triggers<DataModel>();
 15 | 
 16 | triggers.register("posts", async (ctx, change) => {
 17 |   console.log("Triggered on posts with change: ", change);
 18 |   if (change.newDoc) {
 19 |     // A post has been inserted or updated;
 20 |     // aggregate the relevant searchable text fields
 21 |     // into a single 'search' string to be indexed
 22 |     const { title, content, summary, slug } = change.newDoc;
 23 |     const newSearch = [title, content, summary, slug].join(" ");
 24 | 
 25 |     // if the search aggregate has changed, update it
 26 |     if (change.newDoc.search !== newSearch) {
 27 |       console.log(
 28 |         `Triggering search field update for ${slug} (post ${change.id})`,
 29 |       );
 30 |       await ctx.db.patch(change.id, { search: newSearch });
 31 |     }
 32 |   }
 33 | });
 34 | // Wrap the default Convex mutation function to be aware of our trigger
 35 | const mutation = customMutation(rawMutation, customCtx(triggers.wrapDB));
 36 | 
 37 | export const publish = mutation({
 38 |   args: {
 39 |     versionId: v.id("versions"),
 40 |   },
 41 |   handler: async (ctx, args) => {
 42 |     const version = await ctx.db.get(args.versionId);
 43 |     if (!version) {
 44 |       throw new Error(`Version ${args.versionId} not found`);
 45 |     }
 46 |     const {
 47 |       _id,
 48 |       _creationTime,
 49 |       editorId: _editorId,
 50 |       postId,
 51 |       ...content
 52 |     } = version;
 53 |     const oldPost = await ctx.db.get(postId);
 54 | 
 55 |     if (!oldPost) {
 56 |       throw new Error(`Post ${version.postId} not found`);
 57 |     }
 58 |     const patch = {
 59 |       ...content,
 60 |       published: true,
 61 |       publishTime: oldPost.publishTime || Date.now(),
 62 |       updateTime: Date.now(),
 63 |     };
 64 |     await ctx.db.patch(postId, patch);
 65 |     return ctx.db.get(postId);
 66 |   },
 67 | });
 68 | 
 69 | export const list = query({
 70 |   args: {},
 71 |   handler: async (ctx) => {
 72 |     // If the user is authenticated, include unpublished drafts
 73 |     // by omitting the index filter. Otherwise, use the index
 74 |     // filter to only return published posts
 75 |     const authed = await ctx.auth.getUserIdentity();
 76 | 
 77 |     const posts = await ctx.db
 78 |       .query("posts")
 79 |       .withIndex(
 80 |         "by_published",
 81 |         authed ? undefined : (q) => q.eq("published", true),
 82 |       )
 83 |       .order("desc")
 84 |       .collect();
 85 | 
 86 |     return Promise.all(
 87 |       posts.map(async (post) => {
 88 |         // Add the author's details to each post.
 89 |         const author = (await ctx.db.get(post.authorId))!;
 90 |         return { ...post, author };
 91 |       }),
 92 |     );
 93 |   },
 94 | });
 95 | 
 96 | export const getById = query({
 97 |   args: {
 98 |     id: v.id("posts"),
 99 |     withAuthor: v.optional(v.boolean()),
100 |   },
101 |   handler: async (ctx, args) => {
102 |     const { id, withAuthor } = args;
103 |     const post = await ctx.db.get(id);
104 |     if (!post) return null;
105 |     let author;
106 |     if (withAuthor) {
107 |       // Add the author's details to each post.
108 |       author = (await ctx.db.get(post.authorId))!;
109 |     }
110 |     return { ...post, author };
111 |   },
112 | });
113 | 
114 | type PostAugmented = Doc<"posts"> & {
115 |   publicVersion?: Doc<"versions">;
116 |   draft?: Doc<"versions">;
117 |   author?: Doc<"users">;
118 | };
119 | export const getBySlug = query({
120 |   args: {
121 |     slug: v.string(),
122 |     withDraft: v.optional(v.boolean()),
123 |     withAuthor: v.optional(v.boolean()),
124 |   },
125 |   handler: async (ctx, args) => {
126 |     const versionsBySlug = ctx.db
127 |       .query("versions")
128 |       .withIndex("by_slug", (q) => q.eq("slug", args.slug));
129 | 
130 |     const publicVersion = await versionsBySlug
131 |       .filter((q) => q.eq(q.field("published"), true))
132 |       .order("desc")
133 |       .first();
134 | 
135 |     let post = await ctx.db
136 |       .query("posts")
137 |       .withIndex("by_slug", (q) => q.eq("slug", args.slug))
138 |       .order("desc")
139 |       .first();
140 | 
141 |     if (!post) {
142 |       // The slug for this post may have changed
143 |       // try searching for this slug in old versions
144 |       if (publicVersion) {
145 |         // The slug is outdated, lookup the postId
146 |         post = await ctx.db.get(publicVersion.postId);
147 |       }
148 |     }
149 |     if (!post) return null; // The slug is unknown
150 | 
151 |     const authed = await ctx.auth.getUserIdentity();
152 |     if (!authed && !post.published) {
153 |       // This is an unpublished draft, unauthenticated
154 |       // user does not have permission to view it
155 |       return null;
156 |     }
157 | 
158 |     const result: PostAugmented = post;
159 |     if (publicVersion) {
160 |       result.publicVersion = publicVersion;
161 |     }
162 | 
163 |     if (args.withDraft) {
164 |       // Find the most recent unpublished draft, if any,
165 |       // created after this post was last updated
166 |       const draft = await ctx.db
167 |         .query("versions")
168 |         .withIndex("by_postId", (q) => q.eq("postId", post._id))
169 |         .filter((q) =>
170 |           q.and(
171 |             q.gt(
172 |               q.field("_creationTime"),
173 |               post.updateTime || post._creationTime,
174 |             ),
175 |             q.eq(q.field("published"), false),
176 |           ),
177 |         )
178 |         .order("desc")
179 |         .first();
180 |       if (draft) {
181 |         result.draft = draft;
182 |       }
183 |     }
184 | 
185 |     if (args.withAuthor) {
186 |       const author = await ctx.db.get(post.authorId);
187 |       if (author) {
188 |         result.author = author;
189 |       }
190 |     }
191 | 
192 |     return result;
193 |   },
194 | });
195 | 
196 | export const isSlugTaken = query({
197 |   args: {
198 |     slug: v.string(),
199 |     postId: schema.tables.posts.validator.fields.postId,
200 |   },
201 |   handler: async (ctx, args) => {
202 |     const { slug, postId } = args;
203 | 
204 |     // Find any existing post(s) with this slug and flag
205 |     // any whose postId doesn't match the one given
206 |     const posts = await ctx.db
207 |       .query("posts")
208 |       .withIndex("by_slug", (q) => q.eq("slug", slug))
209 |       .collect();
210 |     const badPostIds = new Set(
211 |       posts.filter((p) => p._id !== postId).map((p) => p._id),
212 |     );
213 | 
214 |     // It's possible that the slug is no longer in use on any posts,
215 |     // but had previously been used in an old version of another post.
216 |     // Collect all version(s) with this slug...
217 |     const versions = await ctx.db
218 |       .query("versions")
219 |       .withIndex("by_slug", (q) => q.eq("slug", slug))
220 |       .collect();
221 |     // ...and flag any whose postId doesn't match the one given.
222 |     const badVersions = versions.filter((v) => v.postId !== postId);
223 |     badVersions.map((v) => badPostIds.add(v.postId));
224 | 
225 |     if (badPostIds.size > 0) {
226 |       // This slug is unavailable (already/previously in use)
227 |       const msg = `Slug "${slug}" is unavailable, used on post(s) ${Array.from(badPostIds).toString()}`;
228 |       console.error(msg);
229 |       return msg;
230 |     } else {
231 |       return false;
232 |     }
233 |   },
234 | });
235 | 
236 | export const search = query({
237 |   args: { searchTerm: v.string() },
238 |   handler: async (ctx, args) => {
239 |     const authed = await ctx.auth.getUserIdentity();
240 | 
241 |     const results = await ctx.db
242 |       .query("posts")
243 |       .withSearchIndex("search_all", (q) => {
244 |         const search = q.search("search", args.searchTerm);
245 | 
246 |         // Search public + draft posts if user is authed;
247 |         // otherwise, add filter to only search public posts
248 |         return authed ? search : search.eq("published", true);
249 |       })
250 |       .collect();
251 | 
252 |     return Promise.all(
253 |       results.map(async (post) => {
254 |         // Add the author's details to each post.
255 |         const author = (await ctx.db.get(post.authorId))!;
256 |         return { ...post, author };
257 |       }),
258 |     );
259 |   },
260 | });
261 |

--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
  1 | 
  2 |                                  Apache License
  3 |                            Version 2.0, January 2004
  4 |                         http://www.apache.org/licenses/
  5 | 
  6 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  7 | 
  8 |    1. Definitions.
  9 | 
 10 |       "License" shall mean the terms and conditions for use, reproduction,
 11 |       and distribution as defined by Sections 1 through 9 of this document.
 12 | 
 13 |       "Licensor" shall mean the copyright owner or entity authorized by
 14 |       the copyright owner that is granting the License.
 15 | 
 16 |       "Legal Entity" shall mean the union of the acting entity and all
 17 |       other entities that control, are controlled by, or are under common
 18 |       control with that entity. For the purposes of this definition,
 19 |       "control" means (i) the power, direct or indirect, to cause the
 20 |       direction or management of such entity, whether by contract or
 21 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 22 |       outstanding shares, or (iii) beneficial ownership of such entity.
 23 | 
 24 |       "You" (or "Your") shall mean an individual or Legal Entity
 25 |       exercising permissions granted by this License.
 26 | 
 27 |       "Source" form shall mean the preferred form for making modifications,
 28 |       including but not limited to software source code, documentation
 29 |       source, and configuration files.
 30 | 
 31 |       "Object" form shall mean any form resulting from mechanical
 32 |       transformation or translation of a Source form, including but
 33 |       not limited to compiled object code, generated documentation,
 34 |       and conversions to other media types.
 35 | 
 36 |       "Work" shall mean the work of authorship, whether in Source or
 37 |       Object form, made available under the License, as indicated by a
 38 |       copyright notice that is included in or attached to the work
 39 |       (an example is provided in the Appendix below).
 40 | 
 41 |       "Derivative Works" shall mean any work, whether in Source or Object
 42 |       form, that is based on (or derived from) the Work and for which the
 43 |       editorial revisions, annotations, elaborations, or other modifications
 44 |       represent, as a whole, an original work of authorship. For the purposes
 45 |       of this License, Derivative Works shall not include works that remain
 46 |       separable from, or merely link (or bind by name) to the interfaces of,
 47 |       the Work and Derivative Works thereof.
 48 | 
 49 |       "Contribution" shall mean any work of authorship, including
 50 |       the original version of the Work and any modifications or additions
 51 |       to that Work or Derivative Works thereof, that is intentionally
 52 |       submitted to Licensor for inclusion in the Work by the copyright owner
 53 |       or by an individual or Legal Entity authorized to submit on behalf of
 54 |       the copyright owner. For the purposes of this definition, "submitted"
 55 |       means any form of electronic, verbal, or written communication sent
 56 |       to the Licensor or its representatives, including but not limited to
 57 |       communication on electronic mailing lists, source code control systems,
 58 |       and issue tracking systems that are managed by, or on behalf of, the
 59 |       Licensor for the purpose of discussing and improving the Work, but
 60 |       excluding communication that is conspicuously marked or otherwise
 61 |       designated in writing by the copyright owner as "Not a Contribution."
 62 | 
 63 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 64 |       on behalf of whom a Contribution has been received by Licensor and
 65 |       subsequently incorporated within the Work.
 66 | 
 67 |    2. Grant of Copyright License. Subject to the terms and conditions of
 68 |       this License, each Contributor hereby grants to You a perpetual,
 69 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 70 |       copyright license to reproduce, prepare Derivative Works of,
 71 |       publicly display, publicly perform, sublicense, and distribute the
 72 |       Work and such Derivative Works in Source or Object form.
 73 | 
 74 |    3. Grant of Patent License. Subject to the terms and conditions of
 75 |       this License, each Contributor hereby grants to You a perpetual,
 76 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 77 |       (except as stated in this section) patent license to make, have made,
 78 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 79 |       where such license applies only to those patent claims licensable
 80 |       by such Contributor that are necessarily infringed by their
 81 |       Contribution(s) alone or by combination of their Contribution(s)
 82 |       with the Work to which such Contribution(s) was submitted. If You
 83 |       institute patent litigation against any entity (including a
 84 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 85 |       or a Contribution incorporated within the Work constitutes direct
 86 |       or contributory patent infringement, then any patent licenses
 87 |       granted to You under this License for that Work shall terminate
 88 |       as of the date such litigation is filed.
 89 | 
 90 |    4. Redistribution. You may reproduce and distribute copies of the
 91 |       Work or Derivative Works thereof in any medium, with or without
 92 |       modifications, and in Source or Object form, provided that You
 93 |       meet the following conditions:
 94 | 
 95 |       (a) You must give any other recipients of the Work or
 96 |           Derivative Works a copy of this License; and
 97 | 
 98 |       (b) You must cause any modified files to carry prominent notices
 99 |           stating that You changed the files; and
100 | 
101 |       (c) You must retain, in the Source form of any Derivative Works
102 |           that You distribute, all copyright, patent, trademark, and
103 |           attribution notices from the Source form of the Work,
104 |           excluding those notices that do not pertain to any part of
105 |           the Derivative Works; and
106 | 
107 |       (d) If the Work includes a "NOTICE" text file as part of its
108 |           distribution, then any Derivative Works that You distribute must
109 |           include a readable copy of the attribution notices contained
110 |           within such NOTICE file, excluding those notices that do not
111 |           pertain to any part of the Derivative Works, in at least one
112 |           of the following places: within a NOTICE text file distributed
113 |           as part of the Derivative Works; within the Source form or
114 |           documentation, if provided along with the Derivative Works; or,
115 |           within a display generated by the Derivative Works, if and
116 |           wherever such third-party notices normally appear. The contents
117 |           of the NOTICE file are for informational purposes only and
118 |           do not modify the License. You may add Your own attribution
119 |           notices within Derivative Works that You distribute, alongside
120 |           or as an addendum to the NOTICE text from the Work, provided
121 |           that such additional attribution notices cannot be construed
122 |           as modifying the License.
123 | 
124 |       You may add Your own copyright statement to Your modifications and
125 |       may provide additional or different license terms and conditions
126 |       for use, reproduction, or distribution of Your modifications, or
127 |       for any such Derivative Works as a whole, provided Your use,
128 |       reproduction, and distribution of the Work otherwise complies with
129 |       the conditions stated in this License.
130 | 
131 |    5. Submission of Contributions. Unless You explicitly state otherwise,
132 |       any Contribution intentionally submitted for inclusion in the Work
133 |       by You to the Licensor shall be under the terms and conditions of
134 |       this License, without any additional terms or conditions.
135 |       Notwithstanding the above, nothing herein shall supersede or modify
136 |       the terms of any separate license agreement you may have executed
137 |       with Licensor regarding such Contributions.
138 | 
139 |    6. Trademarks. This License does not grant permission to use the trade
140 |       names, trademarks, service marks, or product names of the Licensor,
141 |       except as required for reasonable and customary use in describing the
142 |       origin of the Work and reproducing the content of the NOTICE file.
143 | 
144 |    7. Disclaimer of Warranty. Unless required by applicable law or
145 |       agreed to in writing, Licensor provides the Work (and each
146 |       Contributor provides its Contributions) on an "AS IS" BASIS,
147 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148 |       implied, including, without limitation, any warranties or conditions
149 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150 |       PARTICULAR PURPOSE. You are solely responsible for determining the
151 |       appropriateness of using or redistributing the Work and assume any
152 |       risks associated with Your exercise of permissions under this License.
153 | 
154 |    8. Limitation of Liability. In no event and under no legal theory,
155 |       whether in tort (including negligence), contract, or otherwise,
156 |       unless required by applicable law (such as deliberate and grossly
157 |       negligent acts) or agreed to in writing, shall any Contributor be
158 |       liable to You for damages, including any direct, indirect, special,
159 |       incidental, or consequential damages of any character arising as a
160 |       result of this License or out of the use or inability to use the
161 |       Work (including but not limited to damages for loss of goodwill,
162 |       work stoppage, computer failure or malfunction, or any and all
163 |       other commercial damages or losses), even if such Contributor
164 |       has been advised of the possibility of such damages.
165 | 
166 |    9. Accepting Warranty or Additional Liability. While redistributing
167 |       the Work or Derivative Works thereof, You may choose to offer,
168 |       and charge a fee for, acceptance of support, warranty, indemnity,
169 |       or other liability obligations and/or rights consistent with this
170 |       License. However, in accepting such obligations, You may act only
171 |       on Your own behalf and on Your sole responsibility, not on behalf
172 |       of any other Contributor, and only if You agree to indemnify,
173 |       defend, and hold each Contributor harmless for any liability
174 |       incurred by, or claims asserted against, such Contributor by reason
175 |       of your accepting any such warranty or additional liability.
176 | 
177 |    END OF TERMS AND CONDITIONS
178 | 
179 |    APPENDIX: How to apply the Apache License to your work.
180 | 
181 |       To apply the Apache License to your work, attach the following
182 |       boilerplate notice, with the fields enclosed by brackets "[]"
183 |       replaced with your own identifying information. (Don't include
184 |       the brackets!)  The text should be enclosed in the appropriate
185 |       comment syntax for the file format. We also recommend that a
186 |       file or class name and description of purpose be included on the
187 |       same "printed page" as the copyright notice for easier
188 |       identification within third-party archives.
189 | 
190 |    Copyright 2024 Convex, Inc.
191 | 
192 |    Licensed under the Apache License, Version 2.0 (the "License");
193 |    you may not use this file except in compliance with the License.
194 |    You may obtain a copy of the License at
195 | 
196 |        http://www.apache.org/licenses/LICENSE-2.0
197 | 
198 |    Unless required by applicable law or agreed to in writing, software
199 |    distributed under the License is distributed on an "AS IS" BASIS,
200 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201 |    See the License for the specific language governing permissions and
202 |    limitations under the License.
203 |

--------------------------------------------------------------------------------
/convex/data.ts:
--------------------------------------------------------------------------------
  1 | import { internalMutation } from "./_generated/server";
  2 | import type { Id, TableNames } from "./_generated/dataModel";
  3 | import { byEmail, getOrSetSlug } from "./users";
  4 | 
  5 | const USERS = ["ian@convex.dev", "wayne@convex.dev", "contact@anjana.dev"];
  6 | const POSTS = [
  7 |   {
  8 |     authorIndex: 1,
  9 |     content: `A few months into their startup journey, Emily and Jason had successfully launched their platform, thanks to the robust backend support from Convex.dev. Their users loved the smooth, intuitive experience, and the team was ready to take the next big step: adding content management capabilities.
 10 |   
 11 |   When Convex announced their new CMS feature, Emily and Jason were thrilled. The CMS was exactly what they needed to empower their users to manage their content seamlessly within the platform. The developers spent the day exploring the new feature, diving into its functionalities, and brainstorming how they could integrate it to enhance their platform’s offerings.
 12 |   
 13 |   The creative startup office buzzed with excitement as they mapped out new possibilities. Jason pointed out key features on the laptop screen while Emily jotted down implementation ideas. The large screen in the office displayed the CMS dashboard, hinting at the powerful new tools they were eager to incorporate. This new addition to Convex’s offerings not only fueled their excitement but also opened up a world of possibilities for their startup’s growth.`,
 14 |     imageUrl:
 15 |       "https://pleasant-albatross-666.convex.cloud/api/storage/82027b58-1979-435c-a41a-e55205b0a0c5",
 16 |     published: true,
 17 |     slug: "convexcms",
 18 |     summary:
 19 |       "This new addition to Convex’s offerings not only fueled their excitement but also opened up a world of possibilities for their startup’s growth.",
 20 |     title: "Exploring Convex’s New CMS",
 21 |   },
 22 |   {
 23 |     authorIndex: 0,
 24 |     title: "Introducing Convex Auth",
 25 |     slug: "introducing-convex-auth",
 26 |     summary:
 27 |       "Convex Auth is a library for implementing authentication natively in your Convex backend.",
 28 |     published: true,
 29 |     content: ` "Convex Auth is a library for implementing authentication using your Convex backend.
 30 | 
 31 | Check it out [in the Convex docs
 32 | ](https: //docs.convex.dev/auth/convex-auth) to get started or play with the [example demo](https://labs.convex.dev/auth-example) ([source](https://github.com/get-convex/convex-auth-example)).
 33 | 
 34 | *This article is based on the [launch video
 35 | ](https: //convex.dev/auth).*
 36 | 
 37 | # Motivation
 38 | 
 39 | Convex is designed for building multi-user applications. And if your app has users, it needs authentication. But authentication is a really complex component of a full-stack app. For this reason we have been recommending the built-in integrations with mature authentication platforms like [Clerk
 40 | ](https: //clerk.dev/) and [Auth0](https://auth0.com/).
 41 | 
 42 | Yet many developers have been asking for a self-hosted solution. The auth platforms I mentioned have a ton of features but they also store the authentication data. This complicates your app, as that data has to be somehow synced or shared with your backend and database.
 43 | 
 44 | ![diagram of client convex and auth server
 45 | ](https: //cdn.sanity.io/images/ts10onj4/production/d0c8eae535ad0c9dc4bc2bfe336a7d3d5c3553cc-2798x1476.png)
 46 | 
 47 | This is a surmountable challenge, but maybe you’re just getting started and your app doesn’t need every authentication feature. You’d rather have more control over the data and a simpler architecture to build on top of.
 48 | 
 49 | ![diagram of client and convex server
 50 | ](https: //cdn.sanity.io/images/ts10onj4/production/c8226a4d784f83be8bb5b7d569fe422bfdac838c-1957x805.png)
 51 | 
 52 | # Functionality
 53 | 
 54 | Convex Auth enables you to build such a solution. It is inspired by the excellent [Auth.js
 55 | ](https: //authjs.dev/) and [Lucia](https://lucia-auth.com/) libraries, and reuses some of their implementation. It is also similar in its capabilities to auth solutions such as Firebase Auth and Supabase Auth (although it doesn’t have all of their features yet).
 56 | 
 57 | In the [demo
 58 | ](https: //labs.convex.dev/auth-example) you can see the various sign-in methods you can implement with Convex Auth. It supports sign-in via OAuth, magic links, one-time-passwords and normal email and password combination. You can use any of the 80 OAuth providers supported by Auth.js.
 59 | 
 60 | # Code deep dive
 61 | 
 62 | ## Server configuration
 63 | 
 64 | The main configuration file is \`auth.ts\` in your convex directory, which configures the available authentication methods:
 65 | 
 66 | \`\`\`jsx
 67 | import GitHub from '@auth/core/providers/github';
 68 | import Google from '@auth/core/providers/google';
 69 | import Resend from '@auth/core/providers/resend';
 70 | import { Password
 71 | } from '@convex-dev/auth/providers/Password';
 72 | 
 73 | export const { auth, signIn, signOut, store
 74 | } = convexAuth({
 75 |   providers: [GitHub, Google, Resend, Password
 76 |     ],
 77 | });
 78 | \`\`\`
 79 | 
 80 | Your \`schema.ts\` must also include the tables used by the library, including the \`users\` table. This is because the library uses indexes on these tables for efficient lookups:
 81 | 
 82 | \`\`\`jsx
 83 | import { authTables
 84 | } from '@convex-dev/auth/server';
 85 | import { defineSchema, defineTable
 86 | } from 'convex/server';
 87 | import { v
 88 | } from 'convex/values';
 89 | 
 90 | export default defineSchema({
 91 |   ...authTables,
 92 |     // Your other tables...
 93 | });
 94 | \`\`\`
 95 | 
 96 | There is additional configuration in \`auth.config.ts\` and \`https.ts\`, but you won’t need to touch these. See [Manual Setup
 97 | ](https: //labs.convex.dev/auth/setup/manual) for more details if you’re interested.
 98 | 
 99 | ## Frontend configuration
100 | 
101 | On the frontend, instead of using \`ConvexProvider\`, the app is wrapped in \`ConvexAuthProvider\`. Then in the \`App\` root component, the \`Authenticated\` and \`Unauthenticated\` components (from \`convex/react\`) are used to render different UI based on the authentication state. When not authenticated, your app can render the sign-in form:
102 | 
103 | \`\`\`jsx
104 | import { Content
105 | } from '@/Content';
106 | import { SignInForm
107 | } from '@/auth/SignInForm';
108 | import { Authenticated, Unauthenticated
109 | } from 'convex/react';
110 | 
111 | export default function App() {
112 |   return (
113 |     <>
114 |       <Authenticated>
115 |         <Content />
116 |       </Authenticated>
117 |       <Unauthenticated>
118 |         <SignInForm />
119 |       </Unauthenticated>
120 |     </>
121 |   );
122 | }
123 | 
124 | \`\`\`
125 | 
126 | The key part of the sign-in UI is calling the \`signIn\` function with the name of one of the authentication methods configured in \`auth.ts\`. For example here’s a form that sends the user a magic link:
127 | 
128 | \`\`\`jsx
129 | 
130 | import { useAuthActions
131 | } from '@convex-dev/auth/react';
132 | 
133 | export function SignInWithMagicLink() {
134 |   const { signIn
135 |     } = useAuthActions();
136 |   return (
137 |     <form
138 |       className='flex flex-col'
139 |       onSubmit={(event) => {
140 |         event.preventDefault();
141 |         const formData = new FormData(event.currentTarget);
142 |         void signIn('resend', formData);
143 |         }
144 |     }
145 |     >
146 |       <label htmlFor='email'>Email</label>
147 |       <input name='email' id='email' className='mb-4' autoComplete='email' />
148 |       <button type='submit'>Send sign-in link</button>
149 |     </form>
150 |   );
151 | }
152 | \`\`\`
153 | 
154 | ## Handling authentication
155 | 
156 | Finally, let’s look at how the authentication state is used to power the signed-in experience. The \`auth.ts\` file exports an \`auth\` helper, which has methods for retrieving the current user and session ID. Using these methods, we can return the information about the current user back to the client:
157 | 
158 | \`\`\`jsx
159 | import { query
160 | } from './_generated/server';
161 | import { auth
162 | } from './auth';
163 | 
164 | export const viewer = query({
165 |   args: {},
166 |   handler: async (ctx) => {
167 |     const userId = await auth.getUserId(ctx);
168 |     return userId !== null ? ctx.db.get(userId) : null;
169 |     },
170 | });
171 | \`\`\`
172 | 
173 | As well as enforce that certain functions can only be called by signed-in users:
174 | 
175 | \`\`\`jsx
176 | import { query, mutation
177 | } from './_generated/server';
178 | import { v
179 | } from 'convex/values';
180 | import { auth
181 | } from './auth';
182 | 
183 | export const send = mutation({
184 |   args: { body: v.string()
185 |     },
186 |   handler: async (ctx,
187 |     { body
188 |     }) => {
189 |     const userId = await auth.getUserId(ctx);
190 |     if (userId === null) {
191 |       throw new Error('Not signed in');
192 |         }
193 |         // Send a new message.
194 |     await ctx.db.insert('messages',
195 |         { body, userId
196 |         });
197 |     },
198 | });
199 | \`\`\`
200 | 
201 | ## Conclusion
202 | 
203 | And that’s all it takes to get self-hosted auth to work. From here I recommend you read through the [docs
204 | ](https: //labs.convex.dev/auth). They go into detail on how to implement the various authentication methods and on the trade-offs between them. I hope you’ll find the library useful. Please let us know what you think on our [discord](https://arc.net/l/quote/dxljwnkc)."
205 | `,
206 |   },
207 |   {
208 |     authorIndex: 1,
209 |     content: `A team of full-stack developers, comprised of Alex, Priya, and Mateo, were always on the lookout for new tools and technologies that could push the boundaries of their projects. When they heard about the Convex “Zero to One” hackathon, they decided to join, eager to explore what this new backend platform could offer.
210 | 
211 | The hackathon challenge was simple yet ambitious: build something unique using Convex.dev in just 48 hours. The team brainstormed and decided to create a blog platform that could effortlessly handle dynamic content and user interactions. They were drawn to Convex’s promise of fast, scalable, and serverless backend solutions, which seemed perfect for their idea.
212 | 
213 | As they delved into the development, they were impressed by how quickly they could set up their backend using Convex. The platform’s real-time features and seamless integration with their frontend frameworks allowed them to focus on creating a rich, interactive user experience without worrying about managing servers or databases. The project came together faster than they expected, with Convex handling the heavy lifting behind the scenes.
214 | 
215 | By the end of the hackathon, their blog platform was not only functional but also robust and scalable. The experience had been so smooth and empowering that they decided to take their idea further. The team transformed their hackathon project into a full-fledged startup, using Convex as the backbone of their platform. They envisioned expanding the blog into a community-driven space where users could create, share, and interact with content effortlessly.
216 | 
217 | With Convex.dev, they were confident they could scale their startup quickly and efficiently. What started as a hackathon experiment had now evolved into a startup venture, fueled by the possibilities that Convex unlocked for them. The journey from zero to one was just the beginning, and they were excited to see where Convex would take them next.`,
218 |     imageUrl:
219 |       "https://pleasant-albatross-666.convex.cloud/api/storage/6a651783-cb93-4878-a7c9-784091e560c4",
220 |     published: true,
221 |     slug: "hackathon-startup",
222 |     summary:
223 |       "With Convex.dev, they were confident they could scale their startup quickly and efficiently. ",
224 |     title: "From Hackathon to Startup with Convex",
225 |   },
226 |   {
227 |     authorIndex: 2,
228 |     content: `Two full-stack developers, Emily and Jason, were deep into building their startup, an innovative platform aimed at simplifying online event management. They had been struggling with the backend infrastructure, trying to find a solution that would allow them to focus more on the frontend and less on managing complex databases and APIs.
229 |   
230 |   One day, Emily stumbled upon Convex.dev while researching backend solutions. Excited, she immediately shared it with Jason. They were both impressed by how Convex.dev promised to simplify their workflow by providing a fully managed backend platform that integrated seamlessly with their preferred frontend frameworks. The speed and ease of use were exactly what they needed to accelerate their development process. They could now build, test, and deploy features faster, giving them more time to focus on their startup’s unique value proposition.
231 |   
232 |   In their sleek, modern office, Emily and Jason dove into Convex.dev, quickly realizing how it could transform their project. The whiteboard behind them was soon filled with new ideas and plans, as they excitedly mapped out the next steps for their startup, now confident that they had the right tools to bring their vision to life.`,
233 |     imageUrl:
234 |       "https://pleasant-albatross-666.convex.cloud/api/storage/19ead46b-c4d6-47df-bd3f-ff007761c6c0",
235 |     published: true,
236 |     slug: "discovering-convex",
237 |     summary:
238 |       "Two full-stack developers, Emily and Jason, were deep into building their startup, an innovative platform aimed at simplifying online event management. ",
239 |     title: "Discovering Convex.dev",
240 |   },
241 | ];
242 | 
243 | export const clearPosts = internalMutation({
244 |   args: {},
245 |   handler: async (ctx) => {
246 |     await Promise.all(
247 |       ["posts", "versions"].map(async (table) => {
248 |         const oldData = await ctx.db.query(table as TableNames).collect();
249 |         await Promise.all(
250 |           oldData.map(async ({ _id }) => {
251 |             await ctx.db.delete(_id);
252 |           }),
253 |         );
254 |         console.log(
255 |           `Deleted ${oldData.length} documents from "${table}" table`,
256 |         );
257 |       }),
258 |     );
259 |   },
260 | });
261 | 
262 | export const reset = internalMutation({
263 |   args: {},
264 |   handler: async (ctx) => {
265 |     await clearPosts(ctx, {});
266 |     const userIds: Id<"users">[] = await Promise.all(
267 |       USERS.map(async (email) => {
268 |         const user = await byEmail(ctx, { email });
269 |         if (!user) throw new Error("user not found " + email);
270 |         console.log(`Found ${user._id} in "users" table`);
271 |         const slug = await getOrSetSlug(ctx, { id: user._id });
272 |         console.log(`Author slug: ${slug}`);
273 |         return user._id;
274 |       }),
275 |     );
276 |     await Promise.all(
277 |       POSTS.map(async (p) => {
278 |         const { authorIndex, ...post } = p;
279 |         const authorId = userIds[authorIndex];
280 |         const { title, content, summary, slug } = post;
281 |         const search = [title, content, summary, slug].join(" ");
282 | 
283 |         const postId = await ctx.db.insert("posts", {
284 |           ...post,
285 |           authorId,
286 |           publishTime: Date.now(),
287 |           search,
288 |         });
289 |         console.log(`Created document ${postId} in "posts" table`);
290 |         const versionId = await ctx.db.insert("versions", {
291 |           ...post,
292 |           postId,
293 |           authorId,
294 |           editorId: authorId,
295 |         });
296 |         console.log(`Created document ${versionId} in "versions" table`);
297 |       }),
298 |     );
299 |   },
300 | });
301 |

--------------------------------------------------------------------------------