From dfe3a8c1fab8864b37925ccc43c08324ff28e097 Mon Sep 17 00:00:00 2001
From: Tabby <41929769+tabby-cat-nya@users.noreply.github.com>
Date: Sat, 5 Apr 2025 19:01:47 +1100
Subject: [PATCH] improved blog post component

---
 assets/css/main.scss     |  76 +++++++++++-----------
 components/BigButton.vue |  28 +++++++++
 components/BlogCard.vue  | 132 +++++++++++++++++++++++++++++++++++++++
 pages/blog-index.vue     |  38 ++++++-----
 pages/blog/[...slug].vue |   2 +-
 pages/hi.vue             |   2 +-
 pages/index.vue          |  56 +++++++++--------
 pages/newIndex.vue       |  18 ++++++
 8 files changed, 272 insertions(+), 80 deletions(-)
 create mode 100644 components/BigButton.vue
 create mode 100644 components/BlogCard.vue
 create mode 100644 pages/newIndex.vue

diff --git a/assets/css/main.scss b/assets/css/main.scss
index 3cce557..71b57a0 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -4,7 +4,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@400..800&display=swap');
 
 :root {
-  --bg: #2b182b;
+  --bg: #351d3a;
   --fg: white;
 
   --accent: #e17ff5;
@@ -13,31 +13,37 @@
   --max-width: 70rem;
 }
 
-html {
-  scroll-behavior: smooth;
-}
-
-body {
+body{
   background-color: var(--bg);
   color: var(--fg);
-  display: flex;
-  flex-direction: column;
-  // font-family: Comfortaa;
   font-family: "Baloo Chettan 2";
-  height: 100dvh;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  width: 100dvw;
-  transition-property: background-color, color;
-  transition-duration: 250ms;
-}
-@media (prefers-color-scheme: light) {
-  body {
-    background-color: var(--fg);
-    color: var(--bg);
-  }
 }
 
+// html {
+//   scroll-behavior: smooth;
+// }
+
+// body {
+//   background-color: var(--bg);
+//   color: var(--fg);
+//   display: flex;
+//   flex-direction: column;
+//   // font-family: Comfortaa;
+//   font-family: "Baloo Chettan 2";
+//   height: 100dvh;
+//   overflow-x: hidden;
+//   overflow-y: scroll;
+//   width: 100dvw;
+//   transition-property: background-color, color;
+//   transition-duration: 250ms;
+// }
+// @media (prefers-color-scheme: light) {
+//   body {
+//     background-color: var(--fg);
+//     color: var(--bg);
+//   }
+// }
+
 a {
   color: var(--accent);
   transition-duration: 200ms;
@@ -47,20 +53,20 @@ a {
   }
 }
 
-::-webkit-scrollbar {
-  width: 5px;
-}
+// ::-webkit-scrollbar {
+//   width: 5px;
+// }
 
-::-webkit-scrollbar-track {
-  background-color: var(--accent-dark);
-  border-radius: 10px;
-}
+// ::-webkit-scrollbar-track {
+//   background-color: var(--accent-dark);
+//   border-radius: 10px;
+// }
 
-::-webkit-scrollbar-thumb {
-  background: white;
-  border-radius: 10px;
+// ::-webkit-scrollbar-thumb {
+//   background: white;
+//   border-radius: 10px;
 
-  &:hover {
-    background: var(--accent);
-  }
-}
\ No newline at end of file
+//   &:hover {
+//     background: var(--accent);
+//   }
+// }
\ No newline at end of file
diff --git a/components/BigButton.vue b/components/BigButton.vue
new file mode 100644
index 0000000..c45f6c4
--- /dev/null
+++ b/components/BigButton.vue
@@ -0,0 +1,28 @@
+<template>
+  <a class="big-button" :href="props.href">
+    <h2>{{props.text}}</h2>
+  </a>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps({
+    href: String,
+    text: String
+  });
+</script>
+
+<style>
+  .big-button{
+    background-color: var(--accent);
+    color: black;
+    width: 80%;
+    text-decoration: none;
+    
+  }
+
+  h2{
+    margin: 0;
+    text-align: center;
+    
+  }
+</style>
\ No newline at end of file
diff --git a/components/BlogCard.vue b/components/BlogCard.vue
new file mode 100644
index 0000000..8a266c4
--- /dev/null
+++ b/components/BlogCard.vue
@@ -0,0 +1,132 @@
+<script setup>
+const props = defineProps({
+  href: String,
+  heading: String,
+  description: String,
+  subheading: String,
+  id: Number,
+  tags: String
+});
+</script>
+
+<template>
+    <a class="blog-card" :href="props.href">
+      <div class="blog-header">
+        <h2> {{props.heading}}</h2>
+        <p v-if="tags===''" class="blog-subheading">{{props.subheading}} - #{{ props.id }}</p>
+          <p v-else class="blog-subheading">{{props.subheading}} - #{{ props.id }} - {{ props.tags }}</p>
+      </div> 
+      <div class="blog-content">
+          <!-- <h2 class="heading"> {{props.heading}}</h2> -->
+          
+          <p>{{props.description}}</p>
+      </div>
+    </a>
+    
+</template>
+
+<style scoped>
+  .blog-card{
+    border-color:  var(--accent);
+    border-width: 3px;
+    border-style: solid;
+    background-color: rgb(36, 36, 36);
+    text-decoration: none;
+    margin-bottom: 10px;
+  }
+
+  h2{
+    margin: 0;
+  }
+
+  .blog-header{
+    background-color: var(--accent);
+    color: black;
+    padding-left: 10px;
+    border-style: none none dotted none;
+    border-color: var(--accent);
+    border-width: 3px;
+  }
+
+  .blog-content{
+    padding: 10px;
+    margin: 0;
+    color: var(--fg);
+  }
+
+  p{
+    margin: 0;
+  }
+
+  .blog-subheading{
+    margin: 0;
+    text-align: center;
+  }
+
+</style>
+
+<!-- <style scoped>
+  :root {
+    --bg: #351d3a;
+    --fg: white;
+
+    --accent: #e17ff5;
+    --accent-dark: #630063;
+
+    --max-width: 70rem;
+}
+
+    .card{
+        /* position: relative; */
+        /* text-align: center; */
+        /* margin: 10px; */
+        border-radius: 5px;
+        overflow: hidden;
+        color: white;
+        background-color: rgb(62, 0, 104);
+        background-color: rgb(62, 0, 104);
+        width: 100%;
+        text-decoration: none;
+        height: 100px;
+        
+    }
+
+    .text-content{
+        position: absolute;
+        top: 8px;
+        left: 16px;
+        text-align: left ;
+        
+    }
+
+    .header{
+      background-color: var(--accent);
+      color:black;
+    }
+
+    .text-image{  
+        /* filter: brightness(50%) blur(0px); */
+        /* filter: blur(2px); */
+    }
+    .content{
+            /* visibility:visible; */
+    }
+
+    .text-container:hover{
+        background-color: var(--accent-dark);
+        .text-content{
+            visibility:visible;
+        }
+        
+    }
+
+    .subheading{
+        color: grey;
+        margin: 0;
+        font-size: small;
+    }
+
+    h2{
+        margin: 0;
+    }
+</style> -->
\ No newline at end of file
diff --git a/pages/blog-index.vue b/pages/blog-index.vue
index cb764f0..6345f48 100644
--- a/pages/blog-index.vue
+++ b/pages/blog-index.vue
@@ -8,21 +8,22 @@
       <a href="blog-index?tag=Programming">Programming</a> - 
       <a href="blog-index?tag=Godot">Godot</a> - 
       <a href="blog-index?tag=Tech">Tech</a> - 
-      <a href="blog-index?tag=Queerness">Queerness</a> - 
-      <a class="no-posts" href="blog-index?tag=Mental Health">Mental Health</a>
+      <a href="blog-index?tag=Queerness">Queerness</a>
+      <!-- <a class="no-posts" href="blog-index?tag=Mental Health">Mental Health</a> -->
     </p>
 
     <hr>
-    <TextCard v-for="post in data"
-        :key="post.id"
-        :href="post._path"
-        :heading="post.title"
-        :subheading="post.date"
-        :description="post.description"
-        :id="post.id"
-        :tags="post.tags"
-      />
-
+    <!-- <div> -->
+      <BlogCard v-for="post in data" class="posts-list"
+          :key="post.id"
+          :href="post._path"
+          :heading="post.title"
+          :subheading="post.date"
+          :description="post.description"
+          :id="post.id"
+          :tags="post.tags"
+        />
+    <!-- </div> -->
     
 
   </main>
@@ -53,12 +54,17 @@
 
 <style>
   main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    /* display: flex; */
+    /* flex-direction: column; */
+    /* align-items: center; */
     padding: 2rem;
     margin-top: 3.5rem;
-    gap: 0rem;
+    /* gap: 0rem; */
+    /* width: 80%; */
+  }
+  
+  .posts-list{
+    width: 80%;
   }
 
   .no-margin{
diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue
index d409e6e..5032634 100644
--- a/pages/blog/[...slug].vue
+++ b/pages/blog/[...slug].vue
@@ -39,7 +39,7 @@
     align-items: center;
     padding: 2rem;
     margin-top: 3.5rem;
-    gap: 2rem;
+    /* gap: 2rem; */
   }
 
 </style>
\ No newline at end of file
diff --git a/pages/hi.vue b/pages/hi.vue
index 0fbb1e1..dc39c8d 100644
--- a/pages/hi.vue
+++ b/pages/hi.vue
@@ -59,7 +59,7 @@ useSeoMeta({
         align-items: center;
         padding: 2rem;
         margin-top: 3.5rem;
-        gap: 2rem;
+        /* gap: 2rem; */
     }
 
     .pfp{
diff --git a/pages/index.vue b/pages/index.vue
index 6c1eb0b..599e0f3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -27,7 +27,6 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
                   <li>linux initiate, currently using Mint 22</li>
                   <li>Favourite game engine: <Purple>Godot!</Purple></li>
                   <li>meow meow~ nya!!! :3</li>
-                  <li>dev branch test</li>
               </ul>
             </div>
         </div>
@@ -61,15 +60,14 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
                     src="img/portfolio.png" 
                     href="https://portfolium.com.au/Tabby" 
                 />
-                <Social 
+                <!-- <Social 
                     src="img/oldweb.png" 
                     href="https://oldweb.tabbycat.dev/" 
-                />
-                <!-- add team stingray logo which goes to discord server here  -->
+                /> -->
                 
             </Socials>
-            <h2>Tech i've got experience with:</h2>
-            <img class="" src="https://skillicons.dev/icons?i=git,androidstudio,arduino,bash,blender,cs,cloudflare,css,fediverse,github,godot,html,idea,js,linux,lua,md,netlify,nextjs,nodejs,npm,nuxtjs,obsidian,php,postgres,py,react,sass,supabase,ts,unity,unreal,vercel,vscode,vue,processing&perline=12" />
+            <!-- <h2>Tech i've got experience with:</h2>
+            <img class="" src="https://skillicons.dev/icons?i=git,androidstudio,arduino,bash,blender,cs,cloudflare,css,fediverse,github,godot,html,idea,js,linux,lua,md,netlify,nextjs,nodejs,npm,nuxtjs,obsidian,php,postgres,py,react,sass,supabase,ts,unity,unreal,vercel,vscode,vue,processing&perline=12" /> -->
         </div> 
     </div>
     <!-- <hr/> -->
@@ -120,12 +118,12 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
     <hr/>
     <!-- latest blog posts, link to all? -->
     <h1 class="no-margins">Latest Blog Posts</h1>
-    <a class="no-margins" href="/blog-index">View All</a>
+    
     <!-- <p>Coming Soon!</p> -->
 
-    <div class="featured-container">
+    <div class="blog-container">
       
-      <TextCard v-for="post in data"
+      <BlogCard v-for="post in data"
         :key="post.id"
         :href="post._path"
         :heading="post.title"
@@ -138,7 +136,8 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
       
       
     </div>
-
+    <!-- <a class="no-margins" href="/blog-index">View All >>></a> -->
+    <BigButton text="View All >>>" href="/blog-index"/>
     
      
   </main>
@@ -159,11 +158,12 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
   margin-right: auto; */
 }
 
-/* .featured-container{
+.blog-container{
   display: flex;
-  margin-left: 20%;
-  margin-right: 20%;
-} */
+  flex-direction: column;
+  width: 80%;
+  justify-content: center;
+}
 
 .small-image-pls {
   height: 20%;
@@ -234,30 +234,32 @@ var { data } = await useAsyncData('home', () => queryContent('blog').sort({id:-1
 
 <style>
 main {
-  display: flex;
+  /* display: flex;
   flex-direction: column;
-  align-items: center;
-  padding: 2rem;
-  margin-top: 3.5rem;
-  gap: 2rem;
+  align-items: center; */
+  /* padding: 2rem; */
+  /* margin-top: 3.5rem; */
+  /* gap: 2rem; */
 }
 hr {
   width: 100%;
-  border: 1px dashed var(--accent-dark);
+  height: 0px;
+  border: 5px  var(--accent);
+  border-style: dotted none none none;
   max-width: var(--max-width);
 }
 .container > div {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  /* display: flex;
+  flex-direction: column; */
+  /* gap: 1rem; */
 }
-@media (prefers-color-scheme: light) {
+/* @media (prefers-color-scheme: light) {
   hr {
     filter: invert();
   }
-}
+} */
 
-.no-margins{
+/* .no-margins{
   margin: -10px;
-}
+} */
 </style>
\ No newline at end of file
diff --git a/pages/newIndex.vue b/pages/newIndex.vue
new file mode 100644
index 0000000..f78f412
--- /dev/null
+++ b/pages/newIndex.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+  useSeoMeta({
+    title: "Home",
+    ogTitle: "Home",
+    description: "My personal website.",
+    ogDescription: "My personal website.",
+  });
+</script>
+
+<style>
+
+</style>
\ No newline at end of file