From 31ec3203c5222d0ccc10ca14580c18786ac7a52e Mon Sep 17 00:00:00 2001
From: Brian Hardisty <b@bah.im>
Date: Wed, 5 Jul 2017 02:59:09 -0700
Subject: [PATCH] Use template strings for substitution in HTML output

`str.format()` can only use substitutions identified by braces (`{` and
`}`). This has the potential to conflict with other code in the HTML
template, such as CSS or JavaScript.

Template strings can use substitutions identified by `$` or `${}`, e.g.:
`$identifier` or `${identifier}`. These substitutions won't conflict
with CSS or JavaScript, allowing users to write HTML templates that
don't require double braces anywhere there's a substitution conflict.
This is especially useful when one is using a build tool to generate the
final CSS/JavaScript/HTML.

https://docs.python.org/3/library/string.html#template-strings
---
 index.py                 |  5 ++--
 templates/index.html     | 52 ++++++++++++++++++++--------------------
 templates/index_row.html | 20 ++++++++--------
 3 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/index.py b/index.py
index d8a5910a..ab80a70b 100644
--- a/index.py
+++ b/index.py
@@ -1,5 +1,6 @@
 import os
 from datetime import datetime
+from string import Template
 
 from config import INDEX_TEMPLATE, INDEX_ROW_TEMPLATE
 from parse import derived_link_info
@@ -16,7 +17,7 @@ def dump_index(links, service):
         link_html = f.read()
 
     article_rows = '\n'.join(
-        link_html.format(**derived_link_info(link)) for link in links
+        Template(link_html).substitute(**derived_link_info(link)) for link in links
     )
 
     template_vars = {
@@ -27,4 +28,4 @@ def dump_index(links, service):
     }
 
     with open(os.path.join(service, 'index.html'), 'w', encoding='utf-8') as f:
-        f.write(index_html.format(**template_vars))
+        f.write(Template(index_html).substitute(template_vars))
diff --git a/templates/index.html b/templates/index.html
index f6287e5d..1f358aea 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,7 +3,7 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
         <title>Archived Sites</title>
         <style>
-            html, body {{
+            html, body {
                 width: 100%;
                 height: 100%;
                 font-size: 20px;
@@ -12,63 +12,63 @@
                 margin: 0px;
                 padding: 0px;
                 font-family: "Gill Sans", Helvetica, sans-serif;
-            }}
-            header {{
+            }
+            header {
                 background-color: #aa1e55;
                 color: white;
                 padding: 10px;
-            }}
-            header h1 {{
+            }
+            header h1 {
                 font-weight: 300;
                 color: black;
                 margin-top: 10px;
                 margin-bottom: 12px;
-            }}
-            header h1 small {{
+            }
+            header h1 small {
                 color: white;
                 font-size:0.5em;
-            }}
-            header h1 small a {{
+            }
+            header h1 small a {
                 text-decoration: none;
                 color: orange;
                 opacity: 0.6
                 font-weight: 300;
-            }}
-            header h1 small a:hover {{
+            }
+            header h1 small a:hover {
                 opacity: 1;
-            }}
-            table {{
+            }
+            table {
                 padding: 6px;
                 width: 100%;
-            }}
-            table thead th {{
+            }
+            table thead th {
                 font-weight: 400;
-            }}
-            tbody tr:nth-child(odd) {{
+            }
+            tbody tr:nth-child(odd) {
                background-color: #ffebeb;
-            }}
-            table tr td {{
+            }
+            table tr td {
                 white-space: nowrap;
                 overflow: hidden;
                 padding-bottom: 0.4em;
                 padding-top: 0.4em;
                 padding-left: 2px;
-            }}
-            table tr td img {{
+            }
+            table tr td img {
                 height: 24px;
                 padding: 0px;
                 padding-right: 5px;
                 text-indent: -10000px;
-            }}
+            }
         </style>
     </head>
     <body>
         <header>
-            <h1 title="Last modified {time_updated}">
+            <h1 title="Last modified ${time_updated}">
                 <img src="https://nicksweeting.com/images/archive.png" height="36px">
                 Archived Sites <img src="https://getpocket.com/favicon.ico" height="36px"> <br/>
                 <small>
-                    Archived with: <a href="https://github.com/pirate/bookmark-archiver">Bookmark Archiver</a> on {date_updated}
+                    Archived with: <a href="https://github.com/pirate/bookmark-archiver">Bookmark Archiver</a> on ${date_updated}
                 </small>
             </h1>
         </header>
@@ -76,7 +76,7 @@
             <thead>
                 <tr>
                     <th style="width: 120px;"><img src="https://getpocket.com/favicon.ico" height="12px"> Starred</th>
-                    <th style="width: 45vw;">Saved Articles ({num_links})</th>
+                    <th style="width: 45vw;">Saved Articles (${num_links})</th>
                     <th style="width: 50px">Files</th>
                     <th style="width: 50px">PDF</th>
                     <th style="width: 60px;font-size:0.8em;">Screenshot</th>
@@ -84,7 +84,7 @@
                     <th style="width: 100px;whitespace:nowrap;overflow-x:scroll;display:block">Original URL</th>
                 </tr>
             </thead>
-            <tbody>{rows}</tbody>
+            <tbody>${rows}</tbody>
         </table>
     </body>
 </html>
diff --git a/templates/index_row.html b/templates/index_row.html
index ffe4bb9e..a89769f8 100644
--- a/templates/index_row.html
+++ b/templates/index_row.html
@@ -1,12 +1,12 @@
 <tr>
-    <td>{time}</td>
-    <td><a href="{archive_url}" style="font-size:1.4em;text-decoration:none;color:black;" title="{title}">
-        <img src="{favicon_url}">
-        {title} <small style="background-color: #eee;border-radius:4px; float:right">{tags}</small>
+    <td>${time}</td>
+    <td><a href="${archive_url}" style="font-size:1.4em;text-decoration:none;color:black;" title="${title}">
+        <img src="${favicon_url}">
+        ${title} <small style="background-color: #eee;border-radius:4px; float:right">${tags}</small>
     </td>
-    <td style="text-align:center"><a href="{files_url}" title="Files">📂</a></td>
-    <td style="text-align:center"><a href="{pdf_link}" title="PDF">📄</a></td>
-    <td style="text-align:center"><a href="{screenshot_link}" title="Screenshot">🖼</a></td>
-    <td style="text-align:center"><a href="{archive_org_url}" title="Archive.org">🏛</a></td>
-    <td>🔗 <img src="{google_favicon_url}" height="16px"> <a href="{url}">{url}</a></td>
-</tr
+    <td style="text-align:center"><a href="${files_url}" title="Files">📂</a></td>
+    <td style="text-align:center"><a href="${pdf_link}" title="PDF">📄</a></td>
+    <td style="text-align:center"><a href="${screenshot_link}" title="Screenshot">🖼</a></td>
+    <td style="text-align:center"><a href="${archive_org_url}" title="Archive.org">🏛</a></td>
+    <td>🔗 <img src="${google_favicon_url}" height="16px"> <a href="${url}">${url}</a></td>
+</tr>