<template>
  <div class="wrapper-small md:px-10">
    <AuthorProfile />

    <section
      id="technologies"
      class="mt-6"
    >
      <h3 class="section-heading">
        Technologies I Use
      </h3>

      <ResumeTechnologies />
    </section>

    <section
      id="experience"
      class="grid gap-6 mt-4 sm:mt-6 md:mt-10 sm:gap-8 sm:grid-cols-2"
    >
      <h3 class="section-heading">
        Experience
      </h3>

      <div class="grid gap-2 mt-4">
        <!-- <CardExperience
          v-for="(experience, index) in experiences.jobs"
          :key="`experience-job-${index}`"
          :title="experience.title"
          :url="experience.url"
          :date="experience.date"
          :position="experience.position"
        /> -->
      </div>
    </section>

    <section id="featured-posts" class="mt-6">
      <h3 class="section-heading">
        Featured Posts
      </h3>

      <BlogPostCard v-for="post in posts" :key="post.slug" :post="post"></BlogPostCard>
    </section>


    <section id="projects" class="mt-6">
      <h3 class="section-heading">
        Open Source Projects
      </h3>

      <ResumeProjects :projects="projects"/>
    </section>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, $notion, $config: { githubUsername, notionTableId } }) {
    const projects = await $axios
      .get(
        'https://api.github.com/search/repositories?q=user:' + githubUsername + '&sort=stars&per_page=3'
      )
      .catch((errors) => {
        // console.log(errors)
      })
    const pageTable = await $notion.getPageTable(notionTableId)
    const posts = pageTable.filter((page) => page.public && page.featured).sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
    return { posts, projects: projects.data.items }
  }
}
</script>

<style scoped>
 .section-heading {
    @apply text-xl font-semibold text-gray-900 dark:text-gray-100;
  }
</style>
