[{"_1":2,"_179":-5,"_180":-5},"loaderData",{"_3":4,"_91":92,"_166":167,"_178":-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","89d401ac5276a0a4fea3e2c212bc6091a552bac7","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","d0746fd0512e0614e3f717607f0da4cd","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,"_161":-5,"_162":-5,"_163":164,"_128":129,"_136":137,"_100":101,"_98":99,"_117":-7,"_50":51,"_165":26},"type","val","author","758afa10-ed7a-11ef-8139-5783405cc753",{"_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":90,"_124":31,"_125":31,"_126":-5,"_20":127,"_132":-5,"_133":-7,"_134":135,"_136":137,"_138":139},"name","smartCrimsonBedbug","valNameId","cbcf8b72-eeef-11ef-97b4-e6cdfca9ef9f","parentFolderId","isOwned","privacy","public","readme","valType","http","currentVersion","66c72c82-eef2-11ef-8e13-e6cdfca9ef9f","legacyPrivate","id","code","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Enhanced Email Designer Component\nfunction EmailDesigner({ onDesignComplete }) {\n const [headerDesign, setHeaderDesign] = useState({\n backgroundColor: '#3498db',\n textColor: '#ffffff',\n title: 'Your Newsletter Title',\n logo: ''\n });\n\n const [bodyDesign, setBodyDesign] = useState({\n backgroundColor: '#ffffff',\n textColor: '#333333',\n fontFamily: 'Arial, sans-serif',\n fontSize: 16,\n lineHeight: 1.5,\n content: ''\n });\n\n const [footerDesign, setFooterDesign] = useState({\n backgroundColor: '#f4f4f4',\n textColor: '#666666',\n companyName: 'Your Company',\n unsubscribeText: 'Unsubscribe',\n socialLinks: {\n facebook: '',\n twitter: '',\n linkedin: ''\n }\n });\n\n const handleSubmit = () => {\n const emailDesign = {\n header: headerDesign,\n body: bodyDesign,\n footer: footerDesign\n };\n onDesignComplete(emailDesign);\n };\n\n return (\n

📧 Comprehensive Email Campaign Designer

\n \n {/* Header Design Section */}\n

Header Design

\n Header Background Color\n setHeaderDesign({...headerDesign, backgroundColor: e.target.value})}\n />\n

\n Header Text Color\n setHeaderDesign({...headerDesign, textColor: e.target.value})}\n />\n

\n Newsletter Title\n setHeaderDesign({...headerDesign, title: e.target.value})}\n placeholder=\"Enter newsletter title\"\n />\n

\n\n {/* Body Design Section */}\n

Body Design

\n Body Background Color\n setBodyDesign({...bodyDesign, backgroundColor: e.target.value})}\n />\n

\n Body Text Color\n setBodyDesign({...bodyDesign, textColor: e.target.value})}\n />\n

\n Font Family\n \n

\n Email Content\n

setBodyDesign({...bodyDesign, content: e.target.value})}\n            style={{\n              width: '100%',\n              height: '200px',\n              backgroundColor: bodyDesign.backgroundColor,\n              color: bodyDesign.textColor,\n              fontFamily: bodyDesign.fontFamily,\n              fontSize: `${bodyDesign.fontSize}px`,\n              lineHeight: bodyDesign.lineHeight\n            }}\n            placeholder=\"Write your email content here...\"\n          />\n        </div>\n      </div>\n\n      {/* Footer Design Section */}\n      <div style={styles.sectionContainer}>\n        <h3>Footer Design</h3>\n        <div style={styles.controlGroup}>\n          <label>Footer Background Color</label>\n          <input \n            type=\"color\" \n            value={footerDesign.backgroundColor}\n            onChange={(e) => setFooterDesign({...footerDesign, backgroundColor: e.target.value})}\n          />\n        </div>\n        <div style={styles.controlGroup}>\n          <label>Footer Text Color</label>\n          <input \n            type=\"color\" \n            value={footerDesign.textColor}\n            onChange={(e) => setFooterDesign({...footerDesign, textColor: e.target.value})}\n          />\n        </div>\n        <div style={styles.controlGroup}>\n          <label>Company Name</label>\n          <input \n            type=\"text\"\n            value={footerDesign.companyName}\n            onChange={(e) => setFooterDesign({...footerDesign, companyName: e.target.value})}\n            placeholder=\"Enter company name\"\n          />\n        </div>\n        <div style={styles.controlGroup}>\n          <label>Unsubscribe Text</label>\n          <input \n            type=\"text\"\n            value={footerDesign.unsubscribeText}\n            onChange={(e) => setFooterDesign({...footerDesign, unsubscribeText: e.target.value})}\n            placeholder=\"Unsubscribe text\"\n          />\n        </div>\n      </div>\n\n      <button \n        onClick={handleSubmit}\n        style={styles.button}\n      >\n        Create Campaign\n      </button>\n    </div>\n  );\n}\n\n// Rest of the previous code remains the same... \n\nexport default async function server(request: Request): Promise<Response> {\n  const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n  const { email } = await import(\"https://esm.town/v/std/email\");\n  const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n  const SCHEMA_VERSION = 3;\n\n  // Create more detailed campaigns and subscribers tables\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_subscribers_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      email TEXT UNIQUE NOT NULL,\n      verified BOOLEAN DEFAULT 0,\n      subscribed_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_campaigns_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      design TEXT NOT NULL,\n      sent_at DATETIME DEFAULT CURRENT_TIMESTAMP,\n      total_recipients INTEGER,\n      successful_sends INTEGER,\n      failed_sends INTEGER\n    )\n  `);\n\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_email_logs_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      recipient TEXT NOT NULL,\n      campaign_id INTEGER,\n      status TEXT NOT NULL,\n      error_message TEXT,\n      sent_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle campaign sending endpoint\n  if (request.method === 'POST' && new URL(request.url).pathname === '/send-campaign') {\n    try {\n      const { design, subscribers } = await request.json();\n\n      // Validate input\n      if (!design || !subscribers || subscribers.length === 0) {\n        return Response.json({ \n          success: false, \n          message: 'Invalid campaign data' \n        });\n      }\n\n      // Validate email addresses\n      const validEmails = subscribers.filter(email => \n        /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)\n      );\n\n      if (validEmails.length === 0) {\n        return Response.json({ \n          success: false, \n          message: 'No valid email addresses found' \n        });\n      }\n\n      // Store campaign in database\n      const campaignResult = await sqlite.execute(`\n        INSERT INTO ${KEY}_campaigns_${SCHEMA_VERSION} \n        (design, total_recipients, successful_sends, failed_sends) \n        VALUES (?, ?, 0, 0)\n      `, [JSON.stringify(design), validEmails.length]);\n\n      const campaignId = campaignResult.lastInsertRowid;\n\n      // Send emails to subscribers with comprehensive logging\n      const emailResults = await Promise.all(validEmails.map(async (recipient) => {\n        try {\n          await email({\n            to: [recipient],\n            subject: design.header.title || 'Your Newsletter',\n            html: `\n              <div style=\"font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;\">\n                \n                <div style=\"\n                  background-color: ${design.header.backgroundColor};\n                  color: ${design.header.textColor};\n                  padding: 20px;\n                  text-align: center;\n                \">\n                  <h1>${design.header.title}</h1>\n                </div>\n\n                \n                <div style=\"\n                  background-color: ${design.body.backgroundColor};\n                  color: ${design.body.textColor};\n                  font-family: ${design.body.fontFamily};\n                  font-size: ${design.body.fontSize}px;\n                  line-height: ${design.body.lineHeight};\n                  padding: 20px;\n                \">\n                  ${design.body.content}\n                </div>\n\n                \n                <div style=\"\n                  background-color: ${design.footer.backgroundColor};\n                  color: ${design.footer.textColor};\n                  padding: 20px;\n                  text-align: center;\n                  font-size: 12px;\n                \">\n                  <p>© ${new Date().getFullYear()} ${design.footer.companyName}</p>\n                  <p>\n                    <a href=\"#\" style=\"color: ${design.footer.textColor};\">\n                      ${design.footer.unsubscribeText}\n                    </a>\n                  </p>\n                </div>\n              </div>\n            `\n          });\n\n          // Log successful email send\n          await sqlite.execute(`\n            INSERT INTO ${KEY}_email_logs_${SCHEMA_VERSION} \n            (recipient, campaign_id, status) \n            VALUES (?, ?, 'SUCCESS')\n          `, [recipient, campaignId]);\n\n          return true;\n        } catch (err) {\n          // Log failed email send\n          await sqlite.execute(`\n            INSERT INTO ${KEY}_email_logs_${SCHEMA_VERSION} \n            (recipient, campaign_id, status, error_message) \n            VALUES (?, ?, 'FAILED', ?)\n          `, [recipient, campaignId, err.toString()]);\n\n          console.error(`Failed to send email to ${recipient}:`, err);\n          return false;\n        }\n      }));\n\n      // Update campaign statistics\n      const successfulSends = emailResults.filter(Boolean).length;\n      const failedSends = emailResults.length - successfulSends;\n\n      await sqlite.execute(`\n        UPDATE ${KEY}_campaigns_${SCHEMA_VERSION} \n        SET successful_sends = ?, failed_sends = ? \n        WHERE id = ?\n      `, [successfulSends, failedSends, campaignId]);\n\n      return Response.json({ \n        success: true,\n        totalRecipients: validEmails.length,\n        successfulSends,\n        failedSends\n      });\n    } catch (error) {\n      console.error('Campaign sending error:', error);\n      return Response.json({ \n        success: false, \n        message: 'Error processing campaign',\n        error: error.toString()\n      });\n    }\n  }\n\n  // Existing HTML serving code remains the same\n  return new Response(`\n    <html>\n      <head>\n        <title>Email Marketing Campaign</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\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: {\n      'Content-Type': 'text/html',\n    }\n  });\n}","createdAt",["D",1739991034543],"version",5,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_128":129,"_130":131},"handle","GideonEsq","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ0QmRqaWVsdE01Rmg0SVFWUTl5bkpXeTl3dSJ9","forkedVal","interval","slug","GideonEsq/smartCrimsonBedbug","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[140,143,147,151,154,158],{"_117":118,"_141":-5,"_115":142,"_112":110},"prId",["D",1739991034543],{"_117":144,"_141":-5,"_115":145,"_112":146},4,["D",1739991018224],"5d0d66b6-eef2-11ef-ad29-e6cdfca9ef9f",{"_117":148,"_141":-5,"_115":149,"_112":150},3,["D",1739990768090],"c7f5d1da-eef1-11ef-a0bd-e6cdfca9ef9f",{"_117":90,"_141":-5,"_115":152,"_112":153},["D",1739990233657],"8969cd8c-eef0-11ef-b085-e6cdfca9ef9f",{"_117":155,"_141":-5,"_115":156,"_112":157},1,["D",1739990018735],"094e8afc-eef0-11ef-8c69-e6cdfca9ef9f",{"_117":31,"_141":-5,"_115":159,"_112":160},["D",1739989915569],"cbd15b82-eeef-11ef-97b4-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":168,"_169":170,"_94":171},"single","redirect","/v/GideonEsq/smartCrimsonBedbug/versions",{"_112":157,"_113":172,"_117":155,"_115":173,"_174":99,"_100":101,"_107":108,"_128":129,"_11":96,"_175":-5,"_176":-5,"_177":-5,"_165":26,"_134":135},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n  const [email, setEmail] = useState('');\n  const [status, setStatus] = useState('');\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    try {\n      const response = await fetch('/subscribe', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ email })\n      });\n      \n      const result = await response.json();\n      \n      if (result.success) {\n        setStatus('Successfully subscribed! 📧');\n        setEmail('');\n      } else {\n        setStatus(result.message || 'Subscription failed 😕');\n      }\n    } catch (error) {\n      setStatus('An error occurred. Please try again. 🚫');\n    }\n  };\n\n  return (\n    <div style={styles.container}>\n      <h1 style={styles.title}>📬 Email Newsletter Signup</h1>\n      <form onSubmit={handleSubmit} style={styles.form}>\n        <input \n          type=\"email\" \n          value={email}\n          onChange={(e) => setEmail(e.target.value)}\n          placeholder=\"Enter your email\"\n          required\n          style={styles.input}\n        />\n        <button type=\"submit\" style={styles.button}>Subscribe</button>\n      </form>\n      {status && <p style={styles.status}>{status}</p>}\n      <footer style={styles.footer}>\n        <a \n          href={import.meta.url.replace(\"esm.town\", \"val.town\")} \n          target=\"_top\" \n          style={styles.sourceLink}\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\nconst styles = {\n  container: {\n    fontFamily: 'Arial, sans-serif',\n    maxWidth: '400px',\n    margin: '0 auto',\n    padding: '20px',\n    textAlign: 'center',\n    backgroundColor: '#f0f4f8',\n    borderRadius: '8px',\n    boxShadow: '0 4px 6px rgba(0,0,0,0.1)'\n  },\n  title: {\n    color: '#2c3e50',\n    marginBottom: '20px'\n  },\n  form: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '10px'\n  },\n  input: {\n    padding: '10px',\n    borderRadius: '4px',\n    border: '1px solid #bdc3c7',\n    fontSize: '16px'\n  },\n  button: {\n    padding: '10px',\n    backgroundColor: '#3498db',\n    color: 'white',\n    border: 'none',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    transition: 'background-color 0.3s ease'\n  },\n  status: {\n    marginTop: '15px',\n    color: '#2ecc71'\n  },\n  footer: {\n    marginTop: '20px',\n    fontSize: '12px'\n  },\n  sourceLink: {\n    color: '#7f8c8d',\n    textDecoration: 'none'\n  }\n};\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 = 1;\n\n  // Create subscribers table\n  await sqlite.execute(`\n    CREATE TABLE IF NOT EXISTS ${KEY}_subscribers_${SCHEMA_VERSION} (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,\n      email TEXT UNIQUE NOT NULL,\n      subscribed_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  `);\n\n  // Handle subscription endpoint\n  if (request.method === 'POST' && new URL(request.url).pathname === '/subscribe') {\n    try {\n      const { email } = await request.json();\n      \n      // Basic email validation\n      const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n      if (!emailRegex.test(email)) {\n        return Response.json({ \n          success: false, \n          message: 'Invalid email format' \n        });\n      }\n\n      // Insert subscriber\n      try {\n        await sqlite.execute(`\n          INSERT INTO ${KEY}_subscribers_${SCHEMA_VERSION} (email) \n          VALUES (?)\n        `, [email]);\n      } catch (error) {\n        // Handle duplicate email\n        return Response.json({ \n          success: false, \n          message: 'Email already subscribed' \n        });\n      }\n\n      return Response.json({ success: true });\n    } catch (error) {\n      return Response.json({ \n        success: false, \n        message: 'Error processing subscription' \n      });\n    }\n  }\n\n  // Serve HTML for the app\n  return new Response(`\n    <html>\n      <head>\n        <title>Email Newsletter Signup</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\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: {\n      'Content-Type': 'text/html',\n    }\n  });\n}",["D",1739990018735],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]
</article></body></html>

smartCrimsonBedbug

Version 1