rss-reader.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DevKit Studio | RSS Reader</title>
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
    <meta name="description" content="Read and parse RSS and Atom feeds with this browser-based RSS reader, part of the DevKit Studio developer toolkit." />
    <link rel="canonical" href="https://fazal305.github.io/devkit-studio/rss-reader.html" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://fazal305.github.io/devkit-studio/rss-reader.html" />
    <meta property="og:title" content="DevKit Studio | RSS Reader" />
    <meta property="og:description" content="Read and parse RSS and Atom feeds with this browser-based RSS reader, part of the DevKit Studio developer toolkit." />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="DevKit Studio | RSS Reader" />
    <meta name="twitter:description" content="Read and parse RSS and Atom feeds with this browser-based RSS reader, part of the DevKit Studio developer toolkit." />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body data-page="rss-reader">
    <div class="app-shell">
      <aside class="sidebar">
        <a class="brand" href="index.html" aria-label="DevKit Studio dashboard">
          <div class="brand-mark">DS</div>
          <div>
            <h1 class="brand-title">DevKit Studio</h1>
            <p class="brand-subtitle">VS Code meets Postman in the browser</p>
          </div>
        </a>

        <p class="sidebar-label">Workspace Modules</p>
        <nav class="module-nav" aria-label="DevKit modules">
          <a class="module-link" href="index.html" data-page-link="index"
            ><span>Dashboard</span><span class="module-index">00</span></a
          >
          <a
            class="module-link"
            href="json-explorer.html"
            data-page-link="json-explorer"
            ><span>JSON Explorer</span><span class="module-index">01</span></a
          >
          <a
            class="module-link"
            href="xml-explorer.html"
            data-page-link="xml-explorer"
            ><span>XML Explorer</span><span class="module-index">02</span></a
          >
          <a
            class="module-link"
            href="rss-reader.html"
            data-page-link="rss-reader"
            ><span>RSS Reader</span><span class="module-index">03</span></a
          >
          <a
            class="module-link"
            href="api-client.html"
            data-page-link="api-client"
            ><span>API Client</span><span class="module-index">04</span></a
          >
          <a
            class="module-link"
            href="response-comparator.html"
            data-page-link="response-comparator"
            ><span>Response Comparator</span
            ><span class="module-index">05</span></a
          >
          <a
            class="module-link"
            href="schema-builder.html"
            data-page-link="schema-builder"
            ><span>Schema Builder</span><span class="module-index">06</span></a
          >
          <a
            class="module-link"
            href="json-xml-converter.html"
            data-page-link="json-xml-converter"
            ><span>JSON ↔ XML Converter</span
            ><span class="module-index">07</span></a
          >
          <a
            class="module-link"
            href="api-viewer.html"
            data-page-link="api-viewer"
            ><span>API Viewer</span><span class="module-index">08</span></a
          >
          <a
            class="module-link"
            href="request-history.html"
            data-page-link="request-history"
            ><span>Request History</span><span class="module-index">09</span></a
          >
          <a
            class="module-link"
            href="collections.html"
            data-page-link="collections"
            ><span>Collections</span><span class="module-index">10</span></a
          >
          <a
            class="module-link"
            href="environment-variables.html"
            data-page-link="environment-variables"
            ><span>Environment Variables</span
            ><span class="module-index">11</span></a
          >
          <a
            class="module-link"
            href="mock-response-generator.html"
            data-page-link="mock-response-generator"
            ><span>Mock Response Generator</span
            ><span class="module-index">12</span></a
          >
        </nav>

        <p class="footer-note">Local-first developer tooling workspace</p>
      </aside>

      <main class="main-shell">
        <header class="page-header">
          <p class="page-kicker">Module 03</p>
          <h2 class="page-title">RSS Reader</h2>
          <p class="page-subtitle">
            Parse RSS/XML feeds, inspect feed items, search entries, and export
            feed summaries as JSON.
          </p>
        </header>

        <section class="status-bar" aria-live="polite">
          <p class="status-message" id="globalStatus">
            RSS Reader ready. Paste a feed or load a sample.
          </p>
          <span class="status-chip">RSS</span>
        </section>

        <section class="module-grid">
          <div class="panel">
            <div class="panel-header">
              <div>
                <h3 class="panel-title">RSS XML Input</h3>
                <p class="panel-subtitle">
                  Paste a feed from a release log, product updates, or developer
                  blog.
                </p>
              </div>
            </div>

            <div class="toolbar">
              <button class="btn btn-cyber" type="button" id="parseRssBtn">
                Parse Feed
              </button>
              <button
                class="btn btn-purple"
                type="button"
                id="loadRssSampleBtn"
              >
                Load Sample RSS
              </button>
              <button class="btn btn-ghost" type="button" id="copyRssJsonBtn">
                Copy Feed JSON
              </button>
              <button
                class="btn btn-ghost"
                type="button"
                id="downloadRssJsonBtn"
              >
                Download Feed JSON
              </button>
            </div>

            <textarea
              class="code-input form-control"
              id="rssInput"
              spellcheck="false"
              placeholder="Paste RSS XML feed here"
            ></textarea>
          </div>

          <div class="panel">
            <div class="panel-header">
              <div>
                <h3 class="panel-title">Feed Items</h3>
                <p class="panel-subtitle">
                  Search parsed item titles, dates, and descriptions.
                </p>
              </div>
            </div>

            <div class="pill-row mb-3" id="rssStats">
              <span class="stat-pill">Items: 0</span>
            </div>

            <input
              class="form-control search-row"
              id="rssSearchInput"
              type="search"
              placeholder="Search feed items"
            />

            <div id="rssItemsOutput">
              <div class="empty-state">Parse a feed to view items.</div>
            </div>
          </div>
        </section>
      </main>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/shared.js"></script>
    <script src="js/rss-reader.js"></script>
  </body>
</html>