Download files with more descriptive file name. (#22)

* Download files with more descriptive file name.

* Remove imports.

* Prettier.

.github/workflows/secret-scanning.yml

@@ -1,19 +1,19 @@
 name: Secret Scanning
 on:
-  push:
-    branches:
-      - main
-  pull_request:
+    push:
+        branches:
+            - main
+    pull_request:
 
 jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-    - name: Secret Scanning
-      uses: trufflesecurity/trufflehog@main
-      with:
-        extra_args: --only-verified
+    test:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+            - name: Secret Scanning
+              uses: trufflesecurity/trufflehog@main
+              with:
+                  extra_args: --only-verified

README.md

@@ -6,7 +6,6 @@ Registry React Frontend [Github](https://github.com/Comfy-Org/registry-web)
 
 Registry CLI [Github](https://github.com/yoland68/comfy-cli)
 
-
 ## Getting Started
 
 ### Set up IDE
@@ -45,3 +44,9 @@ This generates react queries that you can use in your Components.
 #### Production
 
 Make a PR to the `main` branch. Once merged, Vercel will deploy to https://comfyregistry.org
+
+### CORS
+
+To enable CORS on the google cloud storage bucket, reference the `cors.json` file. More info [here](https://cloud.google.com/storage/docs/cross-origin#cors-components).
+
+`gcloud storage buckets update gs://comfy-registry --cors-file=cors.json`

components/nodes/NodeDetails.tsx

@@ -1,10 +1,10 @@
 import Image from 'next/image'
 import { useRouter } from 'next/router'
 import React, { useState } from 'react'
+import download from 'downloadjs'
 import { Button, Spinner } from 'flowbite-react'
 import nodesLogo from '../../public/images/nodesLogo.svg'
 import NodeVDrawer from './NodeVDrawer'
-import Link from 'next/link'
 import { NodeEditModal } from './NodeEditModal'
 import {
     NodeVersion,
@@ -40,6 +40,17 @@ export function formatRelativeDate(dateString: string) {
     }
 }
 
+const downloadFile = async (url: string, filename: string) => {
+    try {
+        console.log('downloading file from:', url)
+        const response = await fetch(url)
+        const blob = await response.blob()
+        download(blob, filename, 'application/gzip')
+    } catch (error) {
+        console.error('Error downloading file:', error)
+    }
+}
+
 const NodeDetails = () => {
     const router = useRouter()
     const { publisherId, nodeId } = router.query
@@ -300,15 +311,26 @@ const NodeDetails = () => {
                         {data.latest_version?.downloadUrl && (
                             <Button
                                 className="flex-shrink-0 px-4 text-white bg-blue-500 rounded whitespace-nowrap text-[16px]"
-                                onClick={() =>
+                                onClick={(
+                                    e: React.MouseEvent<HTMLButtonElement>
+                                ) => {
+                                    e.preventDefault()
+                                    console.log('clicked download')
+                                    if (
+                                        data &&
+                                        data.latest_version?.downloadUrl
+                                    ) {
+                                        downloadFile(
+                                            data.latest_version?.downloadUrl,
+                                            `${data.name}_${data.latest_version.version}.zip`
+                                        )
+                                    }
                                     analytic.track(
                                         'Download Latest Node Version'
                                     )
-                                }
+                                }}
                             >
-                                <Link href={data.latest_version?.downloadUrl}>
-                                    Download Latest
-                                </Link>
+                                <a>Download Latest</a>
                             </Button>
                         )}
                     </div>

components/publisher/PublisherNodes.tsx

@@ -27,7 +27,7 @@ const PublisherNodes: React.FC<PublisherNodesProps> = ({
             <div className="flex items-center gap-2">
                 <h1 className="text-lg font-bold leading-tight tracking-tight text-white sm:text-2xl">
                     <Link href={`publishers/${publisher.id}`}>
-                        {publisher.name !== "" ? publisher.name : publisher.id}
+                        {publisher.name !== '' ? publisher.name : publisher.id}
                     </Link>
                 </h1>
 

cors.json

@@ -0,0 +1,8 @@
+[
+    {
+        "origin": ["*"],
+        "method": ["GET", "HEAD"],
+        "responseHeader": ["*"],
+        "maxAgeSeconds": 3000
+    }
+]

next.config.js

@@ -37,9 +37,8 @@ const conf = {
                 destination: 'https://discord.gg/comfyorg',
                 permanent: false,
             },
-        ];
+        ]
     },
-
 }
 // export default withMDX(conf);
 module.exports = withMDX(conf)

package.json

@@ -21,6 +21,7 @@
     "@next/mdx": "12.3.1",
     "@tanstack/react-query": "^5.17.19",
     "axios": "^1.6.5",
+    "downloadjs": "^1.4.7",
     "firebase": "^10.11.1",
     "flowbite": "^2.3.0",
     "flowbite-react": "0.7.5",
@@ -41,6 +42,7 @@
     "@babel/core": "7.19.3",
     "@mdx-js/react": "2.1.4",
     "@types/async-busboy": "^1.1.1",
+    "@types/downloadjs": "^1.4.6",
     "@types/mixpanel-browser": "^2.49.0",
     "@types/node": "18.8.3",
     "@types/qs": "^6.9.15",

src/api/mutator/axios-instance.ts

@@ -4,9 +4,10 @@ import qs from 'qs'
 
 const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL
 
-export const AXIOS_INSTANCE = Axios.create({ 
+export const AXIOS_INSTANCE = Axios.create({
     baseURL: BACKEND_URL,
-    paramsSerializer: params => qs.stringify(params, { arrayFormat: 'repeat' }) 
+    paramsSerializer: (params) =>
+        qs.stringify(params, { arrayFormat: 'repeat' }),
 }) // use your own URL here or environment variable
 // Add an interceptor to attach the Firebase JWT token to every request
 AXIOS_INSTANCE.interceptors.request.use(async (config) => {

styles/globals.css

@@ -8,4 +8,4 @@ body {
     color: white !important;
 }
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');