[{"_1":2,"_175":-5,"_176":-5},"loaderData",{"_3":4,"_91":92,"_162":163,"_174":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","fa80b67e1f763bfb4b247c3f5ca4f0b0730f3f5c","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","API_URL","https://api.val.town","WORKER_FINGERPRINT","799d99f2805306c2714a7cfefbeae178","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_157":-5,"_158":-5,"_159":160,"_129":130,"_137":138,"_100":101,"_98":99,"_117":-7,"_50":51,"_161":26},"type","val","author","f16d9240-ecf4-11ef-af12-67b5d5b0b458",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":-5,"_107":108,"_109":110,"_111":26,"_112":110,"_113":114,"_115":116,"_117":118,"_119":26,"_120":31,"_121":31,"_122":31,"_123":124,"_125":31,"_126":31,"_127":-5,"_20":128,"_133":-5,"_134":-7,"_135":136,"_137":138,"_139":140},"name","Job_Board","valNameId","0ba518c2-ed04-11ef-8b47-e6cdfca9ef9f","parentFolderId","isOwned","privacy","public","readme","valType","http","currentVersion","ea887bf0-ed0a-11ef-ad2a-e6cdfca9ef9f","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nfunction UsernameModal({ onSetUsername }) {\n const [username, setUsername] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n const handleSubmit = (e) => {\n e.preventDefault();\n // Validate username\n const trimmedUsername = username.trim();\n if (trimmedUsername.length < 3) {\n setError(\"Username must be at least 3 characters long\");\n return;\n }\n if (trimmedUsername.length > 20) {\n setError(\"Username must be 20 characters or less\");\n return;\n }\n // Save username to localStorage\n localStorage.setItem(\"jobBoardUsername\", trimmedUsername);\n onSetUsername(trimmedUsername);\n };\n\n return (\n

Set Your Username

\n );\n}\n\nfunction JobPostingForm({ onSubmit, username }) {\n const [title, setTitle] = useState(\"\");\n const [company, setCompany] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const response = await fetch(\"/post-job\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n title,\n company,\n description,\n username,\n }),\n });\n if (response.ok) {\n setTitle(\"\");\n setCompany(\"\");\n setDescription(\"\");\n onSubmit();\n }\n };\n\n return (\n

\n \n Posting as: {username}\n \n

\n setTitle(e.target.value)}\n required\n />\n setCompany(e.target.value)}\n required\n />\n setDescription(e.target.value)}\n required\n />\n \n \n );\n}\n\nfunction JobList() {\n const [jobs, setJobs] = useState([]);\n\n const fetchJobs = async () => {\n const response = await fetch(\"/jobs\");\n const data = await response.json();\n setJobs(data);\n };\n\n useEffect(() => {\n fetchJobs();\n }, []);\n\n return (\n

Current Job Postings

\n {jobs.map((job) => (\n

{job.title}

{job.company}

{job.description}

\n Posted by: {job.username || \"Anonymous\"}\n

\n ))}\n

\n );\n}\n\nfunction ChatRoom({ username }) {\n const [messages, setMessages] = useState([]);\n const [newMessage, setNewMessage] = useState(\"\");\n\n const fetchMessages = async () => {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data);\n };\n\n const sendMessage = async (e) => {\n e.preventDefault();\n const response = await fetch(\"/send-message\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n content: newMessage,\n username,\n }),\n });\n if (response.ok) {\n setNewMessage(\"\");\n fetchMessages();\n }\n };\n\n useEffect(() => {\n fetchMessages();\n const interval = setInterval(fetchMessages, 5000);\n return () => clearInterval(interval);\n }, []);\n\n return (\n

Job Opportunities Chat

\n {messages.map((msg) => (\n

\n {msg.username || \"Anonymous\"}: {msg.content}\n

\n ))}\n

\n );\n}\n\nfunction TabNavigation({ activeTab, onTabChange }) {\n return (\n

\n onTabChange(\"jobs\")}\n >\n Job Postings\n \n onTabChange(\"chat\")}\n >\n Chat Room\n \n

\n );\n}\n\nfunction App() {\n const [refreshJobs, setRefreshJobs] = useState(0);\n const [username, setUsername] = useState(\n localStorage.getItem(\"jobBoardUsername\") || \"\",\n );\n const [activeTab, setActiveTab] = useState(\"jobs\");\n\n return (\n

\n {!username && (\n setUsername(newUsername)}\n />\n )}\n

🚀 Job Board

\n {username && (\n

\n \n

\n {activeTab === \"jobs\" && (\n

\n setRefreshJobs(r => r + 1)}\n username={username}\n />\n \n

\n )}\n {activeTab === \"chat\" && }\n

\n )}\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 = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n const SCHEMA_VERSION = 4;\n\n // Create jobs table with username column\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n company TEXT NOT NULL,\n description TEXT NOT NULL,\n username TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Create messages table with username column\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n content TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle job posting\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/post-job\") {\n const { title, company, description, username } = await request.json();\n\n // Validate username\n if (!username || username.trim().length < 3 || username.trim().length > 20) {\n return new Response(\n JSON.stringify({\n error: \"Invalid username. Must be 3-20 characters.\",\n }),\n {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n await sqlite.execute(\n `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, username) VALUES (?, ?, ?, ?)`,\n [title, company, description, username],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Fetch jobs\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/jobs\") {\n const jobs = await sqlite.execute(\n `SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 50`,\n );\n return new Response(JSON.stringify(jobs.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Send message\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/send-message\") {\n const { content, username } = await request.json();\n\n // Validate username\n if (!username || username.trim().length < 3 || username.trim().length > 20) {\n return new Response(\n JSON.stringify({\n error: \"Invalid username. Must be 3-20 characters.\",\n }),\n {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n await sqlite.execute(\n `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (content, username) VALUES (?, ?)`,\n [content, username],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Fetch messages\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/messages\") {\n const messages = await sqlite.execute(\n `SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 50`,\n );\n return new Response(JSON.stringify(messages.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n Job Opportunities Board\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n}\n\n.username-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1000;\n}\n\n.username-modal-content {\n background: white;\n padding: 30px;\n border-radius: 8px;\n width: 300px;\n text-align: center;\n}\n\n.username-modal-content input {\n width: 100%;\n padding: 10px;\n margin: 10px 0;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.error-message {\n color: red;\n font-size: 0.8em;\n margin: 10px 0;\n}\n\n.job-board-app {\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n}\n\n.app-container {\n background: white;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.tab-navigation {\n display: flex;\n border-bottom: 1px solid #ddd;\n}\n\n.tab-navigation button {\n flex: 1;\n padding: 15px;\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n cursor: pointer;\n font-weight: bold;\n color: #666;\n transition: all 0.3s ease;\n}\n\n.tab-navigation button.active {\n border-bottom-color: #4CAF50;\n color: #4CAF50;\n}\n\n.tab-navigation button:hover {\n background-color: #f0f0f0;\n}\n\n.tab-content {\n padding: 20px;\n}\n\n.form-header {\n text-align: right;\n margin-bottom: 10px;\n color: #666;\n}\n\n.job-form {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.job-form input, .job-form textarea {\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n\n.job-form button {\n background-color: #4CAF50;\n color: white;\n border: none;\n padding: 10px;\n border-radius: 4px;\n cursor: pointer;\n}\n\n.job-list .job-card {\n border-bottom: 1px solid #eee;\n padding: 10px 0;\n}\n\n.job-meta {\n text-align: right;\n font-size: 0.8em;\n color: #666;\n}\n\n.chat-room .message-list {\n height: 400px;\n overflow-y: auto;\n border: 1px solid #888;\n padding: 10px;\n background-color: #f0f0f0;\n}\n\n.chat-room .message {\n background-color: #e0e0e0;\n margin-bottom: 5px;\n padding: 8px;\n border-radius: 4px;\n}\n\n.message-form {\n display: flex;\n margin-top: 10px;\n}\n\n.message-form input {\n flex-grow: 1;\n padding: 10px;\n border: 1px solid #888;\n background-color: #f0f0f0;\n}\n\n.message-form button {\n background-color: #666;\n color: white;\n border: none;\n padding: 10px;\n cursor: pointer;\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n font-size: 0.8em;\n color: #666;\n}\n`;","createdAt",["D",1739781661190],"version",4,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","Alphydoo","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydDlsU1dnaGxpc01MWklwekg2cGExTGJVTkkifQ","forkedVal","interval","slug","Alphydoo/Job_Board","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,148,151,154],{"_117":118,"_142":-5,"_115":143,"_112":110},"prId",["D",1739781661190],{"_117":145,"_142":-5,"_115":146,"_112":147},3,["D",1739781216037],"e1333f46-ed09-11ef-b71f-e6cdfca9ef9f",{"_117":90,"_142":-5,"_115":149,"_112":150},["D",1739780629330],"837f796a-ed08-11ef-8110-e6cdfca9ef9f",{"_117":124,"_142":-5,"_115":152,"_112":153},["D",1739779906126],"d4707466-ed06-11ef-b6e8-e6cdfca9ef9f",{"_117":31,"_142":-5,"_115":155,"_112":156},["D",1739778710274],"0ba75eac-ed04-11ef-8b47-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":164,"_165":166,"_94":167},"single","redirect","/v/Alphydoo/Job_Board/versions",{"_112":153,"_113":168,"_117":124,"_115":169,"_170":99,"_100":101,"_107":108,"_129":130,"_11":96,"_171":-5,"_172":-5,"_173":-5,"_161":26,"_135":136},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction UsernameModal({ onSetUsername }) {\n const [username, setUsername] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n const handleSubmit = (e) => {\n e.preventDefault();\n // Validate username\n const trimmedUsername = username.trim();\n if (trimmedUsername.length < 3) {\n setError(\"Username must be at least 3 characters long\");\n return;\n }\n if (trimmedUsername.length > 20) {\n setError(\"Username must be 20 characters or less\");\n return;\n }\n // Save username to localStorage\n localStorage.setItem('jobBoardUsername', trimmedUsername);\n onSetUsername(trimmedUsername);\n };\n\n return (\n

Set Your Username

\n \n

\n );\n}\n\nfunction JobPostingForm({ onSubmit, username }) {\n const [title, setTitle] = useState(\"\");\n const [company, setCompany] = useState(\"\");\n const [description, setDescription] = useState(\"\");\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const response = await fetch(\"/post-job\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ \n title, \n company, \n description,\n username \n })\n });\n if (response.ok) {\n setTitle(\"\");\n setCompany(\"\");\n setDescription(\"\");\n onSubmit();\n }\n };\n\n return (\n

\n Posting as: {username}\n

\n setTitle(e.target.value)}\n required \n />\n setCompany(e.target.value)}\n required \n />\n

setDescription(e.target.value)}\n        required \n      />\n      <button type=\"submit\">Post Job</button>\n    </form>\n  );\n}\n\nfunction JobList() {\n  const [jobs, setJobs] = useState([]);\n\n  const fetchJobs = async () => {\n    const response = await fetch(\"/jobs\");\n    const data = await response.json();\n    setJobs(data);\n  };\n\n  useEffect(() => {\n    fetchJobs();\n  }, []);\n\n  return (\n    <div className=\"job-list\">\n      <h2>Current Job Postings</h2>\n      {jobs.map((job) => (\n        <div key={job.id} className=\"job-card\">\n          <h3>{job.title}</h3>\n          <p>{job.company}</p>\n          <p>{job.description}</p>\n          <div className=\"job-meta\">\n            <small>Posted by: {job.username || 'Anonymous'}</small>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction ChatRoom({ username }) {\n  const [messages, setMessages] = useState([]);\n  const [newMessage, setNewMessage] = useState(\"\");\n\n  const fetchMessages = async () => {\n    const response = await fetch(\"/messages\");\n    const data = await response.json();\n    setMessages(data);\n  };\n\n  const sendMessage = async (e) => {\n    e.preventDefault();\n    const response = await fetch(\"/send-message\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ \n        content: newMessage,\n        username \n      })\n    });\n    if (response.ok) {\n      setNewMessage(\"\");\n      fetchMessages();\n    }\n  };\n\n  useEffect(() => {\n    fetchMessages();\n    const interval = setInterval(fetchMessages, 5000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"chat-room\">\n      <h2>Job Opportunities Chat</h2>\n      <div className=\"message-list\">\n        {messages.map((msg) => (\n          <div key={msg.id} className=\"message\">\n            <strong>{msg.username || 'Anonymous'}</strong>: {msg.content}\n          </div>\n        ))}\n      </div>\n      <form onSubmit={sendMessage} className=\"message-form\">\n        <input \n          type=\"text\" \n          value={newMessage}\n          onChange={(e) => setNewMessage(e.target.value)}\n          placeholder={`Message as ${username}`}\n          required \n        />\n        <button type=\"submit\">Send</button>\n      </form>\n    </div>\n  );\n}\n\nfunction App() {\n  const [refreshJobs, setRefreshJobs] = useState(0);\n  const [username, setUsername] = useState(\n    localStorage.getItem('jobBoardUsername') || ''\n  );\n\n  return (\n    <div className=\"job-board-app\">\n      {!username && (\n        <UsernameModal \n          onSetUsername={(newUsername) => setUsername(newUsername)} \n        />\n      )}\n      <h1>🚀 Job Opportunities Board</h1>\n      {username && (\n        <div className=\"app-container\">\n          <div className=\"left-panel\">\n            <JobPostingForm \n              onSubmit={() => setRefreshJobs(r => r + 1)} \n              username={username}\n            />\n            <JobList key={refreshJobs} />\n          </div>\n          <div className=\"right-panel\">\n            <ChatRoom username={username} />\n          </div>\n        </div>\n      )}\n      <footer>\n        <a \n          href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n          target=\"_top\"\n        >\n          View Source\n        </a>\n      </footer>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n  const SCHEMA_VERSION = 4;\n\n  // Create jobs table with username column\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_jobs_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      title TEXT NOT NULL,\n      company TEXT NOT NULL,\n      description TEXT NOT NULL,\n      username TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Create messages table with username column\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_messages_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      username TEXT NOT NULL,\n      content TEXT NOT NULL,\n      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle job posting\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/post-job\") {\n    const { title, company, description, username } = await request.json();\n    \n    // Validate username\n    if (!username || username.trim().length < 3 || username.trim().length > 20) {\n      return new Response(JSON.stringify({ \n        error: \"Invalid username. Must be 3-20 characters.\" \n      }), { \n        status: 400,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_jobs_${SCHEMA_VERSION} (title, company, description, username) VALUES (?, ?, ?, ?)`,\n      [title, company, description, username]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Fetch jobs\n  if (request.method === \"GET\" && new URL(request.url).pathname === \"/jobs\") {\n    const jobs = await sqlite.execute(\n      `SELECT * FROM ${KEY}_jobs_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 50`\n    );\n    return new Response(JSON.stringify(jobs.rows), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Send message\n  if (request.method === \"POST\" && new URL(request.url).pathname === \"/send-message\") {\n    const { content, username } = await request.json();\n    \n    // Validate username\n    if (!username || username.trim().length < 3 || username.trim().length > 20) {\n      return new Response(JSON.stringify({ \n        error: \"Invalid username. Must be 3-20 characters.\" \n      }), { \n        status: 400,\n        headers: { \"Content-Type\": \"application/json\" } \n      });\n    }\n\n    await sqlite.execute(\n      `INSERT INTO ${KEY}_messages_${SCHEMA_VERSION} (content, username) VALUES (?, ?)`,\n      [content, username]\n    );\n    return new Response(JSON.stringify({ success: true }), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  // Fetch messages\n  if (request.method === \"GET\" && new URL(request.url).pathname === \"/messages\") {\n    const messages = await sqlite.execute(\n      `SELECT * FROM ${KEY}_messages_${SCHEMA_VERSION} ORDER BY created_at DESC LIMIT 50`\n    );\n    return new Response(JSON.stringify(messages.rows), { \n      headers: { \"Content-Type\": \"application/json\" } \n    });\n  }\n\n  return new Response(`\n    <html>\n      <head>\n        <title>Job Opportunities Board</title>\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n      </body>\n    </html>\n  `, {\n    headers: { \"Content-Type\": \"text/html\" }\n  });\n}\n\nconst css = `\nbody {\n  font-family: 'Arial', sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: #f4f4f4;\n}\n\n.username-modal {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n}\n\n.username-modal-content {\n  background: white;\n  padding: 30px;\n  border-radius: 8px;\n  width: 300px;\n  text-align: center;\n}\n\n.username-modal-content input {\n  width: 100%;\n  padding: 10px;\n  margin: 10px 0;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.error-message {\n  color: red;\n  font-size: 0.8em;\n  margin: 10px 0;\n}\n\n.job-board-app {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 20px;\n}\n\n.app-container {\n  display: flex;\n  gap: 20px;\n}\n\n.left-panel, .right-panel {\n  flex: 1;\n  background: white;\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.form-header {\n  text-align: right;\n  margin-bottom: 10px;\n  color: #666;\n}\n\n.job-form {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.job-form input, .job-form textarea {\n  padding: 10px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n}\n\n.job-form button {\n  background-color: #4CAF50;\n  color: white;\n  border: none;\n  padding: 10px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.job-list .job-card {\n  border-bottom: 1px solid #eee;\n  padding: 10px 0;\n}\n\n.job-meta {\n  text-align: right;\n  font-size: 0.8em;\n  color: #666;\n}\n\n.chat-room .message-list {\n  height: 400px;\n  overflow-y: auto;\n  border: 1px solid #ddd;\n  padding: 10px;\n}\n\n.message-form {\n  display: flex;\n  margin-top: 10px;\n}\n\n.message-form input {\n  flex-grow: 1;\n  padding: 10px;\n  border: 1px solid #ddd;\n}\n\n.message-form button {\n  background-color: #2196F3;\n  color: white;\n  border: none;\n  padding: 10px;\n  cursor: pointer;\n}\n\nfooter {\n  text-align: center;\n  margin-top: 20px;\n  font-size: 0.8em;\n  color: #666;\n}\n`;",["D",1739779906126],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]
</article></body></html>

Job_Board

Version 1