Skip to content

Commit 9589d27

Browse files
PriestchPriestch
committed
docs: optimize the style of blog index page
1 parent 0836960 commit 9589d27

File tree

3 files changed

+145
-4
lines changed

3 files changed

+145
-4
lines changed

‎docs/blog/build-pdf-viewer-based-on-image.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
---
2+
title: Build PDF Viewer Based on Image
3+
description: Learn how to build a PDF viewer based on images - an effective approach for simple use cases when you have limited time and resources.
4+
head:
5+
- - link
6+
- rel: canonical
7+
href: https://priestch.github.io/document-viewer/docs/blog/build-pdf-viewer-based-on-image.html
8+
---
9+
110
# Build PDF Viewer Based on Image
211

312
It's intuitive to build a PDF viewer based on images when you only got limited time and resources. This approach can be effective for simple use cases, such as displaying static documents or creating a lightweight viewer without advanced features.

docs/blog/how-to-develop-a-PDF-viewer.md renamed to docs/blog/how-to-develop-a-pdf-viewer.md

File renamed without changes.

‎docs/blog/index.md‎

Lines changed: 136 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,137 @@
1-
# Blogs
1+
---
2+
title: Blog
3+
description: Articles and tutorials about PDF viewer development and web technologies.
4+
---
25

3-
- [Three ways to Display PDF in HTML](/blog/3-ways-to-display-pdf-in-html)
4-
- [Communication between the main and worker thread](/blog/communication-between-the-main-and-worker-thread)
5-
- [How to Develop a PDF Viewer](/blog/how-to-develop-a-PDF-viewer)
6+
<script setup>
7+
const posts = [
8+
{
9+
title: 'Build PDF Viewer Based on Image',
10+
description: 'Learn how to build a PDF viewer based on images - an effective approach for simple use cases when you have limited time and resources.',
11+
link: './build-pdf-viewer-based-on-image',
12+
date: '2026-01-29',
13+
tag: 'Tutorial'
14+
},
15+
{
16+
title: 'How to Develop a PDF Viewer',
17+
description: 'A comprehensive guide on developing your own PDF viewer from scratch.',
18+
link: './how-to-develop-a-pdf-viewer',
19+
date: '2026-01-20',
20+
tag: 'Guide'
21+
}
22+
{
23+
title: 'Three Ways to Display a PDF in HTML',
24+
description: 'Learn how to display PDF files in your HTML app with three ways, including using native elements, open source library like PDF.js, and commercial PDF viewers.',
25+
link: './3-ways-to-display-pdf-in-html',
26+
date: '2024-01-15',
27+
tag: 'Tutorial'
28+
},
29+
{
30+
title: 'Communication between Main and Worker Threads',
31+
description: 'An overview of how to facilitate communication between the main thread and worker threads in a web application.',
32+
link: './communication-between-the-main-and-worker-thread',
33+
date: '2024-01-10',
34+
tag: 'Overview'
35+
},
36+
]
37+
</script>
38+
39+
# Blog
40+
41+
<div class="blog-posts">
42+
<a v-for="post in posts" :key="post.link" :href="post.link" class="blog-card">
43+
<div class="blog-card-left">
44+
<span class="blog-tag">{{ post.tag }}</span>
45+
<h3 class="blog-title">{{ post.title }}</h3>
46+
<p class="blog-description">{{ post.description }}</p>
47+
</div>
48+
<span class="blog-card-right">→</span>
49+
</a>
50+
</div>
51+
52+
<style>
53+
.blog-posts {
54+
display: flex;
55+
flex-direction: column;
56+
gap: 1rem;
57+
margin-top: 2rem;
58+
}
59+
60+
.blog-card {
61+
position: relative;
62+
padding: 1.25rem 1.5rem;
63+
border-radius: 8px;
64+
background: var(--vp-c-bg-soft);
65+
border: 1px solid var(--vp-c-divider);
66+
text-decoration: none !important;
67+
color: var(--vp-c-text-1);
68+
transition: all 0.2s ease;
69+
display: flex;
70+
align-items: center;
71+
gap: 1.5rem;
72+
}
73+
74+
.blog-card * {
75+
text-decoration: none !important;
76+
}
77+
78+
.blog-card:hover {
79+
background: var(--vp-c-bg-soft);
80+
border-color: var(--vp-c-brand-1);
81+
}
82+
83+
.blog-card-left {
84+
flex: 1;
85+
display: flex;
86+
flex-direction: column;
87+
gap: 0.125rem;
88+
}
89+
90+
.blog-tag {
91+
display: inline-block;
92+
padding: 0.125rem 0.5rem;
93+
font-size: 0.6875rem;
94+
font-weight: 600;
95+
color: var(--vp-c-brand-1);
96+
background: var(--vp-c-brand-soft);
97+
border-radius: 4px;
98+
width: fit-content;
99+
text-transform: uppercase;
100+
letter-spacing: 0.05em;
101+
}
102+
103+
.blog-title {
104+
font-size: 1rem;
105+
font-weight: 600;
106+
line-height: 1.4;
107+
margin: 0;
108+
color: var(--vp-c-text-1);
109+
}
110+
111+
.blog-description {
112+
font-size: 0.875rem;
113+
line-height: 1.5;
114+
color: var(--vp-c-text-2);
115+
margin: 0;
116+
text-decoration: none;
117+
}
118+
119+
.blog-card-right {
120+
display: flex;
121+
align-items: center;
122+
color: var(--vp-c-text-3);
123+
font-size: 1.25rem;
124+
}
125+
126+
@media (max-width: 640px) {
127+
.blog-card {
128+
flex-direction: column;
129+
align-items: flex-start;
130+
gap: 0.75rem;
131+
}
132+
133+
.blog-card-right {
134+
align-self: flex-end;
135+
}
136+
}
137+
</style>

0 commit comments

Comments
 (0)