repos / neovimcraft

commit

f39f940

parent

f39f940

author

Eric Bower

date

2021-07-19 02:08:58 +0000 UTC

init

 1@@ -0,0 +1,20 @@
 2+module.exports = {
 3+	root: true,
 4+	parser: '@typescript-eslint/parser',
 5+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 6+	plugins: ['svelte3', '@typescript-eslint'],
 7+	ignorePatterns: ['*.cjs'],
 8+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 9+	settings: {
10+		'svelte3/typescript': () => require('typescript')
11+	},
12+	parserOptions: {
13+		sourceType: 'module',
14+		ecmaVersion: 2019
15+	},
16+	env: {
17+		browser: true,
18+		es2017: true,
19+		node: true
20+	}
21+};

 1@@ -0,0 +1,10 @@
 2+.DS_Store
 3+node_modules
 4+/.svelte-kit
 5+/package
 6+.envrc
 7+.eslintcache
 8+build
 9+src/lib/db.json
10+src/lib/markdown.json
11+src/lib/html.json

1@@ -0,0 +1 @@
2+_

1@@ -0,0 +1,4 @@
2+#!/bin/sh
3+. "$(dirname "$0")/_/husky.sh"
4+
5+npx lint-staged

1@@ -0,0 +1 @@
2+engine-strict=true

1@@ -0,0 +1,4 @@
2+.svelte-kit/**
3+static/**
4+build/**
5+node_modules/**

1@@ -0,0 +1,6 @@
2+{
3+	"singleQuote": true,
4+    "trailingComma": 'all',
5+    "arrowParens": 'always',
6+	"printWidth": 100
7+}

 1@@ -0,0 +1,21 @@
 2+MIT License
 3+
 4+Copyright (c) 2021 Eric Bower
 5+
 6+Permission is hereby granted, free of charge, to any person obtaining a copy
 7+of this software and associated documentation files (the "Software"), to deal
 8+in the Software without restriction, including without limitation the rights
 9+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+copies of the Software, and to permit persons to whom the Software is
11+furnished to do so, subject to the following conditions:
12+
13+The above copyright notice and this permission notice shall be included in all
14+copies or substantial portions of the Software.
15+
16+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+SOFTWARE.

 1@@ -0,0 +1,46 @@
 2+# neovim-awesome
 3+
 4+A site dedicated to finding the best neovim plugins.
 5+
 6+## Developing
 7+
 8+You need to add a couple environment variables related to using the github api:
 9+
10+```
11+export GITHUB_ACCESS_TOKEN='xxx'
12+export GITHUB_USERNAME='my-user'
13+```
14+
15+To run the scraper
16+
17+```bash
18+yarn process
19+```
20+
21+To convert markdown files to html
22+
23+```bash
24+yarn transform
25+```
26+
27+Once you've created a project and installed dependencies with `yarn`, start a development server:
28+
29+```bash
30+yarn dev
31+```
32+
33+## Building
34+
35+Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
36+
37+```bash
38+yarn build
39+```
40+
41+> You can preview the built app with `yarn preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
42+
43+## Deploy
44+
45+```bash
46+yarn deploy
47+```

 1@@ -0,0 +1,52 @@
 2+{
 3+  "name": "neovim-awesome",
 4+  "version": "0.0.0",
 5+  "scripts": {
 6+    "dev": "svelte-kit dev --host 0.0.0.0",
 7+    "build:clean": "rm -rf build",
 8+    "build": "svelte-kit build",
 9+    "preview": "svelte-kit preview --host 0.0.0.0",
10+    "check": "svelte-check --tsconfig ./tsconfig.json",
11+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
12+    "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
13+    "format": "prettier --write --plugin-search-dir=. .",
14+    "prepare": "husky install",
15+    "process": "node --loader ts-node/esm src/process.ts",
16+    "transform": "node --loader ts-node/esm src/transform.ts",
17+    "upload:clean": "gsutil -m rm -r gs://neovim.erock.io/*",
18+    "upload": "gsutil -m -h 'Cache-Control:private, max-age=0, no-transform' rsync -r ./build gs://neovim.erock.io",
19+    "deploy": "yarn build:clean && yarn build && yarn upload:clean && yarn upload"
20+  },
21+  "devDependencies": {
22+    "@sveltejs/adapter-static": "^1.0.0-next.13",
23+    "@sveltejs/kit": "next",
24+    "@types/marked": "^2.0.4",
25+    "@types/node": "^16.3.3",
26+    "@types/node-fetch": "^2.5.11",
27+    "@typescript-eslint/eslint-plugin": "^4.19.0",
28+    "@typescript-eslint/parser": "^4.19.0",
29+    "eslint": "^7.22.0",
30+    "eslint-config-prettier": "^8.1.0",
31+    "eslint-plugin-svelte3": "^3.2.0",
32+    "husky": ">=6",
33+    "just-throttle": "^2.3.1",
34+    "lint-staged": ">=10",
35+    "marked": "^2.1.3",
36+    "node-fetch": "^2.6.1",
37+    "prettier": "~2.2.1",
38+    "prettier-plugin-svelte": "^2.2.0",
39+    "query-string": "^7.0.1",
40+    "svelte": "^3.34.0",
41+    "svelte-check": "^2.0.0",
42+    "svelte-preprocess": "^4.0.0",
43+    "ts-node": "^10.0.0",
44+    "tslib": "^2.0.0",
45+    "typescript": "^4.0.0"
46+  },
47+  "type": "module",
48+  "lint-staged": {
49+    "*.js": "eslint --cache --fix",
50+    "*.{js,css,md}": "prettier --write"
51+  },
52+  "dependencies": {}
53+}

 1@@ -0,0 +1,14 @@
 2+<!DOCTYPE html>
 3+<html lang="en" data-theme="theme-dark">
 4+  <head>
 5+    <title>404 - not found</title>
 6+    <meta charset="utf-8" />
 7+    <link rel="icon" href="/favicon.ico" />
 8+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 9+    <link rel="stylesheet" type="text/css" href="/main.css" />
10+    %svelte.head%
11+  </head>
12+  <body>
13+    <div>404 - not found</div>
14+  </body>
15+</html>

 1@@ -0,0 +1,13 @@
 2+<!DOCTYPE html>
 3+<html lang="en" data-theme="theme-dark">
 4+  <head>
 5+    <meta charset="utf-8" />
 6+    <link rel="icon" href="/favicon.ico" />
 7+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 8+    <link rel="stylesheet" type="text/css" href="/main.css" />
 9+    %svelte.head%
10+  </head>
11+  <body>
12+    <div id="svelte">%svelte.body%</div>
13+  </body>
14+</html>

1@@ -0,0 +1 @@
2+/// <reference types="@sveltejs/kit" />

 1@@ -0,0 +1,14 @@
 2+<script lang="ts">
 3+  type Icon = 'github' | 'alert-circle' | 'git-branch' | 'star' | 'x-circle' | 'users' | 'search';
 4+  export let icon: Icon;
 5+</script>
 6+
 7+<img class="icon" src="/{icon}.svg" alt={icon} />
 8+
 9+<style>
10+  .icon {
11+    width: 24px;
12+    height: 24px;
13+    margin-right: 5px;
14+  }
15+</style>

 1@@ -0,0 +1,23 @@
 2+import type { Tag, Plugin, PluginMap, TagMap } from './types';
 3+
 4+function getTagsDb(plist: Plugin[]): TagMap {
 5+  const tagsDb: TagMap = {};
 6+  plist.forEach((plugin) => {
 7+    plugin.tags.forEach((tag) => {
 8+      if (!tagsDb[tag]) {
 9+        tagsDb[tag] = { id: tag, count: 0 };
10+      }
11+      tagsDb[tag].count += 1;
12+    });
13+  });
14+  return tagsDb;
15+}
16+
17+export function derivePluginData(
18+  pluginDb: PluginMap,
19+): { plugins: Plugin[]; tags: Tag[]; tagDb: TagMap } {
20+  const plugins = Object.values(pluginDb).sort((a, b) => b.stars - a.stars);
21+  const tagDb = getTagsDb(plugins);
22+  const tags = Object.values(tagDb).sort((a, b) => b.count - a.count);
23+  return { plugins, tags, tagDb };
24+}

 1@@ -0,0 +1,86 @@
 2+<script lang="ts">
 3+  import qs from 'query-string';
 4+  import { goto } from '$app/navigation';
 5+
 6+  import type { Plugin, Tag } from './types';
 7+  import TagView from './tag.svelte';
 8+  import Icon from './icon.svelte';
 9+  import Tooltip from '$lib/tooltip.svelte';
10+
11+  export let plugin: Plugin;
12+  export let tags: Tag[];
13+  export let html: string = '<div>readme not found</div>';
14+
15+  function onSearch(curSearch: string) {
16+    const query = qs.parseUrl(window.location.search);
17+    const s = encodeURIComponent(curSearch);
18+    query.query.search = s;
19+    goto(`/${qs.stringifyUrl(query)}`);
20+  }
21+</script>
22+
23+<div class="meta">
24+  <div class="tags_view">
25+    {#each tags as tag}
26+      <TagView {tag} {onSearch} />
27+    {/each}
28+  </div>
29+  <div class="metrics">
30+    <Tooltip tip="stars" bottom>
31+      <div class="metric"><Icon icon="star" /> <span>{plugin.stars}</span></div>
32+    </Tooltip>
33+    <Tooltip tip="open issues" bottom>
34+      <div class="metric"><Icon icon="alert-circle" /> <span>{plugin.openIssues}</span></div>
35+    </Tooltip>
36+    <Tooltip tip="subscribers" bottom>
37+      <div class="metric"><Icon icon="users" /> <span>{plugin.subscribers}</span></div>
38+    </Tooltip>
39+    <Tooltip tip="forks" bottom>
40+      <div class="metric"><Icon icon="git-branch" /> <span>{plugin.forks}</span></div>
41+    </Tooltip>
42+  </div>
43+  <div class="install">
44+    <h3>packer</h3>
45+    <pre><code>require('packer').startup(function()
46+  use '{plugin.id}'
47+end)</code></pre>
48+  </div>
49+  <div class="install">
50+    <h3>paq</h3>
51+    <pre><code>require "paq" &lcub; 
52+  '{plugin.id}'
53+&rcub;</code></pre>
54+  </div>
55+  <hr />
56+</div>
57+{@html html}
58+
59+<style>
60+  :global(img) {
61+    max-width: 100%;
62+    height: auto;
63+  }
64+
65+  .meta {
66+    margin-bottom: 20px;
67+  }
68+
69+  .metrics {
70+    display: flex;
71+    justify-content: space-between;
72+  }
73+
74+  .metric {
75+    display: flex;
76+    align-items: center;
77+    cursor: pointer;
78+  }
79+
80+  .tags_view {
81+    margin-bottom: 10px;
82+  }
83+
84+  .install {
85+    margin-top: 10px;
86+  }
87+</style>

 1@@ -0,0 +1,36 @@
 2+<script lang="ts">
 3+  import type { Tag } from './types';
 4+
 5+  function findColor(tag: Tag) {
 6+    if (tag.count === 1) return 'pink';
 7+    if (tag.count > 1 && tag.count <= 3) return 'yellow';
 8+    if (tag.count > 3 && tag.count <= 10) return 'orange';
 9+    if (tag.count > 10 && tag.count <= 15) return 'green';
10+    return 'purple';
11+  }
12+
13+  export let tag: Tag;
14+  export let onSearch: (t: string) => any = (_: string) => {};
15+</script>
16+
17+<span class="tag {findColor(tag)}" on:click={() => onSearch(`tag:${tag.id}`)}>
18+  {tag.id} x {tag.count}
19+</span>
20+
21+<style>
22+  .tag {
23+    padding: 5px;
24+    margin: 5px 5px 5px 0;
25+    border: 1px solid black;
26+    white-space: pre-wrap;
27+    word-break: break-word;
28+    display: inline-block;
29+    cursor: pointer;
30+    color: var(--primary-color);
31+    font-size: 0.8rem;
32+  }
33+
34+  .tag:hover {
35+    background-color: var(--highlight-color);
36+  }
37+</style>

 1@@ -0,0 +1,83 @@
 2+<script>
 3+  export let tip = '';
 4+  export let top = false;
 5+  export let right = false;
 6+  export let bottom = false;
 7+  export let left = false;
 8+  export let active = false;
 9+  export let color = '#757575';
10+
11+  let style = `background-color: ${color};`;
12+</script>
13+
14+<div class="tooltip-wrapper">
15+  <span class="tooltip-slot">
16+    <slot />
17+  </span>
18+  <div class="tooltip" class:active class:left class:right class:bottom class:top>
19+    {#if tip}
20+      <div class="default-tip" {style}>{tip}</div>
21+    {:else}
22+      <slot name="custom-tip" />
23+    {/if}
24+  </div>
25+</div>
26+
27+<style>
28+  .tooltip-wrapper {
29+    position: relative;
30+    display: inline-block;
31+  }
32+  .tooltip {
33+    position: absolute;
34+    font-family: inherit;
35+    display: inline-block;
36+    white-space: nowrap;
37+    color: inherit;
38+    opacity: 0;
39+    visibility: hidden;
40+    transition: opacity 150ms, visibility 150ms;
41+  }
42+
43+  .default-tip {
44+    display: inline-block;
45+    padding: 8px 16px;
46+    border-radius: 6px;
47+    color: inherit;
48+  }
49+
50+  .tooltip.top {
51+    left: 50%;
52+    transform: translate(-50%, -100%);
53+    margin-top: -8px;
54+  }
55+
56+  .tooltip.bottom {
57+    left: 50%;
58+    bottom: 0;
59+    transform: translate(-50%, 100%);
60+    margin-bottom: -8px;
61+  }
62+
63+  .tooltip.left {
64+    left: 0;
65+    transform: translateX(-100%);
66+    margin-left: -8px;
67+  }
68+
69+  .tooltip.right {
70+    right: 0;
71+    transform: translateX(100%);
72+    margin-right: -8px;
73+  }
74+
75+  .tooltip.active {
76+    opacity: 1;
77+    visibility: initial;
78+  }
79+
80+  .tooltip-slot:hover + .tooltip {
81+    opacity: 1;
82+    visibility: initial;
83+  }
84+</style>

 1@@ -0,0 +1,26 @@
 2+export interface Plugin {
 3+  id: string;
 4+  name: string;
 5+  username: string;
 6+  repo: string;
 7+  link: string;
 8+  tags: string[];
 9+  homepage: string;
10+  branch: string;
11+  openIssues: number;
12+  watchers: number;
13+  forks: number;
14+  stars: number;
15+  subscribers: number;
16+  network: number;
17+  description: string;
18+}
19+
20+export type PluginMap = { [key: string]: Plugin };
21+
22+export interface Tag {
23+  id: string;
24+  count: number;
25+}
26+
27+export type TagMap = { [key: string]: Tag };

  1@@ -0,0 +1,195 @@
  2+import fetch from 'node-fetch';
  3+import marked from 'marked';
  4+import fs from 'fs';
  5+import util from 'util';
  6+
  7+import type { Plugin } from './lib/types';
  8+
  9+const writeFile = util.promisify(fs.writeFile);
 10+const accessToken = process.env.GITHUB_ACCESS_TOKEN || '';
 11+const accessUsername = process.env.GITHUB_USERNAME || '';
 12+
 13+interface Props {
 14+  username: string;
 15+  repo: string;
 16+  branch: string;
 17+}
 18+
 19+async function fetchReadme({ username, repo, branch }: Props): Promise<Resp<string>> {
 20+  const url = `https://raw.githubusercontent.com/${username}/${repo}/${branch}/README.md`;
 21+  console.log(`Fetching ${url}`);
 22+  const res = await fetch(url);
 23+  if (res.ok) {
 24+    const data = await res.text();
 25+    return { ok: true, data };
 26+  }
 27+
 28+  return {
 29+    ok: false,
 30+    data: {
 31+      status: res.status,
 32+      error: new Error(`Could not load ${url}`),
 33+    },
 34+  };
 35+}
 36+
 37+async function fetchRepo({ username, repo }: Props): Promise<Resp<{ [key: string]: any }>> {
 38+  const url = `https://api.github.com/repos/${username}/${repo}`;
 39+  console.log(`Fetching ${url}`);
 40+  const token = Buffer.from(`${accessUsername}:${accessToken}`).toString('base64');
 41+  const res = await fetch(url, {
 42+    headers: { Authorization: `Basic ${token}` },
 43+  });
 44+  const data = await res.json();
 45+  if (res.ok) {
 46+    return {
 47+      ok: true,
 48+      data,
 49+    };
 50+  }
 51+
 52+  return {
 53+    ok: false,
 54+    data: {
 55+      status: res.status,
 56+      error: new Error(`Could not load ${url}`),
 57+    },
 58+  };
 59+}
 60+
 61+interface ApiSuccess<D = any> {
 62+  ok: true;
 63+  data: D;
 64+}
 65+
 66+interface ApiFailure {
 67+  ok: false;
 68+  data: { status: number; error: Error };
 69+}
 70+
 71+type Resp<D> = ApiSuccess<D> | ApiFailure;
 72+
 73+async function fetchGithubData(props: Props): Promise<Resp<any>> {
 74+  const repo = await fetchRepo(props);
 75+  if (!repo.ok) return repo;
 76+
 77+  const readme = await fetchReadme({
 78+    username: props.username,
 79+    repo: props.repo,
 80+    branch: repo.data.default_branch,
 81+  });
 82+  if (!readme.ok) return readme;
 83+
 84+  return {
 85+    ok: true,
 86+    data: {
 87+      readme: readme.data,
 88+      repo: repo.data,
 89+    },
 90+  };
 91+}
 92+
 93+async function fetchMarkdown() {
 94+  const response = await fetch(
 95+    'https://raw.githubusercontent.com/rockerBOO/awesome-neovim/main/README.md',
 96+  );
 97+  const text = await response.text();
 98+  return text;
 99+}
100+
101+const createPlugin = (p: Partial<Plugin> = {}): Plugin => {
102+  return {
103+    id: '',
104+    name: '',
105+    username: '',
106+    repo: '',
107+    link: '',
108+    tags: [],
109+    homepage: '',
110+    description: '',
111+    branch: 'main',
112+    openIssues: 0,
113+    watchers: 0,
114+    forks: 0,
115+    stars: 0,
116+    subscribers: 0,
117+    network: 0,
118+    ...p,
119+  };
120+};
121+
122+function sanitizeTag(tag: string) {
123+  if (tag === '(requires neovim 0.5)') return 'neovim-0.5';
124+  if (tag === 'treesitter supported colorschemes') return 'treesitter-colorschemes';
125+  return tag.toLocaleLowerCase().replace(/\s/g, '-');
126+}
127+
128+async function processMarkdown(text: string) {
129+  const data: Plugin[] = [];
130+  const tree = marked.lexer(text);
131+  let heading = '';
132+  tree.forEach((token) => {
133+    if (token.type === 'heading') {
134+      heading = token.text.toLocaleLowerCase();
135+    }
136+
137+    if (token.type === 'list') {
138+      token.items.forEach((t) => {
139+        (t as any).tokens.forEach((tt: any) => {
140+          if (!tt.tokens) return;
141+          if (heading === 'contents') return;
142+          const plugin = createPlugin({ tags: [sanitizeTag(heading)] });
143+          tt.tokens.forEach((a: any) => {
144+            if (a.type === 'link') {
145+              plugin.link = a.href;
146+              const href = a.href
147+                .replace('https://github.com/', '')
148+                .replace('http://github.com', '');
149+              const d = href.split('/');
150+              plugin.username = d[0];
151+              plugin.repo = d[1];
152+              plugin.id = `${d[0]}/${d[1]}`;
153+            }
154+          });
155+          if (!plugin.link.includes('github.com')) return;
156+          data.push(plugin);
157+        });
158+      });
159+    }
160+  });
161+
162+  const plugins: { [key: string]: Plugin } = {};
163+  const markdown: { [key: string]: string } = {};
164+  for (let i = 0; i < data.length; i += 1) {
165+    const d = data[i];
166+    const result = await fetchGithubData(d);
167+    if (result.ok) {
168+      const resp = result.data;
169+      const id = `${d.username}/${d.repo}`;
170+
171+      markdown[id] = resp.readme;
172+      plugins[id] = createPlugin({
173+        id,
174+        username: d.username,
175+        repo: d.repo,
176+        name: d.name,
177+        link: d.link,
178+        tags: d.tags,
179+        homepage: resp.repo.homepage,
180+        branch: resp.repo.default_branch,
181+        openIssues: resp.repo.open_issues_count,
182+        watchers: resp.repo.watchers_count,
183+        forks: resp.repo.forks,
184+        stars: resp.repo.stargazers_count,
185+        subscribers: resp.repo.subscribers_count,
186+        network: resp.repo.network_count,
187+        description: resp.repo.description,
188+      });
189+    }
190+  }
191+
192+  await writeFile('./src/lib/db.json', JSON.stringify({ plugins }));
193+  await writeFile('./src/lib/markdown.json', JSON.stringify({ markdown }));
194+}
195+
196+fetchMarkdown().then(processMarkdown).catch(console.error);

  1@@ -0,0 +1,281 @@
  2+<script context="module" lang="ts">
  3+  export const prerender = true;
  4+
  5+  import { derivePluginData } from '$lib/plugin-data';
  6+  import * as db from '$lib/db.json';
  7+
  8+  export async function load() {
  9+    const pluginDb = db.plugins as any;
 10+    const { plugins, tags } = derivePluginData(pluginDb);
 11+
 12+    return {
 13+      props: {
 14+        plugins,
 15+        tags,
 16+      },
 17+    };
 18+  }
 19+</script>
 20+
 21+<script lang="ts">
 22+  import qs from 'query-string';
 23+  import { goto } from '$app/navigation';
 24+  import { page } from '$app/stores';
 25+  import type { Plugin, Tag } from '$lib/types';
 26+  import TagView from '$lib/tag.svelte';
 27+  import Icon from '$lib/icon.svelte';
 28+  import Tooltip from '$lib/tooltip.svelte';
 29+
 30+  let timer: NodeJS.Timeout;
 31+  const debounce = (fn: (v: string) => any) => {
 32+    return (event: any) => {
 33+      clearTimeout(timer);
 34+      timer = setTimeout(() => {
 35+        fn(event.target.value);
 36+      }, 250);
 37+    };
 38+  };
 39+
 40+  function onSearch(curSearch: string) {
 41+    if (curSearch) {
 42+      const query = qs.parseUrl(window.location.search);
 43+      const s = encodeURIComponent(curSearch);
 44+      query.query.search = s;
 45+      goto(`/${qs.stringifyUrl(query)}`, {
 46+        replaceState: true,
 47+        noscroll: true,
 48+        keepfocus: true,
 49+      });
 50+    } else {
 51+      const query = qs.parseUrl(window.location.search);
 52+      delete query.query.search;
 53+      goto(`/${qs.stringifyUrl(query)}`, { replaceState: true, noscroll: true, keepfocus: true });
 54+    }
 55+  }
 56+
 57+  function clearSearch() {
 58+    goto('/', {
 59+      replaceState: true,
 60+      noscroll: true,
 61+      keepfocus: true,
 62+    });
 63+    document.getElementById('search').focus();
 64+  }
 65+
 66+  function filterPlugins({ search, plugins }: { search: string; plugins: Plugin[] }): Plugin[] {
 67+    if (!search) return plugins;
 68+
 69+    const onFilter = (plugin: Plugin) => {
 70+      if (search.includes('tag:')) {
 71+        const nextSearch = search.replace('tag:', '');
 72+        return plugin.tags.some((tag) => tag === nextSearch);
 73+      }
 74+      return plugin.id.toLocaleLowerCase().includes(search);
 75+    };
 76+
 77+    return plugins.filter(onFilter);
 78+  }
 79+
 80+  let search = '';
 81+  page.subscribe(({ query }) => {
 82+    search = decodeURIComponent(query.get('search') || '');
 83+  });
 84+
 85+  export let plugins: Plugin[] = [];
 86+  export let tags: Tag[] = [];
 87+  $: results = filterPlugins({ search, plugins });
 88+</script>
 89+
 90+<div class="container">
 91+  <div class="intro">
 92+    <h1 id="logo">
 93+      Neovim Awesome
 94+      <a href="https://github.com/neurosnap/neovim-awesome" target="_blank">
 95+        <Icon icon="github" />
 96+      </a>
 97+    </h1>
 98+  </div>
 99+
100+  <div class="search_view">
101+    <span class="search_icon"><Icon icon="search" /></span>
102+    <input
103+      id="search"
104+      on:keyup={debounce(onSearch)}
105+      value={search}
106+      placeholder="search to find a plugin"
107+    />
108+    {#if search}
109+      <span class="clear_search_icon" on:click={clearSearch}>
110+        <Icon icon="x-circle" />
111+      </span>
112+    {/if}
113+  </div>
114+
115+  <div class="tags_view">
116+    {#each tags as tag}
117+      <TagView {tag} {onSearch} />
118+    {/each}
119+  </div>
120+  <div class="plugins_view">
121+    <div class="plugins_list">
122+      {#each results as plugin}
123+        <div class="plugin">
124+          <div class="plugin_top">
125+            <h2 class="plugin_item_header">
126+              <a href="/plugin/{plugin.username}/{plugin.repo}">{plugin.repo}</a>
127+            </h2>
128+            <div class="plugin_metrics">
129+              <Tooltip tip="stars" bottom>
130+                <div class="metric"><Icon icon="star" /> <span>{plugin.stars}</span></div>
131+              </Tooltip>
132+              <Tooltip tip="open issues" bottom>
133+                <div class="metric">
134+                  <Icon icon="alert-circle" /> <span>{plugin.openIssues}</span>
135+                </div>
136+              </Tooltip>
137+            </div>
138+          </div>
139+          <div class="plugin_desc">
140+            {plugin.description}
141+          </div>
142+        </div>
143+      {/each}
144+    </div>
145+  </div>
146+</div>
147+
148+<svelte:head>
149+  <title>Neovim Awesome - Plugin Search</title>
150+</svelte:head>
151+
152+<style>
153+  .search_view {
154+    grid-column: 2;
155+    grid-row: 1;
156+    position: relative;
157+  }
158+
159+  .search_icon {
160+    position: absolute;
161+    top: 15px;
162+    left: 0;
163+  }
164+
165+  .clear_search_icon {
166+    position: absolute;
167+    top: 15px;
168+    right: 0;
169+    cursor: pointer;
170+  }
171+
172+  #search {
173+    width: calc(100% - 60px);
174+    height: 47px;
175+    padding-left: 30px;
176+    padding-right: 30px;
177+  }
178+
179+  .container {
180+    height: 100vh;
181+    display: grid;
182+    grid-template-columns: minmax(250px, 400px) minmax(350px, 600px);
183+    grid-template-rows: 50px 1fr;
184+    column-gap: 10px;
185+  }
186+
187+  .intro {
188+    padding: 0 10px 0 10px;
189+    grid-column: 1;
190+    grid-row: 1;
191+  }
192+
193+  #logo {
194+    display: flex;
195+    align-items: center;
196+  }
197+
198+  #logo > a {
199+    margin-left: 15px;
200+  }
201+
202+  .tags_view {
203+    grid-column: 1;
204+    grid-row: 2;
205+    padding: 0 10px;
206+    height: calc(100vh - 50px);
207+    overflow-y: scroll;
208+  }
209+
210+  .plugin {
211+    display: flex;
212+    flex-direction: column;
213+    padding: 15px;
214+    height: 110px;
215+    border-bottom: 1px solid var(--primary-color);
216+  }
217+
218+  .plugin_top {
219+    display: flex;
220+    align-items: center;
221+    margin-bottom: 5px;
222+  }
223+
224+  .plugin_desc {
225+    margin-top: 5px;
226+  }
227+
228+  .plugin_item_header {
229+    flex: 1;
230+    display: flex;
231+    align-items: center;
232+  }
233+
234+  .plugin_metrics {
235+    width: 150px;
236+    min-width: 150px;
237+    display: flex;
238+    justify-content: space-between;
239+  }
240+
241+  .metric {
242+    display: flex;
243+    justify-content: center;
244+    align-items: center;
245+    cursor: pointer;
246+  }
247+
248+  .plugins_view {
249+    display: flex;
250+    align-items: center;
251+    flex-direction: column;
252+    grid-column: 2;
253+    grid-row: 2;
254+    height: calc(100vh - 50px);
255+  }
256+
257+  .plugins_list {
258+    width: 100%;
259+    overflow-y: auto;
260+    overflow-x: hidden;
261+  }
262+
263+  @media only screen and (max-width: 700px) {
264+    .container {
265+      grid-template-columns: 1fr;
266+    }
267+
268+    #logo,
269+    .tags_view {
270+      display: none;
271+    }
272+
273+    .search_view {
274+      grid-column: 1;
275+      padding: 0 10px;
276+    }
277+
278+    .plugins_view {
279+      grid-column: 1;
280+    }
281+  }
282+</style>

 1@@ -0,0 +1,15 @@
 2+import type { Plugin } from '$lib/types';
 3+import * as db from '$lib/db.json';
 4+import * as pluginHtml from '$lib/html.json';
 5+import { derivePluginData } from '$lib/plugin-data';
 6+
 7+export async function get({ params }) {
 8+  const { username, repo } = params;
 9+  const id = `${username}/${repo}`;
10+  const plugin = db.plugins[id] as Plugin;
11+  const { tagDb } = derivePluginData(db.plugins);
12+  const html = pluginHtml.html[id];
13+  const tags = plugin.tags.map((t) => tagDb[t]).filter(Boolean);
14+
15+  return { body: { plugin, html, tags } };
16+}

 1@@ -0,0 +1,82 @@
 2+<script context="module" lang="ts">
 3+  export const prerender = true;
 4+
 5+  import type { LoadInput } from '@sveltejs/kit';
 6+
 7+  export async function load({ page, fetch }: LoadInput) {
 8+    const { username, repo } = page.params;
 9+    const url = `/plugin/${username}/${repo}.json`;
10+    const res = await fetch(url);
11+
12+    if (res.ok) {
13+      return {
14+        props: await res.json(),
15+      };
16+    }
17+
18+    return {
19+      status: res.status,
20+      error: new Error(`Could not load ${url}`),
21+    };
22+  }
23+</script>
24+
25+<script lang="ts">
26+  import type { Plugin, Tag } from '$lib/types';
27+  import PluginView from '$lib/plugin.svelte';
28+  import Icon from '$lib/icon.svelte';
29+
30+  export let plugin: Plugin;
31+  export let tags: Tag[];
32+  export let html: string;
33+</script>
34+
35+<svelte:head>
36+  <title>
37+    {plugin.id}: {plugin.description}
38+  </title>
39+  <meta property="og:title" content={plugin.id} />
40+  <meta name="twitter:title" content={plugin.id} />
41+  <meta itemprop="name" content={plugin.id} />
42+
43+  <meta name="description" content="{plugin.id}: {plugin.description}" />
44+  <meta itemprop="description" content="{plugin.id}: {plugin.description}" />
45+  <meta property="og:description" content="{plugin.id}: {plugin.description}" />
46+  <meta name="twitter:description" content="{plugin.id}: {plugin.description}" />
47+</svelte:head>
48+
49+<div class="container">
50+  <div class="view">
51+    <div class="header">
52+      <h1>{plugin.id}</h1>
53+      {#if plugin.homepage}<a href={plugin.homepage} target="_blank">website</a>{/if}
54+      <a href={plugin.link} target="_blank"><Icon icon="github" /> <span>github</span></a>
55+    </div>
56+    <PluginView {plugin} {tags} {html} />
57+  </div>
58+</div>
59+
60+<style>
61+  .container {
62+    display: flex;
63+    justify-content: center;
64+    width: 100%;
65+  }
66+
67+  .view {
68+    max-width: 800px;
69+    width: 95%;
70+    padding: 0 10px 30px 10px;
71+  }
72+
73+  .header {
74+    display: flex;
75+    align-items: center;
76+  }
77+
78+  .header > a {
79+    margin-left: 15px;
80+    display: flex;
81+    align-items: center;
82+  }
83+</style>

 1@@ -0,0 +1,49 @@
 2+import fs from 'fs';
 3+import util from 'util';
 4+import marked from 'marked';
 5+
 6+import type { Plugin } from './lib/types';
 7+
 8+const writeFile = util.promisify(fs.writeFile);
 9+const readFile = util.promisify(fs.readFile);
10+
11+async function clean() {
12+  const file = await readFile('./src/lib/db.json', 'utf-8');
13+  const db = JSON.parse(file.toString());
14+  const markdownFile = await readFile('./src/lib/markdown.json', 'utf-8');
15+  const markdownDb = JSON.parse(markdownFile.toString());
16+
17+  const plugins = Object.values(db.plugins);
18+  const nextDb = {};
19+  plugins.forEach((plugin: Plugin) => {
20+    console.log(`processing ${plugin.id}`);
21+    marked.use({
22+      walkTokens: (token) => {
23+        const domain = 'https://github.com';
24+        const pre = `${domain}/${plugin.username}/${plugin.repo}/blob/${plugin.branch}`;
25+
26+        if (token.type === 'link' || token.type === 'image') {
27+          if (token.href && !token.href.startsWith('http') && !token.href.startsWith('#')) {
28+            token.href = `${pre}/${token.href.replace('./', ``)}`;
29+          }
30+        } else if (token.type === 'html') {
31+          token.text = '';
32+          // token.text = token.text.replace(/\.\//g, `${pre}/`);
33+        }
34+      },
35+    });
36+
37+    const markdown = markdownDb.markdown[plugin.id];
38+    if (!markdown) return;
39+    const html = marked(markdown);
40+    nextDb[plugin.id] = html;
41+  });
42+
43+  try {
44+    await writeFile('./src/lib/html.json', JSON.stringify({ html: nextDb }));
45+  } catch (err) {
46+    console.error(err);
47+  }
48+}
49+
50+clean().catch(console.error);

1@@ -0,0 +1 @@
2+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f2f2f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

1@@ -0,0 +1 @@
2+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f2f2f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-branch"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>

1@@ -0,0 +1 @@
2+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f2f2f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>

 1@@ -0,0 +1,91 @@
 2+:root[data-theme='theme-light'] {
 3+  --primary-color: #eee;
 4+  --highlight-color: #0000ee;
 5+  --highlight-secondary: #551a8b;
 6+  --text-color: #080808;
 7+  --bg-color: #ffffff;
 8+}
 9+
10+:root[data-theme='theme-dark'] {
11+  --primary-color: #414558;
12+  --highlight-color: #8be9fd;
13+  --highlight-secondary: #bd93f9;
14+  --text-color: #f2f2f2;
15+  --bg-color: #282a36;
16+  --yellow: #ffff80;
17+  --pink: #ff80bf;
18+  --orange: #ffca80;
19+  --green: #50fa7b;
20+}
21+
22+.green {
23+  background-color: var(--green);
24+}
25+
26+.yellow {
27+  background-color: var(--yellow);
28+}
29+
30+.pink {
31+  background-color: var(--pink);
32+}
33+
34+.orange {
35+  background-color: var(--orange);
36+}
37+
38+.purple {
39+  background-color: var(--highlight-secondary);
40+}
41+
42+body {
43+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
44+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
45+  background-color: var(--bg-color);
46+  color: var(--text-color);
47+  width: 100%;
48+  height: 100%;
49+  font-size: 16px;
50+  padding: 0;
51+  margin: 0;
52+  overflow-x: hidden;
53+}
54+
55+a {
56+  color: var(--highlight-color);
57+}
58+
59+a:visited {
60+  color: var(--highlight-secondary);
61+}
62+
63+h1,h2,h3,h4,h5,h6 {
64+  margin: 0;
65+  padding: 0;
66+}
67+
68+pre {
69+  padding: 15px;
70+  background-color: var(--primary-color);
71+  border-radius: 3px;
72+  overflow-x: auto;
73+}
74+
75+code {
76+  background-color: var(--primary-color);
77+}
78+
79+input {
80+  border: 0;
81+  outline: none !important;
82+  background-color: var(--bg-color);
83+  color: var(--highlight-color);
84+  border-bottom: 1px solid var(--highlight-color);
85+  font-size: 1.5rem;
86+}
87+
88+input:focus {
89+  border: 0;
90+  border-bottom: 1px solid var(--highlight-secondary);
91+  color: var(--highlight-secondary);
92+}

1@@ -0,0 +1 @@
2+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f2f2f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>

1@@ -0,0 +1 @@
2+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f2f2f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>

1@@ -0,0 +1 @@
2+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f2f2f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>

1@@ -0,0 +1 @@
2+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f2f2f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

 1@@ -0,0 +1,25 @@
 2+import preprocess from 'svelte-preprocess';
 3+import adapter from '@sveltejs/adapter-static';
 4+
 5+/** @type {import('@sveltejs/kit').Config} */
 6+const config = {
 7+  // Consult https://github.com/sveltejs/svelte-preprocess
 8+  // for more information about preprocessors
 9+  preprocess: preprocess(),
10+
11+  kit: {
12+    // hydrate the <div id="svelte"> element in src/app.html
13+    target: '#svelte',
14+    adapter: adapter({
15+      // default options are shown
16+      pages: 'build',
17+      assets: 'build',
18+      fallback: '404.html',
19+    }),
20+    prerender: {
21+      force: true,
22+    },
23+  },
24+};
25+
26+export default config;

 1@@ -0,0 +1,30 @@
 2+{
 3+	"compilerOptions": {
 4+		"moduleResolution": "node",
 5+		"module": "es2020",
 6+		"lib": ["es2020"],
 7+		"target": "es2019",
 8+		/**
 9+			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
10+			to enforce using \`import type\` instead of \`import\` for Types.
11+			*/
12+		"importsNotUsedAsValues": "error",
13+		"isolatedModules": true,
14+		"resolveJsonModule": true,
15+		/**
16+			To have warnings/errors of the Svelte compiler at the correct position,
17+			enable source maps by default.
18+			*/
19+		"sourceMap": true,
20+		"esModuleInterop": true,
21+		"skipLibCheck": true,
22+		"forceConsistentCasingInFileNames": true,
23+		"baseUrl": ".",
24+		"allowJs": true,
25+		"checkJs": true,
26+		"paths": {
27+			"$lib/*": ["src/lib/*"]
28+		}
29+	},
30+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
31+}