+
+
+
+
+
+
+
+
+ Pubky SDK Cookbook
+
+ 
+
+ );
+}
+
+/**
+ * Cooky: Pubky SDK Cookbook
+ * Single-file demo React app that looks like a cookbook with page turning.
+ * - Left vertical navigation with multi-line menu items
+ * - Flipbook view with page-turn transitions
+ * - Search, copy-to-clipboard, and responsive layout
+ * - Tailwind + lucide-react
+ */
+
+// ---- Demo content ----
+const RECIPES: Recipe[] = [
+ {
+ id: "welcome",
+ title: "Pubky SDK Cookbook",
+ kind: "intro",
+ estimatedTime: "1 min read",
+ body: `## About Cooky
+Cooky is a developer-friendly, copy-and-paste cookbook for building on the Pubky ecosystem.
+
+## What you can expect
+• Code snippets. Every page starts with a working snippet that compiles against pubky 0.6 series.
+• Practical defaults. Staging and local testnet examples.
+• Short context. When to use, what to tweak, and common gotchas.
+
+## Conventions
+• Version. Recipes target \`pubky = "=0.6.0"\` and Tokio runtime.
+• Paths. We use \`pubky://
+
+ {currentParagraph.join('\n')}
+
+ );
+ currentParagraph = [];
+ }
+ };
+
+ lines.forEach((line) => {
+ if (line.startsWith('## ')) {
+ flushParagraph();
+ elements.push(
+ + {line.substring(3)} +
+ ); + } else { + currentParagraph.push(line); + } + }); + + flushParagraph(); + return{elements}
;
+}
+
+function Sidebar({ items, currentId, onSelect, open, bookmarkedIds, triedIds }: { items: Recipe[]; currentId: string; onSelect: (id: string) => void; open?: boolean; bookmarkedIds: Set
+
+
+
+
+ Pubky SDK Cookbook
+
+
+
+
+
+
+ );
+}
+
+function FlipBookView({ recipes, currentId, onFlip, copyFeedback, setCopyFeedback, bookmarkFeedback, triedFeedback, bookmarkedIds, onToggleBookmark, triedIds, onToggleTried, onEnlargeCode }: { recipes: Recipe[]; currentId: string; onFlip: (id: string) => void; copyFeedback: boolean; setCopyFeedback: (value: boolean) => void; bookmarkFeedback: string | null; triedFeedback: string | null; bookmarkedIds: Set
+
+
+ {KINDS.find((k) => k.id === recipe.kind)?.label}
+
+ {recipe.estimatedTime && (
+
+
+ )}
+ {recipe.title}
+ {recipe.body && parseBodyWithHeadings(recipe.body)} + {recipe.code && ( +
+
+ )}
+ {recipe.notes && (
+
+
+ {onEnlargeCode && (
+
+ )}
+
+
+
+
+
+
+
+
+ {recipe.notes}
+
+ )}
+
+
+ );
+ }
+
+ return (
+ No recipes found
+
+ r.id).join(',')}
+ width={680}
+ height={900}
+ minWidth={300}
+ maxWidth={900}
+ minHeight={600}
+ maxHeight={1400}
+ className="mx-auto"
+ size="stretch"
+ showCover={false}
+ mobileScrollSupport
+ onFlip={(e: any) => {
+ if (isProgrammaticFlip.current) {
+ isProgrammaticFlip.current = false;
+ return;
+ }
+ const pageIndex = e?.data ?? 0;
+ const next = recipes[pageIndex]?.id;
+ if (next) onFlip(next);
+ }}
+ ref={bookRef}
+ >
+ {recipes.map((r) => (
+
+
+ );
+}
+
+function ScrollView({ recipes, currentId, copyFeedback, setCopyFeedback, bookmarkFeedback, triedFeedback, bookmarkedIds, onToggleBookmark, triedIds, onToggleTried, onEnlargeCode }: { recipes: Recipe[]; currentId: string; copyFeedback: boolean; setCopyFeedback: (value: boolean) => void; bookmarkFeedback: string | null; triedFeedback: string | null; bookmarkedIds: Set
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+ No recipes found
+
+ {recipes.map((r) => (
+
+ );
+}
+
+export default function CookyApp() {
+ const [query, setQuery] = useState("");
+ const [open, setOpen] = useState(false);
+ const [currentId, setCurrentId] = useState
+
+ ))}
+
+
+ {
+ variant?: 'default' | 'secondary';
+ size?: 'default' | 'sm' | 'icon';
+}
+
+export function Button({
+ variant = 'default',
+ size = 'default',
+ className = '',
+ children,
+ ...props
+}: ButtonProps) {
+ const baseStyles = 'inline-flex items-center justify-center rounded-lg font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
+
+ const variants = {
+ default: 'bg-orange-600 text-white hover:bg-orange-700 focus:ring-orange-600',
+ secondary: 'bg-white text-orange-900 hover:bg-orange-50 border border-orange-200 focus:ring-orange-500'
+ };
+
+ const sizes = {
+ default: 'px-4 py-2 text-sm',
+ sm: 'px-3 py-1.5 text-xs',
+ icon: 'p-2'
+ };
+
+ return (
+
+ );
+}
diff --git a/cooky/src/components/Card.tsx b/cooky/src/components/Card.tsx
new file mode 100644
index 0000000..bd843cf
--- /dev/null
+++ b/cooky/src/components/Card.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface CardProps extends React.HTMLAttributes {}
+
+export function Card({ className = '', children, ...props }: CardProps) {
+ return (
+ {}
+
+export function CardContent({ className = '', children, ...props }: CardContentProps) {
+ return (
+ {}
+
+export function Input({ className = '', ...props }: InputProps) {
+ return (
+
+ );
+}
diff --git a/cooky/src/index.css b/cooky/src/index.css
new file mode 100644
index 0000000..fe5ab3a
--- /dev/null
+++ b/cooky/src/index.css
@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ * {
+ font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ }
+
+ pre, code, code span {
+ font-family: 'Fira Code', Fira Code, 'Courier New', monospace !important;
+ font-feature-settings: 'calt' 1;
+ }
+}
diff --git a/cooky/src/lib/supabase.ts b/cooky/src/lib/supabase.ts
new file mode 100644
index 0000000..b8194a0
--- /dev/null
+++ b/cooky/src/lib/supabase.ts
@@ -0,0 +1,179 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseAnonKey) {
+ throw new Error('Missing Supabase environment variables');
+}
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+
+export function getSessionId(): string {
+ let sessionId = localStorage.getItem('cooky_session_id');
+ if (!sessionId) {
+ sessionId = crypto.randomUUID();
+ localStorage.setItem('cooky_session_id', sessionId);
+ }
+ return sessionId;
+}
+
+export interface Bookmark {
+ id: string;
+ recipe_id: string;
+ session_id: string;
+ created_at: string;
+ notes: string | null;
+}
+
+export async function getBookmarks(sessionId: string): Promise {
+ const { data, error } = await supabase
+ .from('recipe_bookmarks')
+ .select('*')
+ .eq('session_id', sessionId)
+ .order('created_at', { ascending: false });
+
+ if (error) {
+ console.error('Error fetching bookmarks:', error);
+ return [];
+ }
+
+ return data || [];
+}
+
+export async function addBookmark(recipeId: string, sessionId: string): Promise {
+ // Check if bookmark already exists
+ const { data: existing } = await supabase
+ .from('recipe_bookmarks')
+ .select('id')
+ .eq('recipe_id', recipeId)
+ .eq('session_id', sessionId)
+ .maybeSingle();
+
+ if (existing) {
+ console.log('Bookmark already exists, skipping insert');
+ return true; // Already exists, consider it a success
+ }
+
+ const { error } = await supabase
+ .from('recipe_bookmarks')
+ .insert({
+ recipe_id: recipeId,
+ session_id: sessionId,
+ notes: null
+ });
+
+ if (error) {
+ console.error('Error adding bookmark:', error);
+ return false;
+ }
+
+ return true;
+}
+
+export async function removeBookmark(recipeId: string, sessionId: string): Promise {
+ console.log('removeBookmark called with:', { recipeId, sessionId });
+
+ const { data, error, count } = await supabase
+ .from('recipe_bookmarks')
+ .delete()
+ .eq('recipe_id', recipeId)
+ .eq('session_id', sessionId)
+ .select();
+
+ console.log('removeBookmark response:', { data, error, count });
+
+ if (error) {
+ console.error('Error removing bookmark:', error);
+ return false;
+ }
+
+ return true;
+}
+
+export async function isBookmarked(recipeId: string, sessionId: string): Promise {
+ const { data, error } = await supabase
+ .from('recipe_bookmarks')
+ .select('id')
+ .eq('recipe_id', recipeId)
+ .eq('session_id', sessionId)
+ .maybeSingle();
+
+ if (error) {
+ console.error('Error checking bookmark:', error);
+ return false;
+ }
+
+ return !!data;
+}
+
+export interface TriedRecipe {
+ id: string;
+ recipe_id: string;
+ session_id: string;
+ created_at: string;
+}
+
+export async function getTriedRecipes(sessionId: string): Promise {
+ const { data, error } = await supabase
+ .from('tried_recipes')
+ .select('*')
+ .eq('session_id', sessionId)
+ .order('created_at', { ascending: false });
+
+ if (error) {
+ console.error('Error fetching tried recipes:', error);
+ return [];
+ }
+
+ return data || [];
+}
+
+export async function markRecipeAsTried(recipeId: string, sessionId: string): Promise {
+ // Check if recipe is already marked as tried
+ const { data: existing } = await supabase
+ .from('tried_recipes')
+ .select('id')
+ .eq('recipe_id', recipeId)
+ .eq('session_id', sessionId)
+ .maybeSingle();
+
+ if (existing) {
+ console.log('Recipe already marked as tried, skipping insert');
+ return true; // Already exists, consider it a success
+ }
+
+ const { error } = await supabase
+ .from('tried_recipes')
+ .insert({
+ recipe_id: recipeId,
+ session_id: sessionId
+ });
+
+ if (error) {
+ console.error('Error marking recipe as tried:', error);
+ return false;
+ }
+
+ return true;
+}
+
+export async function unmarkRecipeAsTried(recipeId: string, sessionId: string): Promise {
+ console.log('unmarkRecipeAsTried called with:', { recipeId, sessionId });
+
+ const { data, error, count } = await supabase
+ .from('tried_recipes')
+ .delete()
+ .eq('recipe_id', recipeId)
+ .eq('session_id', sessionId)
+ .select();
+
+ console.log('unmarkRecipeAsTried response:', { data, error, count });
+
+ if (error) {
+ console.error('Error unmarking recipe:', error);
+ return false;
+ }
+
+ return true;
+}
diff --git a/cooky/src/main.tsx b/cooky/src/main.tsx
new file mode 100644
index 0000000..ea9e363
--- /dev/null
+++ b/cooky/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+
+
+);
diff --git a/cooky/src/vite-env.d.ts b/cooky/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/cooky/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+
+
+ {open && (
+
+
+ )}
+
+
+
+ {reducedMotion ? (
+
+
+
+
+
+
+ {copyFeedback && (
+
+ Code copied! Let's cook! 👨🍳
+
+ )}
+
+
+
+ {triedFeedback && (
+
+
+ )}
+
+
+
+ {bookmarkFeedback && (
+
+
+ )}
+
+
+
+ {enlargedCode && (
+ setEnlargedCode(null)}
+ >
+ e.stopPropagation()}
+ >
+
+
+ )}
+
+
+
+ {showChefCelebration && (
+
+
+ )}
+
+
+ );
+}
diff --git a/cooky/src/components/Button.tsx b/cooky/src/components/Button.tsx
new file mode 100644
index 0000000..f918b61
--- /dev/null
+++ b/cooky/src/components/Button.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes
+
+
+
+
+
+ actualRecipes.some(r => r.id === t.recipe_id)).length / actualRecipesCount) * 100}%` }}
+ />
+
+
+
+ {triedRecipes.filter(t => actualRecipes.some(r => r.id === t.recipe_id)).length}/{actualRecipesCount} cooked
+
+
+ setQuery(e.target.value)} placeholder="Search recipes, commands, or code" className="pl-8 text-orange-600" />
+
+
+
+ Code View
+
+
+
+
+
+
+
+
+ 🎉
+
+
+ Congratulations!
+You're a Pubky Chef now!
+
+ {children}
+
+ );
+}
+
+interface CardContentProps extends React.HTMLAttributes
+ {children}
+
+ );
+}
diff --git a/cooky/src/components/CodeHighlight.tsx b/cooky/src/components/CodeHighlight.tsx
new file mode 100644
index 0000000..039cd70
--- /dev/null
+++ b/cooky/src/components/CodeHighlight.tsx
@@ -0,0 +1,138 @@
+import { useMemo } from 'react';
+
+interface CodeHighlightProps {
+ code: string;
+ language?: string;
+}
+
+export function CodeHighlight({ code, language = 'rust' }: CodeHighlightProps) {
+ const lines = useMemo(() => {
+ const codeLines = code.split('\n');
+ return codeLines.map((line, index) => ({
+ number: index + 1,
+ code: highlightRustCode(line)
+ }));
+ }, [code]);
+
+ return (
+
+
+ {lines.map((line) => (
+
+
+ {line.number}
+
+
+
+ ))}
+
+
+ );
+}
+
+function highlightRustCode(code: string): string {
+ // Keywords
+ const keywords = [
+ 'use', 'async', 'await', 'fn', 'let', 'mut', 'return', 'if', 'else',
+ 'match', 'while', 'for', 'loop', 'break', 'continue', 'impl', 'trait',
+ 'struct', 'enum', 'pub', 'mod', 'const', 'static', 'type', 'where',
+ 'unsafe', 'extern', 'crate', 'move', 'as', 'ref', 'in', 'self', 'Self'
+ ];
+
+ // Types
+ const types = [
+ 'i8', 'i16', 'i32', 'i64', 'i128', 'isize',
+ 'u8', 'u16', 'u32', 'u64', 'u128', 'usize',
+ 'f32', 'f64', 'bool', 'char', 'str', 'String',
+ 'Vec', 'Option', 'Result', 'Box', 'Rc', 'Arc',
+ 'HashMap', 'HashSet', 'BTreeMap', 'BTreeSet',
+ 'Ok', 'Err', 'Some', 'None', 'Client', 'PublicKey',
+ 'ListBuilder', 'anyhow'
+ ];
+
+ // Macros
+ const macros = ['println!', 'print!', 'vec!', 'format!', 'panic!', 'assert!', 'tokio::main'];
+
+ let highlighted = code;
+
+ // Escape HTML
+ highlighted = highlighted
+ .replace(/&/g, '&')
+ .replace(//g, '>');
+
+ // Highlight strings (double quotes)
+ highlighted = highlighted.replace(
+ /"([^"\\]*(\\.[^"\\]*)*)"/g,
+ '"$1"'
+ );
+
+ // Highlight comments
+ highlighted = highlighted.replace(
+ /\/\/.*/g,
+ '$&'
+ );
+
+ // Highlight block comments
+ highlighted = highlighted.replace(
+ /\/\*[\s\S]*?\*\//g,
+ '$&'
+ );
+
+ // Highlight numbers
+ highlighted = highlighted.replace(
+ /\b(\d+\.?\d*|\.\d+)\b/g,
+ '$1'
+ );
+
+ // Highlight keywords
+ keywords.forEach(keyword => {
+ const regex = new RegExp(`\\b${keyword}\\b`, 'g');
+ highlighted = highlighted.replace(
+ regex,
+ `${keyword}`
+ );
+ });
+
+ // Highlight types
+ types.forEach(type => {
+ const regex = new RegExp(`\\b${type}\\b`, 'g');
+ highlighted = highlighted.replace(
+ regex,
+ `${type}`
+ );
+ });
+
+ // Highlight macros
+ macros.forEach(macro => {
+ const escapedMacro = macro.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ const regex = new RegExp(escapedMacro, 'g');
+ highlighted = highlighted.replace(
+ regex,
+ `${macro}`
+ );
+ });
+
+ // Highlight attributes
+ highlighted = highlighted.replace(
+ /#\[([^\]]+)\]/g,
+ '#[$1]'
+ );
+
+ // Highlight function names (word followed by !)
+ highlighted = highlighted.replace(
+ /\b([a-zA-Z_][a-zA-Z0-9_]*)\s*\(/g,
+ '$1('
+ );
+
+ // Highlight special symbols
+ highlighted = highlighted.replace(
+ /(\?|&|\||->|=>|::)/g,
+ '$1'
+ );
+
+ return `${highlighted}`;
+}
diff --git a/cooky/src/components/Input.tsx b/cooky/src/components/Input.tsx
new file mode 100644
index 0000000..7ca7492
--- /dev/null
+++ b/cooky/src/components/Input.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface InputProps extends React.InputHTMLAttributes