11---
2- import { configs } from ' ../data/loadConfigs' ;
3- import { Icon , LinkButton } from ' @astrojs/starlight/components' ;
2+ import { configs } from " ../data/loadConfigs" ;
3+ import { Icon , LinkButton } from " @astrojs/starlight/components" ;
44
55// Simple helper functions
6- function getFeedUrl(config : { domain: string ; name: string ; url_parameters? : Record <string , any > }, instanceUrl : string , params : Record <string , string > = {}) {
6+ function getFeedUrl(
7+ config : {
8+ domain: string ;
9+ name: string ;
10+ url_parameters? : Record <string , any >;
11+ },
12+ instanceUrl : string ,
13+ params : Record <string , string > = {},
14+ ) {
715 const baseUrl = instanceUrl .endsWith (" /" ) ? instanceUrl : ` ${instanceUrl }/ ` ;
816 let url = ` ${baseUrl }${config .domain }/${config .name }.rss ` ;
917
1018 const queryParams = new URLSearchParams ();
11- Object .keys (config .url_parameters || {}).forEach (key => {
19+ Object .keys (config .url_parameters || {}).forEach (( key ) => {
1220 if (params [key ]) queryParams .append (key , params [key ]);
1321 });
1422
@@ -18,18 +26,16 @@ function getFeedUrl(config: { domain: string; name: string; url_parameters?: Rec
1826}
1927
2028// Don't generate static URLs to avoid exposing instance URL in build
21- const staticFeedUrls = configs .map (config => ({
29+ const staticFeedUrls = configs .map (( config ) => ({
2230 ... config ,
23- staticFeedUrl: " #" // Placeholder that will be updated by JavaScript
31+ staticFeedUrl: " #" , // Placeholder that will be updated by JavaScript
2432}));
2533---
2634
2735<div class =" feed-directory-container" >
2836 <!-- Progressive Enhancement: Works without JavaScript -->
2937 <div class =" feed-directory__filters" >
30- <label for =" instance-url-input" >
31- Instance URL
32- </label >
38+ <label for =" instance-url-input" > Instance URL </label >
3339 <input
3440 type =" text"
3541 name =" instance"
@@ -39,9 +45,7 @@ const staticFeedUrls = configs.map(config => ({
3945 placeholder =" https://your-instance.com"
4046 />
4147
42- <label for =" search-input" >
43- Search Feeds
44- </label >
48+ <label for =" search-input" > Search Feeds </label >
4549 <input
4650 type =" search"
4751 name =" search"
@@ -54,121 +58,135 @@ const staticFeedUrls = configs.map(config => ({
5458 </div >
5559
5660 <div class =" feed-directory__list" >
57- { staticFeedUrls .map ((config , index ) => (
58- <div
59- class = " feed-directory__item"
60- data-domain = { config .domain }
61- data-name = { config .name }
62- data-searchable = { ` ${config .domain }/${config .name } ` }
63- >
64- <div class = " feed-directory__item-main" >
65- <div class = " feed-directory__item-info" >
66- <div class = " feed-directory__item-title" >
67- <span class = " feed-directory__item-domain" >{ config .domain } </span >
68- <span class = " feed-directory__item-separator" >/</span >
69- <span class = " feed-directory__item-name" >{ config .name } </span >
70- </div >
71-
72- { config .channel ?.url && (
73- <div class = " feed-directory__item-source" >
74- <a href = { config .channel .url } target = " _blank" rel = " noopener noreferrer nofollow" class = " feed-directory__item-link" >
75- { config .channel .url }
76- </a >
61+ {
62+ staticFeedUrls .map ((config , index ) => (
63+ <div
64+ class = " feed-directory__item"
65+ data-domain = { config .domain }
66+ data-name = { config .name }
67+ data-searchable = { ` ${config .domain }/${config .name } ` }
68+ >
69+ <div class = " feed-directory__item-main" >
70+ <div class = " feed-directory__item-info" >
71+ <div class = " feed-directory__item-title" >
72+ <span class = " feed-directory__item-domain" >{ config .domain } </span >
73+ <span class = " feed-directory__item-separator" >/</span >
74+ <span class = " feed-directory__item-name" >{ config .name } </span >
7775 </div >
78- )}
79- </div >
80-
81- <div class = " feed-directory__item-actions" >
82- { ! config .valid_channel_url && Object .keys (config .url_parameters || {}).length > 0 ? (
83- <button
84- class = " feed-directory__configure-btn"
85- type = " button"
86- aria-expanded = " false"
87- aria-controls = { ` params-${index } ` }
88- data-target = { ` params-${index } ` }
89- aria-label = " Configure feed parameters"
90- title = " Configure feed parameters"
91- >
92- <Icon name = " setting" />
93- <span >Configure</span >
94- </button >
95- ) : (
96- <div class = " feed-directory__action-spacer" ></div >
97- )}
9876
99- <LinkButton
100- href = { config .staticFeedUrl }
101- target = " _blank"
102- rel = " noopener noreferrer nofollow"
103- data-feed-url
104- class = " feed-directory__action-btn feed-directory__action-btn--rss"
105- aria-label = " Open RSS feed"
106- title = " Open RSS feed"
107- >
108- <Icon name = " rss" />
109- <span >RSS</span >
110- </LinkButton >
111-
112- <LinkButton
113- href = { ` https://github.com/html2rss/html2rss-configs/blob/master/lib/html2rss/configs/${encodeURIComponent (config .domain )}/${encodeURIComponent (config .name )}.yml ` }
114- target = " _blank"
115- rel = " noopener noreferrer nofollow"
116- variant = " secondary"
117- class = " feed-directory__action-btn feed-directory__action-btn--edit"
118- aria-label = " Edit configuration on GitHub"
119- title = " Edit configuration on GitHub"
120- >
121- <Icon name = " pencil" />
122- <span >Edit</span >
123- </LinkButton >
124- </div >
125- </div >
126-
127- { ! config .valid_channel_url && Object .keys (config .url_parameters || {}).length > 0 && (
128- <div class = " feed-directory__item-params" id = { ` params-${index } ` } hidden >
129- <form class = " feed-directory__params-form" >
130- { Object .entries (config .url_parameters || {}).map (([key , fallback ]) => (
131- <div class = " feed-directory__param-group" >
132- <label
133- for = { ` ${config .domain }-${config .name }-${key } ` }
134- class = " feed-directory__param-label"
77+ { config .channel ?.url && (
78+ <div class = " feed-directory__item-source" >
79+ <a
80+ href = { config .channel .url }
81+ target = " _blank"
82+ rel = " noopener noreferrer nofollow"
83+ class = " feed-directory__item-link"
13584 >
136- { key }
137- </label >
138- <input
139- type = " text"
140- id = { ` ${config .domain }-${config .name }-${key } ` }
141- name = { key }
142- class = " feed-directory__param-input"
143- value = { config .default_parameters ?.[key ] || ' ' }
144- placeholder = { String (fallback )}
145- data-param-key = { key }
146- aria-label = { key }
147- />
85+ { config .channel .url }
86+ </a >
14887 </div >
149- ))}
150- <div class = " feed-directory__params-actions" >
88+ )}
89+ </div >
90+
91+ <div class = " feed-directory__item-actions" >
92+ { ! config .valid_channel_url &&
93+ Object .keys (config .url_parameters || {}).length > 0 ? (
15194 <button
95+ class = " feed-directory__configure-btn"
15296 type = " button"
153- class = " feed-directory__close-btn"
154- data-close-form
155- aria-label = " Close configuration form"
97+ aria-expanded = " false"
98+ aria-controls = { ` params-${index } ` }
99+ data-target = { ` params-${index } ` }
100+ aria-label = " Configure feed parameters"
101+ title = " Configure feed parameters"
156102 >
157- Close
103+ <Icon name = " setting" />
104+ <span >Configure</span >
158105 </button >
159- </div >
160- </form >
106+ ) : (
107+ <div class = " feed-directory__action-spacer" />
108+ )}
109+
110+ <LinkButton
111+ href = { config .staticFeedUrl }
112+ target = " _blank"
113+ rel = " noopener noreferrer nofollow"
114+ data-feed-url
115+ class = " feed-directory__action-btn feed-directory__action-btn--rss"
116+ aria-label = " Open RSS feed"
117+ title = " Open RSS feed"
118+ >
119+ <Icon name = " rss" />
120+ <span >RSS</span >
121+ </LinkButton >
122+
123+ <LinkButton
124+ href = { ` https://github.com/html2rss/html2rss-configs/blob/master/lib/html2rss/configs/${encodeURIComponent (config .domain )}/${encodeURIComponent (config .name )}.yml ` }
125+ target = " _blank"
126+ rel = " noopener noreferrer nofollow"
127+ variant = " secondary"
128+ class = " feed-directory__action-btn feed-directory__action-btn--edit"
129+ aria-label = " Edit configuration on GitHub"
130+ title = " Edit configuration on GitHub"
131+ >
132+ <Icon name = " pencil" />
133+ <span >Edit</span >
134+ </LinkButton >
135+ </div >
161136 </div >
162- )}
163- </div >
164- ))}
137+
138+ { ! config .valid_channel_url &&
139+ Object .keys (config .url_parameters || {}).length > 0 && (
140+ <div
141+ class = " feed-directory__item-params"
142+ id = { ` params-${index } ` }
143+ hidden
144+ >
145+ <form class = " feed-directory__params-form" >
146+ { Object .entries (config .url_parameters || {}).map (
147+ ([key , fallback ]) => (
148+ <div class = " feed-directory__param-group" >
149+ <label
150+ for = { ` ${config .domain }-${config .name }-${key } ` }
151+ class = " feed-directory__param-label"
152+ >
153+ { key }
154+ </label >
155+ <input
156+ type = " text"
157+ id = { ` ${config .domain }-${config .name }-${key } ` }
158+ name = { key }
159+ class = " feed-directory__param-input"
160+ value = { config .default_parameters ?.[key ] || " " }
161+ placeholder = { String (fallback )}
162+ data-param-key = { key }
163+ aria-label = { key }
164+ />
165+ </div >
166+ ),
167+ )}
168+ <div class = " feed-directory__params-actions" >
169+ <button
170+ type = " button"
171+ class = " feed-directory__close-btn"
172+ data-close-form
173+ aria-label = " Close configuration form"
174+ >
175+ Close
176+ </button >
177+ </div >
178+ </form >
179+ </div >
180+ )}
181+ </div >
182+ ))
183+ }
165184 </div >
166185</div >
167186
168187<!-- Enhanced functionality with vanilla JavaScript -->
169188<script src =" ./feed-directory.js" ></script >
170189
171-
172190<style >
173191 .feed-directory-container {
174192 margin: 2rem 0;
@@ -267,7 +285,6 @@ const staticFeedUrls = configs.map(config => ({
267285 border-color: hsl(var(--sl-color-accent));
268286 }
269287
270-
271288 .feed-directory__params-form {
272289 display: flex;
273290 flex-direction: column;
@@ -320,7 +337,6 @@ const staticFeedUrls = configs.map(config => ({
320337 border-color: hsl(var(--sl-color-accent));
321338 }
322339
323-
324340 .feed-directory__item {
325341 display: flex;
326342 flex-direction: column;
0 commit comments