Skip to content

Commit 0ae220a

Browse files
FunkyFresh67claude
FunkyFresh67
and
claude
committed
Add Blog page with first post and nav updates
- Create blog.html index page with post card layout and Blog JSON-LD schema - Create blog/welcome-to-the-mdviewer-blog.html as first post with BlogPosting schema - Add Blog link to nav on all existing pages - Add blog pages to sitemap.xml Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 4a64034 commit 0ae220a

7 files changed

Lines changed: 597 additions & 0 deletions

File tree

‎blog.html‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>MDViewer Blog — Tips, Updates, and Markdown Guides</title>
7+
<meta name="description" content="The MDViewer blog — product updates, markdown tips, documentation workflow guides, and development news for Windows users.">
8+
<link rel="canonical" href="https://mdviewer.app/blog.html">
9+
<meta property="og:type" content="website">
10+
<meta property="og:site_name" content="MDViewer">
11+
<meta property="og:url" content="https://mdviewer.app/blog.html">
12+
<meta property="og:title" content="MDViewer Blog — Tips, Updates, and Markdown Guides">
13+
<meta property="og:description" content="The MDViewer blog — product updates, markdown tips, documentation workflow guides, and development news for Windows users.">
14+
<meta property="og:image" content="https://mdviewer.app/og-image.png">
15+
<meta name="twitter:card" content="summary_large_image">
16+
<meta name="twitter:title" content="MDViewer Blog — Tips, Updates, and Markdown Guides">
17+
<meta name="twitter:description" content="The MDViewer blog — product updates, markdown tips, documentation workflow guides, and development news for Windows users.">
18+
<meta name="twitter:image" content="https://mdviewer.app/og-image.png">
19+
<script type="application/ld+json">
20+
{
21+
"@context": "https://schema.org",
22+
"@type": "Blog",
23+
"name": "MDViewer Blog",
24+
"description": "Product updates, markdown tips, and documentation workflow guides.",
25+
"url": "https://mdviewer.app/blog.html",
26+
"publisher": {
27+
"@type": "Person",
28+
"name": "Jon Jaques"
29+
}
30+
}
31+
</script>
32+
<script type="text/javascript">
33+
(function(c,l,a,r,i,t,y){
34+
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
35+
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
36+
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
37+
})(window, document, "clarity", "script", "utfkjavsme");
38+
</script>
39+
<style>
40+
:root {
41+
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
42+
--primary-color: #764ba2;
43+
--text-dark: #333;
44+
--text-light: #666;
45+
--white: #ffffff;
46+
--shadow: rgba(0, 0, 0, 0.08);
47+
--shadow-hover: rgba(0, 0, 0, 0.15);
48+
}
49+
50+
* { box-sizing: border-box; }
51+
52+
body {
53+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
54+
margin: 0;
55+
padding: 0;
56+
background: #f8f9fa;
57+
color: var(--text-dark);
58+
}
59+
60+
.container {
61+
max-width: 860px;
62+
margin: 0 auto;
63+
padding: 0 2rem;
64+
}
65+
66+
nav {
67+
background: rgba(255, 255, 255, 0.95);
68+
backdrop-filter: blur(10px);
69+
padding: 1rem 0;
70+
position: sticky;
71+
top: 0;
72+
z-index: 100;
73+
border-radius: 0 0 15px 15px;
74+
box-shadow: 0 2px 10px var(--shadow);
75+
}
76+
77+
nav .container {
78+
display: flex;
79+
justify-content: space-between;
80+
align-items: center;
81+
flex-wrap: wrap;
82+
max-width: 1100px;
83+
}
84+
85+
.nav-brand { font-size: 1.5rem; font-weight: bold; }
86+
87+
.nav-brand a {
88+
background: var(--primary-gradient);
89+
-webkit-background-clip: text;
90+
-webkit-text-fill-color: transparent;
91+
background-clip: text;
92+
text-decoration: none;
93+
}
94+
95+
.nav-links {
96+
display: flex;
97+
gap: 2rem;
98+
align-items: center;
99+
flex-wrap: wrap;
100+
}
101+
102+
.nav-links a {
103+
color: var(--text-dark);
104+
text-decoration: none;
105+
font-weight: 500;
106+
transition: color 0.3s ease;
107+
padding: 0.4rem 0.8rem;
108+
border-radius: 20px;
109+
}
110+
111+
.nav-links a:hover, .nav-links a.active {
112+
color: var(--primary-color);
113+
background: rgba(118, 75, 162, 0.1);
114+
}
115+
116+
.blog-header {
117+
background: var(--primary-gradient);
118+
color: white;
119+
padding: 3.5rem 0 3rem;
120+
margin-bottom: 3rem;
121+
}
122+
123+
.blog-header h1 {
124+
margin: 0 0 0.5rem;
125+
font-size: 2.8rem;
126+
font-weight: 700;
127+
}
128+
129+
.blog-header p {
130+
margin: 0;
131+
opacity: 0.85;
132+
font-size: 1.15rem;
133+
}
134+
135+
.post-list {
136+
display: flex;
137+
flex-direction: column;
138+
gap: 1.75rem;
139+
padding-bottom: 5rem;
140+
}
141+
142+
.post-card {
143+
background: white;
144+
border-radius: 14px;
145+
padding: 2rem;
146+
box-shadow: 0 2px 8px var(--shadow);
147+
transition: box-shadow 0.2s ease, transform 0.2s ease;
148+
text-decoration: none;
149+
color: inherit;
150+
display: block;
151+
}
152+
153+
.post-card:hover {
154+
box-shadow: 0 8px 24px var(--shadow-hover);
155+
transform: translateY(-2px);
156+
}
157+
158+
.post-meta {
159+
display: flex;
160+
gap: 0.75rem;
161+
align-items: center;
162+
margin-bottom: 0.75rem;
163+
flex-wrap: wrap;
164+
}
165+
166+
.post-date {
167+
font-size: 0.85rem;
168+
color: var(--text-light);
169+
}
170+
171+
.post-tag {
172+
font-size: 0.72rem;
173+
font-weight: 700;
174+
color: var(--primary-color);
175+
background: rgba(118, 75, 162, 0.1);
176+
padding: 0.2rem 0.65rem;
177+
border-radius: 20px;
178+
text-transform: uppercase;
179+
letter-spacing: 0.06em;
180+
}
181+
182+
.post-card h2 {
183+
margin: 0 0 0.65rem;
184+
font-size: 1.45rem;
185+
color: var(--text-dark);
186+
line-height: 1.3;
187+
}
188+
189+
.post-card p {
190+
margin: 0 0 1rem;
191+
color: var(--text-light);
192+
line-height: 1.65;
193+
}
194+
195+
.read-more {
196+
font-weight: 600;
197+
color: var(--primary-color);
198+
font-size: 0.9rem;
199+
}
200+
201+
footer {
202+
background: var(--primary-gradient);
203+
color: white;
204+
padding: 2rem;
205+
text-align: center;
206+
}
207+
208+
footer p { margin: 0.25rem 0; opacity: 0.9; }
209+
210+
footer a { color: white; text-decoration: none; opacity: 0.85; }
211+
footer a:hover { opacity: 1; }
212+
213+
@media (max-width: 600px) {
214+
.blog-header h1 { font-size: 2rem; }
215+
.nav-links { gap: 1rem; }
216+
.post-card { padding: 1.5rem; }
217+
}
218+
</style>
219+
</head>
220+
<body>
221+
<nav>
222+
<div class="container" style="max-width:1100px">
223+
<div class="nav-brand">
224+
<a href="index.html">MDViewer</a>
225+
</div>
226+
<div class="nav-links">
227+
<a href="index.html">Home</a>
228+
<a href="downloads.html">Download</a>
229+
<a href="docs.html">Documentation</a>
230+
<a href="pricing.html">Support</a>
231+
<a href="blog.html" class="active">Blog</a>
232+
</div>
233+
</div>
234+
</nav>
235+
236+
<div class="blog-header">
237+
<div class="container">
238+
<h1>Blog</h1>
239+
<p>Product updates, markdown tips, and documentation workflow guides.</p>
240+
</div>
241+
</div>
242+
243+
<div class="container">
244+
<div class="post-list">
245+
246+
<a href="blog/welcome-to-the-mdviewer-blog.html" class="post-card">
247+
<div class="post-meta">
248+
<span class="post-date">May 8, 2026</span>
249+
<span class="post-tag">Announcement</span>
250+
</div>
251+
<h2>Welcome to the MDViewer Blog</h2>
252+
<p>Introducing the official MDViewer blog — where we'll share product updates, tips for getting the most out of your markdown workflow, and behind-the-scenes development news.</p>
253+
<span class="read-more">Read more →</span>
254+
</a>
255+
256+
</div>
257+
</div>
258+
259+
<footer>
260+
<p>&copy; 2026 MDViewer. Built for Windows documentation professionals.</p>
261+
<p style="margin-top: 0.5rem;"><a href="docs.html">Documentation</a> • <a href="https://github.com/MDViewer-App/mdviewer-core/releases">GitHub Releases</a></p>
262+
<p style="margin-top: 1rem; font-size: 0.9rem;">Created by <a href="https://www.linkedin.com/in/jonjaques/" target="_blank" rel="noopener noreferrer">Jon Jaques</a></p>
263+
</footer>
264+
</body>
265+
</html>

0 commit comments

Comments
 (0)