Prompt utilisé pour régénérer cette page :
Page "Sitemap Analyzer" du toolbox de web-cylian-laboratory.
Catégorie : Toolbox — outil d'analyse et visualisation des sitemaps XML
avec filtrage d'URLs et historique.
=== FRONT MATTER (index.md) ===
title: "Sitemap Analyzer"
description: "Analyze and visualize XML sitemaps from any website"
icon: "sitemap"
tags: [seo, sitemap, crawler]
features:
- Parse sitemap.xml and sitemap index
- Display URLs with metadata
- Priority and frequency info
- Request history
=== WIDGET LEFT (_history.left.md) ===
Front matter : title "History", weight 10.
Contenu HTML :
<div id="history-widget">
<h5>Recent Sitemaps</h5>
<ul id="history-list"></ul>
<p id="history-empty" class="hidden">No history yet.</p>
<button id="btn-clear-history" class="button hidden">Clear</button>
</div>
=== CONTENU HTML (index.md) ===
<div id="sitemap-container"> :
1. Formulaire (div#sitemap-form) :
- div.input-group : <input type="url" id="url-input"
placeholder="https://example.com/sitemap.xml" autocomplete="url">
+ <button id="btn-analyze" class="button color-primary">Analyze</button>
- <div id="form-error" class="error hidden"></div>
2. Loading (div#sitemap-loading class="hidden") :
<span class="spinner"></span> Fetching sitemap...
3. Résultats (div#sitemap-results class="hidden") :
- Header : <h3 id="results-url"></h3> + <span id="results-count" class="badge">
+ <span id="results-type" class="badge">
- Content (div#results-content) :
- div#sitemap-index class="hidden" : <h4>Sitemap Index</h4> + <ul id="index-list">
- div#sitemap-urls : <h4>URLs</h4> +
div#urls-filter (input#filter-input placeholder "Filter URLs..."
+ span#filter-count) + div#urls-list
- <details id="raw-section"><summary>Raw Content</summary>
<pre id="raw-content"></pre></details>
4. État vide (div#sitemap-empty class="hidden") :
<p>Enter a sitemap URL above to analyze it.</p>
=== JAVASCRIPT (default.js) ===
Vanilla JS pur (pas d'import ES module). Init via DOMContentLoaded.
Constantes : HISTORY_KEY = 'sitemap-history', MAX_HISTORY = 20.
État global : currentUrls = [] (pour le filtrage).
init() :
- Récupère url-input, btn-analyze, filter-input
- Event listeners : click analyze, Enter analyze, input filterUrls
- Expose window.analyzeUrl
- Affiche sitemap-empty
analyze() : lit/trim url-input, valide non-vide, appelle analyzeUrl(url).
analyzeUrl(url) :
- Met à jour input, cache états, affiche loading
- try : normalizeUrl → fetchSitemap → parseSitemap → renderResults → addToHistory
- catch : showError, finally : cache loading
normalizeUrl(input) :
- Ajoute https:// si absent
- Parse URL, si pathname === '/' ou '' → ajoute /sitemap.xml
fetchSitemap(url) :
- Proxy CORS : https://api.codetabs.com/v1/proxy?quest=<encoded>
- Gère 404 spécifiquement ("Sitemap not found (404)")
- Retourne response.text()
parseSitemap(content) :
- Utilise DOMParser().parseFromString(content, 'text/xml')
- Vérifie <parsererror> → throw "Invalid XML format"
- Détecte <sitemapindex> → type 'index' :
Pour chaque <sitemap> : extrait <loc> et <lastmod>
Retourne { type:'index', sitemaps:[{loc, lastmod}], urls:[] }
- Sinon type 'urlset' :
Pour chaque <url> : extrait <loc>, <lastmod>, <changefreq>, <priority>
priority parsé en float
Retourne { type:'urlset', urls:[{loc, lastmod, changefreq, priority}], sitemaps:[] }
renderResults(url, parsed, raw) :
- Header : URL, type badge (Index → color-info, Urlset → color-primary)
- Si index : affiche compteur sitemaps, crée des <li class="sitemap-item">
avec liens cliquables qui appellent analyzeUrl(sitemap.loc) récursivement,
+ optionnel span.sitemap-date avec formatDate()
- Si urlset : affiche compteur URLs, stocke dans currentUrls,
appelle renderUrlList()
- Raw content dans pre
renderUrlList(urls) :
- Limite d'affichage : 500 URLs max pour les performances
- Pour chaque URL : div.url-item contenant :
a.url-loc (href, target="_blank", rel="noopener")
div.url-meta avec spans optionnels :
.url-date (formatDate), .url-freq (changefreq), .url-priority (priority*100 + "%")
- Si > 500 URLs : div.url-more "... and N more URLs (use filter to narrow down)"
filterUrls() :
- Lit filter-input, lowercase, trim
- Si vide → renderUrlList(currentUrls)
- Sinon filtre currentUrls par url.loc.toLowerCase().includes(query)
formatDate(dateStr) : new Date(dateStr).toLocaleDateString(), fallback au string original.
showError(message) : affiche erreur, cache empty.
Historique (même pattern que robots) :
- addToHistory(url) : filtre doublons, unshift, slice MAX_HISTORY,
localStorage.setItem, dispatch CustomEvent 'sitemap-history-updated'
- getHistory() : parse localStorage ou []
- clearHistory() : removeItem + dispatch event
- Exposé : window.analyzeUrl, window.getHistory, window.clearHistory
initHistoryWidget() :
- Identique au pattern robots : renderHistory() crée des <li><a> cliquables,
gère le bouton clear, écoute 'sitemap-history-updated'
=== SCSS (default.scss) ===
#sitemap-container : flex column gap 1.5rem
#sitemap-form .input-group : flex gap 0.5rem, input flex 1 min-width 200px
.error : margin-top, background danger 0.1, color danger, border-radius 4px
#sitemap-loading : flex center gap 0.5rem, opacity 0.7
.spinner : 1rem circle border animation spin
@keyframes spin { to { rotate(360deg) } }
#sitemap-results #results-header : flex wrap center gap 1rem, border-bottom,
h3 monospace flex 1 min-width 200px
#results-content flex column gap 1.5rem
#sitemap-index : h4 margin, #index-list flex column gap 0.5rem
.sitemap-item : flex between gap 1rem, padding, background secondary,
border-radius 4px, border-left 3px solid info
a monospace word-break-all, .sitemap-date 0.75rem opacity nowrap
#sitemap-urls : h4 margin, #urls-filter flex center gap 1rem margin-bottom
input flex 1 max-width 300px, #filter-count 0.875rem opacity 0.7
#urls-list : flex column gap 0.25rem, max-height 500px overflow-y auto
.url-item : flex column gap 0.25rem, padding, background secondary
hover tertiary, .url-loc monospace 0.8rem word-break-all
.url-meta : flex gap 1rem, 0.75rem opacity 0.7
.url-date::before "📅 ", .url-freq::before "🔄 ", .url-priority::before "⭐ "
.url-more : center italic opacity 0.6
#raw-section : summary cursor opacity 0.7, pre background secondary max-height 300px
#sitemap-empty : center padding 2rem opacity 0.6
.hidden : display none !important
#history-widget : h5 margin, #history-list flex column, a monospace 0.75rem ellipsis,
#history-empty italic opacity, btn-clear margin-top
=== OBJECTIF ===
Outil SEO qui récupère et parse les sitemaps XML (urlset et index) via proxy
CORS. Les sitemaps index permettent la navigation récursive vers les sous-sitemaps.
Les URLs sont affichées avec leurs métadonnées (date, fréquence, priorité en %)
et filtrables en temps réel. Limitation à 500 URLs affichées pour les performances.
Historique persisté en localStorage.
Page entièrement générée et maintenue par IA, sans intervention humaine.