feat: improve feed directory UI with default parameter handling

.gitignore

@@ -1,7 +1,8 @@
+_data/configs.yml
 _site
-.sass-cache
 .jekyll-cache
 .jekyll-metadata
-vendor
+.sass-cache
+node_modules
 node_modules/
-_data/configs.yml
+vendor

Gemfile.lock

@@ -1,13 +1,13 @@
 GIT
   remote: https://github.com/html2rss/html2rss-configs.git
-  revision: 65cf54c8b5c5516cfb78f812a4745771052fcf9a
+  revision: d7c60ffee7747afe425240bae539cdf71ad356f5
   specs:
     html2rss-configs (0.2.0)
       html2rss
 
 GIT
   remote: https://github.com/html2rss/html2rss.git
-  revision: 8bddc59e845adb45861b89f21d95e7f5595b3813
+  revision: 3071d18755e3f546aa35bccfdaa83694c61a475c
   specs:
     html2rss (0.17.0)
       addressable (~> 2.7)
@@ -160,7 +160,7 @@ GEM
     mime-types (3.7.0)
       logger
       mime-types-data (~> 3.2025, >= 3.2025.0507)
-    mime-types-data (3.2025.0902)
+    mime-types-data (3.2025.0909)
     net-http (0.6.0)
       uri
     nokogiri (1.18.9-aarch64-linux-gnu)
@@ -190,7 +190,7 @@ GEM
     regexp_parser (2.11.2)
     reverse_markdown (3.0.0)
       nokogiri
-    rexml (3.4.3)
+    rexml (3.4.4)
     rouge (4.6.0)
     rss (0.3.1)
       rexml

assets/css/sass/feed-directory.scss

@@ -16,14 +16,16 @@
 .feed-directory__item {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: flex-start;
   gap: var(--spacing-sm);
 
   padding: var(--spacing-sm);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
+  margin-bottom: 1px; /* Minimal gap between items */
 
   transition: var(--transition-base);
+  background-color: var(--color-bg);
 }
 
 .feed-directory__item:hover {
@@ -38,12 +40,51 @@
   margin-inline-end: var(--spacing-sm);
 }
 
+.feed-directory__item-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
+  min-height: 2rem; /* Compact height for list feel */
+}
+
 h3.feed-directory__item-name {
   font-size: var(--font-size-h4);
   font-weight: var(--font-weight-bold);
   color: var(--color-text);
   margin: 0;
   padding: 0;
+  flex: 1;
+  min-width: 0; /* Allow text to wrap */
+  line-height: 1.4;
+}
+
+.feed-directory__item-param-toggle {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-text-light);
+  background-color: var(--code-block-bg-color);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--border-color);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: var(--transition-base);
+  flex-shrink: 0;
+}
+
+.feed-directory__item-param-toggle:hover {
+  background-color: var(--border-color);
+  color: var(--color-text);
+}
+
+.feed-directory__param-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
 }
 
 .feed-directory__item-url {
@@ -100,9 +141,23 @@ h3.feed-directory__item-name {
 }
 
 .feed-directory__item-param-form {
-  margin-block-start: var(--spacing-sm);
-  padding-block-start: var(--spacing-sm);
-  border-block-start: 1px solid var(--border-color);
+  margin-top: var(--spacing-xs);
+  padding: var(--spacing-xs);
+  border-top: 1px solid var(--border-color);
+  background-color: var(--code-block-bg-color);
+  border-radius: var(--border-radius-sm);
+  animation: slideDown 0.2s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .feed-directory__item-param-form__group {

assets/js/feed-directory/index.js

@@ -68,8 +68,36 @@ document.addEventListener("alpine:init", () => {
       });
     },
 
+    initializeDefaultParameters() {
+      Object.entries(this.config.url_parameters).forEach(([key, fallback]) => {
+        const inputId = `${this.config.domain}-${this.config.name}-${key}`;
+        const input = document.getElementById(inputId);
+
+        if (input && this.config.default_parameters[key]) {
+          // Set the actual value in the input field
+          input.value = this.config.default_parameters[key];
+          // Also set placeholder as fallback
+          input.placeholder = this.config.default_parameters[key];
+        }
+      });
+
+      // Now set params with default values (this will trigger the watcher)
+      this.params = { ...this.config.default_parameters };
+    },
+
     init() {
       if (!this.config) return;
+
+      // Initialize params first
+      this.params = {};
+
+      // Set default values in input fields after DOM is ready
+      if (this.config.default_parameters && !this.config.valid_channel_url) {
+        this.$nextTick(() => {
+          this.initializeDefaultParameters();
+        });
+      }
+
       if (!this.config.valid_channel_url) {
         this.$watch("params", (value) => {
           let params = {};

bin/data-update

@@ -12,6 +12,16 @@ require 'yaml'
 
 file_names = Html2rss::Configs.file_names.sort
 
+def extract_default_parameters(parameters)
+  return {} unless parameters.is_a?(Hash)
+
+  parameters.each_with_object({}) do |(param_name, param_config), defaults|
+    if param_config.is_a?(Hash) && param_config['default']
+      defaults[param_name] = param_config['default']
+    end
+  end
+end
+
 def valid_url(url)
   !!URI(url)
 rescue StandardError
@@ -34,11 +44,15 @@ output = file_names.map do |file_name|
 
   file_name_splits = file_name.split('/')
 
+  # Extract default parameter values from the parameters section
+  default_parameters = extract_default_parameters(config['parameters'])
+
   {
     'domain' => file_name_splits[-2..-2].join,
     'name' => File.basename(file_name_splits[-1..].join, '.*'),
     'valid_channel_url' => valid_url(config['channel']['url']),
     'url_parameters' => string_formatting_references(config['channel']['url']),
+    'default_parameters' => default_parameters,
     'channel' => config['channel']
   }
 end

feed-directory/index.html

@@ -89,24 +89,47 @@ <h2 class="fs-6">Instance URL</h2>
     >
       <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"
+        <div class="feed-directory__item-main">
+          <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>
+          {% unless config.valid_channel_url %}
+          <button
+            class="feed-directory__item-param-toggle"
+            x-on:click="toggleParamsForm"
+            :title="showParamsForm ? 'Hide parameters' : 'Configure parameters'"
+            :aria-label="showParamsForm ? 'Hide parameters' : 'Configure parameters'"
           >
-            {{ 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>
+            <svg
+              class="feed-directory__param-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="3" />
+              <path d="M12 1v6m0 6v6m11-7h-6m-6 0H1" />
+            </svg>
+            <span x-text="showParamsForm ? 'Hide' : 'Configure'"></span>
+          </button>
+          {% endunless %}
+        </div>
         {% endif %} {% unless config.valid_channel_url %}
         <div class="feed-directory__item-param-form" x-show="showParamsForm">
           <form role="form">
@@ -153,23 +176,12 @@ <h3 class="feed-directory__item-name">
           </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>