From 00638833b741367abd4796c9f553cb106c9a2c26 Mon Sep 17 00:00:00 2001
From: Robin Huang <robin.j.huang@gmail.com>
Date: Mon, 20 May 2024 14:05:46 -0700
Subject: [PATCH 1/3] Remove unused page.

---
 components/nodes/NodeDetails.tsx      |  7 +++++++
 pages/nodes/publisher-detail/[id].tsx | 12 ------------
 2 files changed, 7 insertions(+), 12 deletions(-)
 delete mode 100644 pages/nodes/publisher-detail/[id].tsx

diff --git a/components/nodes/NodeDetails.tsx b/components/nodes/NodeDetails.tsx
index 9912de0..b5adbe5 100644
--- a/components/nodes/NodeDetails.tsx
+++ b/components/nodes/NodeDetails.tsx
@@ -264,6 +264,13 @@ const NodeDetails = () => {
                                 <span>Edit details</span>
                             </Button>
                         )}
+                        {data.latest_version?.downloadUrl && (
+                            <Button className="flex-shrink-0 px-4 text-white bg-blue-500 rounded whitespace-nowrap text-[16px]">
+                                <Link href={data.latest_version?.downloadUrl}>
+                                    Download Latest
+                                </Link>
+                            </Button>
+                        )}
                     </div>
                 </div>
                 <NodeEditModal
diff --git a/pages/nodes/publisher-detail/[id].tsx b/pages/nodes/publisher-detail/[id].tsx
deleted file mode 100644
index 6d5a7bc..0000000
--- a/pages/nodes/publisher-detail/[id].tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import NodesPublisherDetail from '@/components/nodes/NodesPublisherDetail'
-
-const NodeView = () => {
-    return (
-        <>
-            <NodesPublisherDetail />
-        </>
-    )
-}
-
-export default NodeView

From cada01d5df29d1aa70b5083e2ff1d2288fd51218 Mon Sep 17 00:00:00 2001
From: Robin Huang <robin.j.huang@gmail.com>
Date: Mon, 20 May 2024 14:05:56 -0700
Subject: [PATCH 2/3] Remove unused page.

---
 components/nodes/NodesPublisherDetail.tsx | 138 ----------------------
 1 file changed, 138 deletions(-)
 delete mode 100644 components/nodes/NodesPublisherDetail.tsx

diff --git a/components/nodes/NodesPublisherDetail.tsx b/components/nodes/NodesPublisherDetail.tsx
deleted file mode 100644
index 8701bbf..0000000
--- a/components/nodes/NodesPublisherDetail.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { Button } from 'flowbite-react'
-import NodesCard from './NodesCard'
-import { useRouter } from 'next/router'
-import React from 'react'
-
-export const NodesData = [
-    {
-        id: '1',
-        name: 'TalkingFace',
-        version: 'v4.0',
-        description:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dictum, odio lobortis ultricies interdum, urna lorem fermentum libero, vel accumsan magna purus a lacus. ',
-        node: 'Node Publishing, Inc.',
-        image: '/images/nodesLogo.svg',
-        rating: '4.8 ',
-        downloads: '977k ',
-    },
-]
-const NodesPublisherDetail: React.FC = () => {
-    const router = useRouter()
-
-    const repeatedNodes = Array(3).fill(NodesData[0])
-    return (
-        <div className="container p-6 mx-auto h-[90vh]">
-            <div className="flex items-center cursor-pointer  mb-8">
-                <svg
-                    className="w-4 h-4 text-gray-400 "
-                    aria-hidden="true"
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                >
-                    <path
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        d="m15 19-7-7 7-7"
-                    />
-                </svg>
-                <span
-                    className="text-gray-400 pl-1 text-base  bg-transparent border-none hover:!bg-transparent hover:!border-none focus:!bg-transparent focus:!border-none focus:!outline-none"
-                    onClick={() => router.push('/')}
-                >
-                    <span>Back to Registry</span>
-                </span>
-            </div>
-
-            <div>
-                <div className="flex justify-between">
-                    <h1 className="mb-4 text-[48px] font-bold text-white">
-                        Nodes Makers
-                    </h1>
-                </div>
-                <p className="text-gray-400 text-[20px]">@nodesmakers</p>
-                <div className="flex flex-col my-4 ">
-                    <p className="flex items-center mt-1 text-xs text-center text-gray-400 py-2">
-                        <svg
-                            className="w-6 h-6 "
-                            aria-hidden="true"
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M8 8v8m0-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm8-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 0a4 4 0 0 1-4 4h-1a3 3 0 0 0-3 3"
-                            />
-                        </svg>
-                        <span className="ml-4 text-[18px]">8 nodes</span>
-                    </p>
-                    <p className="flex items-center mt-1 text-xs text-center text-gray-400 align-center  py-2">
-                        <svg
-                            className="w-6 h-6"
-                            aria-hidden="true"
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                stroke="currentColor"
-                                stroke-width="2"
-                                d="M7 17v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3h-4a3 3 0 0 @0-3 3Zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-                            />
-                        </svg>
-                        <span className="ml-4 text-[18px]">
-                            Robin Huang, Yoland Yan
-                        </span>
-                    </p>
-                    <p className="flex items-center mt-1 text-xs text-gray-400  py-2">
-                        <svg
-                            className="w-6 h-6"
-                            aria-hidden="true"
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            fill="none"
-                            viewBox="0 0 24 24"
-                        >
-                            <path
-                                stroke="currentColor"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                                stroke-width="2"
-                                d="M4 10h16m-8-3V4M7 7V4m10 3V4M5 20h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Zm3-7h.01v.01H8V13Zm4 0h.01v.01H12V13Zm4 0h.01v.01H16V13Zm-8 4h.01v.01H8V17Zm4 0h.01v.01H12V17Zm4 0h.01v.01H16V17Z"
-                            />
-                        </svg>
-                        <span className="ml-4 text-[18px]">
-                            Created 5/20/24
-                        </span>
-                    </p>
-                </div>
-
-                <div className="mt-12">
-                    <h2 className="mb-2 text-xl font-semibold text-white text-[20px]">
-                        Your nodes
-                    </h2>
-                </div>
-                <div className="grid gap-4 pt-8 mb-6 lg:mb-5 md:grid-cols-2 lg:grid-cols-3">
-                    {repeatedNodes.map((member, index) => (
-                        <NodesCard key={index} {...member} buttonLink={'#'} />
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default NodesPublisherDetail

From 7eb3451b7b87c2113c16085d9734b9732ed2600a Mon Sep 17 00:00:00 2001
From: Robin Huang <robin.j.huang@gmail.com>
Date: Mon, 20 May 2024 14:39:53 -0700
Subject: [PATCH 3/3] Add copyable code block.

---
 components/CodeBlock/CodeBlock.tsx | 44 ++++++++++++++++++++++++++++++
 components/nodes/NodeDetails.tsx   | 12 ++++++--
 2 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 components/CodeBlock/CodeBlock.tsx

diff --git a/components/CodeBlock/CodeBlock.tsx b/components/CodeBlock/CodeBlock.tsx
new file mode 100644
index 0000000..f28f2e7
--- /dev/null
+++ b/components/CodeBlock/CodeBlock.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react'
+import { IoIosInformationCircle } from 'react-icons/io'
+
+const CopyableCodeBlock = ({ code }) => {
+    const [isCopied, setIsCopied] = useState(false)
+
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(code)
+            setIsCopied(true)
+            setTimeout(() => setIsCopied(false), 2000) // Reset copied state after 2 seconds
+        } catch (err) {
+            console.error('Failed to copy!', err)
+        }
+    }
+
+    return (
+        <div className="relative p-4 bg-gray-800 text-white rounded-lg font-mono text-sm">
+            <div className="flex items-center gap-1">
+                <a
+                    target="_blank"
+                    href="https://www.comfydocs.org/comfy-cli/getting-started#install-cli"
+                    rel="noopener noreferrer"
+                >
+                    <IoIosInformationCircle
+                        className="h-5 w-5"
+                        title="Install Comfy CLI with: npm install -g comfy-cli"
+                    />
+                </a>
+                <pre>{code}</pre>
+                <button
+                    onClick={handleCopy}
+                    className={`absolute top-4 right-4 text-xs py-1 px-2 rounded ${
+                        isCopied ? 'bg-green-500' : 'bg-blue-500'
+                    } hover:bg-blue-700 transition duration-300 ease`}
+                >
+                    {isCopied ? 'Copied!' : 'Copy'}
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default CopyableCodeBlock
diff --git a/components/nodes/NodeDetails.tsx b/components/nodes/NodeDetails.tsx
index b5adbe5..e3681a5 100644
--- a/components/nodes/NodeDetails.tsx
+++ b/components/nodes/NodeDetails.tsx
@@ -7,6 +7,7 @@ import NodeVDrawer from './NodeVDrawer'
 import Link from 'next/link'
 import { NodeEditModal } from './NodeEditModal'
 import { NodeVersion, useGetNode, useListNodeVersions } from 'src/api/generated'
+import CopyableCodeBlock from '../CodeBlock/CodeBlock'
 
 export function formatRelativeDate(dateString: string) {
     const date = new Date(dateString)
@@ -118,8 +119,8 @@ const NodeDetails = () => {
                                     )}
                                 </div>
                             </div>
-                            <div className="flex flex-col mt-6 mb-10 ">
-                                {data.license && (
+                            <div className="flex flex-col mt-6 mb-6 ">
+                                {/* {data.license && (
                                     <p className="flex items-center py-2 mt-1 text-xs text-center text-gray-400">
                                         <svg
                                             className="w-6 h-6 "
@@ -161,7 +162,7 @@ const NodeDetails = () => {
                                             {data.rating} rating
                                         </span>
                                     </p>
-                                )}
+                                )} */}
                                 {data.downloads && (
                                     <p className="flex items-center py-2 mt-1 text-xs text-gray-400">
                                         <svg
@@ -187,6 +188,11 @@ const NodeDetails = () => {
                                     </p>
                                 )}
                             </div>
+                            <div className="mt-5 mb-10">
+                                <CopyableCodeBlock
+                                    code={`comfy node install ${nodeId}`}
+                                />
+                            </div>
                             <div>
                                 <h2 className="mb-2 text-xl font-bold">
                                     Description