Spaces:

droov
/

polygrapher

Sleeping

App Files Files Community

dhruv575 commited on Jan 31

Commit

252f87c

1 Parent(s): ad35ae9

Add new unsub link

Browse files

Files changed (4) hide show

app/market-row-comparison-polymarket.html +0 -654
app/polygraph-email.html +25 -14
app/post_process.py +12 -0
app/templateify_new_service.py +19 -10

app/market-row-comparison-polymarket.html DELETED Viewed

@@ -1,654 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Kalshi Market Row Styles Comparison</title>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-    body {
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      background: #F3F4F6;
-      padding: 40px 20px;
-      min-height: 100vh;
-    }
-    .container {
-      max-width: 520px;
-      margin: 0 auto;
-    }
-    .style-section {
-      background: #fff;
-      border-radius: 12px;
-      padding: 24px;
-      margin-bottom: 32px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-    }
-    .style-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 8px;
-    }
-    .style-number {
-      background: #2E5CFF;
-      color: white;
-      width: 28px;
-      height: 28px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 700;
-      font-size: 14px;
-    }
-    .style-title {
-      font-size: 18px;
-      font-weight: 700;
-      color: #111827;
-    }
-    .style-description {
-      font-size: 14px;
-      color: #6B7280;
-      margin-bottom: 20px;
-      padding-left: 40px;
-    }
-    .demo-area {
-      background: #FAFAFA;
-      border-radius: 8px;
-      padding: 20px;
-    }
-    .section-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding-bottom: 8px;
-      border-bottom: 2px solid #2E5CFF;
-      margin-bottom: 16px;
-    }
-    .section-title {
-      font-size: 16px;
-      font-weight: 600;
-      color: #111827;
-    }
-    .section-label {
-      font-size: 11px;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: #6B7280;
-    }
-    /* ================================
-       STYLE 1: Horizontal Bar Style
-       ================================ */
-    .bar-row {
-      display: flex;
-      align-items: center;
-      background: #fff;
-      border-radius: 8px;
-      padding: 12px 16px;
-      margin-bottom: 10px;
-      border: 1px solid #E5E7EB;
-      transition: border-color 0.2s;
-    }
-    .bar-row:hover {
-      border-color: #2E5CFF;
-    }
-    .bar-row:last-child {
-      margin-bottom: 0;
-    }
-    .bar-content {
-      flex: 1;
-      min-width: 0;
-    }
-    .bar-title {
-      font-size: 15px;
-      line-height: 1.4;
-      color: #111827;
-      margin-bottom: 4px;
-    }
-    .bar-link {
-      font-size: 12px;
-      color: #2E5CFF;
-      text-decoration: none;
-    }
-    .bar-odds {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-left: 16px;
-    }
-    .bar-odds-main {
-      background: #2E5CFF;
-      color: white;
-      font-size: 15px;
-      font-weight: 700;
-      padding: 6px 12px;
-      border-radius: 6px;
-    }
-    .bar-odds-change {
-      font-size: 12px;
-      font-weight: 600;
-      color: #27AE60;
-    }
-    .bar-odds-change.down {
-      color: #EB5757;
-    }
-    /* ================================
-       STYLE 2: Card Grid Style
-       ================================ */
-    .card-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 12px;
-    }
-    .grid-card {
-      background: #fff;
-      border-radius: 10px;
-      padding: 16px;
-      border: 1px solid #E5E7EB;
-      transition: all 0.2s;
-      cursor: pointer;
-    }
-    .grid-card:hover {
-      border-color: #2E5CFF;
-      box-shadow: 0 4px 12px rgba(46, 92, 255, 0.15);
-    }
-    .grid-odds {
-      font-size: 32px;
-      font-weight: 700;
-      color: #2E5CFF;
-      margin-bottom: 8px;
-      line-height: 1;
-    }
-    .grid-change {
-      display: inline-block;
-      font-size: 11px;
-      font-weight: 600;
-      color: #27AE60;
-      background: #E8F5E9;
-      padding: 2px 6px;
-      border-radius: 4px;
-      margin-bottom: 10px;
-    }
-    .grid-change.down {
-      color: #EB5757;
-      background: #FDECEC;
-    }
-    .grid-title {
-      font-size: 13px;
-      line-height: 1.4;
-      color: #374151;
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-    .grid-thumb {
-      width: 100%;
-      height: 80px;
-      object-fit: cover;
-      border-radius: 6px;
-      margin-bottom: 12px;
-      background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%);
-    }
-    /* ================================
-       STYLE 3: Ticker Style
-       ================================ */
-    .ticker-list {
-      background: #fff;
-      border-radius: 8px;
-      overflow: hidden;
-      border: 1px solid #E5E7EB;
-    }
-    .ticker-row {
-      display: flex;
-      align-items: center;
-      padding: 10px 14px;
-      border-bottom: 1px solid #F3F4F6;
-      transition: background 0.15s;
-    }
-    .ticker-row:last-child {
-      border-bottom: none;
-    }
-    .ticker-row:hover {
-      background: #F9FAFB;
-    }
-    .ticker-symbol {
-      background: #111827;
-      color: #fff;
-      font-size: 10px;
-      font-weight: 700;
-      letter-spacing: 0.05em;
-      padding: 4px 8px;
-      border-radius: 4px;
-      margin-right: 12px;
-      min-width: 52px;
-      text-align: center;
-    }
-    .ticker-title {
-      flex: 1;
-      font-size: 14px;
-      color: #374151;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin-right: 12px;
-    }
-    .ticker-odds {
-      font-size: 15px;
-      font-weight: 700;
-      color: #111827;
-      min-width: 48px;
-      text-align: right;
-    }
-    .ticker-change {
-      font-size: 12px;
-      font-weight: 600;
-      min-width: 44px;
-      text-align: right;
-      margin-left: 8px;
-    }
-    .ticker-change.up {
-      color: #27AE60;
-    }
-    .ticker-change.down {
-      color: #EB5757;
-    }
-    /* Original style reference */
-    .original-row {
-      display: flex;
-      align-items: flex-start;
-      margin-bottom: 14px;
-    }
-    .original-row:last-child {
-      margin-bottom: 0;
-    }
-    .original-thumb {
-      width: 48px;
-      height: 48px;
-      border-radius: 8px;
-      background: linear-gradient(135deg, #E5E7EB 0%, #D1D5DB 100%);
-      flex-shrink: 0;
-    }
-    .original-content {
-      flex: 1;
-      padding: 0 12px;
-    }
-    .original-title {
-      font-size: 15px;
-      line-height: 1.4;
-      color: #111827;
-      margin-bottom: 4px;
-    }
-    .original-link {
-      font-size: 12px;
-      color: #2E5CFF;
-      text-decoration: none;
-    }
-    .original-odds {
-      text-align: right;
-    }
-    .original-odds-main {
-      font-size: 16px;
-      font-weight: 600;
-      color: #2C2C2C;
-      margin-bottom: 4px;
-    }
-    .original-odds-change {
-      font-size: 12px;
-      color: #27AE60;
-    }
-    /* Comparison label */
-    .comparison-label {
-      text-align: center;
-      padding: 16px;
-      background: #FEF3C7;
-      border-radius: 8px;
-      margin-bottom: 24px;
-      font-size: 14px;
-      color: #92400E;
-    }
-    .pros-cons {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 12px;
-      margin-top: 16px;
-      padding-top: 16px;
-      border-top: 1px dashed #E5E7EB;
-    }
-    .pros, .cons {
-      font-size: 12px;
-      line-height: 1.6;
-    }
-    .pros-title, .cons-title {
-      font-weight: 600;
-      margin-bottom: 4px;
-    }
-    .pros-title {
-      color: #059669;
-    }
-    .cons-title {
-      color: #DC2626;
-    }
-    .pros ul, .cons ul {
-      padding-left: 16px;
-      color: #6B7280;
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="comparison-label">
-      📊 Comparing 3 different market row styles for Polymarket Polygraph
-    </div>
-    <!-- CURRENT/ORIGINAL STYLE -->
-    <div class="style-section">
-      <div class="style-header">
-        <div class="style-number" style="background: #6B7280;">0</div>
-        <div class="style-title">Current Style (Reference)</div>
-      </div>
-      <p class="style-description">This is what you have now — same as Polygraph</p>
-      <div class="demo-area">
-        <div class="section-header">
-          <span class="section-title">Breaking news</span>
-          <span class="section-label">Odds</span>
-        </div>
-        <div class="original-row">
-          <div class="original-thumb"></div>
-          <div class="original-content">
-            <div class="original-title">Will another Louvre heist robber be arrested by October 31?</div>
-            <a href="#" class="original-link">View market →</a>
-          </div>
-          <div class="original-odds">
-            <div class="original-odds-main">99%</div>
-            <div class="original-odds-change">↑ 4%</div>
-          </div>
-        </div>
-        <div class="original-row">
-          <div class="original-thumb"></div>
-          <div class="original-content">
-            <div class="original-title">Fed rate cut before September FOMC meeting?</div>
-            <a href="#" class="original-link">View market →</a>
-          </div>
-          <div class="original-odds">
-            <div class="original-odds-main">23%</div>
-            <div class="original-odds-change">↓ 2%</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- STYLE 1: Horizontal Bar -->
-    <div class="style-section">
-      <div class="style-header">
-        <div class="style-number">1</div>
-        <div class="style-title">Horizontal Bar Style</div>
-      </div>
-      <p class="style-description">Full-width rows with odds as a prominent colored badge on the right. Clean, scannable, and emphasizes the probability.</p>
-      <div class="demo-area">
-        <div class="section-header">
-          <span class="section-title">Breaking news</span>
-          <span class="section-label">Odds</span>
-        </div>
-        <div class="bar-row">
-          <div class="bar-content">
-            <div class="bar-title">Will another Louvre heist robber be arrested by October 31?</div>
-            <a href="#" class="bar-link">View market →</a>
-          </div>
-          <div class="bar-odds">
-            <span class="bar-odds-change">↑ 4%</span>
-            <span class="bar-odds-main">99%</span>
-          </div>
-        </div>
-        <div class="bar-row">
-          <div class="bar-content">
-            <div class="bar-title">Fed rate cut before September FOMC meeting?</div>
-            <a href="#" class="bar-link">View market →</a>
-          </div>
-          <div class="bar-odds">
-            <span class="bar-odds-change down">↓ 2%</span>
-            <span class="bar-odds-main">23%</span>
-          </div>
-        </div>
-        <div class="bar-row">
-          <div class="bar-content">
-            <div class="bar-title">Bitcoin above $100K by end of January?</div>
-            <a href="#" class="bar-link">View market →</a>
-          </div>
-          <div class="bar-odds">
-            <span class="bar-odds-change">↑ 12%</span>
-            <span class="bar-odds-main">67%</span>
-          </div>
-        </div>
-      </div>
-      <div class="pros-cons">
-        <div class="pros">
-          <div class="pros-title">✓ Pros</div>
-          <ul>
-            <li>Very scannable</li>
-            <li>Odds stand out</li>
-            <li>No thumbnail needed</li>
-            <li>Works well in email</li>
-          </ul>
-        </div>
-        <div class="cons">
-          <div class="cons-title">✗ Cons</div>
-          <ul>
-            <li>Less visual interest</li>
-            <li>Similar to other newsletters</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <!-- STYLE 2: Card Grid -->
-    <div class="style-section">
-      <div class="style-header">
-        <div class="style-number">2</div>
-        <div class="style-title">Card Grid Style</div>
-      </div>
-      <p class="style-description">2-up cards with large odds as the hero element. More visual, makes percentages impossible to miss.</p>
-      <div class="demo-area">
-        <div class="section-header">
-          <span class="section-title">Breaking news</span>
-          <span class="section-label"></span>
-        </div>
-        <div class="card-grid">
-          <div class="grid-card">
-            <div class="grid-thumb"></div>
-            <div class="grid-odds">99%</div>
-            <span class="grid-change">↑ 4%</span>
-            <div class="grid-title">Will another Louvre heist robber be arrested by October 31?</div>
-          </div>
-          <div class="grid-card">
-            <div class="grid-thumb"></div>
-            <div class="grid-odds">23%</div>
-            <span class="grid-change down">↓ 2%</span>
-            <div class="grid-title">Fed rate cut before September FOMC meeting?</div>
-          </div>
-          <div class="grid-card">
-            <div class="grid-thumb"></div>
-            <div class="grid-odds">67%</div>
-            <span class="grid-change">↑ 12%</span>
-            <div class="grid-title">Bitcoin above $100K by end of January?</div>
-          </div>
-          <div class="grid-card">
-            <div class="grid-thumb"></div>
-            <div class="grid-odds">41%</div>
-            <span class="grid-change down">↓ 5%</span>
-            <div class="grid-title">Government shutdown ends before February 1?</div>
-          </div>
-        </div>
-      </div>
-      <div class="pros-cons">
-        <div class="pros">
-          <div class="pros-title">✓ Pros</div>
-          <ul>
-            <li>Very distinctive</li>
-            <li>Odds are the hero</li>
-            <li>Great for featured markets</li>
-            <li>Visually engaging</li>
-          </ul>
-        </div>
-        <div class="cons">
-          <div class="cons-title">✗ Cons</div>
-          <ul>
-            <li>Needs images/thumbnails</li>
-            <li>Takes more vertical space</li>
-            <li>Trickier in email clients</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <!-- STYLE 3: Ticker Style -->
-    <div class="style-section">
-      <div class="style-header">
-        <div class="style-number">3</div>
-        <div class="style-title">Ticker Style</div>
-      </div>
-      <p class="style-description">Compact single-line items like a stock ticker. Dense information, financial/trading aesthetic, very efficient.</p>
-      <div class="demo-area">
-        <div class="section-header">
-          <span class="section-title">Breaking news</span>
-          <span class="section-label"></span>
-        </div>
-        <div class="ticker-list">
-          <div class="ticker-row">
-            <span class="ticker-symbol">LOUVRE</span>
-            <span class="ticker-title">Will another Louvre heist robber be arrested by Oct 31?</span>
-            <span class="ticker-odds">99%</span>
-            <span class="ticker-change up">+4%</span>
-          </div>
-          <div class="ticker-row">
-            <span class="ticker-symbol">FEDCUT</span>
-            <span class="ticker-title">Fed rate cut before September FOMC meeting?</span>
-            <span class="ticker-odds">23%</span>
-            <span class="ticker-change down">-2%</span>
-          </div>
-          <div class="ticker-row">
-            <span class="ticker-symbol">BTC100K</span>
-            <span class="ticker-title">Bitcoin above $100K by end of January?</span>
-            <span class="ticker-odds">67%</span>
-            <span class="ticker-change up">+12%</span>
-          </div>
-          <div class="ticker-row">
-            <span class="ticker-symbol">SHTDWN</span>
-            <span class="ticker-title">Government shutdown ends before February 1?</span>
-            <span class="ticker-odds">41%</span>
-            <span class="ticker-change down">-5%</span>
-          </div>
-          <div class="ticker-row">
-            <span class="ticker-symbol">TSLA500</span>
-            <span class="ticker-title">Tesla stock closes above $500 this week?</span>
-            <span class="ticker-odds">12%</span>
-            <span class="ticker-change up">+1%</span>
-          </div>
-        </div>
-      </div>
-      <div class="pros-cons">
-        <div class="pros">
-          <div class="pros-title">✓ Pros</div>
-          <ul>
-            <li>Very space-efficient</li>
-            <li>Looks like trading terminal</li>
-            <li>Can show many markets</li>
-            <li>Unique vs Polymarket</li>
-          </ul>
-        </div>
-        <div class="cons">
-          <div class="cons-title">✗ Cons</div>
-          <ul>
-            <li>Titles get truncated</li>
-            <li>Less friendly/approachable</li>
-            <li>Needs ticker symbols</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-</html>

app/polygraph-email.html CHANGED Viewed

@@ -50,18 +50,29 @@
               <tr>
                 <td style="padding:24px 20px 24px 20px;">
-                  <!-- DATE -->
-                  <p style="
-                    margin:0 0 24px 0;
-                    font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
-                    font-size:15px;
-                    line-height:20px;
-                    color:#000000;
-                    text-align:left;
-                    font-style:italic;
-                  ">
-                    January 15, 2024
-                  </p>
                   <!-- TOP INTRO -->
                   <p class="top_p" style="
@@ -1132,8 +1143,8 @@
                         <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
                           <tr>
                             <td align="center" style="padding:0 0 24px 0; color:#6B7280; font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size:12px; line-height:19px;">
-                              <div style="margin:0; padding:0;">1280 Lexington Avenue</div>
-                              <div style="margin:0; padding:0;">New York, NY 10028 U.S.</div>
                             </td>
                           </tr>
                         </table>

               <tr>
                 <td style="padding:24px 20px 24px 20px;">
+                  <!-- DATE + UNSUBSCRIBE -->
+                  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:24px;">
+                    <tr>
+                      <td style="
+                        font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+                        font-size:15px;
+                        line-height:20px;
+                        color:#000000;
+                        text-align:left;
+                        font-style:italic;
+                      ">
+                        January 15, 2024
+                      </td>
+                      <td align="right" style="
+                        font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+                        font-size:15px;
+                        line-height:20px;
+                        color:#6B7280;
+                      ">
+                        <a href="#" style="color:#6B7280; text-decoration:underline;">Unsubscribe</a>
+                      </td>
+                    </tr>
+                  </table>
                   <!-- TOP INTRO -->
                   <p class="top_p" style="
                         <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
                           <tr>
                             <td align="center" style="padding:0 0 24px 0; color:#6B7280; font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size:12px; line-height:19px;">
+                              <div style="margin:0; padding:0;">64 Bleecker Street, 167</div>
+                              <div style="margin:0; padding:0;">New York, NY 10012 U.S.</div>
                             </td>
                           </tr>
                         </table>

app/post_process.py CHANGED Viewed

@@ -427,6 +427,18 @@ def fix_unsubscribe_link(html_content: str) -> str:
         modified = True
         print("  Fixed unsubscribe 'here' link href to {% manage_subscription_preferences_url %}")
     if not modified:
         print(f"  No unsubscribe links found that need href fixing")

         modified = True
         print("  Fixed unsubscribe 'here' link href to {% manage_subscription_preferences_url %}")
+    # Date-row "Unsubscribe" link (standalone link text "Unsubscribe")
+    pattern3 = r'(<a[^>]*href=["\']#["\'][^>]*>\s*Unsubscribe\s*</a>)'
+    if re.search(pattern3, html_content, re.IGNORECASE):
+        html_content = re.sub(
+            pattern3,
+            lambda m: re.sub(r'href=["\']#["\']', 'href="{% manage_subscription_preferences_url %}"', m.group(0), flags=re.IGNORECASE),
+            html_content,
+            flags=re.IGNORECASE
+        )
+        modified = True
+        print("  Fixed date-row Unsubscribe link href to {% manage_subscription_preferences_url %}")
     if not modified:
         print(f"  No unsubscribe links found that need href fixing")

app/templateify_new_service.py CHANGED Viewed

@@ -153,20 +153,29 @@ class TemplateifyNewService:
                 else:
                     logger.warning(f"Template node {selector} has no parent, cannot wrap in loop")
-        # Find and tokenize the date paragraph (first paragraph in main white card with italic styling)
         main_card_table = find_main_content_table()
         if main_card_table:
-            # Find first paragraph with italic styling (our date paragraph)
-            all_paragraphs = main_card_table.find_all("p")
-            for p in all_paragraphs:
-                style = p.get("style", "")
-                # Check if this paragraph has italic styling (date paragraph)
-                if "font-style:italic" in style or "font-style: italic" in style:
-                    p.clear()
-                    p.append("{{DATE}}")
                     register("{{DATE}}", "Newsletter date")
-                    logger.info("Tokenized date paragraph with {{DATE}}")
                     break
         set_text(".top_p", "{{{INTRO_TEXT}}}", "Intro paragraph under the hero (can include HTML, unescaped).")

                 else:
                     logger.warning(f"Template node {selector} has no parent, cannot wrap in loop")
+        # Find and tokenize the date row (table row with date in first cell and Unsubscribe link in second)
         main_card_table = find_main_content_table()
         if main_card_table:
+            for table in main_card_table.find_all("table"):
+                for tr in table.find_all("tr"):
+                    tds = tr.find_all("td")
+                    if len(tds) < 2:
+                        continue
+                    first_td, second_td = tds[0], tds[1]
+                    first_style = first_td.get("style", "")
+                    if "font-style:italic" not in first_style and "font-style: italic" not in first_style:
+                        continue
+                    unsub_link = second_td.find("a", href="#")
+                    if not unsub_link or unsub_link.get_text(strip=True) != "Unsubscribe":
+                        continue
+                    first_td.clear()
+                    first_td.append("{{DATE}}")
                     register("{{DATE}}", "Newsletter date")
+                    logger.info("Tokenized date row with {{DATE}}")
                     break
+                else:
+                    continue
+                break
         set_text(".top_p", "{{{INTRO_TEXT}}}", "Intro paragraph under the hero (can include HTML, unescaped).")