Merge pull request #4 from TsukemonoGit/addlink

Addlink
TsukemonoGit · Jun 6, 2024 · 6622666 · 6622666
2 parents 57b7714 + 587eaea
commit 6622666
Show file tree

Hide file tree

Showing 9 changed files with 138 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,12 @@ Nostr Army Knife webExtension
 
   (https://github.com/lucide-icons/lucide/blob/main/LICENSE)
 
+- [open-in-new-rounded icon]
+
+  Apache License Version 2.0, January 2004
+
+  (https://github.com/google/material-design-icons/blob/master/LICENSE)
+
 ## 使い方
 
 release の zip をブラウザの拡張機能ページのパッケージ化されていない拡張機能を読み込むで読み込む

diff --git a/entrypoints/components/Content.tsx b/entrypoints/components/Content.tsx
@@ -5,9 +5,11 @@ import { Accessor, Show } from "solid-js";
 export default function Content({
   content,
   title,
+  link = true,
 }: {
   content: Accessor<string> | string;
   title?: string;
+  link?: boolean;
 }) {
   return (
     <div class={className} style={{ margin: "6px 0" }}>
@@ -19,7 +21,7 @@ export default function Content({
           [{title}]
         </span>
       </Show>
-      <CopyButton text={content} />
+      <CopyButton text={content} link={link} />
     </div>
   );
 }
diff --git a/entrypoints/components/CopyButton.tsx b/entrypoints/components/CopyButton.tsx
@@ -1,13 +1,19 @@
 import { Accessor, Show, createSignal } from "solid-js";
 import Button from "./Button";
 import { className } from "@/util";
+import Link from "./Link";
 
 interface CopyButtonProps {
   text: string | Accessor<string>;
   style?: any;
+  link?: boolean;
 }
 
-export default function CopyButton({ text, style }: CopyButtonProps) {
+export default function CopyButton({
+  text,
+  style,
+  link = true,
+}: CopyButtonProps) {
   const [copied, setCopied] = createSignal(false);
   const copiedIcon = (
     <svg
@@ -73,20 +79,50 @@ export default function CopyButton({ text, style }: CopyButtonProps) {
         {typeof text === "string" ? text : text()}
       </span>
       <Button
+        title={"copy to clipboard"}
         onClick={copy}
         class="nakeCopyButton"
         style={{
           "margin-left": "4px",
-          padding: "0 2px ",
+          padding: "2px ",
           "border-radius": "100%",
-
+          display: "inline-flex",
           "vertical-align": "middle",
         }}
       >
         <Show when={copied()} fallback={<>{copyIcon}</>}>
           <>{copiedIcon}</>
         </Show>
       </Button>
+      <Show when={link === true}>
+        <Link
+          title={"open in njump"}
+          href={`https://njump.me/${typeof text === "string" ? text : text()}`}
+          class={className + " nakeLinkButton"}
+          style={{
+            height: "fit-content",
+            width: "fit-content",
+
+            padding: "2px ",
+            "border-radius": "100%",
+            display: "inline-flex",
+            "vertical-align": "middle",
+          }}
+        >
+          <svg
+            class={className}
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="#FF7375"
+              d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h6q.425 0 .713.288T12 4t-.288.713T11 5H5v14h14v-6q0-.425.288-.712T20 12t.713.288T21 13v6q0 .825-.587 1.413T19 21zM19 6.4L10.4 15q-.275.275-.7.275T9 15t-.275-.7t.275-.7L17.6 5H15q-.425 0-.712-.288T14 4t.288-.712T15 3h5q.425 0 .713.288T21 4v5q0 .425-.288.713T20 10t-.712-.288T19 9z"
+            />
+          </svg>
+        </Link>
+      </Show>
     </div>
   );
 }
diff --git a/entrypoints/components/DecodableContent.tsx b/entrypoints/components/DecodableContent.tsx
@@ -89,6 +89,7 @@ export default function DecodableContent({ content }: { content: string }) {
               <Content
                 content={(decoded()?.data as nip19.ProfilePointer).pubkey}
                 title={"hex"}
+                link={false}
               />
               <RelayHints
                 setRelayHints={setRelayHints}
@@ -132,6 +133,7 @@ export default function DecodableContent({ content }: { content: string }) {
               <Content
                 content={(decoded()?.data as nip19.EventPointer).id}
                 title={"hex"}
+                link={false}
               />
 
               <RelayHints
@@ -169,16 +171,19 @@ export default function DecodableContent({ content }: { content: string }) {
               <Content
                 content={(decoded()?.data as nip19.AddressPointer).identifier}
                 title={"identifier"}
+                link={false}
               />
               <Content
                 content={(
                   decoded()?.data as nip19.AddressPointer
                 ).kind.toString()}
                 title={"kind"}
+                link={false}
               />
               <Content
                 content={(decoded()?.data as nip19.AddressPointer).pubkey}
                 title={"pubkey"}
+                link={false}
               />
 
               <RelayHints
@@ -192,6 +197,7 @@ export default function DecodableContent({ content }: { content: string }) {
                   (decoded()?.data as nip19.AddressPointer).pubkey
                 }:${(decoded()?.data as nip19.AddressPointer).identifier}`}
                 title={"'a' tag"}
+                link={false}
               />
               <hr />
               <Content content={naddr} title={"naddr"} />
@@ -202,16 +208,22 @@ export default function DecodableContent({ content }: { content: string }) {
               <Content
                 content={(decoded()?.data as Uint8Array).toString()}
                 title={"Uint8Array"}
+                link={false}
               />
               <Content
                 content={bytesToHex(decoded()?.data as Uint8Array)}
                 title={"hex"}
+                link={false}
               />
             </>
           </Match>
           <Match when={decoded()?.type === "npub"}>
             <>
-              <Content content={decoded()?.data as string} title={"hex"} />
+              <Content
+                content={decoded()?.data as string}
+                title={"hex"}
+                link={false}
+              />
               <RelayHints
                 setRelayHints={setRelayHints}
                 relayHints={relayHints}
@@ -222,7 +234,11 @@ export default function DecodableContent({ content }: { content: string }) {
           </Match>
           <Match when={decoded()?.type === "note"}>
             <>
-              <Content content={decoded()?.data as string} title={"hex"} />
+              <Content
+                content={decoded()?.data as string}
+                title={"hex"}
+                link={false}
+              />
               <RelayHints
                 setRelayHints={setRelayHints}
                 relayHints={relayHints}

diff --git a/entrypoints/components/HexContent.tsx b/entrypoints/components/HexContent.tsx
@@ -67,7 +67,7 @@ export default function HecContent({ content }: { content: string }) {
       <span class={className} style={{ color: "gray", "font-size": "small" }}>
         if this is a private key:
       </span>
-      <CopyButton text={nsec()} style={{ margin: "0.5em 0" }} />
+      <CopyButton text={nsec()} style={{ margin: "0.5em 0" }} link={false} />
       <CopyButton text={nsecNpub()} style={{ margin: "0.5em 0" }} />
       <CopyButton text={nsecNprofile()} style={{ margin: "0.5em 0" }} />
       <hr style={{ margin: "0.5em 0" }} />

diff --git a/entrypoints/components/Link.tsx b/entrypoints/components/Link.tsx
@@ -0,0 +1,22 @@
+import { className } from "@/util";
+import { JSX } from "solid-js";
+
+interface Link extends JSX.HTMLAttributes<HTMLAnchorElement> {
+  class?: string;
+  href: string;
+  children: any;
+}
+
+export default function Link({ class: classProp, href: href, ...props }: Link) {
+  return (
+    <a
+      class={`${className} ${classProp ?? ""}`}
+      {...props}
+      target="_blank"
+      rel="noreferrer noopener"
+      href={href}
+    >
+      {props.children}
+    </a>
+  );
+}
diff --git a/entrypoints/components/Nip33AtagContent.tsx b/entrypoints/components/Nip33AtagContent.tsx
@@ -29,15 +29,24 @@ export default function Nip33AtagContent({ content }: { content: string }) {
   });
   return (
     <>
-      <Content content={naddr()?.identifier ?? ""} title={"identifier"} />
-      <Content content={naddr()?.kind?.toString() ?? ""} title={"kind"} />
-      <Content content={naddr()?.pubkey ?? ""} title={"pubkey"} />
+      <Content
+        content={naddr()?.identifier ?? ""}
+        title={"identifier"}
+        link={false}
+      />
+      <Content
+        content={naddr()?.kind?.toString() ?? ""}
+        title={"kind"}
+        link={false}
+      />
+      <Content content={naddr()?.pubkey ?? ""} title={"pubkey"} link={false} />
       <Content
         content={`${naddr()?.kind.toString()}:${naddr()?.pubkey}:${
           naddr()?.identifier
         }`}
         title={"'a' tag"}
-      />{" "}
+        link={false}
+      />
       <RelayHints setRelayHints={setRelayHints} relayHints={relayHints} />
       <hr class={`${className} `} style={{ "margin-top": "0.5em" }} />
       <Content content={encodedNaddr} title={"naddr"} />

diff --git a/entrypoints/content/style.css b/entrypoints/content/style.css
@@ -69,6 +69,9 @@
 .nakeCopyButton:hover {
   opacity: 0.75;
 }
+.nakeLinkButton:hover {
+  opacity: 0.75;
+}
 #nakeBatuButton {
   background-color: rgba(0, 0, 0, 0);
 }

diff --git a/entrypoints/popup/style.css b/entrypoints/popup/style.css
@@ -74,3 +74,36 @@ input {
   border-radius: 4px;
   border: 1px solid #aaa;
 }
+
+.nakeLinkButton {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: 0.25s;
+}
+.nakeLinkButton:hover {
+  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.35);
+  border: 1px solid #aaa;
+}
+.nakeLinkButton:focus,
+.nakeLinkButton:focus-visible {
+}
+.nakeLinkButton:active {
+  transform: scale(0.95);
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  .nakeLinkButton {
+    background-color: #f9f9f9;
+  }
+}