suzanne.soy/xkcd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: escape HTML and columns on home page

Browse Source 
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
This commit is contained in:
Henrique Dias 2019-04-29 16:58:18 +01:00
parent 540c00d277
commit e2ad244102
4 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
bin/index.js
View File

@ -113,6 +113,7 @@ async function run () {
added = added.sort((a, b) => a.num - b.num)
await fs.copyFile(join(__dirname, '../node_modules/tachyons/css/tachyons.min.css'), join(argv.dir, 'tachyons.css'))
await fs.copyFile(join(__dirname, '../node_modules/tachyons-columns/css/tachyons-columns.min.css'), join(argv.dir, 'tachyons-columns.css'))
await fs.outputFile(join(argv.dir, 'index.html'), homePage(added))
}

11
lib/helpers.js
View File

@ -9,7 +9,18 @@ const pad = (str, max) => {
return str.length < max ? pad('0' + str, max) : str
}
const tagsToReplace = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;'
}
const escapeHtml = (html) => {
html.replace(/[&<>]/g, tag => tagsToReplace[tag] || tag)
}
module.exports = {
progress,
escapeHtml,
pad
}

16
lib/html.js
View File

@ -1,7 +1,7 @@
const { basename } = require('path')
const { pad } = require('./helpers')
const { pad, escapeHtml } = require('./helpers')
const credits = '<p class="tc f6 small-caps">This work is licensed under a Creative Commons Attribution-NonCommercial 2.5 License.<br>Originally from <a target="_blank" class="blue hover-dark-blue no-underline" href="https://xkcd.com/">xkcd.com</a>.</p>'
const credits = '<p class="mv4 tc f6 small-caps">This work is licensed under a Creative Commons Attribution-NonCommercial 2.5 License.<br>Originally from <a target="_blank" class="blue hover-dark-blue no-underline" href="https://xkcd.com/">xkcd.com</a>.</p>'
const comicPage = ({ alt, title, transcript, num, img }) => {
const btnClass = 'dib navy mh2 pa2 bg-light-blue hover-bg-lightest-blue br2 ba bw1 b--navy no-underline'
@ -12,6 +12,7 @@ const comicPage = ({ alt, title, transcript, num, img }) => {
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="../tachyons.css"/>
<link rel="stylesheet" href="../tachyons-columns.css"/>
</head>
<body class="tc bg-washed-blue navy sans-serif ml-auto mr-auto mw7 w-90">
<h1 class="mh0 mt4 mb3 f2 small-caps tracked">${title} <span class="light-blue">#${num}</span></h1>
@ -23,7 +24,7 @@ const comicPage = ({ alt, title, transcript, num, img }) => {
</nav>
<img src="./${basename(img)}" title="${alt}">
<p class="dn">${transcript}</p>
<p class="dn">${escapeHtml(transcript)}</p>
${credits}
</body>
</html>`
@ -35,12 +36,15 @@ const homePage = (list) => `<html>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="./tachyons.css"/>
<link rel="stylesheet" href="./tachyons-columns.css"/>
</head>
<body class="bg-washed-blue navy sans-serif ml-auto mr-auto mw7 w-90">
<body class="bg-washed-blue navy sans-serif ml-auto mr-auto mw8 w-90">
<h1 class="tc mh0 mt4 mb3 f2 small-caps tracked">XKCD</h1>
<ul class="list pa0 ma0">
${list.map(({ id, title, num }) => `<li><a class="blue hover-dark-blue no-underline" href="./${num}/index.html">${id} - ${title}</a></li>`).join('\n')}
<ul class="list pa0 ma0 cc2-m cc3-l">
${list.map(({ id, title, num }) => `<li class="mv1">
<a class="blue hover-dark-blue no-underline" href="./${num}/index.html"><span class="b">${id}</span> - ${title}</a>
</li>`).join('\n')}
</ul>
${credits}
</body>

1
package.json
View File

@ -12,6 +12,7 @@
"fs-extra": "^7.0.1",
"node-fetch": "^2.4.0",
"tachyons": "^4.11.1",
"tachyons-columns": "^1.0.5",
"yargs": "^13.2.2"
}
}