A-Z Site Index

<style>

.az-container {

  font-family: Arial, sans-serif;

}

.az-nav {

  background: #f8f8f8;

  border-bottom: 2px solid #ccc;

  padding: 10px;

  text-align: center;

  position: sticky;

  top: 0;

  z-index: 1000;

  overflow-x: auto;

  white-space: nowrap;

}

.az-nav a {

  display: inline-block;

  margin: 2px 4px;

  padding: 6px 10px;

  background: #fff;

  border: 1px solid #ccc;

  border-radius: 4px;

  text-decoration: none;

  color: #333;

  font-weight: bold;

  transition: all 0.3s;

}

.az-nav a:hover {

  background: #0066cc;

  color: #fff;

}

.az-header {

  font-size: 26px;

  font-weight: bold;

  margin-top: 25px;

  border-bottom: 2px solid #ccc;

  padding-bottom: 6px;

  color: #222;

}

.az-item {

  margin: 4px 0;

}

.az-item a {

  text-decoration: none;

  color: #0066cc;

  transition: all 0.2s;

}

.az-item a:hover {

  text-decoration: underline;

  color: #004499;

}

.loading {

  font-style: italic;

  color: #555;

}

html {

  scroll-behavior: smooth;

}

</style>

<!-- Navigation -->

<div class="az-nav" id="az-nav"></div>

<div class="az-container" id="az-index">

  <p class="loading">Loading Site Index...</p>

</div>

<script>

const blogUrl = "https://basantjaisi.blogspot.com";

const maxResults = 500; 

let entries = [];

const nepaliLetters = ["अ","आ","इ","ई","उ","ऊ","ऋ","ए","ऐ","ओ","औ","अं","अः","क","ख","ग","घ","ङ","च","छ","ज","झ","ञ","ट","ठ","ड","ढ","ण","त","थ","द","ध","न","प","फ","ब","भ","म","य","र","ल","व","श","ष","स","ह","क्ष","त्र","ज्ञ"];

const englishLetters = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ"];

const allOrder = [...nepaliLetters, ...englishLetters, "#"];

// Fetch posts

function fetchPosts(startIndex) {

  fetch(`${blogUrl}/feeds/posts/default?alt=json&start-index=${startIndex}&max-results=150`)

    .then(res => res.json())

    .then(data => {

      if (data.feed.entry) {

        data.feed.entry.forEach(entry => {

          const title = entry.title.$t.trim();

          const link = entry.link.find(l => l.rel === "alternate").href;

          entries.push({ title, link });

        });

        if (entries.length < maxResults && data.feed.entry.length === 150) {

          fetchPosts(startIndex + 150);

        } else {

          fetchPages();

        }

      } else {

        fetchPages();

      }

    })

    .catch(() => document.getElementById("az-index").innerHTML = `<p>Error loading posts.</p>`);

}

// Fetch pages

function fetchPages() {

  fetch(`${blogUrl}/feeds/pages/default?alt=json&max-results=150`)

    .then(res => res.json())

    .then(data => {

      if (data.feed.entry) {

        data.feed.entry.forEach(entry => {

          const title = entry.title.$t.trim();

          const link = entry.link.find(l => l.rel === "alternate").href;

          entries.push({ title, link });

        });

      }

      renderAZIndex();

    })

    .catch(() => renderAZIndex());

}

function getGroupLetter(title) {

  let firstChar = title.charAt(0).toUpperCase();

  if (nepaliLetters.includes(firstChar)) return firstChar;

  if (englishLetters.includes(firstChar)) return firstChar;

  return "#";

}

// Render index with enhancements

function renderAZIndex() {

  entries.sort((a, b) => a.title.localeCompare(b.title, 'ne', { sensitivity: 'base' }));

  let html = "";

  let navHtml = "";

  let currentGroup = "";

  // Count letters with posts/pages

  const groupCounts = {};

  entries.forEach(item => {

    const letter = getGroupLetter(item.title);

    groupCounts[letter] = (groupCounts[letter] || 0) + 1;

  });

  // Top Navigation: show only letters with posts/pages

  allOrder.forEach(letter => {

    if (groupCounts[letter]) {

      navHtml += `<a href="#letter-${letter}">${letter}</a>`;

    }

  });

  document.getElementById("az-nav").innerHTML = navHtml;

  // Render each letter section with heading + count

  entries.forEach(item => {

    const groupLetter = getGroupLetter(item.title);

    if (groupLetter !== currentGroup) {

      currentGroup = groupLetter;

      html += `<div class="az-header" id="letter-${currentGroup}">${currentGroup} (${groupCounts[currentGroup]})</div>`;

    }

    html += `<div class="az-item"><a href="${item.link}" target="_blank">${item.title}</a></div>`;

  });

  document.getElementById("az-index").innerHTML = html;

}

fetchPosts(1);

</script>