hukurouo.com 🦉

2020-12-08 :

nuxt-ts day9：アドベントカレンダー製作2


アドベントカレンダー特設ページが仮完成した。

https://nuxt-ts-sample.netlify.app/advent

APIに四苦八苦

このサイト(hukurouo.com)からAPIを受け取ろうと思っていたが、CORSで弾かれてしまった。頑張って設定する時間も無かったので、gistにjsonを置いて、それを読み取ることにした。

content.json

記事を更新するたびにいちいち編集しなければいけないのが思いっきり本末転倒な気がするが......。

とはいえ、ロジック部分は一応動くものが書けたので、これからリファクタリングなりしていこうと思っている。

pages\advent.vue
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
    }
  }
})