Implemented repository information

src/assets/javascripts/index.ts

@@ -76,6 +76,7 @@ import {
   isSearchDumpMessage,
   isSearchResultMessage
 } from "./workers"
+import { renderSource } from "templates"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -227,6 +228,74 @@ function setupWorkers(config: Config) {
   return [search$, searchMessage$] as const
 }
 
+/**
+ * Yes, this is a super hacky implementation. Needs clean up.
+ */
+function repository() {
+  const el = getElement<HTMLAnchorElement>("[data-md-source][href]")
+  console.log(el)
+  if (!el)
+    return EMPTY
+
+  const data = localStorage.getItem("repository")
+  if (data) {
+    const x = JSON.parse(data)
+    return of(x)
+  }
+
+  // TODO: do correct rounding, see GitHub
+  function format(value: number) {
+    if (value > 10000)
+      return `${(value / 1000).toFixed(0)}k`
+    else if (value > 1000)
+      return `${(value / 1000).toFixed(1)}k`
+    return `${value}`
+  }
+
+  const [, user, repo] = el.href.match(/^.+github\.com\/([^\/]+)\/?([^\/]+)?.*$/)
+
+  // Show repo stats
+  if (user && repo) {
+    return ajax({
+      url: `https://api.github.com/repos/${user}/${repo}`,
+      responseType: "json"
+    })
+      .pipe(
+        map(({ status, response }) => {
+          if (status === 200) {
+            const { stargazers_count, forks_count } = response
+            return [
+              `${format(stargazers_count)} Stars`,
+              `${format(forks_count)} Forks`
+            ]
+          }
+          return []
+        }),
+        tap(data => localStorage.setItem("repository", JSON.stringify(data)))
+      )
+
+  // Show user or organization stats
+  } else if (user) {
+    return ajax({
+      url: `https://api.github.com/users/${user}`,
+      responseType: "json"
+    })
+      .pipe(
+        map(({ status, response }) => {
+          if (status === 200) {
+            const { public_repos } = response
+            return [
+              `${format(public_repos)} Repositories`
+            ]
+          }
+          return []
+        }),
+        tap(data => localStorage.setItem("repository", JSON.stringify(data)))
+      )
+  }
+  return of([])
+}
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -248,6 +317,17 @@ export function initialize(config: unknown) {
     searchMessage$
   ] = setupWorkers(config)
 
+  // TODO: WIP repo rendering
+  repository().subscribe(facts => {
+    if (facts.length) {
+      const repo = getElement(".md-source__repository")!
+      repo.dataset.mdState = "done"
+      repo.appendChild(
+        renderSource(facts)
+      )
+    }
+  })
+
   /* ----------------------------------------------------------------------- */
 
   /* Create component map observable */

src/assets/javascripts/templates/index.ts

@@ -21,3 +21,4 @@
  */
 
 export * from "./search"
+export * from "./source"

src/assets/javascripts/templates/source/index.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2016-2019 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { h, toHTMLElement } from "extensions"
+
+/* ----------------------------------------------------------------------------
+ * Data
+ * ------------------------------------------------------------------------- */
+
+/**
+ * CSS classes
+ */
+const css = {
+  facts: "md-source__facts",
+  fact:  "md-source__fact"
+}
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Render source facts
+ *
+ * @param facts - Source facts
+ *
+ * @return HTML element
+ */
+export function renderSource(
+  facts: any // TODO: add typings
+): HTMLElement {
+  return toHTMLElement(
+    <ul class={css.facts}>
+      {facts.map((fact: any) => <li class={css.fact}>{fact}</li>)}
+    </ul>
+  )
+}