Sitemap

#sitemap3{background-color:#f8f8f8;border:1px solid #e0e0e0;border-radius:8px;padding:20px;box-shadow:0 4px 10px rgba(0,0,0,.05);max-width:700px;margin:30px auto;color:#333}#sitemap3:empty::before{content:"Memuat artikel...";display:block;text-align:center;color:#888;font-style:italic;padding:20px}#sitemap3 .judul{font-size:1.5em;font-weight:700;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #3498db;text-align:center}#sitemap3 ol{list-style:decimal;padding-left:25px;margin:0}#sitemap3 li{margin-bottom:10px;padding:8px 0;border-bottom:1px dashed #e0e0e0}#sitemap3 li:last-child{border-bottom:none}#sitemap3 li a{text-decoration:none;color:#3498db;font-size:1.1em;transition:color .3s,transform .2s ease-in-out;display:inline}#sitemap3 li a:hover{color:#2980b9;text-decoration:none;transform:translateX(5px)}[data-theme=dark] #sitemap3{background-color:#1f2021;border:1px solid #444;box-shadow:0 4px 10px rgba(0,0,0,.2);color:#e0e0e0}[data-theme=dark] #sitemap3:empty::before{color:#bbb}[data-theme=dark] #sitemap3 .judul{border-bottom:2px solid #1abc9c}[data-theme=dark] #sitemap3 li{border-bottom:1px dashed #444}[data-theme=dark] #sitemap3 li a{color:#7ed6df}[data-theme=dark] #sitemap3 li a:hover{color:#a4e3ef} Total: 0 Artikel //<![CDATA[ var sitemapPostsArr = []; var loadCompleted = false; var nextPostIndex = 1; var maxResults = 20;

// Fungsi untuk mengambil data artikel menggunakan fetch API function fetchPosts() { // Hentikan permintaan jika semua artikel sudah dimuat if (loadCompleted) { return; } // URL endpoint const url = '/feeds/posts/summary?alt=json&start-index=' + nextPostIndex + '&max-results=' + maxResults; fetch(url) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } // Khusus untuk JSONP, kita harus menangani respons sebagai teks return response.text(); }) .then(text => { // Ubah teks respons menjadi JSON yang bisa diakses const json = JSON.parse(text.replace(/^[^{]+|[^}]+$/g, '')); const feed = json.feed; if (feed && feed.entry) { const newPosts = feed.entry.map(post => { const title = post.title.$t; const url = post.link.find(link => link.rel === 'alternate').href; return { url: url, judul: title }; });

sitemapPostsArr = sitemapPostsArr.concat(newPosts);

if (newPosts.length < maxResults) { loadCompleted = true; observer.unobserve(sentinel); } else { nextPostIndex += maxResults; }

displaySitemap(newPosts); } else { loadCompleted = true; observer.unobserve(sentinel); } }) .catch(error => { console.error('Error fetching posts:', error); loadCompleted = true; const sitemapDiv = document.getElementById("sitemap3"); if (sitemapDiv) { sitemapDiv.innerHTML += ' Maaf, terjadi kesalahan saat memuat artikel.

'; } }); }

// Fungsi untuk menampilkan artikel ke DOM function displaySitemap(posts) { const sitemapDiv = document.getElementById("sitemap3"); if (!sitemapDiv) return;

const olList = sitemapDiv.querySelector("ol"); if (!olList) return;

let html = ''; posts.forEach(post => { html += ` ${post.judul} `; });

olList.insertAdjacentHTML('beforeend', html); updateTotalCount(); }

// Fungsi untuk memperbarui jumlah total artikel function updateTotalCount() { const sitemapDiv = document.getElementById("sitemap3"); if (sitemapDiv) { const totalCountEl = sitemapDiv.querySelector(".judul"); if (totalCountEl) { totalCountEl.textContent = `Total: ${sitemapPostsArr.length} Artikel`; } } }

// Gunakan IntersectionObserver untuk lazy loading const sentinel = document.getElementById("sitemap-sentinel"); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { fetchPosts(); } }); }, { rootMargin: '200px' // Mulai muat 200px sebelum elemen terlihat });

// Mulai memantau elemen sentinel document.addEventListener("DOMContentLoaded", function() { if (sentinel) { observer.observe(sentinel); } }); //]]>