Add documentation links to various components

biplobsd · Nov 3, 2023 · 8e9eab7 · 8e9eab7
1 parent ef1a3de
commit 8e9eab7
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 9 deletions.
diff --git a/src/components/Docs_Link.svelte b/src/components/Docs_Link.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import QuestionCircleIcon from "./icons/Question_circle_Icon.svelte";
+  export let href: string;
+</script>
+
+<span class="tooltip tooltip-right" data-tip="Read docs">
+  <a class="link-hover" target="_blank" rel="noreferrer" {href}>
+    <QuestionCircleIcon />
+  </a>
+</span>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -5,6 +5,7 @@
   import { onMount } from "svelte";
   import GithubMark from "src/assets/icons/github-mark.png";
   import GithubMarkWhite from "src/assets/icons/github-mark-white.png";
+  import { docs } from "src/utils/docs";
 
   let isLight = false;
 
@@ -20,7 +21,7 @@
     class="btn btn-xs normal-case"
     target="_blank"
     rel="noreferrer"
-    href={REPO_URL}
+    href={docs.README}
   >
     <img
       class="w-4 h-4"

diff --git a/src/components/api/Select_Account.svelte b/src/components/api/Select_Account.svelte
@@ -15,6 +15,8 @@
   import Item from "./Item.svelte";
   import axios from "axios";
   import type { PrimaryChannel } from "src/utils/types";
+  import DocsLink from "../Docs_Link.svelte";
+  import { docs } from "src/utils/docs";
 
   export let primaryChannel: PrimaryChannel;
   export let isRunning: boolean;
@@ -136,7 +138,9 @@
   }
 </script>
 
-<div class="font-bold">Account</div>
+<div class="font-bold flex items-center gap-1">
+  Account <DocsLink href={docs.connectAccount} />
+</div>
 <div
   class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box"
 >

diff --git a/src/components/data/Zip_Reader.svelte b/src/components/data/Zip_Reader.svelte
@@ -9,6 +9,8 @@
   import { ChannelRawSchema } from "src/utils/schema";
   import qs from "qs";
   import toast from "svelte-french-toast";
+  import DocsLink from "../Docs_Link.svelte";
+  import { docs } from "src/utils/docs";
 
   export let channelsIdsTakeoutSave: (channelIDs: string[]) => void;
   let files: FileList | null = null;
@@ -121,7 +123,9 @@
 </script>
 
 <div class="space-y-2 my-2 form-control">
-  <div class="font-bold text-sm">Takeout import</div>
+  <div class="font-bold text-sm flex items-center gap-1">
+    Takeout import <DocsLink href={docs.googleTakeout} />
+  </div>
   <div class="relative w-full h-full">
     {#if isLoading}
       <div

diff --git a/src/components/icons/Question_circle_Icon.svelte b/src/components/icons/Question_circle_Icon.svelte
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class="w-4 h-4"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
+  />
+</svg>
diff --git a/src/components/pages/Home.svelte b/src/components/pages/Home.svelte
@@ -20,6 +20,8 @@
   import Timer from "../Timer.svelte";
   import { channelPathsSchema } from "src/utils/schema";
   import ZipReader from "../data/Zip_Reader.svelte";
+  import DocsLink from "../Docs_Link.svelte";
+  import { docs } from "src/utils/docs";
 
   let channelPaths: string[] = [];
   let xpathValues: XPathModel | undefined = undefined;
@@ -437,7 +439,9 @@
 
 {#if isRightSiteNow}
   <div class="space-y-2">
-    <div class="font-bold">Data</div>
+    <div class="font-bold flex gap-1 items-center">
+      Data <DocsLink href={docs.dataSection} />
+    </div>
     <div
       class="collapse collapse-arrow border border-base-300 bg-base-100 rounded-box"
     >
@@ -585,7 +589,9 @@
     </div>
     <div class="w-[17rem] space-y-2">
       <div class="capitalize flex justify-between">
-        <div class="font-bold">Actions</div>
+        <div class="font-bold flex items-center gap-1">
+          Actions <DocsLink href={docs.action} />
+        </div>
         {#if actionName !== ""}
           <div
             transition:blur

diff --git a/src/components/setting/Mode_Switch.svelte b/src/components/setting/Mode_Switch.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import { MODE_DEFAULT } from "src/utils/default";
+  import { docs } from "src/utils/docs";
   import { modeWritable, type MODE } from "src/utils/storage";
   import { onMount } from "svelte";
+  import DocsLink from "../Docs_Link.svelte";
 
   let localMode: MODE = MODE_DEFAULT;
 
@@ -12,8 +14,10 @@
   });
 </script>
 
-<div class="capitalize font-bold tracking-wider text-base !mt-0">
-  Select Mode
+<div
+  class="capitalize font-bold tracking-wider text-base !mt-0 flex items-center gap-1"
+>
+  Select Mode <DocsLink href={docs.selectMode} />
 </div>
 <div class="form-control !py-1 !my-0 hover:bg-base-200 rounded-md">
   <label class="label !py-0 cursor-pointer">

diff --git a/src/components/setting/api/API_Delay.svelte b/src/components/setting/api/API_Delay.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+  import DocsLink from "src/components/Docs_Link.svelte";
   import { API_REQ_DELAY_DEFAULT, MODE_DEFAULT } from "src/utils/default";
+  import { docs } from "src/utils/docs";
   import { apiReqDelayWritable } from "src/utils/storage";
   import { modeWritable, type MODE } from "src/utils/storage";
   import { onMount } from "svelte";
@@ -19,7 +21,10 @@
 
 <div class="form-control w-full max-w-xs !my-0">
   <label class="label">
-    <span class="label-text">API delay per request</span>
+    <p class="flex items-center gap-1">
+      <span class="label-text">API delay per request</span>
+      <DocsLink href={docs.apiDelay} />
+    </p>
     <input
       disabled={localMode !== "api"}
       type="number"

diff --git a/src/components/setting/xpath/Update_Xpath.svelte b/src/components/setting/xpath/Update_Xpath.svelte
@@ -12,6 +12,8 @@
   import log from "src/utils/logger";
   import toast from "svelte-french-toast";
   import { fetchXPathUpdate } from "src/popup/helper";
+  import DocsLink from "src/components/Docs_Link.svelte";
+  import { docs } from "src/utils/docs";
   let xpathValuesString: string = "";
   let isLoadingSave = false;
   let isErrorSave = false;
@@ -101,7 +103,9 @@
   {/if}
   <div class="form-control">
     <div class="label">
-      <span class="label-text">All XPath</span>
+      <span class="label-text flex items-center gap-1"
+        >All XPath <DocsLink href={docs.updateXPathValue} /></span
+      >
     </div>
     <textarea
       bind:value={xpathValuesString}

diff --git a/src/utils/docs.ts b/src/utils/docs.ts
@@ -0,0 +1,15 @@
+export const docs = {
+  README: "https://github.com/biplobsd/yst/blob/main/README.md",
+  dataSection:
+    "https://github.com/biplobsd/yst/blob/main/README.md#data-section",
+  googleTakeout:
+    "https://github.com/biplobsd/yst/blob/main/README.md#google-takeout",
+  action: "https://github.com/biplobsd/yst/blob/main/README.md#actions",
+  updateXPathValue:
+    "https://github.com/biplobsd/yst/blob/main/README.md#update-xpath-value",
+  selectMode: "https://github.com/biplobsd/yst/blob/main/README.md#select-mode",
+  apiDelay:
+    "https://github.com/biplobsd/yst/blob/main/README.md#api-delay-per-request",
+  connectAccount:
+    "https://github.com/biplobsd/yst/blob/main/README.md#connect-your-account",
+};