feat: display code from the card with a readmore btn

FlorianBx · Nov 26, 2023 · 18e8440 · 18e8440
1 parent d0c367f
commit 18e8440
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 19 deletions.
diff --git a/src/Layouts/LayoutGlobalSlot.vue b/src/Layouts/LayoutGlobalSlot.vue
@@ -24,7 +24,7 @@ import NotificationToast from "../components/NotificationToast.vue";
             <slot name="aside"></slot>
           </div>
           <div class="w-full flex flex-col items-center justify-center px-4">
-            <main class="max-w-3xl">
+            <main class="lg:max-w-3xl w-full">
               <slot></slot>
             </main>
           </div>

diff --git a/src/components/CardSnippetV4.vue b/src/components/CardSnippetV4.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { RouterLink } from "vue-router";
+import { nextTick, onMounted, ref } from "vue";
 import Prism from "prismjs";
+import { useRouter } from "vue-router";
+import { useClipboard } from "@vueuse/core";
+import { useDeleteSnippet } from "../composables/useDeleteSnippet";
+import TrashIcon from "../assets/icons/TrashIcon.vue";
+import PencilIcon from "../assets/icons/PencilIcon.vue";
+import CopyIcon from "../assets/icons/CopyIcon.vue";
 import "../assets/highlight-syntax.css";
-import { onMounted } from "vue";
+// import { useGetSnippets } from "../composables/useGetSnippets";
 
 defineProps({
   id: {
@@ -17,11 +23,11 @@ defineProps({
     type: String,
     default: "",
   },
-  language: {
+  code: {
     type: String,
     default: "",
   },
-  code: {
+  language: {
     type: String,
     default: "",
   },
@@ -40,11 +46,20 @@ defineProps({
 });
 
 const authorId = "Florian";
+const router = useRouter();
+const { copy, copied } = useClipboard();
+const { deleteSnippet } = useDeleteSnippet();
+
+const readMore = ref(false);
 
 const splitTags = (tags: string) => {
   return tags.split(",");
 };
 
+const handleEdit = (id: string) => {
+  router.push(`/edit/${id}`);
+};
+
 function timeAgo(
   input: { seconds: number; nanoseconds: number } | string,
 ): string {
@@ -87,20 +102,24 @@ function timeAgo(
   return `${Math.round(yearsPast)} years ago`;
 }
 
-onMounted(() => {
+onMounted(async () => {
+  await nextTick();
   Prism.highlightAll();
 });
 </script>
 
 <template>
-  <div class="flex mt-8">
+  <div class="flex flex-col mt-8">
     <section class="flex flex-col gap-2">
       <h3 class="text-2xl font-bold text-primary/90">{{ title }}</h3>
       <p class="text-sm font-semibold italic">@{{ authorId }}</p>
-      <p class="text-sm font-semibold line-clamp-3 text-primary/70">
+      <p
+        v-show="!readMore"
+        class="text-sm font-semibold line-clamp-3 text-primary/70"
+      >
         {{ description }}
       </p>
-      <div class="flex flex-wrap gap-1">
+      <div v-show="!readMore" class="flex flex-wrap gap-1">
         <p
           v-for="(tag, index) in splitTags(tags)"
           :key="index"
@@ -109,7 +128,7 @@ onMounted(() => {
           {{ tag }}
         </p>
       </div>
-      <div class="flex justify-between gap-3 items-end pt-4">
+      <div v-show="!readMore" class="flex justify-between gap-3 items-end pt-4">
         <div class="flex gap-4">
           <p class="flex gap-2 items-center text-sm">
             <span
@@ -128,13 +147,83 @@ onMounted(() => {
           </p>
           <p class="text-sm">Updated {{ timeAgo(updatedAt) }}</p>
         </div>
-        <router-link
-          :to="`/snippet/${id}`"
+        <button
           class="text-center font-semibold text-sm transition-color duration-300 bg-btn hover:bg-secondary hover:text-darktext rounded py-0.5 px-4 text-primary"
+          @click="readMore = !readMore"
         >
           Read more...
           <span class="sr-only">, {{ title }}</span>
-        </router-link>
+        </button>
+      </div>
+    </section>
+    <section v-show="readMore" class="flex flex-col gap-2">
+      <div>
+        <h4 class="text-sm pt-2 font-semibold text-primary/70">
+          {{ description }}
+        </h4>
+      </div>
+      <div class="flex flex-wrap gap-1">
+        <p
+          v-for="(tag, index) in splitTags(tags)"
+          :key="index"
+          class="bg-vue py-0 px-1.5 rounded text-sm"
+        >
+          {{ tag }}
+        </p>
+      </div>
+      <div class="flex justify-between gap-3 items-end pt-4">
+        <div class="flex gap-4">
+          <p class="flex gap-2 items-center text-sm">
+            <span
+              v-if="language === 'vue'"
+              class="bg-vue w-4 h-2 rounded-full"
+            ></span>
+            <span
+              v-if="language === 'react'"
+              class="bg-react w-4 h-2 rounded-full"
+            ></span>
+            <span
+              v-if="language === 'angular'"
+              class="bg-angular w-4 h-2 rounded-full"
+            ></span>
+            {{ language }}
+          </p>
+          <p class="text-sm">Updated {{ timeAgo(updatedAt) }}</p>
+        </div>
+        <div class="flex items-center gap-4">
+          <button class="text-danger opacity-100" @click="deleteSnippet(id)">
+            <TrashIcon />
+          </button>
+          <button class="text-secondary opacity-60" @click="handleEdit(id)">
+            <PencilIcon />
+          </button>
+          <button
+            class="text-center font-semibold text-sm transition-color duration-300 bg-btn hover:bg-secondary hover:text-darktext rounded py-0.5 px-4 text-primary"
+            @click="readMore = !readMore"
+          >
+            Read less...
+            <span class="sr-only">, {{ title }}</span>
+          </button>
+        </div>
+      </div>
+      <div class="relative">
+        <button
+          type="button"
+          class="absolute top-6 right-8 text-white opacity-60"
+          @click="copy(code)"
+        >
+          <CopyIcon />
+        </button>
+        <div
+          v-show="copied"
+          class="absolute top-16 right-6 bg-vue px-4 py-1 rounded text-sm"
+        >
+          Copied
+        </div>
+        <pre
+          class="p-4 text-sm block w-full bg-transparent focus:shadow-inner-neumorphic shadow-light-inner-neumorphic rounded-md border-0 py-3 text-primary ring-0 focus:ring-0 focus:ring-inset focus:ring-ring sm:text-sm sm:leading-6"
+        ><code class="language-javascript ">{{ code }}</code>
+            </pre>
       </div>
     </section>
   </div>

diff --git a/src/views/CreateSnippetView.vue b/src/views/CreateSnippetView.vue
@@ -34,8 +34,8 @@ const handleSubmit = (event: Event) => {
 </script>
 
 <template>
-  <div class="flex min-h-full sm:mt-20 flex-1 flex-col justify-center">
-    <div class="px-4 sm:px-0 sm:mx-auto sm:w-full sm:max-w-[720px]">
+  <div class="flex min-h-full sm:max-w-3xl flex-col justify-center">
+    <div class="px-4 sm:px-0 sm:mx-auto sm:w-full">
       <div
         class="bg-background px-6 py-12 sm:rounded-xl sm:px-12 shadow-neumorphic"
       >

diff --git a/src/views/EditSnippetView.vue b/src/views/EditSnippetView.vue
@@ -60,10 +60,8 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div
-    class="flex min-h-full sm:mt-20 flex-1 flex-col items-center justify-center"
-  >
-    <div class="px-4 max-w-full sm:px-0 sm:mx-auto sm:w-full sm:max-w-[720px]">
+  <div class="flex min-h-full w-full flex-col items-center justify-center">
+    <div class="max-w-full px-4 sm:w-full sm:max-w-3xl">
       <div
         class="relative bg-background px-6 py-12 sm:rounded-xl sm:px-12 shadow-neumorphic"
       >

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -64,6 +64,7 @@ onMounted(async () => {
           :id="snippet.id"
           :title="snippet.title"
           :description="snippet.description"
+          :code="snippet.code"
           :tags="snippet.tags"
           :created-at="snippet.createdAt"
           :updated-at="snippet.updatedAt"
@@ -122,6 +123,7 @@ onMounted(async () => {
             :id="snippet.id"
             :title="snippet.title"
             :description="snippet.description"
+            :code="snippet.code"
             :tags="snippet.tags"
             :language="snippet.language.toLocaleLowerCase()"
             :created-at="snippet.createdAt"