repos / neovimcraft

website that makes it easy to find neovim plugins
git clone https://github.com/neurosnap/neovimcraft.git

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
M src/scripts/static.ts
+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 = () => {
M static/client.js
+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");