index.html

---
layout: default
title: Feed Directory
nav_order: 2
noindex: true
has_children: true
---

<div class="text-center">
  <h1 class="fs-9">Welcome to the Feed Directory!</h1>
  <p class="fs-5">
    This directory contains a list of pre-built configurations to create RSS
    feeds for various websites.
  </p>
</div>

<div class="mt-6">
  <h2 class="fs-6">Instance URL</h2>
  <p>
    An "Instance URL" is the address of a running
    <code>html2rss-web</code> application. You can use a public instance, but we
    encourage you to host your own.
  </p>
  <a
    href="{{ '/web-application/how-to/self-hosting' | relative_url }}"
    class="btn btn-primary"
  >
    🚀 Host Your Own Instance (and share it!)
  </a>
  <p class="mt-2">
    Find more public instances on the
    <a
      href="https://github.com/html2rss/html2rss-web/wiki/Instances"
      target="_blank"
      rel="noopener noreferrer"
    >
      community-run wiki</a
    >.
  </p>
</div>

<hr class="my-6" />

<noscript>
  <span class="noscript"
    >This site needs JavaScript to link to the feed URL!</span
  >
</noscript>

<script>
  window.feedDirectoryData = {{ site.data.configs | jsonify }};
</script>

<div id="configs" x-data="feedDirectory()">
  <div class="feed-directory__filters bg-grey-dk-300">
    <fieldset class="feed-directory__fieldset py-1 px-2">
      <legend class="fs-5">Instance URL</legend>
      <input
        type="text"
        name="instance"
        x-model="instanceUrl"
        class="feed-directory__input bg-grey-dk-100 p-2"
        aria-label="Instance URL"
      />
    </fieldset>

    <fieldset class="feed-directory__fieldset py-1 px-2">
      <legend class="fs-5">Search</legend>
      <input
        type="search"
        name="search"
        autofocus
        placeholder="fia, apple, news or blog"
        x-on:input.debounce.500ms="searchQuery = $event.target.value"
        x-model="searchQuery"
        class="feed-directory__input bg-grey-dk-100 p-2"
        aria-label="Search feeds"
      />
    </fieldset>
  </div>
  <div>
    {% for config in site.data.configs %}
    <div
      class="feed-directory__item"
      x-show="filterConfig('{{ config.domain | escape }}/{{ config.name | escape }}')"
      x-data="feedItemData({{ forloop.index0 }})"
      x-init="init()"
      x-cloak
    >
      <div class="feed-directory__item-info">
        {% if config.channel.url %}
        <h3 class="feed-directory__item-name">
          {% if config.valid_channel_url %}
          <a
            href="{{ config.channel.url | escape }}"
            target="_blank"
            rel="noopener noreferrer"
          >
            {{ config.channel.url | escape }}
          </a>
          {% else %}
          <span x-show="!pathPreview">{{ config.channel.url | escape }}</span>
          <a
            x-bind:href="pathPreview"
            x-show="pathPreview"
            x-text="pathPreview"
          ></a>
          {% endif %}
        </h3>
        {% endif %} {% unless config.valid_channel_url %}
        <div class="feed-directory__item-param-form" x-show="showParamsForm">
          <form role="form">
            {% for param in config.url_parameters %}
            <div class="feed-directory__item-param-form__group form-group">
              <label
                for="{{ config.domain | escape }}-{{ config.name | escape }}-{{ param[0] | escape }}"
                class="feed-directory__item-param-form__label"
              >
                {{ param[0] | escape }}
              </label>
              <input
                type="text"
                id="{{ config.domain | escape }}-{{ config.name | escape }}-{{ param[0] | escape }}"
                name="{{ param[0] | escape }}"
                class="feed-directory__item-param-form__input form-control"
                placeholder="{{ param[1] | escape }}"
                x-model="params['{{ param[0] }}']"
                aria-label="{{ param[0] | escape }}"
              />
            </div>
            {% endfor %}
            <div class="feed-directory__item-param-form__buttons">
              <button x-on:click="showParamsForm = false" class="btn btn-sm">
                Close
              </button>
            </div>
          </form>
        </div>
        {% endunless %}
      </div>

      <div class="feed-directory__item-actions">
        {% if config.valid_channel_url %}
        <a
          :href="getFeedUrl(config, params)"
          rel="noopener noreferrer"
          target="_blank"
          title="Show RSS"
          aria-label="Open RSS feed"
        >
          <svg class="feed-directory__item-actions__rss-icon">
            <use xlink:href="#rss-icon"></use>
          </svg>
        </a>
        {% else %}
        <button
          x-show="!showParamsForm"
          x-on:click="toggleParamsForm"
          title="Start setting parameters and get the RSS URL"
          aria-label="Start setting parameters and get the RSS URL"
        >
          <svg class="feed-directory__item-actions__settings-icon">
            <use xlink:href="#settings-icon"></use>
          </svg>
        </button>
        <a
          :href="getFeedUrl(config, params)"
          rel="noopener noreferrer"
          target="_blank"
          title="Show RSS"
          aria-label="Open RSS feed"
          x-show="showParamsForm"
        >
          <svg class="feed-directory__item-actions__rss-icon">
            <use xlink:href="#rss-icon"></use>
          </svg>
        </a>
        {% endif %}
        <a
          href="https://github.com/html2rss/html2rss-configs/blob/master/lib/html2rss/configs/{{ config.domain | uri_escape }}/{{ config.name | uri_escape }}.yml"
          class="edit-link"
          target="_blank"
          title="Edit on GitHub"
          aria-label="Edit on GitHub"
        >
          <svg class="feed-directory__item-actions__edit-icon">
            <use xlink:href="#edit-icon"></use>
          </svg>
        </a>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

<hr class="my-6" />

<div class="text-center">
  <h2 class="fs-6">Contribute to the Directory</h2>
  <p class="fs-5">
    The feed configurations in this directory are community-driven. If you've
    created a new feed configuration, we encourage you to share it with the
    community.
  </p>
  <a
    href="https://github.com/html2rss/html2rss-configs"
    class="btn btn-primary"
    target="_blank"
  >
    Contribute on GitHub
  </a>
</div>

<script
  src="{{ '/assets/js/feed-directory/index.js' | relative_url }}"
  defer
></script>
<script
  src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.9/dist/cdn.min.js"
  integrity="sha256-PtHu0lJIiSHfZeNj1nFd6wTX+Squ255SGZ/fc8seCtM="
  crossorigin="anonymous"
  defer
></script>