feat: add latest & random
License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>
This commit is contained in:
Henrique Dias
parent
e04b5fc1bd
commit
78e779523d
14
bin/index.js
14
bin/index.js
|
|
@ -23,12 +23,12 @@ const argv = yargs
|
|||
.help()
|
||||
.argv
|
||||
|
||||
async function write ({ data, img }, dir) {
|
||||
async function write ({ data, img }, dir, latest) {
|
||||
try {
|
||||
await fs.outputJSON(join(dir, 'info.json'), data, { spaces: '\t' })
|
||||
await fs.outputFile(join(dir, basename(data.img)), img)
|
||||
await fs.outputFile(join(dir, `image${extname(data.img)}`), img)
|
||||
await fs.outputFile(join(dir, 'index.html'), comicPage(data))
|
||||
await fs.outputFile(join(dir, 'index.html'), comicPage(data, latest))
|
||||
} catch (err) {
|
||||
await fs.remove(dir)
|
||||
throw err
|
||||
|
|
@ -41,9 +41,11 @@ async function run () {
|
|||
let added = []
|
||||
let errored = []
|
||||
|
||||
let latest = null
|
||||
|
||||
try {
|
||||
console.log(`🔍 Finding the latest comic`)
|
||||
const latest = await getLatestId()
|
||||
latest = await getLatestId()
|
||||
console.log(`😁 Found! We're on comic number ${latest}!`)
|
||||
|
||||
await fs.ensureDir(argv.dir)
|
||||
|
|
@ -60,7 +62,7 @@ async function run () {
|
|||
if (await fs.pathExists(dir)) {
|
||||
const data = await fs.readJSON(join(dir, 'info.json'))
|
||||
added.push({ id: i, title: data.title, num })
|
||||
await fs.outputFile(join(dir, 'index.html'), comicPage(data))
|
||||
await fs.outputFile(join(dir, 'index.html'), comicPage(data, latest))
|
||||
continue
|
||||
} else if (i === 404) {
|
||||
continue
|
||||
|
|
@ -77,7 +79,7 @@ async function run () {
|
|||
try {
|
||||
comic = await getComic(i)
|
||||
info.title = comic.data.title
|
||||
await write(comic, dir)
|
||||
await write(comic, dir, latest)
|
||||
added.push(info)
|
||||
} catch (err) {
|
||||
progress(`😢 Could not fetch ${i}, will try again later\n`)
|
||||
|
|
@ -94,7 +96,7 @@ async function run () {
|
|||
for (let i = 0; i < 3; i++) {
|
||||
try {
|
||||
const comic = await getComic(id)
|
||||
await write(comic, dir)
|
||||
await write(comic, dir, latest)
|
||||
added.push(info)
|
||||
break
|
||||
} catch (err) {
|
||||
|
|
|
|||
41
lib/html.js
41
lib/html.js
|
|
@ -3,8 +3,13 @@ const { pad, escapeHtml } = require('./helpers')
|
|||
|
||||
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'
|
||||
const classes = {
|
||||
body: 'bg-washed-blue navy sans-serif ml-auto mr-auto w-90',
|
||||
title: 'tc mh0 mt4 mb3 f2 small-caps tracked',
|
||||
btn: 'dib navy mh2 pa2 bg-light-blue hover-bg-lightest-blue br2 ba bw1 b--navy no-underline'
|
||||
}
|
||||
|
||||
const comicPage = ({ alt, title, transcript, num, img }, latest) => {
|
||||
|
||||
return `<html>
|
||||
<head>
|
||||
|
|
@ -14,13 +19,13 @@ const comicPage = ({ alt, title, transcript, num, img }) => {
|
|||
<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>
|
||||
<body class="${classes.body} mw7 tc">
|
||||
<h1 class="${classes.title}">${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>
|
||||
<a class="${classes.btn}" href="${num !== 1 ? `../${pad(num - 1, 4)}/index.html` : '#'}"><span class="gray">←</span> Prev</a>
|
||||
<a class="${classes.btn}" href="../index.html">Home</a>
|
||||
<a class="${classes.btn}" href="${num !== latest ? `../${pad(num + 1, 4)}/index.html` : '#'}">Next <span class="gray">→</span></a>
|
||||
</nav>
|
||||
|
||||
<img src="./${basename(img)}" title="${alt.replace('"', '"')}">
|
||||
|
|
@ -38,14 +43,32 @@ const homePage = (list) => `<html>
|
|||
<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 mw8 w-90">
|
||||
<h1 class="tc mh0 mt4 mb3 f2 small-caps tracked">XKCD</h1>
|
||||
<body class="${classes.body} mw8">
|
||||
<script>
|
||||
function goToRandom(min, max) {
|
||||
min = Math.ceil(min);
|
||||
max = Math.floor(max);
|
||||
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
|
||||
}
|
||||
</script>
|
||||
<h1 class="${classes.title}">XKCD</h1>
|
||||
|
||||
<nav class="mv3 tc">
|
||||
<a class="${classes.btn}" id="random" href="">Random</a>
|
||||
<a class="${classes.btn}" href="${pad(list[list.length - 1].num, 4)}/index.html">Latest</a>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
|
||||
<script>
|
||||
var el = document.getElementById('random')
|
||||
var comics = document.querySelector('.list').children
|
||||
el.href = comics[Math.floor(Math.random() * (comics.length))].querySelector('a').href
|
||||
</script>
|
||||
${credits}
|
||||
</body>
|
||||
</html>`
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user