From 7e692f2e265c49bca32ae0c02e26cf6f8d52a63e Mon Sep 17 00:00:00 2001
From: Polash Mahmud <polashmahmud@gmail.com>
Date: Thu, 31 Aug 2023 11:58:02 +0600
Subject: [PATCH] class 08

---
 package-lock.json   | 47 +++++++++++++++++++++++++++++++++++++++++++++
 package.json        |  1 +
 src/api/usePosts.js | 13 +++++++++++--
 src/pages/Home.vue  |  4 ++--
 src/pages/Post.vue  | 27 ++++++++++++++++++++++++++
 src/router/index.js |  7 +++++++
 tailwind.config.js  |  4 +++-
 7 files changed, 98 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Post.vue

diff --git a/package-lock.json b/package-lock.json
index 717c471..8c6fc9a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "vue-router": "^4.2.4"
       },
       "devDependencies": {
+        "@tailwindcss/typography": "^0.5.9",
         "@vitejs/plugin-vue": "^4.2.3",
         "autoprefixer": "^10.4.15",
         "postcss": "^8.4.28",
@@ -477,6 +478,34 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
+      "integrity": "sha512-t8Sg3DyynFysV9f4JDOVISGsjazNb48AeIYQwcL+Bsq5uf4RYL75C1giZ43KISjeDGBaTN3Kxh7Xj/vRSMJUUg==",
+      "dev": true,
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.3.3.tgz",
@@ -1189,6 +1218,24 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "node_modules/magic-string": {
       "version": "0.30.3",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
diff --git a/package.json b/package.json
index 9393700..940c580 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9",
     "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.15",
     "postcss": "^8.4.28",
diff --git a/src/api/usePosts.js b/src/api/usePosts.js
index e80a018..a7536e8 100644
--- a/src/api/usePosts.js
+++ b/src/api/usePosts.js
@@ -1,8 +1,9 @@
 import {ref} from "vue";
 import axios from "axios";
 
-export default function usePosts() {
+export default function usePosts(slug) {
     const posts = ref([]);
+    const post = ref({});
 
     const fetchPosts = async () => {
         let response = await axios.get('/api/posts');
@@ -10,8 +11,16 @@ export default function usePosts() {
         posts.value = response.data.data
     }
 
+    const fetchPost = async () => {
+        let response = await axios.get(`/api/posts/${slug}`);
+
+        post.value = response.data.data
+    }
+
     return {
         posts,
-        fetchPosts
+        post,
+        fetchPosts,
+        fetchPost
     }
 }
\ No newline at end of file
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 5aef390..0549199 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -14,12 +14,12 @@ onMounted(fetchPosts)
         v-for="post in posts"
         :key="post.uuid"
     >
-      <a href="" class="block">
+      <router-link :to="{ name: 'post', params: {slug: post.slug}}" class="block">
         <h1 class="text-3xl sm:text-4xl leading-10 font-extrabold tracking-tight text-gray-900">{{ post.title }}</h1>
         <p class="mt-6 text-gray-500">
           {{ post.teaser }}
         </p>
-      </a>
+      </router-link>
     </div>
   </div>
 </template>
diff --git a/src/pages/Post.vue b/src/pages/Post.vue
new file mode 100644
index 0000000..e82735d
--- /dev/null
+++ b/src/pages/Post.vue
@@ -0,0 +1,27 @@
+<script setup>
+import usePosts from "../api/usePosts.js";
+import { onMounted } from "vue";
+
+const props = defineProps({
+  slug: {
+    type: String,
+    required: true
+  }
+})
+
+const {post, fetchPost} = usePosts(props.slug)
+
+onMounted(fetchPost)
+
+</script>
+
+<template>
+  <h1 class="block text-center text-4xl sm:text-6xl leading-10 font-extrabold tracking-tight text-gray-900">
+    {{ post.title }}
+  </h1>
+  <div class="prose lg:prose-xl mt-16 text-gray-500" v-html="post.body"></div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 52eeb37..ce847b9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,11 +1,18 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Home from "../pages/Home.vue";
+import Post from "../pages/Post.vue";
 
 const routes = [
     {
         path: '/',
         name: 'home',
         component: Home
+    },
+    {
+        path: '/posts/:slug',
+        name: 'post',
+        component: Post,
+        props: true
     }
 ]
 
diff --git a/tailwind.config.js b/tailwind.config.js
index a28ce71..2c7c875 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,8 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
 }