index.html

---
layout: default
---

<style>
    body {
        background-color: #121212;  /* Sfondo principale molto scuro */
        color: #ffffff;              /* Testo bianco */
    }
    header {
        background: #333333;        /* Colore di sfondo per l'intestazione */
    }
    a {
        color: #58a6ff;             /* Colore dei link */
    }
    .news-item {
        background: #1E1E1E;        /* Colore di sfondo per gli articoli, leggermente più chiaro dello sfondo principale */
        border-bottom: 1px solid #444;
        margin-bottom: 20px;
        padding: 15px;
        border-radius: 5px;
    }
    .source {
        color: #999999;             /* Colore del testo per la fonte */
    }
    #date-selector-container {
        margin-bottom: 20px;
        background-color: #1E1E1E;
        padding: 10px;
        border-radius: 5px;
    }
    #date-selector {
        background-color: #333333;
        color: #FFFFFF;
        border: 1px solid #555555;
    }
    #main-content {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #121212; /* Stesso colore dello sfondo principale */
    }
    .footer-disclaimer, .footer-credit {
        color: #ffffff;
        background-color: #1E1E1E;
        padding: 10px;
        border-radius: 5px;
        margin-top: 20px;
    }
</style>

<div id="main-content">
    
    <div id="date-selector-container">
        <h2>Seleziona Data</h2>
        <input type="date" id="date-selector">
    </div>

    <div id="news-container">
        <!-- I post verranno caricati qui dinamicamente -->
    </div>

    <footer>
        <div class="footer-disclaimer">
            Questo riassunto è stato generato automaticamente da un sistema di intelligenza artificiale. Sebbene si sia cercato di garantire accuratezza e completezza, potrebbero esserci imprecisioni o omissioni. Si consiglia di verificare le informazioni chiave consultando le fonti originali. Questo testo non sostituisce la lettura del materiale completo.
        </div>
        <div class="footer-credit">
            Posts creati con YouRecap
            <a href="https://github.com/bbnss/YouRecap" target="_blank">
                <img src="https://github.com/fluidicon.png" width="24" height="24" alt="GitHub icon">
            </a>
        </div>
    </footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script>
    const converter = new showdown.Converter();
    let allPosts = [];

    async function loadPosts() {
    try {
        const response = await fetch('posts.json');
        if (!response.ok) {
            throw new Error('Errore nel caricamento dell\'indice dei post');
        }
        allPosts = await response.json();
        console.log("Contenuto di posts.json:", JSON.stringify(allPosts, null, 2));
        console.log("Numero totale di post:", allPosts.length);

        const latestDate = allPosts.reduce((latest, post) => {
            return post.date > latest ? post.date : latest;
        }, "1970-01-01");

        console.log("Data più recente:", latestDate);
        document.getElementById('date-selector').value = latestDate;
        await displayPostsByDate(latestDate);
    } catch (error) {
        console.error('Errore:', error);
        document.getElementById('news-container').innerHTML = '<p>Errore nel caricamento delle notizie.</p>';
    }
}

    async function displayPostsByDate(date) {
    console.log("Data selezionata:", date);
    const container = document.getElementById('news-container');
    container.innerHTML = '';

    const filteredPosts = allPosts.filter(post => post.date === date);
    console.log("Post filtrati per la data:", filteredPosts);

    if (filteredPosts.length === 0) {
        container.innerHTML = '<p>Nessuna notizia disponibile per questa data.</p>';
        return;
    }

    for (const post of filteredPosts) {
        try {
            console.log(`Tentativo di caricamento del post: ${post.filename}`);
            const markdown = await fetchMarkdownPost(post.filename);
            const html = converter.makeHtml(markdown);
            const postElement = createPostElement(html, post.source);
            container.appendChild(postElement);
        } catch (error) {
            console.error(`Errore nel caricamento del post ${post.filename}:`, error);
        }
    }
}
    async function fetchMarkdownPost(filename) {
    try {
        const baseUrl = 'https://raw.githubusercontent.com/bbnss/yourecap.github.io/main/';
        const response = await fetch(`${baseUrl}posts/${filename}`);
        console.log(`Tentativo di caricamento: ${baseUrl}posts/${filename}`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return await response.text();
    } catch (error) {
        console.error(`Errore nel caricamento del post ${filename}:`, error);
        return `# Errore nel caricamento del post\n\nNon è stato possibile caricare il post "${filename}". Errore: ${error.message}`;
    }
}

    function createPostElement(html, source) {
        const postElement = document.createElement('div');
        postElement.className = 'news-item';
        postElement.innerHTML = html;

        const sourceElement = document.createElement('p');
        sourceElement.className = 'source';
        sourceElement.textContent = `Fonte: ${source}`;
        postElement.appendChild(sourceElement);

        return postElement;
    }

    document.getElementById('date-selector').addEventListener('change', (event) => {
        displayPostsByDate(event.target.value);
    });

    // Carica i post iniziali
    loadPosts();
</script>

<style>
    #main-content {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    .news-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }
    .source {
        font-size: 0.8em;
        color: #666;
    }
    #date-selector-container {
        margin-bottom: 20px;
    }
</style>