/* Blog Listing Page - Phoros Cloud */ var _blogState = { currentPage: 1, totalPages: 1, totalPosts: 0, postsPerPage: 9, activeCategory: null, isLoading: false }; var SVG_NS = 'http://www.w3.org/2000/svg'; function _svgEl(tag, attrs) { var el = document.createElementNS(SVG_NS, tag); if (attrs) { for (var k in attrs) { if (attrs.hasOwnProperty(k)) el.setAttribute(k, attrs[k]); } } return el; } function _formatDate(dateStr) { if (!dateStr) return ''; try { var d = new Date(dateStr); if (isNaN(d.getTime())) return dateStr; var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; return months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear(); } catch (e) { return dateStr; } } function _getInitials(name) { if (!name) return '?'; var parts = name.trim().split(/\s+/); if (parts.length === 1) return parts[0].charAt(0).toUpperCase(); return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase(); } function _getCategoryColor(category) { if (!category) return 'cyan'; var slug = category.toLowerCase().replace(/\s+/g, '-'); var goldCats = ['guide', 'tutorial', 'how-to', 'tips']; var terraCats = ['story', 'case-study', 'culture', 'team']; if (goldCats.indexOf(slug) !== -1) return 'gold'; if (terraCats.indexOf(slug) !== -1) return 'terracotta'; return 'cyan'; } function _el(tag, cls, attrs) { var e = document.createElement(tag); if (cls) e.className = cls; if (attrs) { for (var k in attrs) { if (attrs.hasOwnProperty(k)) { if (k === 'text') e.textContent = attrs[k]; else e.setAttribute(k, attrs[k]); } } } return e; } function _makePlaceholderSvg() { var svg = _svgEl('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.5' }); svg.appendChild(_svgEl('rect', { x: '3', y: '3', width: '18', height: '18', rx: '2' })); svg.appendChild(_svgEl('circle', { cx: '8.5', cy: '8.5', r: '1.5' })); svg.appendChild(_svgEl('polyline', { points: '21 15 16 10 5 21' })); return svg; } function _makeChevronLeft() { var svg = _svgEl('svg', { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2' }); svg.appendChild(_svgEl('polyline', { points: '15 18 9 12 15 6' })); return svg; } function _makeChevronRight() { var svg = _svgEl('svg', { width: '14', height: '14', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2' }); svg.appendChild(_svgEl('polyline', { points: '9 18 15 12 9 6' })); return svg; } function _makeClipboardSvg() { var svg = _svgEl('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.5' }); svg.appendChild(_svgEl('path', { d: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2' })); svg.appendChild(_svgEl('rect', { x: '9', y: '3', width: '6', height: '4', rx: '1' })); svg.appendChild(_svgEl('line', { x1: '9', y1: '12', x2: '15', y2: '12' })); svg.appendChild(_svgEl('line', { x1: '9', y1: '16', x2: '13', y2: '16' })); return svg; } function _makeAlertSvg() { var svg = _svgEl('svg', { viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '1.5' }); svg.appendChild(_svgEl('circle', { cx: '12', cy: '12', r: '10' })); svg.appendChild(_svgEl('line', { x1: '12', y1: '8', x2: '12', y2: '12' })); svg.appendChild(_svgEl('line', { x1: '12', y1: '16', x2: '12.01', y2: '16' })); return svg; } function _renderCardDOM(post) { var card = _el('div', 'blog-card reveal'); card.setAttribute('role', 'article'); card.setAttribute('tabindex', '0'); var slug = post.slug || ''; card.setAttribute('onclick', "navigateToBlogPost('" + slug.replace(/'/g, "\\'") + "')"); card.setAttribute('onkeydown', "if(event.key==='Enter'||event.key===' ')navigateToBlogPost('" + slug.replace(/'/g, "\\'") + "')"); var imgWrap = _el('div', 'blog-card-image'); if (post.featured_image) { var img = _el('img', '', { src: post.featured_image, alt: post.title || '', loading: 'lazy' }); imgWrap.appendChild(img); } else { var ph = _el('div', 'blog-card-image-placeholder'); ph.appendChild(_makePlaceholderSvg()); imgWrap.appendChild(ph); } card.appendChild(imgWrap); var body = _el('div', 'blog-card-body'); if (post.category) { var catBadge = _el('span', 'blog-card-category'); catBadge.textContent = post.category; catBadge.setAttribute('data-category', post.category.toLowerCase().replace(/\s+/g, '-')); catBadge.setAttribute('data-color', _getCategoryColor(post.category)); body.appendChild(catBadge); } var title = _el('h2', 'blog-card-title'); title.textContent = post.title || ''; body.appendChild(title); var excerpt = _el('p', 'blog-card-excerpt'); excerpt.textContent = post.excerpt || ''; body.appendChild(excerpt); var footer = _el('div', 'blog-card-footer'); var authorWrap = _el('div', 'blog-card-author'); var avatarDiv = _el('div', 'blog-card-avatar'); if (post.author_avatar) { var avImg = _el('img', '', { src: post.author_avatar, alt: post.author || '' }); avatarDiv.appendChild(avImg); } else { avatarDiv.textContent = _getInitials(post.author); } authorWrap.appendChild(avatarDiv); var authorName = _el('span', 'blog-card-author-name'); authorName.textContent = post.author || 'Phoros'; authorWrap.appendChild(authorName); footer.appendChild(authorWrap); var meta = _el('div', 'blog-card-meta'); var dateSpan = _el('span', 'blog-card-date'); dateSpan.textContent = _formatDate(post.published_date); meta.appendChild(dateSpan); if (post.read_time) { meta.appendChild(_el('span', 'blog-card-meta-dot')); var rt = _el('span', 'blog-card-read-time'); rt.textContent = post.read_time + ' min read'; meta.appendChild(rt); } footer.appendChild(meta); body.appendChild(footer); card.appendChild(body); return card; } function _renderPagination(currentPage, totalPages) { var el = document.getElementById('blogPagination'); if (!el) return; el.textContent = ''; if (totalPages <= 1) return; var prevBtn = _el('button', 'pagination-btn pagination-prev'); prevBtn.appendChild(_makeChevronLeft()); prevBtn.appendChild(document.createTextNode('Prev')); prevBtn.setAttribute('aria-label', 'Previous page'); if (currentPage <= 1) prevBtn.disabled = true; else prevBtn.setAttribute('onclick', 'loadBlogPage(' + (currentPage - 1) + ')'); el.appendChild(prevBtn); var pages = _getPageNumbers(currentPage, totalPages); for (var i = 0; i < pages.length; i++) { if (pages[i] === '...') { var dots = _el('span', 'pagination-ellipsis'); dots.textContent = '\u2026'; el.appendChild(dots); } else { var p = pages[i]; var btn = _el('button', 'pagination-btn' + (p === currentPage ? ' active' : '')); btn.textContent = p; btn.setAttribute('aria-label', 'Page ' + p); if (p === currentPage) btn.setAttribute('aria-current', 'page'); else btn.setAttribute('onclick', 'loadBlogPage(' + p + ')'); el.appendChild(btn); } } var nextBtn = _el('button', 'pagination-btn pagination-next'); nextBtn.appendChild(document.createTextNode('Next')); nextBtn.appendChild(_makeChevronRight()); nextBtn.setAttribute('aria-label', 'Next page'); if (currentPage >= totalPages) nextBtn.disabled = true; else nextBtn.setAttribute('onclick', 'loadBlogPage(' + (currentPage + 1) + ')'); el.appendChild(nextBtn); } function _getPageNumbers(current, total) { if (total <= 7) { var arr = []; for (var i = 1; i <= total; i++) arr.push(i); return arr; } if (current <= 4) return [1, 2, 3, 4, 5, '...', total]; if (current >= total - 3) return [1, '...', total - 4, total - 3, total - 2, total - 1, total]; return [1, '...', current - 1, current, current + 1, '...', total]; } function _showLoading() { _blogState.isLoading = true; var grid = document.getElementById('blogGrid'); var pagination = document.getElementById('blogPagination'); if (grid) { grid.textContent = ''; var loader = _el('div', 'blog-loading'); loader.id = 'blogLoading'; loader.appendChild(_el('div', 'loading-spinner')); var p = _el('p', ''); p.textContent = 'Loading posts...'; loader.appendChild(p); grid.appendChild(loader); } if (pagination) pagination.textContent = ''; } function _hideLoading() { _blogState.isLoading = false; } function _showEmpty(isFiltered) { var grid = document.getElementById('blogGrid'); if (!grid) return; grid.textContent = ''; var wrap = _el('div', 'blog-empty'); var iconDiv = _el('div', 'blog-empty-icon'); iconDiv.appendChild(_makeClipboardSvg()); wrap.appendChild(iconDiv); var h3 = _el('h3', ''); h3.textContent = 'No posts found'; wrap.appendChild(h3); var msg = _el('p', ''); msg.textContent = isFiltered ? 'No posts found in this category.' : 'No posts published yet. Check back soon.'; wrap.appendChild(msg); if (isFiltered) { var resetBtn = _el('button', 'blog-empty-reset'); resetBtn.textContent = 'View All Posts'; resetBtn.setAttribute('onclick', 'filterByCategory(null, null)'); wrap.appendChild(resetBtn); } grid.appendChild(wrap); } function _showError() { var grid = document.getElementById('blogGrid'); if (!grid) return; grid.textContent = ''; var wrap = _el('div', 'blog-empty'); var iconDiv = _el('div', 'blog-empty-icon'); iconDiv.appendChild(_makeAlertSvg()); wrap.appendChild(iconDiv); var h3 = _el('h3', ''); h3.textContent = 'Failed to load posts'; wrap.appendChild(h3); var p = _el('p', ''); p.textContent = 'Please try again in a moment.'; wrap.appendChild(p); var retryBtn = _el('button', 'blog-empty-reset'); retryBtn.textContent = 'Retry'; retryBtn.setAttribute('onclick', 'loadBlogPage(1)'); wrap.appendChild(retryBtn); grid.appendChild(wrap); } function loadBlogPage(page) { if (_blogState.isLoading) return; _blogState.currentPage = page || 1; _showLoading(); var params = { type: 'list', page: _blogState.currentPage, limit: _blogState.postsPerPage }; if (_blogState.activeCategory) { params.category = _blogState.activeCategory; } phoros.processor('jnmgWu5c5voYmKBeZ', params, function(err, result) { _hideLoading(); if (err || !result || !result.success) { _showError(); return; } var posts = (result.data && Array.isArray(result.data.posts)) ? result.data.posts : []; var total = (result.data && result.data.pagination) ? result.data.pagination.totalCount : posts.length; _blogState.totalPosts = total; _blogState.totalPages = Math.max(1, Math.ceil(total / _blogState.postsPerPage)); var grid = document.getElementById('blogGrid'); if (!grid) return; if (posts.length === 0) { _showEmpty(!!_blogState.activeCategory); _renderPagination(1, 1); return; } grid.textContent = ''; for (var i = 0; i < posts.length; i++) { grid.appendChild(_renderCardDOM(posts[i])); } _renderPagination(_blogState.currentPage, _blogState.totalPages); if (page > 1) { var filtersEl = document.getElementById('blogFilters'); if (filtersEl) { filtersEl.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } _initReveal(); }); } function _loadCategories() { phoros.processor('jnmgWu5c5voYmKBeZ', { type: 'categories' }, function(err, result) { if (err || !result || !result.success) return; var categories = (result.data && Array.isArray(result.data.categories)) ? result.data.categories : []; _renderFilterPills(categories); }); } function _renderFilterPills(categories) { var container = document.getElementById('filterPills'); if (!container) return; container.textContent = ''; var allBtn = _el('button', 'filter-pill active'); allBtn.textContent = 'All Posts'; allBtn.setAttribute('onclick', 'filterByCategory(this, null)'); container.appendChild(allBtn); for (var i = 0; i < categories.length; i++) { var cat = categories[i]; var label = typeof cat === 'string' ? cat : (cat.label || cat.name || cat.slug || ''); var value = typeof cat === 'string' ? cat : (cat.slug || cat.value || cat.name || ''); if (!label) continue; var btn = _el('button', 'filter-pill'); btn.textContent = label; btn.setAttribute('onclick', "filterByCategory(this, '" + value.replace(/'/g, "\\'") + "')"); container.appendChild(btn); } } function filterByCategory(el, category) { var container = document.getElementById('filterPills'); if (container) { var pills = container.querySelectorAll('.filter-pill'); for (var i = 0; i < pills.length; i++) { pills[i].classList.remove('active'); } } if (el) el.classList.add('active'); _blogState.activeCategory = category || null; _blogState.currentPage = 1; loadBlogPage(1); } function navigateToBlogPost(slug) { if (!slug) return; phoros.page.change('blog-post', { slug: slug }); } var _initReveal = (function() { var observer = null; if (typeof IntersectionObserver !== 'undefined') { observer = new IntersectionObserver(function(entries) { for (var i = 0; i < entries.length; i++) { var entry = entries[i]; if (entry.isIntersecting) { entry.target.classList.add('revealed'); observer.unobserve(entry.target); } } }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' }); } return function() { var cards = document.querySelectorAll('.blog-card.reveal:not(.revealed)'); if (!observer) { for (var i = 0; i < cards.length; i++) { cards[i].classList.add('revealed'); } return; } for (var j = 0; j < cards.length; j++) { observer.observe(cards[j]); } }; })(); (function() { _loadCategories(); loadBlogPage(1); })();

The Phoros Blog