feat: suport sider layout crate info

hehehai · Jun 8, 2022 · 5c5d1b5 · 5c5d1b5
1 parent 267a3e2
commit 5c5d1b5
Show file tree

Hide file tree

Showing 11 changed files with 484 additions and 136 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/AttrList.svelte b/src/components/AttrList.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  export let size: string | undefined | null = undefined;
+  export let download: string | number | undefined | null = undefined;
+</script>
+
+{#if size}
+  <div class="mt-2">
+    <div class="eg-repo-size">
+      <a href="/" class="Link--muted">
+        <svg
+          class="octicon octicon-database mr-2"
+          aria-hidden="true"
+          height="16"
+          version="1.1"
+          viewBox="0 0 12 16"
+          width="16"
+        >
+          <path
+            d="M6 15c-3.31 0-6-.9-6-2v-2c0-.17.09-.34.21-.5.67.86 3 1.5 5.79 1.5s5.12-.64 5.79-1.5c.13.16.21.33.21.5v2c0 1.1-2.69 2-6 2zm0-4c-3.31 0-6-.9-6-2V7c0-.11.04-.21.09-.31.03-.06.07-.13.12-.19C.88 7.36 3.21 8 6 8s5.12-.64 5.79-1.5c.05.06.09.13.12.19.05.1.09.21.09.31v2c0 1.1-2.69 2-6 2zm0-4c-3.31 0-6-.9-6-2V3c0-1.1 2.69-2 6-2s6 .9 6 2v2c0 1.1-2.69 2-6 2zm0-5c-2.21 0-4 .45-4 1s1.79 1 4 1 4-.45 4-1-1.79-1-4-1z"
+          />
+        </svg>
+        <span>{size}</span>
+      </a>
+    </div>
+  </div>
+{/if}
+
+{#if download}
+  <div class="mt-2">
+    <div class="eg-repo-size">
+      <a href="/" class="Link--muted">
+        <svg
+          class="octicon octicon-cloud-download mr-2"
+          aria-hidden="true"
+          height="16"
+          version="1.1"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02 5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7 1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81 0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16 5.06 14.08 4 12 4z"
+          />
+        </svg>
+        <strong>{download}</strong>
+        <span> downloads</span>
+      </a>
+    </div>
+  </div>
+{/if}
diff --git a/src/components/Box.svelte b/src/components/Box.svelte
@@ -2,7 +2,7 @@
   import type { CrateIntro } from '~/contentScripts/interface';
 
   export let loading = false;
-  export let title = 'Dependencies';
+  export let title = 'dependencies';
   export let style = '';
   export let dependencies: CrateIntro[] = [];
 </script>
@@ -12,38 +12,36 @@
     class="d-flex js-position-sticky border-top-0 border-bottom p-2 flex-justify-between color-bg-default rounded-top-2"
     style="position: sticky; {style}"
   >
-    <h3 class="Box-title p-2">{title}</h3>
+    <h3 class="Box-title py-2 pr-2">{title}</h3>
     <div class="cratehub-header BtnGroup">
       <slot />
     </div>
   </div>
   <ol class="cratehub-deps markdown-body" class:cratehub-loading={loading}>
-    {#if dependencies}
-      {#if dependencies.length === 0}
-        <li class="cratehub-empty">
-          No dependencies!
-          <g-emoji
-            class="g-emoji"
-            alias="tada"
-            fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png"
-          >
-            🎉
-          </g-emoji>
+    {#if !dependencies || dependencies.length === 0}
+      <li class="cratehub-empty">
+        No dependencies!
+        <g-emoji
+          class="g-emoji"
+          alias="tada"
+          fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png"
+        >
+          🎉
+        </g-emoji>
+      </li>
+    {:else}
+      {#each dependencies as dep}
+        <li>
+          <a href={dep?.repository}>
+            {dep?.name}
+          </a>
+          {#if dep?.description}
+            {dep?.description}
+          {:else}
+            <em>No description.</em>
+          {/if}
         </li>
-      {:else}
-        {#each dependencies as dep}
-          <li>
-            <a href={dep?.repository}>
-              {dep?.name}
-            </a>
-            {#if dep?.description}
-              {dep?.description}
-            {:else}
-              <em>No description.</em>
-            {/if}
-          </li>
-        {/each}
-      {/if}
+      {/each}
     {/if}
   </ol>
 </div>
diff --git a/src/components/CopyInput.svelte b/src/components/CopyInput.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  export let value: string = '';
+</script>
+
+<div class="input-group">
+  <input
+    type="text"
+    class="form-control input-monospace input color-bg-subtle"
+    data-autoselect=""
+    {value}
+    aria-label={value}
+  />
+  <div class="input-group-button">
+    <clipboard-copy
+      {value}
+      aria-label="Copy to clipboard"
+      class="btn btn js-clipboard-copy tooltipped-no-delay ClipboardButton js-clone-url-http"
+      data-copy-feedback="Copied!"
+      data-tooltip-direction="n"
+      tabindex="0"
+      role="button"
+    >
+      <svg
+        aria-hidden="true"
+        height="16"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        data-view-component="true"
+        class="octicon octicon-copy js-clipboard-copy-icon d-inline-block"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"
+        />
+        <path
+          fill-rule="evenodd"
+          d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"
+        />
+      </svg>
+      <svg
+        aria-hidden="true"
+        height="16"
+        viewBox="0 0 16 16"
+        version="1.1"
+        width="16"
+        data-view-component="true"
+        class="octicon octicon-check js-clipboard-check-icon color-fg-success d-inline-block d-sm-none"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+        />
+      </svg>
+    </clipboard-copy>
+  </div>
+</div>
diff --git a/src/components/DetailList.svelte b/src/components/DetailList.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+  export let title = '';
+  export let workspaces: string[] = [];
+
+  $: total = workspaces.length;
+</script>
+
+<details data-view-component="true">
+  <summary data-view-component="true">
+    <h5 class="d-inline">{title}</h5>
+    <span
+      title={total.toString()}
+      data-view-component="true"
+      class="Counter ml-1">{total}</span
+    >
+  </summary>
+  <div data-view-component="true">
+    <div data-view-component="true" class="Box Box--condensed mt-3">
+      <ul>
+        {#each workspaces as workspace}
+          <li
+            data-view-component="true"
+            class="Box-row d-flex flex-column flex-md-row"
+          >
+            <div
+              data-view-component="true"
+              class="d-flex flex-justify-start col-12 col-lg-9"
+            >
+              <svg
+                aria-hidden="true"
+                height="16"
+                viewBox="0 0 16 16"
+                version="1.1"
+                width="16"
+                data-view-component="true"
+                class="octicon octicon-package color-fg-muted"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M8.878.392a1.75 1.75 0 00-1.756 0l-5.25 3.045A1.75 1.75 0 001 4.951v6.098c0 .624.332 1.2.872 1.514l5.25 3.045a1.75 1.75 0 001.756 0l5.25-3.045c.54-.313.872-.89.872-1.514V4.951c0-.624-.332-1.2-.872-1.514L8.878.392zM7.875 1.69a.25.25 0 01.25 0l4.63 2.685L8 7.133 3.245 4.375l4.63-2.685zM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432L2.5 5.677zm6.25 8.271l4.625-2.683a.25.25 0 00.125-.216V5.677L8.75 8.432v5.516z"
+                />
+              </svg>
+              <a
+                href="{workspace}"
+                rel="nofollow"
+                data-skip-pjax=""
+              >
+                <span class="px-1 text-bold">
+                  {workspace}
+                </span>
+              </a>
+            </div>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </div>
+</details>
diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts
@@ -3,12 +3,16 @@ import { onMessage } from 'webext-bridge';
 import elementReady from 'element-ready';
 import { gitHubInjection } from '~/util/github-injection';
 import Deps from './views/Deps.svelte';
-import { getCargoTomlURL, hasCargoToml, isCargoToml } from '~/logic/cargo-toml';
+import Crate from './views/Crate.svelte';
+import { getCargoJson, getCargoTomlURL, hasCargoToml, isCargoToml } from '~/logic/cargo-toml';
 
-// Firefox `browser.tabs.executeScript()` requires scripts return a primitive value.
-const init = async () => {
-  console.info('[vitesse-webext] Hello world from content script');
+interface InitProps {
+  isCargoToml: boolean;
+  cargoTomlURL?: string;
+  cargoData?: any;
+}
 
+const initDeps = async (props: InitProps) => {
   // If this fragment exists, then the list is deferred.
   // Adapted from https://github.com/sindresorhus/refined-github/blob/b141596/source/github-events/on-file-list-update.ts
   const ajaxFiles = await elementReady('#files ~ include-fragment[src*="/file-list/"]');
@@ -20,24 +24,62 @@ const init = async () => {
     });
   }
 
-  if (
-    document.querySelector('.cratehub-header')
-    || !(isCargoToml() || hasCargoToml())
-  ) {
-    return;
+  const target = document.querySelector('.repository-content')
+  if (!target) {
+    return
   }
 
-  // communication example: send previous tab title from background page
-  onMessage('tab-prev', ({ data }) => {
-    console.log(`[vitesse-webext] Navigate from page "${data.title}"`);
+  new Deps({
+    props,
+    target
   });
+}
 
-  new Deps({
-    props: {
-      isCargoToml: isCargoToml(),
-      cargoTomlURL: getCargoTomlURL(),
-    },
-    target: document.querySelector('.repository-content')!
+const initCrate = async (props: InitProps) => {
+  const target = document.querySelector('.Layout-sidebar .rgh-sticky-sidebar')
+  if (!target) {
+    return
+  }
+  new Crate({
+    props,
+    target
+  });
+}
+
+// Firefox `browser.tabs.executeScript()` requires scripts return a primitive value.
+const init = async () => {
+  console.info('[vitesse-webext] Hello world from content script');
+
+  const isCargoTomlVal = isCargoToml();
+  const hasCargoTomlVal = hasCargoToml();
+
+  if (!(isCargoTomlVal || hasCargoTomlVal)) {
+    return;
+  }
+
+  const cargoTomlURL = getCargoTomlURL()
+  const cargoData = await getCargoJson(isCargoTomlVal, cargoTomlURL);
+
+  if (!cargoData) {
+    return;
+  }
+
+  const props = {
+      isCargoToml: isCargoTomlVal,
+      cargoTomlURL: cargoTomlURL,
+      cargoData,
+  }
+
+  if (!document.querySelector('.cratehub-crate-row')) {
+    await initCrate(props);
+  }
+  if (!document.querySelector('.cratehub-header')) {
+    await initDeps(props);
+  }
+
+   // communication example: send previous tab title from background page
+   onMessage('tab-prev', ({ data }) => {
+    console.log(`[vitesse-webext] Navigate from page "${data.title}"`);
   });
 }