{"id":34,"date":"2025-01-16T00:18:04","date_gmt":"2025-01-16T08:18:04","guid":{"rendered":"https:\/\/fursone.com\/?page_id=34"},"modified":"2026-05-04T18:00:58","modified_gmt":"2026-05-05T02:00:58","slug":"blog","status":"publish","type":"page","link":"https:\/\/fursone.com\/da\/blog\/","title":{"rendered":"Blog"},"content":{"rendered":"\n<section id=\"blog-hero\">\n    <style>\n        #blog-hero {\n            background-color: #26292a;\n            background-image: linear-gradient(rgba(38, 41, 42, 0.7), rgba(38, 41, 42, 0.8)), url('https:\/\/fursone.com\/wp-content\/uploads\/2026\/04\/tweed-fabric-manufacturing-factory-wenzhou-066-1.jpg');\n            background-size: cover;\n            background-position: center;\n            padding: 160px 20px 100px;\n            text-align: center;\n        }\n\n        #blog-hero h1 {\n            font-family: var(--font-heading, 'Playfair Display', serif);\n            font-size: 42px;\n            color: #f3f2e6;\n            margin-bottom: 20px;\n            font-weight: 400;\n        }\n\n        #blog-hero p {\n            font-family: var(--font-body, 'Playfair', serif);\n            font-size: 16px;\n            color: rgba(243, 242, 230, 0.85);\n            max-width: 760px;\n            margin: 0 auto;\n            line-height: 1.8;\n        }\n\n        #blog-list-section {\n            background-color: #f3f2e6;\n            padding: 80px 0;\n        }\n\n        #blog-list-section .container {\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 0 40px;\n        }\n\n        #blog-list-section .blog-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 30px;\n        }\n\n        #blog-list-section .blog-card {\n            background-color: #ffffff;\n            border: 1px solid rgba(38, 41, 42, 0.1);\n            overflow: hidden;\n            text-decoration: none;\n            color: inherit;\n            display: flex;\n            flex-direction: column;\n            min-height: 300px;\n            transition: all 0.25s ease;\n        }\n\n        #blog-list-section .blog-card:hover {\n            border-color: #26292a;\n            transform: translateY(-4px);\n            box-shadow: 0 10px 24px rgba(38, 41, 42, 0.08);\n        }\n\n        #blog-list-section .blog-date {\n            font-family: var(--font-body, 'Playfair', serif);\n            font-size: 12px;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            color: #934d34;\n            margin-bottom: 14px;\n        }\n\n        #blog-list-section .blog-title {\n            font-family: var(--font-heading, 'Playfair Display', serif);\n            font-size: 24px;\n            line-height: 1.35;\n            margin: 0 0 14px 0;\n            color: #26292a;\n        }\n\n        #blog-list-section .blog-excerpt {\n            font-family: var(--font-body, 'Playfair', serif);\n            font-size: 14px;\n            line-height: 1.75;\n            color: #26292a;\n            opacity: 0.9;\n            margin: 0 0 20px 0;\n            flex: 1;\n        }\n\n        #blog-list-section .blog-link {\n            font-family: var(--font-body, 'Playfair', serif);\n            font-size: 11px;\n            font-weight: 600;\n            letter-spacing: 1px;\n            text-transform: uppercase;\n            border-bottom: 1px solid #26292a;\n            width: fit-content;\n            padding-bottom: 2px;\n        }\n\n        #blog-list-section .actions {\n            text-align: center;\n            margin-top: 40px;\n        }\n\n        #blog-load-more {\n            background-color: #934d34;\n            color: #f3f2e6;\n            border: 1px solid #934d34;\n            padding: 12px 34px;\n            font-family: var(--font-body, 'Playfair', serif);\n            font-size: 12px;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            cursor: pointer;\n            transition: all 0.25s ease;\n        }\n\n        #blog-load-more:hover {\n            background-color: transparent;\n            color: #26292a;\n            border-color: #26292a;\n        }\n\n        #blog-status {\n            text-align: center;\n            font-family: var(--font-body, 'Playfair', serif);\n            font-size: 14px;\n            color: #26292a;\n            opacity: 0.85;\n            margin-top: 24px;\n        }\n\n        @media (max-width: 1024px) {\n            #blog-list-section .blog-grid {\n                grid-template-columns: 1fr 1fr;\n            }\n        }\n\n        @media (max-width: 768px) {\n            #blog-hero {\n                padding: 120px 24px 80px;\n            }\n\n            #blog-hero h1 {\n                font-size: 30px;\n                line-height: 1.25;\n            }\n\n            #blog-hero p {\n                font-size: 17px;\n                line-height: 1.7;\n            }\n\n            #blog-list-section .container {\n                padding: 0 24px;\n            }\n\n            #blog-list-section .blog-grid {\n                grid-template-columns: 1fr;\n            }\n\n            #blog-list-section .blog-card {\n                overflow: hidden;\n                min-height: auto;\n            }\n\n            #blog-list-section .blog-title {\n                font-size: 24px;\n                line-height: 1.3;\n            }\n\n            #blog-list-section .blog-excerpt,\n            #blog-status {\n                font-size: 17px;\n                line-height: 1.7;\n            }\n\n            #blog-list-section .blog-date,\n            #blog-list-section .blog-link {\n                font-size: 11px;\n            }\n\n            #blog-load-more {\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                padding: 12px 22px !important;\n                font-size: 13px !important;\n                font-weight: 700 !important;\n                letter-spacing: 1.2px !important;\n            }\n        }\n    \n        #blog-list-section .blog-card-image, #latest-blog-section .blog-card-image {\n            width: 100%;\n            height: 220px;\n            object-fit: cover;\n            border-bottom: 1px solid rgba(38, 41, 42, 0.1);\n        }\n        #blog-list-section .blog-card-content, #latest-blog-section .blog-card-content {\n            padding: 30px;\n            display: flex;\n            flex-direction: column;\n            flex: 1;\n        }\n        @media (max-width: 768px) {\n            #blog-list-section .blog-card-content, #latest-blog-section .blog-card-content {\n                padding: 24px;\n            }\n            #blog-list-section .blog-card-image, #latest-blog-section .blog-card-image {\n                height: 200px;\n            }\n        }\n    \n    <\/style>\n\n    <h1>Industry Blog<\/h1>\n    <p>Insights, trends, and manufacturing guides from the experts at Fursone Textile.<\/p>\n<\/section>\n\n<section id=\"blog-list-section\">\n    <div class=\"container\">\n        <div class=\"blog-grid\" id=\"blog-grid\">\n            <a href=\"\/blog\/\" class=\"blog-card\">\n            <div class=\"blog-card-content\">\n\n                <div class=\"blog-date\">Loading<\/div>\n                <h2 class=\"blog-title\">Loading latest posts&#8230;<\/h2>\n                <p class=\"blog-excerpt\">Please wait while we fetch articles from the blog feed.<\/p>\n                <span class=\"blog-link\">Read Article<\/span>\n            \n            <\/div>\n        <\/a>\n        <\/div>\n\n        <div class=\"actions\">\n            <button type=\"button\" id=\"blog-load-more\">Load More Articles<\/button>\n        <\/div>\n        <p id=\"blog-status\"><\/p>\n    <\/div>\n\n    <script>\n    (function () {\n        const grid = document.getElementById('blog-grid');\n        const button = document.getElementById('blog-load-more');\n        const status = document.getElementById('blog-status');\n        if (!grid || !button || !status) return;\n\n        let page = 1;\n        const perPage = 9;\n        let totalPages = 1;\n        let isLoading = false;\n        let hasRenderedAny = false;\n\n        function stripHtml(input) {\n            return (input || '').replace(\/<[^>]*>\/g, '').replace(\/\\s+\/g, ' ').trim();\n        }\n\n        function formatDate(dateStr) {\n            const d = new Date(dateStr);\n            if (Number.isNaN(d.getTime())) return '';\n            return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });\n        }\n\n        function renderCards(posts, replace) {\n            const html = posts.map((post) => {\n                const title = post?.title?.rendered || 'Untitled';\n                const excerpt = stripHtml(post?.excerpt?.rendered || '').slice(0, 170);\n                const date = formatDate(post?.date || '');\n                const link = post?.link || '\/blog\/';\n                    let imgUrl = '';\n                    let imgAlt = title;\n                    if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\n                        const media = post._embedded['wp:featuredmedia'][0];\n                        imgUrl = media.source_url || '';\n                        imgAlt = media.alt_text || title;\n                        if (media.media_details && media.media_details.sizes && media.media_details.sizes.medium_large) {\n                            imgUrl = media.media_details.sizes.medium_large.source_url;\n                        }\n                    }\n                    const imgHtml = imgUrl ? `<img decoding=\"async\" src=\"${imgUrl}\" alt=\"${imgAlt}\" class=\"blog-card-image\" loading=\"lazy\">` : '';\n    \n                return `\n                    <a href=\"${link}\" class=\"blog-card\">\n                        ${imgHtml}\n            <div class=\"blog-card-content\">\n\n                        <div class=\"blog-date\">${date}<\/div>\n                        <h2 class=\"blog-title\">${title}<\/h2>\n                        <p class=\"blog-excerpt\">${excerpt}${excerpt.length >= 170 ? '...' : ''}<\/p>\n                        <span class=\"blog-link\">Read Article<\/span>\n                    \n            <\/div>\n        <\/a>\n                `;\n            }).join('');\n\n            if (replace) {\n                grid.innerHTML = html;\n            } else {\n                grid.insertAdjacentHTML('beforeend', html);\n            }\n            hasRenderedAny = hasRenderedAny || posts.length > 0;\n        }\n\n        function setButtonState() {\n            const noMore = page >= totalPages;\n            button.style.display = noMore ? 'none' : 'inline-block';\n            if (noMore) {\n                status.textContent = hasRenderedAny ? 'All posts loaded.' : 'No blog posts found.';\n            } else {\n                status.textContent = '';\n            }\n        }\n\n        function loadPosts(nextPage, replace) {\n            if (isLoading) return;\n            isLoading = true;\n            status.textContent = 'Loading articles...';\n\n            try {\n                fetch(`\/wp-json\/wp\/v2\/posts?per_page=${perPage}&page=${nextPage}&_embed`)\n                    .then((res) => {\n                        const totalPagesHeader = parseInt(res.headers.get('X-WP-TotalPages') || '1', 10);\n                        if (!Number.isNaN(totalPagesHeader)) totalPages = totalPagesHeader;\n                        if (!res.ok) throw new Error('Failed to load posts: ' + res.status);\n                        return res.json();\n                    })\n                    .then((posts) => {\n                        if (replace) grid.innerHTML = '';\n                        renderCards(Array.isArray(posts) ? posts : [], false);\n                        page = nextPage;\n                        setButtonState();\n                    })\n                    .catch((err) => {\n                        status.textContent = 'Fetch Catch: ' + err.message;\n                        console.error(err);\n                    })\n                    .finally(() => {\n                        isLoading = false;\n                    });\n            } catch (err) {\n                status.textContent = 'Sync Catch: ' + err.message;\n                isLoading = false;\n            }\n        }\n\n        button.addEventListener('click', function () {\n            if (page < totalPages) {\n                loadPosts(page + 1, false);\n            }\n        });\n\n        loadPosts(1, true);\n    })();\n    <\/script>\n<\/section>\n\n","protected":false},"excerpt":{"rendered":"<p>Industry Blog Insights, trends, and manufacturing guides from the experts at Fursone Textile. Loading Loading latest posts&#8230; Please wait while we fetch articles from the blog feed. Read Article Load More Articles<\/p>","protected":false},"author":1,"featured_media":3143,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-34","page","type-page","status-publish","has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/fursone.com\/da\/wp-json\/wp\/v2\/pages\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fursone.com\/da\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fursone.com\/da\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fursone.com\/da\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fursone.com\/da\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":3,"href":"https:\/\/fursone.com\/da\/wp-json\/wp\/v2\/pages\/34\/revisions"}],"predecessor-version":[{"id":3191,"href":"https:\/\/fursone.com\/da\/wp-json\/wp\/v2\/pages\/34\/revisions\/3191"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fursone.com\/da\/wp-json\/wp\/v2\/media\/3143"}],"wp:attachment":[{"href":"https:\/\/fursone.com\/da\/wp-json\/wp\/v2\/media?parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}