Feedback Widget Demo

\n 🎯 Focus: This version ONLY writes to feedback.md using the Val Town SDK. Submit feedback below and check the file!\n

\n\n

🧪 Test the Widget

Click the blue \"💬 Feedback\" button in the bottom-right corner and submit feedback.

\n\n

🔑 Environment Variables

This widget automatically detects and uses your Val Town API token.

valtown (primary, built-in)
VAL_TOWN_API_KEY2 (fallback, if you set it)

\n\n ${renderFeedbackWidget()}\n \n \n `;\n\n return c.html(html);\n});\n\n// Handle feedback submissions by calling the function from the other file\napp.post(\"/feedback\", async (c) => {\n console.log(\"=== FEEDBACK ROUTE HIT ===\");\n try {\n // UPDATED: Pass the import.meta.url to the handler\n const result = await handleFeedbackSubmission(c.req.raw, import.meta.url);\n console.log(\"Handler result status:\", result.status);\n return result;\n } catch (error) {\n console.error(\"Route error:\", error);\n return c.json({\n error: 'Route Error',\n message: error.message\n }, 500);\n }\n});\n\n// Catch-all for any other route\napp.all(\"*\", (c) => {\n return c.text(`Not found: ${c.req.path}`, 404);\n});\n\nexport default app.fetch;",[],[192],{"_104":200,"_95":201,"_157":202,"_159":-5,"_160":138,"_161":101,"_162":22,"_106":203,"_100":32,"_165":186,"_167":204,"_169":22,"_170":-5,"_171":205,"_98":206},"720303a6-5d0f-11f0-afd9-0224a6c84d84","new-file-6114.tsx","92989c99-3605-4a50-b80c-20b54d51132e",["D",1752098136637],"// Pinning the SDK version to match the working example\nimport ValTown from \"npm:@valtown/sdk@0.37.0\";\n\nconst main = async () => {\n try {\n console.log(\"▶️ Starting combined Read & Write test...\");\n\n // 1. Authenticate\n const token = Deno.env.get(\"VALTOWN_API_KEY2\");\n if (!token) {\n console.error(\"❌ Error: VALTOWN_API_KEY2 is not set.\");\n return;\n }\n const vt = new ValTown({ bearerToken: token });\n console.log(\"✅ SDK Initialized.\");\n\n // 2. Find the project ID using the method we know works\n const { data: vals } = await vt.me.vals.list();\n const projectVal = vals.find(v => v.name === 'feedback_widget_demo');\n if (!projectVal) {\n console.error(\"❌ Error: Could not find val 'feedback_widget_demo'.\");\n return;\n }\n const valId = projectVal.id;\n console.log(`✅ Found project ID: ${valId}`);\n \n // 3. READ the file using the method from Steve's example\n const feedbackFilePath = \"feedback.md\";\n let currentContent = \"\";\n let fileExists = false;\n try {\n console.log(`📖 Reading '${feedbackFilePath}' using vt.projects.files.getContent...`);\n const response = await vt.projects.files.getContent(valId, { path: feedbackFilePath });\n currentContent = await response.text();\n fileExists = true;\n console.log(\"✅ Read successful.\");\n } catch (error) {\n if (error.message.includes(\"404\")) {\n console.log(\"📝 File not found, will create it.\");\n currentContent = \"# Feedback\\n\\n---\\n\\n\";\n fileExists = false;\n } else {\n throw error; // Let the main catch block handle other errors\n }\n }\n\n // 4. APPEND the new content\n const newEntry = `Append successful at ${new Date().toISOString()}.\\n\\n---\\n\\n`;\n const updatedContent = currentContent + newEntry;\n console.log(\"✅ Content prepared for writing.\");\n \n // 5. WRITE the file using the create/update logic from our tests\n if (fileExists) {\n console.log(\"🔄 File exists. Attempting to UPDATE using vt.vals.files.update...\");\n await vt.vals.files.update(valId, {\n path: feedbackFilePath,\n content: updatedContent,\n });\n console.log(\"✅ Success! File updated.\");\n } else {\n console.log(\"📝 File does not exist. Attempting to CREATE using vt.vals.files.create...\");\n await vt.vals.files.create(valId, {\n path: feedbackFilePath,\n type: \"file\",\n content: updatedContent,\n });\n console.log(\"✅ Success! File created.\");\n }\n\n } catch (error) {\n console.error(\"❌ An error occurred:\", error.message);\n console.error(error.stack);\n }\n};\n\n// Run the main function\nmain();",[],[201],"files",[154,174,182,190,199],"counts",{"_211":32,"_212":101,"_213":32,"_214":101},"pulls","branches","forks","envVars","contents",[],{"_104":183,"_160":138,"_157":184,"_95":99,"_167":187,"_165":186,"_100":32,"_159":-5,"_106":218,"_161":101,"_170":-5,"_98":219},["D",1752098136637],[99],"upstreamProject",{"_104":146,"_95":222,"_112":223,"_113":-5,"_110":111,"_23":224},"feedback_widget_demo","Demo of reusable feedback widget library",{"_93":225,"_130":226},"dcm31","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3SGtIMlhlMGwwT0JoSXZJckVVTXJuajN1YyJ9","upstreamBranch",{"_104":141,"_106":229,"_230":231,"_95":43,"_139":146,"_100":232,"_140":-5,"_142":-5,"_233":234,"_108":-5,"_151":22,"_110":111,"_150":225,"_16":148,"_149":222},["D",1751935284859],"updatedAt",["D",1752103308678],49,"lockfileKey","1752107958387-esm.town_v_dcm31_feedback_widget_demo@49-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":241,"_152":246,"_207":262,"_166":263,"_215":266,"_267":268,"_271":22,"_272":-5,"_273":32,"_274":275,"_276":277},{"_104":105,"_95":96,"_106":242,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":243,"_132":244,"_135":245,"_151":22},["D",1752098136637],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":141,"_142":143,"_144":111,"_145":146,"_147":148,"_149":96,"_150":94},[247,250,253,256,259],{"_104":155,"_95":156,"_157":158,"_159":-5,"_160":138,"_161":101,"_162":163,"_106":164,"_100":32,"_165":166,"_167":168,"_169":22,"_170":-5,"_171":248,"_98":249},[],[156],{"_104":175,"_95":176,"_157":177,"_159":-5,"_160":138,"_161":101,"_162":163,"_106":178,"_100":32,"_165":166,"_167":179,"_169":22,"_170":-5,"_171":251,"_98":252},[],[176],{"_104":183,"_95":99,"_157":184,"_159":-5,"_160":138,"_161":101,"_162":163,"_106":185,"_100":32,"_165":186,"_167":187,"_169":22,"_170":-5,"_171":254,"_98":255},[],[99],{"_104":191,"_95":192,"_157":193,"_159":-5,"_160":138,"_161":101,"_162":163,"_106":194,"_100":32,"_165":195,"_167":196,"_169":22,"_170":-5,"_171":257,"_98":258},[],[192],{"_104":200,"_95":201,"_157":202,"_159":-5,"_160":138,"_161":101,"_162":22,"_106":203,"_100":32,"_165":186,"_167":204,"_169":22,"_170":-5,"_171":260,"_98":261},[],[201],[247,250,253,256,259],{"_104":183,"_95":99,"_157":184,"_159":-5,"_160":138,"_161":101,"_162":163,"_106":264,"_100":32,"_165":186,"_167":187,"_169":22,"_170":-5,"_98":265},["D",1752098136637],[99],[],"upstream",{"_104":141,"_106":269,"_230":270,"_95":43,"_139":146,"_100":232,"_140":-5,"_142":-5,"_233":234,"_108":-5,"_151":22,"_110":111,"_150":225,"_16":148,"_149":222},["D",1751935284859],["D",1752103308678],"showCompareCallout","pull","ahead","behind",7,"templates",[],"actionData","errors"]

📝 Feedback Widget Demo

🧪 Test the Widget

🔑 Environment Variables

charmaine

feedback_widget_demo_FIX