Skip to content

Commit c6309e8

Browse files
Piyush-r-bhaskarPiyush-r-bhaskar
committed
feat: new blog [age
1 parent fce48d9 commit c6309e8

30 files changed

+1810
-998
lines changed

‎src/assets/email-newsletter.svg‎

Lines changed: 38 additions & 0 deletions
Loading

‎src/assets/header-grid.svg‎

Lines changed: 206 additions & 0 deletions
Loading

‎src/assets/styles/app.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -650,6 +650,7 @@ small.agree {
650650
--bs-body-bg: var(--ks-background-body);
651651
--bs-border-color: var(--ks-border-primary);
652652
--bs-body-color: var(--ks-background-secondary);
653+
653654
html.dark & {
654655
--bs-form-select-bg-img: url("/landing/plugins/select-arrow.svg") !important;
655656
}

‎src/assets/styles/layout.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ $bd-gutter-x: 3rem;
1414
}
1515

1616
.bd-gutter {
17-
--bs-gutter-x: #{$bd-gutter-x};
17+
--bs-gutter-x: 1rem;
1818
}
1919

2020
.bd-layout {

‎src/components/blogs/BlogCard.vue‎

Lines changed: 83 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,96 @@
11
<template>
2-
<div class="mb-5 mt-1" role="button">
3-
<a :href="blog.path">
4-
<img
5-
v-if="typeof blog.image === 'string' && blog.image?.startsWith('https://')"
6-
width="300"
7-
loading="lazy"
8-
:alt="blog.title"
9-
:src="blog.image"
10-
class="card-image w-100 rounded-3"
11-
/>
12-
<NuxtImg
13-
v-else
14-
width="300"
15-
loading="lazy"
16-
:alt="blog.title"
17-
:src="blog.image"
18-
class="card-image w-100 rounded-3"
19-
/>
20-
<div class="mt-1">
21-
<span>{{ blog.category }}</span>
22-
<h6 class="my-1">{{ blog.title }}</h6>
23-
<BlogCardDetails
24-
:authors="blog.authors || (blog.author ? [blog.author] : [])"
25-
:date="blog.date.toString()"
26-
/>
2+
<div class="cards">
3+
<a :href="blog.path" :target="target">
4+
<div class="img-container">
5+
<img :src="blog.image" :alt="blog.title" />
6+
</div>
7+
<div class="content">
8+
<small class="meta">
9+
{{ blog.category }} • {{ formatDate(blog.date) }} • {{ authorName }}
10+
</small>
11+
<h6 class="title">{{ blog.title }}</h6>
2712
</div>
2813
</a>
2914
</div>
3015
</template>
3116

32-
<script lang="ts" setup>
33-
import BlogCardDetails from "~/components/blogs/BlogCardDetails.vue"
34-
defineProps<{
35-
blog: {
36-
path: string
37-
image?: string
38-
category?: string
39-
authors?: { name: string }[]
40-
author?: { name: string }
41-
title: string
42-
date: Date | string
43-
}
17+
<script setup lang="ts">
18+
import { computed } from 'vue'
19+
20+
const props = defineProps<{
21+
blog: any
22+
target?: string
4423
}>()
24+
25+
const authorName = computed(() => {
26+
const authors = props.blog.authors || (props.blog.author ? [props.blog.author] : [])
27+
return authors.map((author: any) => author.name).join(", ")
28+
})
29+
30+
const formatDate = (date: string) => {
31+
return new Intl.DateTimeFormat("en-US", {
32+
month: "long",
33+
day: "numeric",
34+
year: "numeric",
35+
}).format(new Date(date)).replace(",", "")
36+
}
4537
</script>
4638

47-
<style scoped lang="scss">
39+
<style lang="scss" scoped>
4840
@import "~/assets/styles/variable";
4941
50-
h6 {
51-
color: var(--ks-content-primary);
52-
}
42+
.cards {
43+
display: flex;
44+
flex-direction: column;
45+
gap: 1rem;
46+
cursor: pointer;
47+
border: none;
5348
54-
span {
55-
color: var(--ks-content-secondary);
56-
font-size: $font-size-sm;
57-
}
58-
.card-image {
59-
object-fit: cover;
60-
aspect-ratio: 16/9;
61-
border: 1.091px solid var(--ks-background-primary);
49+
a {
50+
text-decoration: none;
51+
display: block;
52+
}
53+
54+
.img-container {
55+
width: 100%;
56+
aspect-ratio: 16/9;
57+
border: $block-border;
58+
border-radius: 8px;
59+
overflow: hidden;
60+
61+
img {
62+
width: 100%;
63+
height: 100%;
64+
object-fit: cover;
65+
transition: transform 0.3s ease;
66+
}
67+
}
68+
69+
&:hover .img-container img {
70+
transform: scale(1.05);
71+
}
72+
73+
.content {
74+
min-height: 52px;
75+
display: flex;
76+
flex-direction: column;
77+
justify-content: center;
78+
79+
.meta {
80+
color: var(--ks-content-tertiary);
81+
font-size: $font-size-xs;
82+
margin: 0.25rem 0;
83+
}
84+
85+
.title {
86+
color: var(--ks-content-primary);
87+
margin: 0;
88+
transition: color 0.3s ease;
89+
}
90+
}
91+
92+
&:hover .title {
93+
color: var(--ks-content-link);
94+
}
6295
}
63-
</style>
96+
</style>

‎src/components/blogs/BlogCardDetails.vue‎

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/components/blogs/BlogDetails.vue‎

Lines changed: 37 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<template>
2-
<div class="blog-details">
3-
<div class="meta mb-4">
4-
<span class="date">{{ date }}</span>
5-
<span class="category ms-3">{{ blog.data.category }}</span>
6-
</div>
2+
<div class="details">
3+
<h6>Authors</h6>
74
<div class="authors">
85
<div
96
v-for="author in authorsList"
@@ -12,7 +9,7 @@
129
>
1310
<NuxtImg
1411
loading="lazy"
15-
v-bind="authorsAvatars[`${author.image}-sm.png`]"
12+
v-bind="avatars[`${author.image}-sm.png`]"
1613
class="rounded-circle"
1714
width="48"
1815
height="48"
@@ -25,6 +22,18 @@
2522
</div>
2623
</div>
2724
</div>
25+
<div>
26+
<h6>Category</h6>
27+
<small class="metadata">
28+
<span>{{ blog.data.category }}</span>
29+
</small>
30+
</div>
31+
<div>
32+
<h6>Last Updated</h6>
33+
<small class="metadata">
34+
{{ date }}
35+
</small>
36+
</div>
2837
</template>
2938

3039
<script setup lang="ts">
@@ -36,7 +45,7 @@
3645
3746
const props = defineProps<{
3847
blog: CollectionEntry<"blogs">
39-
authorsAvatars: Record<string, any>
48+
avatars: Record<string, any>
4049
}>()
4150
4251
const date = computed(() => {
@@ -53,20 +62,11 @@
5362
<style lang="scss" scoped>
5463
@import "~/assets/styles/variable";
5564
56-
.blog-details {
65+
.details {
5766
margin: 0 !important;
58-
padding: 1rem 0;
59-
}
6067
61-
.meta {
62-
font-size: $font-size-sm;
63-
.category,
64-
.date {
65-
color: var(--ks-content-link);
66-
font-size: $font-size-sm;
67-
}
68-
.date {
69-
color: var(--ks-content-primary);
68+
h6 {
69+
margin-bottom: 0.5rem;
7070
}
7171
}
7272
@@ -85,18 +85,36 @@
8585
img {
8686
max-width: 48px;
8787
}
88+
8889
.name {
8990
color: var(--ks-content-primary);
9091
line-height: 1.8em;
9192
font-size: $font-size-md;
9293
font-weight: 600;
9394
margin: 0 !important;
9495
}
96+
9597
.role {
9698
color: var(--ks-content-secondary);
9799
line-height: 1.8em;
98100
font-size: $font-size-xs;
99101
margin-bottom: 0 !important;
100102
}
101103
}
104+
105+
.metadata {
106+
color: var(--ks-content-primary);
107+
font-size: $font-size-xs;
108+
109+
span {
110+
background: var(--ks-backgroung-tag-category);
111+
color: var(--ks-content-tag-category);
112+
padding: 0.125rem 0.5rem;
113+
border-radius: 40px;
114+
font-weight: 600;
115+
white-space: nowrap;
116+
overflow: hidden;
117+
text-overflow: ellipsis;
118+
}
119+
}
102120
</style>

0 commit comments

Comments
 (0)