Skip to content

Instantly share code, notes, and snippets.

@gil00pita
Created September 16, 2019 09:15
Show Gist options
  • Save gil00pita/2f1a557b7d67aa32313415081a752285 to your computer and use it in GitHub Desktop.
Save gil00pita/2f1a557b7d67aa32313415081a752285 to your computer and use it in GitHub Desktop.
<template>
<section class="container">
<Sites v-bind="sites" />
<Scores v-bind="scores" />
</section>
</template>
<script>
import Scores from '~/components/Scores.vue'
import Sites from '~/components/Sites.vue'
export default {
components: {
Scores,
Sites
},
async asyncData({ error }) {
const fs = require('fs')
const util = require('util')
const readFile = util.promisify(fs.readFile)
try {
const [scoresJSON, sitesJSON] = await Promise.all([
readFile('data/scores.json'),
readFile('data/sites.json')
])
return {
scores: parseRecords(scoresJSON),
sites: parseRecords(sitesJSON)
}
} catch (e) {
error({ statusCode: 404, message: e.message })
}
}
}
function parseRecords(maybeJSON) {
try {
return JSON.parse(maybeJSON)
} catch {
console.log('could not parse:' + maybeJSON)
throw new Error('unable to parse')
}
}
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
width: 50vw;
justify-content: center;
text-align: center;
}
.title {
margin-top: 30px;
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
}
.filters {
font-weight: bold;
margin: 15px;
}
a {
text-decoration: underline;
padding: 0 5px;
}
table {
margin: 15px auto;
}
td, th {
padding: 5px;
}
details {
margin-top: 15px;
}
pre {
text-align: left;
border: 1px solid black;
}
</style>
function parseRecords(maybeJSON) {
try {
return JSON.parse(maybeJSON)
} catch { //no need to pass 'e' on es2019
console.log('could not parse:' + maybeJSON)
throw new Error('unable to parse')
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment