make the docs accessible from the tool

README.md

@@ -1,6 +1,6 @@
 # "Color Buddy" an interactive color palette development Tool
 
-This is the code repo for Color Buddy.
+This is the code repo for Color Buddy. You can see docs for the language in the public/lang-docs.md file.
 
 ## SETUP
 

src/lib/LintDocs.test.ts

@@ -35,11 +35,11 @@ ${examples}
 
   `;
 
-  await fs.writeFile("./lang-docs.md", newDocs.trim());
+  await fs.writeFile("./public/lang-docs.md", newDocs.trim());
 }
 
 test("Docs have not changed", async () => {
   await buildDocs();
-  const docs = await fs.readFile("./lang-docs.md", "utf-8");
+  const docs = await fs.readFile("./public/lang-docs.md", "utf-8");
   expect(docs).toMatchSnapshot();
 });

src/linting/ExplanationViewer.svelte

@@ -3,6 +3,8 @@
   import colorStore from "../stores/color-store";
   import type { LintResult } from "../lib/ColorLint";
 
+  import { dealWithFocusEvent } from "../lib/utils";
+
   export let check: LintResult;
 
   type ParseBlock = { content: string; type: "text" | "color" };
@@ -53,15 +55,23 @@
       <span>{block.content}</span>
     {:else}
       <button
-        on:click={() => {
+        on:click|stopPropagation={(e) => {
           const hexes = colors.map((x) => x.toHex().toLowerCase());
           const idx = hexes.findIndex((x) => x === block.content.toLowerCase());
-          if (idx === -1) return;
-          focusStore.setColors([idx]);
+          focusStore.setColors(
+            dealWithFocusEvent(e, idx, $focusStore.focusedColors)
+          );
         }}
         style={`background-color: ${block.content}; top: -3px`}
         class="rounded-full w-3 h-3 ml-1 mr-1 inline-block cursor-pointer relative"
       ></button>
     {/if}
   {/each}
 </div>
+
+<!-- on:click={() => {
+          const hexes = colors.map((x) => x.toHex().toLowerCase());
+          const idx = hexes.findIndex((x) => x === block.content.toLowerCase());
+          if (idx === -1) return;
+          focusStore.setColors([idx]);
+        }} -->

src/linting/LintCustomizationModal.svelte

@@ -115,6 +115,7 @@
           >
             Clone this lint
           </button>
+          <a class={buttonStyle} target="_blank" href="./lang-docs.md">Docs</a>
         </div>
       </div>