{"id":44,"date":"2025-10-18T08:27:17","date_gmt":"2025-10-18T08:27:17","guid":{"rendered":"https:\/\/planetwoolnepal.com\/blog\/?page_id=44"},"modified":"2025-10-18T08:35:56","modified_gmt":"2025-10-18T08:35:56","slug":"home","status":"publish","type":"page","link":"https:\/\/planetwoolnepal.com\/blog\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"44\" class=\"elementor elementor-44\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34a4f21 e-flex e-con-boxed e-con e-parent\" data-id=\"34a4f21\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe02b3e elementor-widget elementor-widget-html\" data-id=\"fe02b3e\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n<section id=\"blog-section\" class=\"max-w-7xl mx-auto px-6 py-16\">\r\n\r\n  <!-- Blog Grid -->\r\n  <div id=\"blog-grid\" class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-8\"><\/div>\r\n\r\n  <!-- Pagination -->\r\n  <div class=\"flex justify-center items-center gap-4 mt-10\">\r\n    <button id=\"prevPage\" class=\"px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition disabled:opacity-50 disabled:cursor-not-allowed\">\r\n      \u2190 Previous\r\n    <\/button>\r\n    <button id=\"nextPage\" class=\"px-4 py-2 bg-[#1a9bd6] text-white rounded-md hover:bg-[#1384b8] transition disabled:opacity-50 disabled:cursor-not-allowed\">\r\n      Next \u2192\r\n    <\/button>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const apiBase = \"https:\/\/planetwoolnepal.com\/blog\/wp-json\/wp\/v2\/posts?_embed\";\r\n  const postsPerPage = 6;\r\n  let currentPage = 1;\r\n\r\n  const blogGrid = document.getElementById(\"blog-grid\");\r\n  const nextPageBtn = document.getElementById(\"nextPage\");\r\n  const prevPageBtn = document.getElementById(\"prevPage\");\r\n\r\n  async function fetchPosts(page = 1) {\r\n    \/\/ \u2728 Animated loading spinner\r\n    blogGrid.innerHTML = `\r\n      <div class='col-span-full flex justify-center items-center py-20'>\r\n        <div class=\"w-12 h-12 border-4 border-[#1a9bd6] border-t-transparent rounded-full animate-spin\"><\/div>\r\n      <\/div>\r\n    `;\r\n\r\n    try {\r\n      const res = await fetch(`${apiBase}&per_page=${postsPerPage}&page=${page}`);\r\n      if (!res.ok) throw new Error(\"Failed to load posts\");\r\n\r\n      const posts = await res.json();\r\n      if (posts.length === 0) {\r\n        blogGrid.innerHTML = `<div class='col-span-full text-center text-gray-500 py-10'>No blogs found.<\/div>`;\r\n        nextPageBtn.disabled = true;\r\n        return;\r\n      }\r\n\r\n      renderPosts(posts);\r\n\r\n      \/\/ Handle pagination\r\n      prevPageBtn.disabled = page === 1;\r\n      nextPageBtn.disabled = posts.length < postsPerPage;\r\n    } catch (err) {\r\n      console.error(err);\r\n      blogGrid.innerHTML = `\r\n        <div class='col-span-full text-center text-red-500 py-10'>\r\n          \u274c Unable to load blog posts. Please try again later.\r\n        <\/div>`;\r\n    }\r\n  }\r\n\r\n  function renderPosts(posts) {\r\n    blogGrid.innerHTML = posts.map(post => {\r\n      const title = post.title.rendered;\r\n      const excerpt = post.excerpt.rendered.replace(\/<[^>]+>\/g, '').slice(0, 120) + \"...\";\r\n      const date = new Date(post.date).toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\", year: \"numeric\" });\r\n      const link = post.link;\r\n      const image = post._embedded?.['wp:featuredmedia']?.[0]?.source_url || \"https:\/\/placehold.co\/600x400?text=No+Image\";\r\n\r\n      return `\r\n        <article class=\"bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300\">\r\n          <a href=\"${link}\" target=\"_blank\" class=\"block overflow-hidden\">\r\n            <img decoding=\"async\" src=\"${image}\" alt=\"${title}\" class=\"w-full h-52 object-cover hover:scale-105 transition-transform duration-500\">\r\n          <\/a>\r\n          <div class=\"p-5 flex flex-col justify-between h-[230px]\">\r\n            <div>\r\n              <span class=\"text-xs text-gray-500\">${date}<\/span>\r\n              <h3 class=\"text-lg font-semibold mt-1 mb-2 text-gray-800 line-clamp-2\">${title}<\/h3>\r\n              <p class=\"text-gray-600 text-sm leading-relaxed line-clamp-3\">${excerpt}<\/p>\r\n            <\/div>\r\n            <a href=\"${link}\" target=\"_blank\" class=\"mt-3 inline-block text-[#1a9bd6] font-medium hover:text-[#1384b8] transition\">Read More \u2192<\/a>\r\n          <\/div>\r\n        <\/article>\r\n      `;\r\n    }).join(\"\");\r\n  }\r\n\r\n  \/\/ Pagination events\r\n  nextPageBtn.addEventListener(\"click\", () => {\r\n    currentPage++;\r\n    fetchPosts(currentPage);\r\n    window.scrollTo({ top: 0, behavior: \"smooth\" });\r\n  });\r\n\r\n  prevPageBtn.addEventListener(\"click\", () => {\r\n    if (currentPage > 1) {\r\n      currentPage--;\r\n      fetchPosts(currentPage);\r\n      window.scrollTo({ top: 0, behavior: \"smooth\" });\r\n    }\r\n  });\r\n\r\n  \/\/ Initial load\r\n  fetchPosts();\r\n});\r\n<\/script>\r\n\r\n<!-- \u2705 Extra Styling -->\r\n<style>\r\n  .line-clamp-2 {\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 2;\r\n    -webkit-box-orient: vertical;\r\n    overflow: hidden;\r\n  }\r\n  .line-clamp-3 {\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 3;\r\n    -webkit-box-orient: vertical;\r\n    overflow: hidden;\r\n  }\r\n  \/* Subtle fade-in for each post *\/\r\n  #blog-grid article {\r\n    opacity: 0;\r\n    transform: translateY(10px);\r\n    animation: fadeIn 0.4s ease-out forwards;\r\n  }\r\n  @keyframes fadeIn {\r\n    to { opacity: 1; transform: translateY(0); }\r\n  }\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2190 Previous Next \u2192<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-44","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/planetwoolnepal.com\/blog\/wp-json\/wp\/v2\/pages\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetwoolnepal.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/planetwoolnepal.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/planetwoolnepal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetwoolnepal.com\/blog\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":10,"href":"https:\/\/planetwoolnepal.com\/blog\/wp-json\/wp\/v2\/pages\/44\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/planetwoolnepal.com\/blog\/wp-json\/wp\/v2\/pages\/44\/revisions\/54"}],"wp:attachment":[{"href":"https:\/\/planetwoolnepal.com\/blog\/wp-json\/wp\/v2\/media?parent=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}