<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>Blog Post URLs</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin: 10px 0;
        }
        a {
            text-decoration: none;
            color: #0077cc;
        }
        .year-label {
            font-weight: bold;
        }
        .category-label {
            color: #333;
        }
    </style>
</head>
<body>
    <h1>Blog Post URLs</h1>
    <ul id="post-list"></ul>

    <script>
        // Function to fetch and parse the XML sitemap
        function fetchSitemap(url) {
            fetch(url)
                .then(response => response.text())
                .then(data => {
                    const parser = new DOMParser();
                    const xmlDoc = parser.parseFromString(data, 'text/xml');
                    const urlNodes = xmlDoc.querySelectorAll('url');
                    const postUrls = [];

                    urlNodes.forEach(node => {
                        const loc = node.querySelector('loc');
                        const date = node.querySelector('lastmod').textContent;
                        const category = extractCategory(loc.textContent); // Extract category
                        postUrls.push({ loc: loc.textContent, date: new Date(date), category });
                    });

                    displayPostUrlsByYear(postUrls);
                })
                .catch(error => console.error('Error fetching sitemap:', error));
        }

        // Function to extract category from the URL
        function extractCategory(url) {
            // Modify this function to extract the category from your specific URL structure.
            // For example, if the category is part of the URL path, you can use regex to extract it.
            // Replace this with your own logic.
            const categoryMatch = url.match(/\/category\/([^/]+)/);
            if (categoryMatch && categoryMatch[1]) {
                return categoryMatch[1];
            } else {
                return 'Uncategorized';
            }
        }

        // Function to group post URLs by year and display them
        function displayPostUrlsByYear(postUrls) {
            const postList = document.getElementById('post-list');
            let currentYear = null;

            postUrls.forEach(post => {
                const year = post.date.getFullYear();
                if (year !== currentYear) {
                    const yearLabel = document.createElement('div');
                    yearLabel.classList.add('year-label');
                    yearLabel.textContent = year;
                    postList.appendChild(yearLabel);
                    currentYear = year;
                }

                const listItem = document.createElement('li');
                const categoryLabel = document.createElement('span');
                categoryLabel.classList.add('category-label');
                categoryLabel.textContent = `[${post.category}] `;
                listItem.appendChild(categoryLabel);

                const link = document.createElement('a');
                link.href = post.loc;
                link.textContent = post.loc;
                listItem.appendChild(link);

                postList.appendChild(listItem);
            });
        }

        // Call the fetchSitemap function with the sitemap URL
        fetchSitemap('https://syedirfanhyder.blogspot.com/sitemap.xml');
    </script>
</body>
</html>