Highlight last ,

- Change codebox cta text when editing
drips-network · Dec 9, 2024 · 5bf1399 · 5bf1399
1 parent d8a6f45
commit 5bf1399
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/lib/components/code-box/code-box.svelte b/src/lib/components/code-box/code-box.svelte
@@ -12,6 +12,7 @@
   export let repoUrl: string;
   export let defaultBranch = 'main';
   export let highlight: [number | null, number | null] = [null, null];
+  export let ctaText: string = 'Add to your repo';
 
   let headerElem: HTMLElement | undefined;
 
@@ -28,10 +29,11 @@
   $: displayCode = highlight.some((v) => v === null)
     ? sanitizedCode
     : insertTextAtIndices(sanitizedCode, {
-        [highlight[0] as number]: '<span class="typo-text-diff-additive">',
-        [highlight[1] as number]: '</span>',
+        [highlight[0] as number]: '<mark class="typo-text-diff-additive">',
+        [highlight[1] as number]: '</mark>',
       });
 
+  // $: displayCode, console.log('displayCode', displayCode)
   let copySuccess = false;
 
   async function copyClipboard(text: string) {
@@ -67,7 +69,7 @@
   {#if repoUrl.includes('github')}
     <footer class="absolute bottom-4 right-4">
       <Button variant="primary" icon={ArrowBoxUpRight} href={gitHubProposalUrl} target="_blank">
-        Add to your repo</Button
+        {ctaText}</Button
       >
     </footer>
   {/if}

diff --git a/src/lib/flows/claim-project-flow/steps/add-ethereum-address/add-ethereum-address.svelte b/src/lib/flows/claim-project-flow/steps/add-ethereum-address/add-ethereum-address.svelte
@@ -50,6 +50,7 @@
   $: description = editing
     ? 'To verify you are the owner of this project, please edit your FUNDING.json file with your Ethereum address to the default branch of your repository.'
     : 'To verify you are the owner of this project, please add a FUNDING.json file with your Ethereum address to the default branch of your repository. ';
+  $: codeBoxCta = editing ? 'Edit on GitHub' : undefined;
 
   async function loadFundingJson() {
     const { ownerName, repoName } = $context.project?.source ?? unreachable();
@@ -142,6 +143,7 @@
     path="./FUNDING.json"
     {code}
     {highlight}
+    ctaText={codeBoxCta}
   />
   <Checkbox bind:checked label="I added the FUNDING.json file to the root of my repo." />
   <svelte:fragment slot="left-actions">

diff --git a/src/lib/flows/claim-project-flow/steps/add-ethereum-address/drips-json-template.ts b/src/lib/flows/claim-project-flow/steps/add-ethereum-address/drips-json-template.ts
@@ -23,7 +23,7 @@ export const getChangedTemplate = (
   const end = asJSON.lastIndexOf('}');
   // TODO: can we make this magic string based of the actual content?
   const start =
-    end - '    "": {\n      "ownedBy": ""\n    }\n  }\n'.length - network.length - address.length;
+    end - '},    "": {\n      "ownedBy": ""\n    }\n  }\n'.length - network.length - address.length;
 
   return [asJSON, [start, end]];
 };