Add blog section: 2x2 grid with search, pagination, and 8 sample posts
This commit is contained in:
Oliver
+234
@@ -1082,6 +1082,132 @@
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
BLOG
|
||||
══════════════════════════════════════════════════════════ */
|
||||
.blog-search {
|
||||
max-width: 480px;
|
||||
margin: -20px auto 32px;
|
||||
}
|
||||
.blog-search input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.blog-search input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.blog-search input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.blog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.blog-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-card);
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: border-color 0.2s, transform 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.blog-card:hover {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.blog-card-area {
|
||||
display: inline-block;
|
||||
background: rgba(0,245,255,0.08);
|
||||
color: var(--accent);
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 10px;
|
||||
border-radius: 20px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 12px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.blog-card-date {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.blog-card h3 {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 10px;
|
||||
color: var(--text);
|
||||
}
|
||||
.blog-card p {
|
||||
font-size: 0.88rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
.blog-card-link {
|
||||
margin-top: 16px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
.blog-card:hover .blog-card-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.blog-pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
.blog-pagination button {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 10px 24px;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.88rem;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
}
|
||||
.blog-pagination button:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.blog-pagination button:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
.blog-page-info {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.blog-empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.blog-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════
|
||||
FOOTER
|
||||
══════════════════════════════════════════════════════════ */
|
||||
@@ -2201,6 +2327,28 @@
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════════
|
||||
BLOG
|
||||
═══════════════════════════════════════════════════════════════ -->
|
||||
<section id="blog">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Latest from the Blog</h2>
|
||||
<p class="section-sub">Tips, tutorials, and news about AI agents and automation.</p>
|
||||
|
||||
<div class="blog-search">
|
||||
<input type="text" id="blog-search-input" placeholder="Search posts by keyword, area, or headline..." />
|
||||
</div>
|
||||
|
||||
<div class="blog-grid" id="blog-grid"></div>
|
||||
|
||||
<div class="blog-pagination" id="blog-pagination">
|
||||
<button id="blog-prev" onclick="blogPrev()" disabled>← Previous</button>
|
||||
<span id="blog-page-info" class="blog-page-info"></span>
|
||||
<button id="blog-next" onclick="blogNext()">Next →</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════════════════════════════════════════
|
||||
FOOTER
|
||||
@@ -2722,6 +2870,92 @@
|
||||
}
|
||||
document.getElementById('pricing-coupon').addEventListener('input', updateCouponBadges);
|
||||
|
||||
/* ── Blog ──────────────────────────────────────────────── */
|
||||
const BLOG_POSTS_PER_PAGE = 4;
|
||||
let blogAllPosts = [];
|
||||
let blogFilteredPosts = [];
|
||||
let blogCurrentPage = 0;
|
||||
|
||||
function blogFormatDate(dateStr) {
|
||||
const d = new Date(dateStr);
|
||||
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
|
||||
return months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear();
|
||||
}
|
||||
|
||||
function blogRender() {
|
||||
const start = blogCurrentPage * BLOG_POSTS_PER_PAGE;
|
||||
const pagePosts = blogFilteredPosts.slice(start, start + BLOG_POSTS_PER_PAGE);
|
||||
const grid = document.getElementById('blog-grid');
|
||||
const totalPages = Math.max(1, Math.ceil(blogFilteredPosts.length / BLOG_POSTS_PER_PAGE));
|
||||
|
||||
if (pagePosts.length === 0) {
|
||||
grid.innerHTML = '<div class="blog-empty">No posts match your search.</div>';
|
||||
document.getElementById('blog-page-info').textContent = '';
|
||||
document.getElementById('blog-prev').disabled = true;
|
||||
document.getElementById('blog-next').disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
grid.innerHTML = pagePosts.map(function(p) {
|
||||
return '<a href="' + p.link + '" class="blog-card" style="text-decoration:none">' +
|
||||
'<span class="blog-card-area">' + p.area + '</span>' +
|
||||
'<span class="blog-card-date">' + blogFormatDate(p.date) + '</span>' +
|
||||
'<h3>' + p.headline + '</h3>' +
|
||||
'<p>' + p.teaser + '</p>' +
|
||||
'<span class="blog-card-link">Read more →</span>' +
|
||||
'</a>';
|
||||
}).join('');
|
||||
|
||||
document.getElementById('blog-page-info').textContent = 'Page ' + (blogCurrentPage + 1) + ' of ' + totalPages;
|
||||
document.getElementById('blog-prev').disabled = blogCurrentPage === 0;
|
||||
document.getElementById('blog-next').disabled = blogCurrentPage >= totalPages - 1;
|
||||
}
|
||||
|
||||
function blogPrev() {
|
||||
if (blogCurrentPage > 0) {
|
||||
blogCurrentPage--;
|
||||
blogRender();
|
||||
}
|
||||
}
|
||||
|
||||
function blogNext() {
|
||||
const totalPages = Math.ceil(blogFilteredPosts.length / BLOG_POSTS_PER_PAGE);
|
||||
if (blogCurrentPage < totalPages - 1) {
|
||||
blogCurrentPage++;
|
||||
blogRender();
|
||||
}
|
||||
}
|
||||
|
||||
function blogFilter() {
|
||||
const q = document.getElementById('blog-search-input').value.trim().toLowerCase();
|
||||
if (!q) {
|
||||
blogFilteredPosts = blogAllPosts.slice();
|
||||
} else {
|
||||
blogFilteredPosts = blogAllPosts.filter(function(p) {
|
||||
return p.headline.toLowerCase().indexOf(q) !== -1 ||
|
||||
p.teaser.toLowerCase().indexOf(q) !== -1 ||
|
||||
p.area.toLowerCase().indexOf(q) !== -1;
|
||||
});
|
||||
}
|
||||
blogCurrentPage = 0;
|
||||
blogRender();
|
||||
}
|
||||
|
||||
// Load blog index
|
||||
fetch('blog/index.json?_=' + Date.now())
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(data) {
|
||||
blogAllPosts = data.posts || [];
|
||||
blogFilteredPosts = blogAllPosts.slice();
|
||||
blogRender();
|
||||
})
|
||||
.catch(function() {
|
||||
document.getElementById('blog-grid').innerHTML = '<div class="blog-empty">Blog coming soon.</div>';
|
||||
});
|
||||
|
||||
// Search on input
|
||||
document.getElementById('blog-search-input').addEventListener('input', blogFilter);
|
||||
|
||||
</script>
|
||||
|
||||
<div class="pricing-toast" id="pricing-toast"></div>
|
||||
|
||||
Reference in New Issue
Block a user