- commit
- f6e77e1
- parent
- 3f8c71a
- author
- Eric Bower
- date
- 2023-04-14 15:35:46 +0000 UTC
feat: add username to config lists and allow search
2 files changed,
+64,
-3
+59,
-2
1@@ -159,6 +159,7 @@ const createPluginItem = (plugin: Plugin, tags: Tag[]) => {
2 acc += createTag(tag, false);
3 return acc;
4 }, "");
5+ const dataUsername = plugin.username.toLocaleLowerCase();
6 const dataRepo = plugin.repo.toLocaleLowerCase();
7 const dataDesc = (plugin.description || "").toLocaleLowerCase();
8 const dataTags = tags
9@@ -186,7 +187,7 @@ const createPluginItem = (plugin: Plugin, tags: Tag[]) => {
10 }
11
12 return `
13-<div class="container plugin" data-repo="${dataRepo}" data-desc="${dataDesc}" data-tags="${dataTags}">
14+<div class="container plugin" data-username="${dataUsername}" data-repo="${dataRepo}" data-desc="${dataDesc}" data-tags="${dataTags}">
15 <div class="header">
16 <h2 class="item_header">
17 <a href="/plugin/${plugin.username}/${plugin.repo}">${plugin.repo}</a>
18@@ -208,6 +209,62 @@ const createPluginItem = (plugin: Plugin, tags: Tag[]) => {
19 </div>`;
20 };
21
22+const createConfigItem = (plugin: Plugin, tags: Tag[]) => {
23+ const tagsStr = tags.reduce((acc, tag) => {
24+ acc += createTag(tag, false);
25+ return acc;
26+ }, "");
27+
28+ const dataUsername = plugin.username.toLocaleLowerCase();
29+ const dataRepo = plugin.repo.toLocaleLowerCase();
30+ const dataDesc = (plugin.description || "").toLocaleLowerCase();
31+ const dataTags = tags
32+ .map((t) => t.id)
33+ .join(",")
34+ .toLocaleLowerCase();
35+ const nf = new Intl.NumberFormat("en-US");
36+
37+ let repoLink = `
38+ <a href=${plugin.link} class="flex">${createIcon("github", "github")}</a>
39+ <div class="metric-item">${createIcon("star", "stars")} <span>${
40+ nf.format(
41+ plugin.stars,
42+ )
43+ }</span></div>
44+ <div class="metric-item">
45+ ${createIcon("alert-circle", "issues")} <span>${
46+ nf.format(plugin.openIssues)
47+ }</span>
48+ </div>`;
49+ if (plugin.type === "srht") {
50+ repoLink = `<a href=${plugin.link} class="flex">${
51+ createIcon("srht", "srht")
52+ }</a>`;
53+ }
54+
55+ return `
56+<div class="container plugin" data-username="${dataUsername}" data-repo="${dataRepo}" data-desc="${dataDesc}" data-tags="${dataTags}">
57+ <div class="header">
58+ <h2 class="item_header">
59+ <a href="/plugin/${plugin.username}/${plugin.repo}">${plugin.username}/${plugin.repo}</a>
60+ </h2>
61+ <div class="metrics">
62+ ${repoLink}
63+ </div>
64+ </div>
65+ <div class="date">
66+ <span>created ${relativeTimeFromDates(new Date(plugin.createdAt))} / </span>
67+ <span>updated ${relativeTimeFromDates(new Date(plugin.updatedAt))}</span>
68+ </div>
69+ <div class="desc">
70+ ${plugin.description}
71+ </div>
72+ <div class="tags">
73+ ${tagsStr}
74+ </div>
75+</div>`;
76+};
77+
78 function getTags(tagDb: TagMap, tags: string[]): Tag[] {
79 return tags.map((t) => tagDb[t]).filter(Boolean);
80 }
81@@ -364,7 +421,7 @@ const createSearchPage = (data: PluginData, by: keyof Plugin) => {
82
83 const createSearchConfigPage = (data: PluginData, by: keyof Plugin) => {
84 const pluginsStr = data.plugins.sort(onSort(by)).reduce((acc, plugin) => {
85- const plug = createPluginItem(plugin, []);
86+ const plug = createConfigItem(plugin, []);
87 return `${acc}\n${plug}`;
88 }, "");
89 const sortStr = () => {
+5,
-1
1@@ -35,6 +35,7 @@ function createFilter(pluginsEl) {
2 return;
3 }
4 const search = value.toLocaleLowerCase();
5+ const username = el.dataset.username;
6 const repo = el.dataset.repo;
7 const desc = el.dataset.desc || "";
8 const tags = el.dataset.tags.split(",");
9@@ -45,7 +46,10 @@ function createFilter(pluginsEl) {
10 hasTags = tags.some((tag) => tag === nextSearch);
11 }
12
13- const showEl = repo.includes(search) || desc.includes(search) || hasTags;
14+ const showEl = username.includes(search)
15+ || repo.includes(search)
16+ || desc.includes(search)
17+ || hasTags;
18
19 if (showEl) {
20 el.classList.remove("hidden");