\n {children}\n \n );\n};\n\nconst ContainerComponent = ({ children }) => {\n return (\n

\n 📒 Bedtime Story Maker\n \n

\n {children}\n \n

\n );\n};\n\nconst Heading1Component = ({ children }) => {\n return (\n

\n {children}\n

\n );\n};\n\nconst Heading2Component = ({ children }) => {\n return (\n

\n {children}\n

\n );\n};\n\nconst LinkComponent = ({ href, extraStyles, children }) => {\n return (\n \n {children}\n \n );\n};\n\nconst LoadingComponent = ({ caption }) => {\n return (\n

{caption || \"Loading\"}

\n );\n};\n\n// Routes\napp.get(\"/\", (c) => c.redirect(\"/bedtime_stories\"));\n\napp.get(\"/bedtime_stories\", async (c) => {\n const stories = await getRecentBedtimeStories();\n return c.html(\n \n \n \n \n \n

\n
\n \n \n \n
\n
\n \n
{story.title}
\n \n
{story.summary}
\n
\n
\n \n Another!\n \n
\n

\n \n \n \n ,\n );\n});\n\napp.get(\"/bedtime_stories/new\", (c) => {\n return c.html(\n \n \n \n \n What kind of story do you want to hear?\n

\n \n {adj.emoji} {adj.name}\n \n

\n \n \n ,\n );\n});\n\nconst starters = [\n \"Okay\",\n \"Sure\",\n \"Alright\",\n \"Indeed\",\n \"Nice\",\n \"Gotcha\",\n];\n\nconst randomStarter = starters[Math.floor(Math.random() * starters.length)];\n\napp.get(\"/bedtime_stories/new/:adjective\", (c) => {\n const { adjective } = c.req.param();\n\n return c.html(\n \n \n \n \n {randomStarter}! I'll tell a {adjective} story about an animal.\n What animal do you want?\n

\n \n {animal.emoji} {animal.name}\n \n

\n \n \n ,\n );\n});\n\napp.get(\"/bedtime_stories/new/:adjective/:animal\", (c) => {\n const { adjective, animal } = c.req.param();\n\n return c.html(\n \n \n \n \n \n {randomStarter}! Your {animal} stars your {adjective} story.\n \n What color should should your {animal} be?\n

\n \n \n

\n {color.name}\n \n \n ))}\n \n \n \n ,\n );\n});\n\napp.get(\"/bedtime_stories/new/:adjective/:animal/:color\", (c) => {\n const { adjective, animal, color } = c.req.param();\n\n return c.html(\n \n \n \n \n \n {randomStarter}. Let's finish your {adjective} story.\n \n What should your {color} {animal} do?\n

\n \n {activity.emoji} {activity.name}\n \n

\n \n \n ,\n );\n});\n\napp.get(\n \"/bedtime_stories/create/:adjective/:animal/:color/:activity\",\n async (c) => {\n const { adjective, color, animal, activity } = c.req.param();\n\n const options = { adjective, color, animal, activity };\n\n // const generatedStory = await generateBedtimeStory(options);\n // console.log(\"generated story\", generatedStory);\n // const bedtimeStory = await createBedtimeStory(generatedStory);\n\n return c.html(\n \n \n \n \n \n \n \n \n \n ,\n );\n },\n);\n\napp.get(\n \"/bedtime_stories/generate/:adjective/:animal/:color/:activity\",\n async (c) => {\n await enforceRateLimit();\n\n const { adjective, color, animal, activity } = c.req.param();\n\n const options = { adjective, color, animal, activity };\n\n const generatedStory = await generateBedtimeStory(options);\n console.log(\"generated story\", generatedStory);\n const bedtimeStory = await createBedtimeStory(generatedStory);\n\n return c.redirect(`/bedtime_stories/read/${bedtimeStory.id}`);\n },\n);\n\napp.get(\n \"/bedtime_stories/read/:id\",\n async (c) => {\n const { id } = c.req.param();\n\n const bedtimeStory = await getBedtimeStoryById(id);\n\n console.log(\"saved story\", bedtimeStory);\n\n const { adjective, color, animal, activity, title, summary, story, pictureUrl } = bedtimeStory;\n\n const ogData: OpenGraphData = {\n title,\n description: summary,\n image: pictureUrl,\n url: `https://dthyresson-bedtimestorymaker.web.val.run/bedtime_stories/read/${id}`,\n };\n\n return c.html(\n \n \n \n \n

\n {title}\n {summary}\n

\n \n\n

\n \n

\n {story.split(/(?<=[.!?])\\s+(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)/).map((sentence, index) => (\n \n {sentence}\n

\n ))}\n

\n \n \n ,\n );\n },\n);\n\nexport default app.fetch;","deleted","label",[98],"permalink","https://www.val.town/x/dthyresson/bedtimeStoryMaker/code/main.tsx","extension","actionData","errors"]