nuxt-ts day9：アドベントカレンダー製作2
2020-12-08
# advent アドベントカレンダー特設ページが仮完成した。
https://nuxt-ts-sample.netlify.app/advent
APIに四苦八苦
このサイト(hukurouo.com)からAPIを受け取ろうと思っていたが、CORSで弾かれてしまった。頑張って設定する時間も無かったので、gistにjsonを置いて、それを読み取ることにした。
記事を更新するたびにいちいち編集しなければいけないのが思いっきり本末転倒な気がするが......。
とはいえ、ロジック部分は一応動くものが書けたので、これからリファクタリングなりしていこうと思っている。
export default defineComponent({
setup () {
const state = reactive({
obj: {} as object
})
const calender : number[][] = [
[29, 30, 1, 2, 3, 4, 5],
[6, 7, 8, 9, 10, 11, 12],
[13, 14, 15, 16, 17, 18, 19],
[20, 21, 22, 23, 24, 25, 26]
]
// 色のロジック変更をJSONからやる アニメーションつけてもおもろいかも
const isColor = (date: number): string => {
if ([29, 26].includes(date)) { return 'invalid' }
if ([30, 1, 2, 3, 4, 5, 6, 7, 8].includes(date)) { return 'achieved' }
return 'unachieved'
}
const asyncFunc = async (): Promise<void> => {
const JSON = await $axios.$get('https://gist.githubusercontent.com/hukurouo/58ff1826df34b20b791d0f3b49db449e/raw/8fb796916ab50483d6031a4e4b0863f3ce349f1f/content.json')
state.obj = JSON.filter((i: { title: string|string[] }) => i.title.includes('nuxt-ts')).reverse()
}
onMounted(() => { asyncFunc() })
return {
calender, isColor, state
}
}
})