(null);\n const [username, setUsername] = useState('');\n const [editingUsername, setEditingUsername] = useState('');\n const [isEditing, setIsEditing] = useState(false);\n const [showWelcome, setShowWelcome] = useState(true);\n\n useEffect(() => {\n fetch('/username')\n .then(response => response.text())\n .then(name => {\n if (name) {\n setUsername(name);\n fetchArticles();\n }\n });\n }, []);\n\n const fetchArticles = () => {\n fetch('/articles')\n .then(response => response.json())\n .then(data => setArticles(data));\n };\n\n const handleArticleClick = (article: Article) => {\n setSelectedArticle(article);\n };\n\n const handleBackToList = () => {\n setSelectedArticle(null);\n };\n\n const handleUsernameSubmit = () => {\n if (editingUsername.trim()) {\n fetch('/username', {\n method: 'POST',\n body: editingUsername.trim()\n })\n .then(response => response.text())\n .then(name => {\n setUsername(name);\n setShowWelcome(false);\n fetchArticles();\n });\n }\n };\n\n const handleUsernameEdit = () => {\n setEditingUsername(username);\n setIsEditing(true);\n };\n\n const handleUsernameSave = () => {\n if (editingUsername.trim()) {\n fetch('/username', {\n method: 'POST',\n body: editingUsername.trim()\n })\n .then(response => response.text())\n .then(name => {\n setUsername(name);\n setIsEditing(false);\n });\n }\n };\n\n if (showWelcome) {\n return (\n

\n E\n

Welcome to English Blog

\n setEditingUsername(e.target.value)}\n placeholder=\"Enter your name\"\n className=\"username-input\"\n />\n \n

\n E\n

\n );\n }\n\n return (\n

\n {isEditing ? (\n

\n setEditingUsername(e.target.value)}\n placeholder=\"Enter your name\"\n />\n \n

\n ) : (\n

{username || 'Your Name'}

\n \n

\n )}\n

\n {selectedArticle ? (\n

\n \n

{selectedArticle.title}

{selectedArticle.content}

\n Published on: {new Date(selectedArticle.createdAt).toLocaleDateString()}\n

\n ) : (\n

\n {articles.map(article => (\n

handleArticleClick(article)}\n >\n

{article.title}

{article.content.substring(0, 200)}...

\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 = \"englishways_migrated\";\n const SCHEMA_VERSION = 3;\n\n // Create articles and username tables\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_articles_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n content TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Create a table to store the username\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_username_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY DEFAULT 1,\n name TEXT,\n CONSTRAINT unique_id CHECK (id = 1)\n )\n `);\n\n // Handle routes\n const url = new URL(request.url);\n \n // Username GET route\n if (request.method === 'GET' && url.pathname === '/username') {\n const usernameResult = await sqlite.execute(`\n SELECT name FROM ${KEY}_username_${SCHEMA_VERSION} WHERE id = 1\n `);\n return new Response(usernameResult.rows[0]?.name || '');\n }\n\n // Username POST route\n if (request.method === 'POST' && url.pathname === '/username') {\n const name = await request.text();\n await sqlite.execute(`\n INSERT OR REPLACE INTO ${KEY}_username_${SCHEMA_VERSION} (id, name) VALUES (1, ?)\n `, [name]);\n return new Response(name);\n }\n\n // Articles route\n if (request.method === 'GET' && url.pathname === '/articles') {\n const articles = await sqlite.execute(`\n SELECT id, title, content, created_at as createdAt \n FROM ${KEY}_articles_${SCHEMA_VERSION} \n ORDER BY created_at DESC\n `);\n return Response.json(articles.rows);\n }\n\n // Serve the main page\n return new Response(`\n \n \n English Education Blog\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 line-height: 1.6;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f4f4f4;\n}\n\n.welcome-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background-color: #f0f4f8;\n}\n\n.welcome-content {\n background-color: white;\n padding: 40px;\n border-radius: 12px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n text-align: center;\n position: relative;\n}\n\n.e-decoration {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.e-left, .e-right {\n font-size: 120px;\n color: #007bff;\n font-weight: bold;\n opacity: 0.2;\n}\n\n.welcome-form {\n display: flex;\n flex-direction: column;\n gap: 20px;\n z-index: 10;\n}\n\n.username-input {\n padding: 10px;\n font-size: 16px;\n border: 2px solid #007bff;\n border-radius: 5px;\n text-align: center;\n}\n\n.start-button {\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.start-button:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n\n.start-button:hover:not(:disabled) {\n background-color: #0056b3;\n}\n\n.container {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\nheader {\n text-align: center;\n color: #333;\n border-bottom: 2px solid #007bff;\n padding-bottom: 10px;\n position: relative;\n}\n\n.username-display {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n}\n\n.username-display button {\n background: none;\n border: none;\n cursor: pointer;\n font-size: 16px;\n}\n\n.username-edit {\n display: flex;\n gap: 10px;\n justify-content: center;\n align-items: center;\n}\n\n.username-edit input {\n padding: 5px;\n font-size: 16px;\n}\n\n.username-edit button {\n padding: 5px 10px;\n}\n\n.article-list {\n display: grid;\n gap: 15px;\n}\n\n.article-preview {\n border: 1px solid #ddd;\n padding: 15px;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.article-preview:hover {\n background-color: #f9f9f9;\n}\n\n.article-detail {\n background-color: #f9f9f9;\n padding: 20px;\n border-radius: 5px;\n}\n\n.source-link {\n display: block;\n text-align: center;\n margin-top: 20px;\n color: #007bff;\n text-decoration: none;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/maryamdorgam/englishways_migrated/code/main.tsx","extension","actionData","errors"]