init blog pages

.eslintrc.js

@@ -21,9 +21,10 @@ module.exports = {
     "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-namespace": "off",
+    "vue/no-v-html": "off",
     "vue/multi-word-component-names": "off",
-    "vue/require-default-prop": "off",
     "vue/one-component-per-file": "off",
+    "vue/require-default-prop": "off",
   },
   ignorePatterns: ["node_modules", "dist", "public"],
   overrides: [

package.json

@@ -9,6 +9,8 @@
     "build:ext": "vite build --mode extension && node ./scripts/copyExtFiles.js"
   },
   "dependencies": {
+    "@tailwindcss/typography": "^0.5.0",
+    "@tryghost/content-api": "^1.5.16",
     "d3": "^7.2.1",
     "dayjs": "^1.10.7",
     "pinia": "^2.0.9",
@@ -22,6 +24,7 @@
   "devDependencies": {
     "@types/chrome": "^0.0.171",
     "@types/d3": "^7.1.0",
+    "@types/tryghost__content-api": "^1.3.9",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vitejs/plugin-vue": "^2.0.0",

src/components/Header.vue

@@ -3,7 +3,7 @@
     class="w-full h-52px shrink-0 flex flex-row justify-center items-center bg-dark text-light"
   >
     <div
-      class="w-full md:w-5/6 md:pr-0 lg:max-w-7xl h-full flex flex-row justify-between items-center"
+      class="w-full md:w-5/6 lg:max-w-7xl h-full flex flex-row justify-between items-center"
     >
       <div class="h-full flex flex-row justify-start items-center">
         <a

src/css/index.css

@@ -1,4 +1,5 @@
 @tailwind base;
+@tailwind components;
 @tailwind utilities;
 
 @font-face {

src/helpers/api.ts

@@ -1,3 +1,4 @@
+import GhostContentAPI, { Params, PostOrPage } from "@tryghost/content-api";
 import utils from "./utils";
 
 type ResponseType<T = unknown> = {
@@ -169,6 +170,48 @@ namespace api {
 
     return starRecords;
   }
+
+  // Create API instance with site credentials
+  const ghostContentAPI = new GhostContentAPI({
+    url: "https://bytebase.ghost.io",
+    key: "f3ffa1aa4e40b7999486ef97e5",
+    version: "v3",
+  });
+
+  export async function getPosts(page?: number): Promise<PostOrPage[]> {
+    const params: Params = {
+      limit: "all",
+      include: ["tags", "authors"],
+      order: "published_at DESC",
+    };
+
+    if (page) {
+      params.page = page;
+    }
+
+    return await ghostContentAPI.posts.browse(params).catch((err) => {
+      console.error(err);
+      throw err;
+    });
+  }
+
+  export async function getPostDetailBySlug(
+    postSlug: string
+  ): Promise<PostOrPage> {
+    return await ghostContentAPI.posts
+      .read(
+        {
+          slug: postSlug,
+        },
+        {
+          include: ["tags", "authors"],
+        }
+      )
+      .catch((err) => {
+        console.error(err);
+        throw err;
+      });
+  }
 }
 
 export default api;

src/pages/NotFound.vue → src/pages/404.vue

@@ -9,8 +9,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-// WIP
 export default defineComponent({
-  name: "NotFound",
+  name: "404",
 });
 </script>

src/pages/Blog.vue

@@ -1,14 +1,106 @@
 <template>
   <div class="relative w-full h-auto min-h-screen overflow-auto flex flex-col">
-    <p>Blog</p>
+    <Header />
+    <div
+      class="w-full p-4 md:p-0 mt-6 md:w-5/6 lg:max-w-7xl h-full flex flex-col justify-start items-center self-center"
+    >
+      <img
+        class="hidden md:block w-full object-scale-down"
+        :src="state.post?.feature_image || ''"
+        :alt="state.post?.feature_image_alt || ''"
+      />
+      <!-- title -->
+      <div
+        class="w-full max-w-6xl mt-12 prose prose-indigo prose-xl md:prose-2xl flex flex-row justify-center items-center"
+      >
+        <h1 class="leading-16">
+          {{ state.post?.title }}
+        </h1>
+      </div>
+      <!-- tags -->
+      <div
+        class="px-4 mt-6 w-full max-w-6xl flex flex-row justify-center items-center"
+      >
+        <span
+          v-for="tag in state.post?.tags"
+          :key="tag.id"
+          class="items-center px-3 py-0.5 mr-2 rounded-full text-base font-medium"
+        >
+          # {{ tag.name }}
+        </span>
+      </div>
+      <!-- author infomartion -->
+      <div
+        class="w-full mt-2 mb-4 max-w-6xl px-2 flex flex-row items-center justify-center text-sm text-gray-900 font-semibold tracking-wide uppercase"
+      >
+        <img
+          class="h-8 w-auto rounded-full mr-2"
+          :src="state.post?.authors![0].profile_image || ''"
+        />{{ state.post?.authors![0].name }}
+        <div class="flex space-x-1 text-gray-500">
+          <time :datetime="state.post?.published_at || ''">
+            {{
+              new Date(state.post?.published_at || "").toLocaleString(
+                "default",
+                {
+                  year: "numeric",
+                  month: "short",
+                  day: "numeric",
+                }
+              )
+            }}
+          </time>
+          <span aria-hidden="true"> &middot; </span>
+          <span> {{ state.post?.reading_time }} min read </span>
+        </div>
+      </div>
+      <div
+        class="w-full max-w-5xl prose prose-indigo prose-xl md:prose-2xl"
+        v-html="state.post?.html"
+      ></div>
+    </div>
+    <div class="grow my-6"></div>
+    <Footer />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { PostOrPage } from "@tryghost/content-api";
+import { defineComponent, onMounted, reactive } from "vue";
+import { useRoute } from "vue-router";
+import Footer from "../components/Footer.vue";
+import Header from "../components/Header.vue";
+import api from "../helpers/api";
+
+interface State {
+  post?: PostOrPage;
+}
 
-// WIP
 export default defineComponent({
   name: "Blog",
+  components: { Footer, Header },
+  setup: () => {
+    const state = reactive<State>({});
+    const currentRoute = useRoute();
+
+    onMounted(async () => {
+      const blogSlug = currentRoute.params.blogSlug as string;
+
+      if (!blogSlug) {
+        return;
+      }
+
+      try {
+        const post = await api.getPostDetailBySlug(blogSlug);
+        state.post = post;
+      } catch (error) {
+        // do nth
+      }
+    });
+
+    return {
+      state,
+    };
+  },
 });
 </script>