{book.title}

{author ? author.name : 'Unknown Author'}

${book.price.toFixed(2)}

\n \n

\n );\n}\n\nfunction AuthorCard({ author }: { author: Author }) {\n return (\n

{author.name}

{author.bio}

\n );\n}\n\nfunction BookStore() {\n const [books, setBooks] = useState([]);\n const [authors, setAuthors] = useState([]);\n const [view, setView] = useState<'books' | 'authors'>('books');\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n Promise.all([\n fetch('/books').then(response => response.json()),\n fetch('/authors').then(response => response.json())\n ]).then(([bookData, authorData]) => {\n setBooks(bookData);\n setAuthors(authorData);\n setLoading(false);\n });\n }, []);\n\n if (loading) return

;\n\n return (\n

📚 Deno Book Store

\n \n \n

\n {view === 'books' ? (\n

\n {books.map(book => (\n \n ))}\n

\n ) : (\n

\n {authors.map(author => (\n \n ))}\n

\n )}\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"bookStoreWebsite\";\n const SCHEMA_VERSION = 2;\n\n // Ensure authors table exists\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_authors_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n bio TEXT,\n portrait TEXT\n )\n `);\n\n // Ensure books table exists with author_id foreign key\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_books_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n author_id INTEGER NOT NULL,\n price REAL NOT NULL,\n cover TEXT,\n FOREIGN KEY(author_id) REFERENCES ${KEY}_authors_${SCHEMA_VERSION}(id)\n )\n `);\n\n // If no authors, seed initial data\n const authorCount = await sqlite.execute(`SELECT COUNT(*) as count FROM ${KEY}_authors_${SCHEMA_VERSION}`);\n if (authorCount.rows[0].count === 0) {\n const initialAuthors = [\n { name: \"John Doe\", bio: \"Expert in Deno and TypeScript\", portrait: \"https://maxm-imggenurl.web.val.run/john-doe-portrait\" },\n { name: \"Jane Smith\", bio: \"Web development and TypeScript enthusiast\", portrait: \"https://maxm-imggenurl.web.val.run/jane-smith-portrait\" },\n { name: \"Alex Johnson\", bio: \"Full-stack developer and tech writer\", portrait: \"https://maxm-imggenurl.web.val.run/alex-johnson-portrait\" }\n ];\n\n for (const author of initialAuthors) {\n await sqlite.execute(\n `INSERT INTO ${KEY}_authors_${SCHEMA_VERSION} (name, bio, portrait) VALUES (?, ?, ?)`,\n [author.name, author.bio, author.portrait]\n );\n }\n\n const insertedAuthors = await sqlite.execute(`SELECT id, name FROM ${KEY}_authors_${SCHEMA_VERSION}`);\n \n const initialBooks = [\n { title: \"Deno Fundamentals\", authorName: \"John Doe\", price: 29.99, cover: \"https://maxm-imggenurl.web.val.run/programming-book-cover\" },\n { title: \"TypeScript in Action\", authorName: \"Jane Smith\", price: 34.50, cover: \"https://maxm-imggenurl.web.val.run/typescript-book-cover\" },\n { title: \"Web Development 2024\", authorName: \"Alex Johnson\", price: 39.99, cover: \"https://maxm-imggenurl.web.val.run/web-dev-book-cover\" }\n ];\n\n for (const book of initialBooks) {\n const authorId = insertedAuthors.rows.find(a => a.name === book.authorName)?.id;\n await sqlite.execute(\n `INSERT INTO ${KEY}_books_${SCHEMA_VERSION} (title, author_id, price, cover) VALUES (?, ?, ?, ?)`,\n [book.title, authorId, book.price, book.cover]\n );\n }\n }\n\n // Handle book fetching\n if (new URL(request.url).pathname === '/books') {\n const books = await sqlite.execute(`SELECT * FROM ${KEY}_books_${SCHEMA_VERSION}`);\n return new Response(JSON.stringify(books.rows), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle author fetching\n if (new URL(request.url).pathname === '/authors') {\n const authors = await sqlite.execute(`SELECT * FROM ${KEY}_authors_${SCHEMA_VERSION}`);\n return new Response(JSON.stringify(authors.rows), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n return new Response(`\n \n \n Deno Book Store\n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 20px;\n}\n.bookstore {\n max-width: 1200px;\n margin: 0 auto;\n}\n.book-grid, .author-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 20px;\n}\n.book-card, .author-card {\n background: white;\n border-radius: 8px;\n padding: 15px;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.3s;\n}\n.book-card:hover, .author-card:hover {\n transform: scale(1.05);\n}\n.book-card img, .author-card img {\n max-width: 100%;\n height: 300px;\n object-fit: cover;\n border-radius: 4px;\n}\n.book-card button {\n background-color: #4CAF50;\n color: white;\n border: none;\n padding: 10px 15px;\n border-radius: 4px;\n cursor: pointer;\n}\n.navigation {\n display: flex;\n justify-content: center;\n margin-bottom: 20px;\n}\n.navigation button {\n margin: 0 10px;\n padding: 10px 20px;\n background-color: #f0f0f0;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n}\n.navigation button.active {\n background-color: #4CAF50;\n color: white;\n}\nh1 {\n text-align: center;\n color: #333;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/seble4213/bookStoreWebsite/code/main.tsx","extension","actionData","errors"]