mirrors/ArchiveBox
1
0
Fork 0
mirror of https://github.com/ArchiveBox/ArchiveBox.git synced 2025-05-14 23:24:30 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use template strings for substitution in HTML output

Browse source 
`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
This commit is contained in:
Brian Hardisty 2017-07-05 02:59:09 -07:00
parent bca2dceec0
commit 31ec3203c5
No known key found for this signature in database
GPG key ID: D38A5C417347AD45
3 changed files with 39 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

5
index.py
View file

@ -1,5 +1,6 @@
import os import os
from datetime import datetime from datetime import datetime
from string import Template
from config import INDEX_TEMPLATE, INDEX_ROW_TEMPLATE from config import INDEX_TEMPLATE, INDEX_ROW_TEMPLATE
from parse import derived_link_info from parse import derived_link_info
@ -16,7 +17,7 @@ def dump_index(links, service):
link_html = f.read() link_html = f.read()
article_rows = '\n'.join( 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 = { 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: 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))

52
templates/index.html
View file

@ -3,7 +3,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Archived Sites</title> <title>Archived Sites</title>
<style> <style>
html, body {{ html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 20px; font-size: 20px;
@ -12,63 +12,63 @@
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
font-family: "Gill Sans", Helvetica, sans-serif; font-family: "Gill Sans", Helvetica, sans-serif;
}} }
header {{ header {
background-color: #aa1e55; background-color: #aa1e55;
color: white; color: white;
padding: 10px; padding: 10px;
}} }
header h1 {{ header h1 {
font-weight: 300; font-weight: 300;
color: black; color: black;
margin-top: 10px; margin-top: 10px;
margin-bottom: 12px; margin-bottom: 12px;
}} }
header h1 small {{ header h1 small {
color: white; color: white;
font-size:0.5em; font-size:0.5em;
}} }
header h1 small a {{ header h1 small a {
text-decoration: none; text-decoration: none;
color: orange; color: orange;
opacity: 0.6 opacity: 0.6
font-weight: 300; font-weight: 300;
}} }
header h1 small a:hover {{ header h1 small a:hover {
opacity: 1; opacity: 1;
}} }
table {{ table {
padding: 6px; padding: 6px;
width: 100%; width: 100%;
}} }
table thead th {{ table thead th {
font-weight: 400; font-weight: 400;
}} }
tbody tr:nth-child(odd) {{ tbody tr:nth-child(odd) {
background-color: #ffebeb; background-color: #ffebeb;
}} }
table tr td {{ table tr td {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
padding-bottom: 0.4em; padding-bottom: 0.4em;
padding-top: 0.4em; padding-top: 0.4em;
padding-left: 2px; padding-left: 2px;
}} }
table tr td img {{ table tr td img {
height: 24px; height: 24px;
padding: 0px; padding: 0px;
padding-right: 5px; padding-right: 5px;
text-indent: -10000px; text-indent: -10000px;
}} }
</style> </style>
</head> </head>
<body> <body>
<header> <header>
<h1 title="Last modified {time_updated}"> <h1 title="Last modified ${time_updated}">
<img src="https://nicksweeting.com/images/archive.png" height="36px"> <img src="https://nicksweeting.com/images/archive.png" height="36px">
Archived Sites <img src="https://getpocket.com/favicon.ico" height="36px"> <br/> Archived Sites <img src="https://getpocket.com/favicon.ico" height="36px"> <br/>
<small> <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> </small>
</h1> </h1>
</header> </header>
@ -76,7 +76,7 @@
<thead> <thead>
<tr> <tr>
<th style="width: 120px;"><img src="https://getpocket.com/favicon.ico" height="12px"> Starred</th> <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">Files</th>
<th style="width: 50px">PDF</th> <th style="width: 50px">PDF</th>
<th style="width: 60px;font-size:0.8em;">Screenshot</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> <th style="width: 100px;whitespace:nowrap;overflow-x:scroll;display:block">Original URL</th>
</tr> </tr>
</thead> </thead>
<tbody>{rows}</tbody> <tbody>${rows}</tbody>
</table> </table>
</body> </body>
</html> </html>

20
templates/index_row.html
View file

@ -1,12 +1,12 @@
<tr> <tr>
<td>{time}</td> <td>${time}</td>
<td><a href="{archive_url}" style="font-size:1.4em;text-decoration:none;color:black;" title="{title}"> <td><a href="${archive_url}" style="font-size:1.4em;text-decoration:none;color:black;" title="${title}">
<img src="{favicon_url}"> <img src="${favicon_url}">
{title} <small style="background-color: #eee;border-radius:4px; float:right">{tags}</small> ${title} <small style="background-color: #eee;border-radius:4px; float:right">${tags}</small>
</td> </td>
<td style="text-align:center"><a href="{files_url}" title="Files">📂</a></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="${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="${screenshot_link}" title="Screenshot">🖼</a></td>
<td style="text-align:center"><a href="{archive_org_url}" title="Archive.org">🏛</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> <td>🔗 <img src="${google_favicon_url}" height="16px"> <a href="${url}">${url}</a></td>
</tr </tr>