- commit
- e0aba61
- parent
- 19ff16a
- author
- Eric Bower
- date
- 2023-01-18 20:39:02 +0000 UTC
chore: updated styles
4 files changed,
+94,
-37
+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 });
+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
+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;
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);