repos / neovimcraft

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

commit
e0aba61
parent
19ff16a
author
Eric Bower
date
2023-01-18 20:39:02 +0000 UTC
chore: updated styles
4 files changed,  +94, -37
M src/scripts/static.ts
+49, -18
  1@@ -28,6 +28,24 @@ function onSort(by: keyof Plugin) {
  2   return (a: Plugin, b: Plugin) => sortNum(a.stars, b.stars);
  3 }
  4 
  5+const createAds = () => {
  6+  return `
  7+<div class="ad">
  8+  <div><a href="https://nvim.sh">nvim.sh</a></div>
  9+  <div>Search for plugins in the terminal</div>
 10+</div>
 11+
 12+<div class="ad">
 13+  <div><a href="https://prose.sh">prose.sh</a></div>
 14+  <div>A blog platform for hackers</div>
 15+</div>
 16+<div class="ad">
 17+  <div><a href="https://lists.sh">lists.sh</a></div>
 18+  <div>A microblog for lists</div>
 19+</div>
 20+`;
 21+};
 22+
 23 const createHtmlFile = ({ head, body }: { head: string; body: string }) => {
 24   return `
 25 <!DOCTYPE html>
 26@@ -75,7 +93,7 @@ const createNav = () => {
 27 
 28   return `
 29 <div class="nav">
 30-  <h1 id="logo">
 31+  <h1 class="logo">
 32     <a href="/" class="logo-header">neovimcraft</a>
 33     <a href="https://github.com/neurosnap/neovimcraft" class="flex">
 34       ${createIcon("github")}
 35@@ -90,11 +108,17 @@ const createNav = () => {
 36     <div class="menu-overlay menu-close"></div>
 37     <div class="menu">
 38       <div class="menu-header">
 39-        <h1><a href="/" class="logo-header">neovimcraft</a></h1>
 40+        <h1 class="logo">
 41+          <a href="/" class="logo-header">neovimcraft</a>
 42+          <a href="https://github.com/neurosnap/neovimcraft" class="flex">
 43+            ${createIcon("github")}
 44+          </a>
 45+        </h1>
 46         <div class="menu-btn menu-close"><img src="/menu.svg" alt="menu" /></div>
 47       </div>
 48       <div class="menu-body">
 49         ${linksStr}
 50+        ${createAds()}
 51       </div>
 52     </div>
 53   </div>
 54@@ -134,9 +158,9 @@ const createPluginItem = (plugin: Plugin, tags: Tag[]) => {
 55 
 56   let repoLink = `
 57     <a href=${plugin.link} class="flex">${createIcon("github")}</a>
 58-    <div class="metric-item">${createIcon("star")} <span>${
 59-    nf.format(plugin.stars)
 60-  }</span></div>
 61+    <div class="metric-item">${createIcon("star")} <span>${nf.format(
 62+    plugin.stars
 63+  )}</span></div>
 64     <div class="metric-item">
 65       ${createIcon("alert-circle")} <span>${nf.format(plugin.openIssues)}</span>
 66     </div>`;
 67@@ -155,7 +179,8 @@ const createPluginItem = (plugin: Plugin, tags: Tag[]) => {
 68     </div>
 69   </div>
 70   <div class="date">
 71-    updated ${relativeTimeFromDates(new Date(plugin.updatedAt))}
 72+    <span>created ${relativeTimeFromDates(new Date(plugin.createdAt))} / </span>
 73+    <span>updated ${relativeTimeFromDates(new Date(plugin.updatedAt))}</span>
 74   </div>
 75   <div class="desc">
 76     ${plugin.description}
 77@@ -175,7 +200,10 @@ const createAboutPage = () => {
 78 <title>neovimcraft - about</title>
 79 <meta name="description" content="About neovimcraft" />
 80 <meta property="og:description" content="About neovimcraft" />
 81-<meta property="og:title" content="neovimcraft - about" />`;
 82+<meta property="og:title" content="neovimcraft - about" />
 83+
 84+<script src="/nav.js" type="text/javascript"></script>
 85+`;
 86   const nav = createNav();
 87   const body = `${nav}
 88 <div class="about_container">
 89@@ -236,7 +264,7 @@ const createSearchPage = (data: PluginData, by: keyof Plugin) => {
 90   }, "");
 91   const tagListStr = data.tags.reduce(
 92     (acc, tag) => `${acc}\n${createTag(tag)}`,
 93-    "",
 94+    ""
 95   );
 96   const sortStr = () => {
 97     let str = "";
 98@@ -272,6 +300,7 @@ const createSearchPage = (data: PluginData, by: keyof Plugin) => {
 99     property="og:description"
100     content="Search through our curated neovim plugin directory."
101   />
102+  <script src="/nav.js" type="text/javascript"></script>
103   <script src="/client.js" type="text/javascript"></script>
104 `;
105   const nav = createNav();
106@@ -297,7 +326,7 @@ const createSearchPage = (data: PluginData, by: keyof Plugin) => {
107     ${tagListStr}
108   </div>
109   <div class="rightbar">
110-    <div>Want to search for plugins in the terminal? <a href="https://nvim.sh">https://nvim.sh</a></div>
111+    ${createAds()}
112   </div>
113   <div class="plugins">
114     <div class="plugins_container">
115@@ -376,17 +405,20 @@ const createPluginPage = (plugin: Plugin, tags: Tag[], html: string) => {
116 <meta name="description" content="${plugin.id}: ${plugin.description}" />
117 <meta itemprop="description" content="${plugin.id}: ${plugin.description}" />
118 <meta property="og:description" content="${plugin.id}: ${plugin.description}" />
119-<meta name="twitter:description" content="${plugin.id}: ${plugin.description}" />`;
120+<meta name="twitter:description" content="${plugin.id}: ${plugin.description}" />
121+
122+<script src="/nav.js" type="text/javascript"></script>
123+`;
124   const nav = createNav();
125   const body = `${nav}
126 <div class="plugin_container">
127   <div class="view">
128     <div class="header">
129-      <h1>${plugin.id}</h1>
130+      <h2>${plugin.id}</h2>
131       ${plugin.homepage ? `<a href=${plugin.homepage}>website</a>` : ""}
132-      <a href=${plugin.link} class="flex">${
133-    createIcon("github")
134-  } <span>github</span></a>
135+      <a href=${plugin.link} class="flex">${createIcon(
136+    "github"
137+  )} <span>github</span></a>
138     </div>
139     ${createPluginView(plugin, tags)}
140     ${html}
141@@ -401,11 +433,11 @@ async function render(data: PluginData, htmlData: { [key: string]: string }) {
142     createFile("./static/index.html", createSearchPage(data, "stars")),
143     createFile(
144       "./static/created/index.html",
145-      createSearchPage(data, "createdAt"),
146+      createSearchPage(data, "createdAt")
147     ),
148     createFile(
149       "./static/updated/index.html",
150-      createSearchPage(data, "updatedAt"),
151+      createSearchPage(data, "updatedAt")
152     ),
153     createFile("./static/about/index.html", createAboutPage()),
154   ];
155@@ -414,8 +446,7 @@ async function render(data: PluginData, htmlData: { [key: string]: string }) {
156     const tags = getTags(data.tagDb, plugin.tags);
157     const id = `${plugin.username}/${plugin.repo}`;
158     const html = htmlData[id] || "";
159-    const fname =
160-      `./static/plugin/${plugin.username}/${plugin.repo}/index.html`;
161+    const fname = `./static/plugin/${plugin.username}/${plugin.repo}/index.html`;
162     const page = createPluginPage(plugin, tags, html);
163     files.push(createFile(fname, page));
164   });
M static/client.js
+0, -13
 1@@ -79,9 +79,6 @@ function mustAll(pattern) {
 2 function init() {
 3   const searchEl = must("#search");
 4   const clearSearchEl = must("#search_clear");
 5-  const menuBtnEl = must("#menu-btn");
 6-  const menuEl = must("#menu");
 7-  const menuCloseEl = mustAll(".menu-close");
 8   const pluginsEl = mustAll(".plugin");
 9   const tagsEl = mustAll(".tag");
10 
11@@ -119,16 +116,6 @@ function init() {
12       search(value);
13     });
14   });
15-
16-  menuBtnEl.addEventListener("click", () => {
17-    menu.classList.remove("hidden");
18-  });
19-  menuCloseEl.forEach((el) => {
20-    el.addEventListener("click", () => {
21-      menu.classList.add("hidden");
22-    });
23-  });
24-
25   filter(searchEl.value);
26 }
27 
M static/main.css
+15, -6
 1@@ -148,11 +148,17 @@ img {
 2 }
 3 
 4 .rightbar {
 5-  grid-row: 1;
 6+  grid-row: 1 / 3;
 7   grid-column: 3;
 8   margin-bottom: 5px;
 9-  align-items: center;
10   display: flex;
11+  flex-direction: column;
12+}
13+
14+.ad {
15+  margin: 10px 0;
16+  padding: 10px;
17+  border: 1px solid var(--text-color);
18 }
19 
20 .search_icon {
21@@ -176,6 +182,7 @@ img {
22 }
23 
24 .search_results {
25+  font-size: 12px;
26   margin: 0;
27   margin-top: 5px;
28   margin-bottom: 5px;
29@@ -238,7 +245,7 @@ img {
30 .links {
31   display: flex;
32   justify-content: space-between;
33-  width: 250px;
34+  width: 150px;
35 }
36 
37 .link {
38@@ -303,7 +310,7 @@ img {
39   height: 24px;
40 }
41 
42-#logo {
43+.logo {
44   display: flex;
45   align-items: center;
46 }
47@@ -315,6 +322,7 @@ img {
48 .logo-header {
49   text-decoration: none;
50   color: var(--text-color);
51+  margin-right: 10px;
52 }
53 
54 .logo-header:visited {
55@@ -356,7 +364,7 @@ img {
56 }
57 
58 .date {
59-  font-size: 14px;
60+  font-size: 12px;
61 }
62 
63 .header {
64@@ -366,7 +374,7 @@ img {
65 }
66 
67 .desc {
68-  margin-top: 5px;
69+  margin-top: 8px;
70 }
71 
72 .item_header {
73@@ -376,6 +384,7 @@ img {
74 }
75 
76 .metrics {
77+  font-size: 12px;
78   width: 175px;
79   min-width: 175px;
80   display: flex;
A static/nav.js
+30, -0
 1@@ -0,0 +1,30 @@
 2+function must(pattern) {
 3+  const el = document.querySelector(pattern);
 4+  if (!el) {
 5+    throw new Error(`${pattern} not found`);
 6+  }
 7+  return el;
 8+}
 9+
10+function mustAll(pattern) {
11+  const el = document.querySelectorAll(pattern);
12+  if (!el) {
13+    throw new Error(`${pattern} not found`);
14+  }
15+  return el;
16+}
17+
18+function nav() {
19+  const menuBtnEl = must("#menu-btn");
20+  const menuCloseEl = mustAll(".menu-close");
21+  menuBtnEl.addEventListener("click", () => {
22+    menu.classList.remove("hidden");
23+  });
24+  menuCloseEl.forEach((el) => {
25+    el.addEventListener("click", () => {
26+      menu.classList.add("hidden");
27+    });
28+  });
29+}
30+
31+document.addEventListener("DOMContentLoaded", nav);