index.html

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy"
          content="
      default-src 'self';
      script-src  'self' 'sha256-8hoMaND3srk56hM6g9HjgkBSQddZJXI46A8OoRoJJpA=';
      style-src   'self';
      img-src     'self' data:;
      connect-src 'self';
      object-src  'none';
      base-uri    'self';
      form-action 'self';
      frame-ancestors 'none';
    "
    />


    <meta name="referrer" content="no-referrer"/>

    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, viewport-fit=cover"
    />

    <title>Security News</title>

    <meta
            name="description"
            content="Daily aggregated public security news, advisories, threat intelligence, cloud security bulletins, and security product updates."
    />

    <meta
            name="keywords"
            content="security news, cybersecurity news, threat intelligence, microsoft security, aws security, google cloud security, splunk security, cisa advisories, ncsc, security bulletins"
    />

    <meta name="theme-color" content="#2b0a3d"/>

    <link rel="canonical" href="https://security.libredevops.org"/>

    <!-- Open Graph -->
    <meta property="og:type" content="website"/>
    <meta property="og:site_name" content="Security News"/>
    <meta property="og:title" content="Security News"/>
    <meta property="og:description"
          content="Daily aggregated public security news, advisories, threat intelligence, cloud security bulletins, and security product updates."/>
    <meta property="og:url" content="https://security.libredevops.org"/>

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:title" content="Security News"/>
    <meta name="twitter:site" content="@LibreDevOps"/>
    <meta name="twitter:description"
          content="Daily aggregated public security news, advisories, threat intelligence, cloud security bulletins, and security product updates."/>

    <link rel="manifest" href="manifest.json"/>
    <link rel="icon" href="favicon.ico"/>
    <link rel="stylesheet" href="css/styles.css"/>

    <!-- Inline theme bootstrap: applies the saved theme before first paint to
         avoid a flash. Whitelisted in the CSP above by its sha256 hash, so it
         must stay byte-identical to that hash — regenerate the hash if edited. -->
    <script>(function(){var s=localStorage.getItem("securitynews-theme");document.documentElement.setAttribute("data-theme",s==="light"?"light":"dark");})();</script>
</head>

<body>
<header>
    <div class="header-content">
        <div class="logo">
            <a
                    href="https://libredevops.org"
                    class="logo-link"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Libre DevOps home"
            >
                <img
                        src="security-libre-devops-white.png"
                        alt="Libre DevOps Security"
                        class="site-logo"
                />
            </a>

            <div class="logo-text">
                <h1>Security News</h1>
                <p class="subtitle">
                    Daily security intelligence, advisories, threat research, and vendor security updates
                </p>
            </div>

            <div class="logo-spacer"></div>
        </div>

        <div class="header-actions">
            <div class="search-box">
                <span class="search-icon">🔍</span>
                <input
                        id="search-input"
                        type="text"
                        placeholder="Search articles, vendors, products, advisories..."
                        autocomplete="off"
                        aria-label="Search security articles"
                />
            </div>

            <button
                    id="bookmarks-toggle"
                    type="button"
                    aria-label="Toggle bookmarked articles"
                    aria-pressed="false"
            >
                ⭐ Bookmarks
            </button>

            <a
                    href="data/feed.xml"
                    class="rss-button"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="Open RSS feed"
            >
                📡 RSS
            </a>

            <button
                    id="theme-toggle"
                    type="button"
                    aria-label="Toggle theme"
            >
                ☀️
            </button>

            <!--
              Inline SVG rather than a remote or file-based icon: the CSP is
              default-src 'self' with img-src 'self' data:, and inlining keeps
              it to zero extra requests. currentColor makes it follow the same
              colour as the neighbouring controls in both themes.

              The path is the official GitHub mark, copied verbatim from
              primer/octicons icons/mark-github-16.svg rather than hand drawn.
            -->
            <a
                    id="github-link"
                    href="https://github.com/libre-devops/security-news"
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label="View this project on GitHub"
                    title="View this project on GitHub"
            >
                <svg viewBox="0 0 16 16" width="22" height="22" aria-hidden="true" focusable="false" fill="currentColor">
                    <path d="M6.766 11.328c-2.063-.25-3.516-1.734-3.516-3.656 0-.781.281-1.625.75-2.188-.203-.515-.172-1.609.063-2.062.625-.078 1.468.25 1.968.703.594-.187 1.219-.281 1.985-.281.765 0 1.39.094 1.953.265.484-.437 1.344-.765 1.969-.687.218.422.25 1.515.046 2.047.5.593.766 1.39.766 2.203 0 1.922-1.453 3.375-3.547 3.64.531.344.89 1.094.89 1.954v1.625c0 .468.391.734.86.547C13.781 14.359 16 11.53 16 8.03 16 3.61 12.406 0 7.984 0 3.563 0 0 3.61 0 8.031a7.88 7.88 0 0 0 5.172 7.422c.422.156.828-.125.828-.547v-1.25c-.219.094-.5.156-.75.156-1.031 0-1.64-.562-2.078-1.609-.172-.422-.36-.672-.719-.719-.187-.015-.25-.093-.25-.187 0-.188.313-.328.625-.328.453 0 .844.281 1.25.86.313.452.64.655 1.031.655s.641-.14 1-.5c.266-.265.47-.5.657-.656"/>
                </svg>
            </a>
        </div>

        <div class="stats-bar">
            <span id="total-count">0 articles</span>
            <span id="showing-count">Showing 0 articles</span>
            <span id="last-updated">Last updated: --</span>
        </div>
    </div>
</header>

<section class="filters">
    <div class="filter-section-title">Categories</div>

    <div class="filter-scroll">
        <div id="filter-pills" class="filter-pills">
            <button class="pill active">Loading categories...</button>
        </div>
    </div>
</section>

<main>
    <div class="controls">
        <div></div>

        <div class="controls-right">
            <select id="date-filter" aria-label="Filter by date">
                <option value="all">All Time</option>
                <option value="today">Today</option>
                <option value="week">Last 7 Days</option>
                <option value="month">Last 30 Days</option>
            </select>

            <select id="sort-by" aria-label="Sort articles">
                <option value="date-desc">Newest First</option>
                <option value="date-asc">Oldest First</option>
                <option value="source">Source A–Z</option>
                <option value="vendor">Vendor A–Z</option>
            </select>
        </div>
    </div>

    <div id="loading" class="loading visible">
        <div class="loading-spinner"></div>
        <p>Loading security intelligence feeds...</p>
    </div>

    <div id="no-results" class="no-results">
        <p>🔍 No articles found matching your criteria.</p>
        <p>Try adjusting your filters, search terms, or broadening the date range.</p>
    </div>

    <section id="articles-grid" class="articles-grid"></section>
</main>

<div id="toast" class="toast"></div>

<!--
  Full post viewer. Native <dialog> so focus trapping, Escape to close and the
  backdrop come from the platform rather than hand-rolled JS. The content is
  built entirely by app.js with DOM methods, so nothing from the feed is ever
  parsed as markup.
-->
<dialog id="article-dialog" class="article-dialog" aria-labelledby="dialog-body">
    <div class="dialog-panel">
        <button id="dialog-close" class="dialog-close" type="button" aria-label="Close">×</button>
        <div id="dialog-body" class="dialog-body"></div>
    </div>
</dialog>
<script
        src="js/app.js"
        defer
        integrity="sha384-FHmVFta4SqpKkHPohMLRTFQjmeURqRbFM96FaG9v7x8s5Scs9ZpRJsbLpLIIfb8d"
        crossorigin="anonymous"
></script>
</body>
</html>