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

wip: xkcd cloner

Browse Source 
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
This commit is contained in:
Henrique Dias 2019-04-27 00:18:24 +01:00
parent 7ee5590be9
commit abae3a22a3
2 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.js
View File

@ -23,6 +23,29 @@ const fetchId = (id) => {
.then(res => res.json())
}
const htmlPage = ({ alt, title, transcript, num, img }) => {
const btnClass = 'dib navy mh2 pa2 bg-light-blue bg-animate hover-bg-lightest-blue br2 ba bw1 b--navy no-underline'
return `<html>
<head>
<title>${num} - ${title}</title>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.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>
<nav class="mv3">
<a class="${btnClass}" href="../${pad(num - 1, 4)}/index.html"><span class="gray">←</span> Prev</a>
<a class="${btnClass}" href="../index.html">Home</a>
<a class="${btnClass}" href="../${pad(num + 1, 4)}/index.html">Next <span class="gray">→</span></a>
</nav>
<img src="./${basename(img)}" alt="${alt}">
<p class="dn">${transcript}</p>
</body>
</html>`
}
const download = async (baseDir, i) => {
const num = pad(i, 4)
const res = await fetchId(i)
@ -40,35 +63,31 @@ const download = async (baseDir, i) => {
await fs.remove(dir)
throw err
}
return {
id: i,
title: res.title,
num: num
}
}
const htmlPage = ({ alt, title, transcript, num, img }) => {
const btnClass = 'dib navy pa2 bg-light-blue bg-animate hover-bg-blue br2 ba bw1 b--navy no-underline'
return `<html>
const homePage = (list) => `<html>
<head>
<title>${num} - ${title}</title>
<title>XKCD</title>
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
</head>
<body class="bg-washed-blue navy sans-serif ml-auto mr-auto mw7">
<h1 class="mh0 mt4 mb3 f2 small-caps tracked">${title} <span class="light-blue">#${num}</span></h1>
<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">XKCD</h1>
<nav>
<a class="${btnClass}" href="../${pad(num - 1, 4)}/index.html">Prev</a>
<a class="${btnClass}" href="../">Home</a>
<a class="${btnClass}" href="../${pad(num + 1, 4)}/index.html">Next</a>
</nav>
<img src="./${basename(img)}" alt="${alt}">
<p>${transcript}</p>
${list.map(({ id, title, num }) => `<a href="./${num}/index.html">${id} - ${title}</a>`).join('\n')}
</body>
</html>`
}
const clone = async ({ baseDir, empty, onlyMissing }) => {
console.log(`😊 Going to clone XKCD to ${baseDir}`)
let errored = []
let added = []
try {
console.log(`🔍 Finding the latest comic`)
@ -83,7 +102,7 @@ const clone = async ({ baseDir, empty, onlyMissing }) => {
existent = fs.readdirSync(baseDir).map(v => Number(v.split('-')[0].trim()))
}
for (let i = 1; i <= latest + 1; i++) {
for (let i = 1; i <= 10 + 1; i++) {
if (existent.includes(i)) {
continue
} else if (i === 404) {
@ -97,7 +116,7 @@ const clone = async ({ baseDir, empty, onlyMissing }) => {
}
try {
await download(baseDir, i)
added.push(await download(baseDir, i))
} catch (err) {
errored.push(i)
}
@ -110,7 +129,7 @@ const clone = async ({ baseDir, empty, onlyMissing }) => {
for (const num of errored) {
for (let i = 0; i < 3; i++) {
try {
await download(baseDir, i)
added.push(await download(baseDir, i))
break
} catch (err) {
if (i === 2) {
@ -119,6 +138,9 @@ const clone = async ({ baseDir, empty, onlyMissing }) => {
}
}
}
added = added.sort((a, b) => a.num - b.num)
await fs.outputFile(join(baseDir, 'index.html'), homePage(added))
}
clone({

1
package.json
View File

@ -8,6 +8,7 @@
"dependencies": {
"fs-extra": "^7.0.1",
"node-fetch": "^2.4.0",
"tachyons": "^4.11.1",
"yargs": "^13.2.2"
}
}