Initial Commit

pages/about.vue

@@ -0,0 +1,28 @@
+<script>
+export default {
+  async asyncData({$notion, $config: { notionAboutPageId }}) {
+    const blockMap = await $notion.getPageBlocks(notionAboutPageId)
+    return {blockMap}
+  },
+  head: {
+    title: "About"
+  },
+}
+</script>
+
+<template>
+  <NotionRenderer :block-map="blockMap" full-page prism/>
+</template>
+
+
+<style>
+@import "vue-notion/src/styles.css";
+
+.notion-title, .notion-text, .notion-list, .notion-callout-text, p, h1, h2, h3, h4, span {
+  @apply dark:text-white;
+}
+
+.notion-link {
+  @apply dark:hover:bg-red-500;
+}
+</style>

pages/index.vue

@@ -0,0 +1,76 @@
+<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>

pages/posts/_slug.vue

@@ -0,0 +1,63 @@
+<script>
+import 'prismjs'
+import 'prismjs/themes/prism-tomorrow.css'
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-shell-session'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-python'
+import 'prismjs/components/prism-yaml'
+import 'prismjs/components/prism-graphql'
+import 'prismjs/components/prism-javascript'
+
+export default {
+  async asyncData({ $notion, params, error, $config: { notionTableId } }) {
+    const pageTable = await $notion.getPageTable(notionTableId)
+    const page = pageTable.find(
+      (item) => item.public && item.slug === params.slug
+    )
+    const blockMap = await $notion.getPageBlocks(page ? page.id : params.slug)
+    if (!blockMap || blockMap.error) {
+      return error({ statusCode: 404, message: "Post not found" })
+    }
+    return { blockMap, page}
+  },
+  data() {
+    return {
+      pageLinkOptions: { component: "NuxtLink", href: "to" },
+    }
+  },
+  head() {
+    const post = this.page
+    const title = post?.title
+    const description = post?.description || process.env.DEV_DESCRIPTION
+    const image = post?.thumbnail[0].url || null
+    const tags = post.tags || title
+    const href = process.env.BASE_URL + `/posts/${post.slug}`
+    const meta = this.$prepareMeta(
+      {title, description, image, keywords: `${tags}`, url: href},
+      [{name: "article:published-time", content: post?.created_at || null},]
+    )
+    return {
+      title,
+      link: [{rel: "canonical", href}],
+      meta,
+    }
+  }
+}
+</script>
+
+
+<template>
+  <NotionRenderer :block-map="blockMap" :page-link-options="pageLinkOptions" full-page prism/>
+</template>
+
+
+<style>
+@import "vue-notion/src/styles.css";
+.notion-title, .notion-text, .notion-list, .notion-callout-text, p , h1, h2, h3, h4, span {
+  @apply dark:text-white;
+}
+.notion-link{
+  @apply dark:hover:bg-red-500;
+}
+</style>

pages/posts/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <Blogs :posts="posts" title="Blogs"/>
+</template>
+
+
+<script>
+export default {
+  async asyncData({$notion, params, error, $config: { notionTableId }}) {
+    const pageTable = await $notion.getPageTable(notionTableId)
+    const posts = pageTable.filter((page) => page.public).sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
+    return {posts}
+  },
+  head: {
+    title: process.env.GITHUB_USERNAME + "'s Blog",
+    meta: [
+      {
+        hid: 'description',
+        name: 'description',
+        content: process.env.DEV_DESCRIPTION
+      }
+    ]
+  }
+}
+</script>