Skip to content

Commit 3a14f75

Browse files
mychidarkomychidarko
committed
feat: update blog
1 parent a88a4fa commit 3a14f75

File tree

1 file changed

+143
-153
lines changed
  • .vitepress/theme/components/Community

1 file changed

+143
-153
lines changed

‎.vitepress/theme/components/Community/Blog.vue‎

Lines changed: 143 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,215 +1,205 @@
11
<script setup lang="ts">
2-
// old component. will refactor later
3-
import { ExternalLink } from 'lucide-vue-next';
2+
import { ExternalLink, Calendar, User, Clock } from 'lucide-vue-next';
43
import Button from '../shared/Button.vue';
4+
5+
// Dummy blog posts data
6+
const blogPosts = [
7+
{
8+
id: 1,
9+
title: 'Build Your Next SaaS with PHP — In Hours, Not Days',
10+
excerpt: 'We\'ve been working on Leaf PHP, and building it into the perfect tool for makers and solo builders.If you’re looking to build fast and ship faster, Leaf might be the fastest way to launch your next SaaS — all with plain, elegant PHP that scales with you.',
11+
image: 'https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fba2wnotxn1952b8am43b.jpg',
12+
url: 'https://dev.to/mychi_darko/build-your-next-saas-with-php-in-hours-not-days-30if'
13+
},
14+
{
15+
id: 2,
16+
title: 'Leaf 4.0 is finally here! Build 10x Faster and Lighter',
17+
excerpt: 'Today, we are excited to announce the release of Leaf 4 (🌷 Snowdrop) and Leaf MVC 4 (✈️ Hughes H-4 Hercules)! This marks a new chapter in the evolution of Leaf, making PHP development faster, simpler, and more powerful than ever before.',
18+
image: 'https://github.com/user-attachments/assets/0ddae472-9d1d-4547-8c1c-68529949f0df',
19+
url: 'https://blog.leafphp.dev/posts/leaf4-is-here'
20+
},
21+
];
522
</script>
623

724
<template>
8-
<div class="flex justify-center items-center">
9-
<section id="blog"
10-
class="testimonials hidden md:flex justify-center items-center h-[70vh] w-full sm:!max-w-3xl lg:!max-w-5xl xl:!max-w-7xl !px-2 sm:!px-10">
11-
<div class="flex justify-center w-full items-center py:_10"
12-
style="display: grid; grid-template-columns: 1fr 1.25fr; gap: 4rem;">
13-
<div class="text-sm max-w-[400px]">
14-
<h1 class="title mb-4" style="text-align: left;">Latest writings from the Leaf team</h1>
15-
<p class="mb-2 text-base">
16-
Our main goal and pride at Leaf is to make PHP development as simple and elegant as possible.
17-
</p>
18-
<p class="mb-6 text-base">
19-
Our team is always looking to improve your experience using the Leaf framework and it's ecosystem of tools.
20-
You
21-
can follow along as our team discusses it's insights from the past year and what's to come in 2025.
22-
</p>
23-
<Button as="a" class="!text-white" href="https://blog.leafphp.dev" target="_blank">
24-
<span>Read the Blog</span>
25-
<ExternalLink height="18px" />
26-
</Button>
25+
<div class="flex justify-center items-center my-20">
26+
<section id="blog" class="blog-section w-full sm:!max-w-3xl lg:!max-w-5xl xl:!max-w-7xl !px-4 sm:!px-10 py-16">
27+
<div class="section-header flex flex-col justify-center items-center text-center mb-12">
28+
<h2 class="section-title mb-4 !border-none">Latest from Our Blog</h2>
29+
<p class="section-description max-w-2xl">
30+
At Leaf, we're focused on making PHP development as simple and elegant as possible.
31+
Our team is constantly improving the framework and its ecosystem—tune in as we share what's new and what's
32+
coming next.
33+
</p>
34+
</div>
35+
36+
<div class="blog-grid">
37+
<div v-for="post in blogPosts" :key="post.id" class="blog-card">
38+
<div class="blog-card-image">
39+
<div class="image-placeholder" :style="{ backgroundImage: `url(${post.image})` }"></div>
40+
</div>
41+
<div class="blog-card-content">
42+
<h3 class="blog-card-title !mt-0">
43+
<a :href="post.url" target="_blank">{{ post.title }}</a>
44+
</h3>
45+
<p class="blog-card-excerpt">{{ post.excerpt }}</p>
46+
<a :href="post.url" target="_blank" class="blog-card-link">
47+
Read More
48+
<ExternalLink :size="14" />
49+
</a>
50+
</div>
2751
</div>
52+
</div>
2853

29-
<div class="elfsight-app-6190fe7f-f619-4dda-9952-9324f84ba50c" data-elfsight-app-lazy></div>
54+
<div class="text-center mt-12">
55+
<Button as="a" class="!text-white" href="https://blog.leafphp.dev" target="_blank">
56+
<span>View All Articles</span>
57+
<ExternalLink height="18px" />
58+
</Button>
3059
</div>
3160
</section>
3261
</div>
3362
</template>
3463

3564
<style scoped>
36-
.testimonials {
37-
/* padding: 42px 32px; */
38-
background: var(--vt-c-bg-dark);
39-
transition: border-color 0.5s, background-color 0.5s;
40-
/* height: 70vh; */
41-
}
42-
43-
.testimonials>div {
44-
padding: 0px 32px;
45-
}
46-
47-
.blog-card {
65+
.blog-section {
4866
background: var(--vt-c-bg);
49-
border-radius: 8px;
50-
max-height: 160px;
51-
padding: 32px;
52-
transition: border-color 0.5s, background-color 0.5s;
53-
box-shadow: 0 0 0 1px var(--vt-c-bg-mute), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
67+
transition: background-color 0.5s;
68+
padding: 80px 0;
5469
}
5570
56-
.blog-card:hover {
57-
box-shadow: 0 0 0 1px var(--vt-c-bg-mute), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
58-
}
59-
60-
.dark .blog-card:hover {
61-
box-shadow: 0 0 0 1px var(--vt-c-bg-mute), 0 2px 10px 0 rgba(150, 150, 150, 0.1);
71+
.section-title {
72+
font-size: 2.5rem;
73+
font-weight: 700;
74+
color: var(--vt-c-text-1);
75+
margin-bottom: 1rem;
76+
transition: color 0.5s;
6277
}
6378
64-
.blog-card h4 {
65-
font-size: 18px;
66-
font-weight: 600;
67-
text-transform: uppercase;
68-
margin-bottom: 8px;
79+
.section-description {
80+
font-size: 1.125rem;
81+
color: var(--vt-c-text-2);
82+
transition: color 0.5s;
83+
line-height: 1.6;
6984
}
7085
71-
.dark .NewsLetter {
72-
background: var(--vt-c-bg);
86+
.blog-grid {
87+
display: grid;
88+
grid-template-columns: repeat(1, 1fr);
89+
gap: 2rem;
90+
margin-top: 2rem;
7391
}
7492
75-
@media (min-width: 768px) {
76-
.NewsLetter {
77-
padding: 48px 32px;
93+
@media (min-width: 640px) {
94+
.blog-grid {
95+
grid-template-columns: repeat(2, 1fr);
7896
}
7997
}
8098
81-
.container {
82-
margin: 0 auto;
83-
max-width: 512px;
99+
.blog-card {
100+
background: var(--vt-c-bg-soft);
101+
border-radius: 12px;
102+
overflow: hidden;
103+
transition: all 0.3s ease;
104+
height: 100%;
105+
display: flex;
106+
flex-direction: column;
107+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
108+
border: 1px solid var(--vt-c-divider-light);
84109
}
85110
86-
.title {
87-
text-align: center;
88-
font-size: 36px !important;
89-
line-height: 45px;
90-
font-weight: 700;
91-
transition: color 0.5s;
111+
.dark .blog-card {
112+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
113+
border: 1px solid var(--vt-c-divider-dark);
92114
}
93115
94-
@media (min-width: 375px) {
95-
.title {
96-
font-size: 16px;
97-
}
116+
.blog-card:hover {
117+
transform: translateY(-5px);
118+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
98119
}
99120
100-
.form {
101-
padding-top: 8px;
121+
.dark .blog-card:hover {
122+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
102123
}
103124
104-
.read-blog-button {
105-
font-size: 16px;
106-
display: inline-block;
107-
background-color: var(--vt-c-green);
108-
padding: 8px 18px;
109-
font-weight: 500;
110-
border-radius: 8px;
111-
transition: background-color 0.5s, color 0.5s;
112-
display: flex;
113-
width: fit-content;
114-
color: white;
125+
.blog-card-image {
126+
height: 200px;
127+
overflow: hidden;
115128
}
116129
117-
.read-blog-button svg {
118-
fill: white;
119-
margin-left: 8px;
130+
.image-placeholder {
131+
width: 100%;
132+
height: 100%;
133+
background-color: var(--vt-c-bg-mute);
134+
background-size: cover;
135+
background-position: center;
136+
transition: transform 0.3s ease;
120137
}
121138
122-
@media (min-width: 375px) {
123-
.form {
124-
padding-top: 16px;
125-
}
139+
.blog-card:hover .image-placeholder {
140+
transform: scale(1.05);
126141
}
127142
128-
.box {
129-
position: relative;
130-
width: 100%;
143+
.blog-card-content {
144+
padding: 1.5rem;
145+
flex: 1;
146+
display: flex;
147+
flex-direction: column;
131148
}
132149
133-
.input {
134-
border: 1px solid var(--vt-c-divider);
135-
border-radius: 8px;
136-
padding: 11px 128px 11px 16px;
137-
font-size: 16px;
138-
width: 100%;
150+
.blog-card-title {
151+
font-size: 1.25rem;
152+
font-weight: 600;
153+
margin-bottom: 0.75rem;
154+
line-height: 1.4;
139155
color: var(--vt-c-text-1);
140-
transition: border-color 0.25s, background-color 0.25s;
141-
}
142-
143-
.input:hover,
144-
.input:focus {
145-
border-color: var(--vt-c-brand);
156+
transition: color 0.3s ease;
146157
}
147158
148-
.input:focus {
149-
background-color: var(--vt-c-white);
159+
.blog-card-title a {
160+
color: inherit;
161+
text-decoration: none;
150162
}
151163
152-
.dark .input {
153-
background-color: var(--vt-c-bg);
164+
.blog-card-title a:hover {
165+
color: var(--vt-c-brand);
154166
}
155167
156-
.dark .input:focus {
157-
background-color: var(--vt-c-black-pure);
168+
.blog-card-excerpt {
169+
font-size: 0.95rem;
170+
line-height: 1.6;
171+
color: var(--vt-c-text-2);
172+
margin-bottom: 1.5rem;
173+
flex-grow: 1;
158174
}
159175
160-
.input::placeholder {
161-
font-weight: 500;
176+
.blog-card-meta {
177+
display: flex;
178+
flex-wrap: wrap;
179+
gap: 1rem;
180+
margin-bottom: 1.25rem;
181+
font-size: 0.85rem;
162182
color: var(--vt-c-text-3);
163-
transition: color 0.25s;
164183
}
165184
166-
.action {
167-
position: absolute;
168-
top: 6px;
169-
right: 6px;
170-
}
171-
172-
.button {
173-
border-radius: 4px;
174-
padding: 0 12px;
175-
letter-spacing: 0.8px;
176-
line-height: 36px;
177-
font-size: 13px;
178-
font-weight: 500;
179-
color: var(--vt-c-text-dark-1);
180-
background-color: var(--vt-c-brand);
181-
transition: background-color 0.25s;
182-
cursor: pointer;
183-
}
184-
185-
.button:hover {
186-
background-color: var(--vt-c-brand-dark);
185+
.meta-item {
186+
display: flex;
187+
align-items: center;
188+
gap: 0.35rem;
187189
}
188190
189-
.help {
190-
margin: 0 auto;
191-
padding: 8px;
192-
max-width: 480px;
193-
text-align: center;
194-
line-height: 20px;
195-
font-size: 12px;
191+
.blog-card-link {
192+
display: inline-flex;
193+
align-items: center;
194+
gap: 0.35rem;
196195
font-weight: 500;
197-
color: var(--vt-c-text-2);
198-
transition: color 0.5s;
199-
}
200-
201-
@media (min-width: 375px) {
202-
.help {
203-
padding-top: 16px;
204-
}
205-
}
206-
207-
.link {
208196
color: var(--vt-c-brand);
209-
transition: color 0.25s;
197+
transition: color 0.3s ease;
198+
margin-top: auto;
199+
font-size: 0.95rem;
210200
}
211201
212-
.link:hover {
202+
.blog-card-link:hover {
213203
color: var(--vt-c-brand-dark);
214204
}
215205
</style>

0 commit comments

Comments
 (0)