From 971e8fc10723488c9a98a24cad5dc3685248d726 Mon Sep 17 00:00:00 2001 From: Robin Huang Date: Tue, 3 Sep 2024 14:13:50 -0700 Subject: [PATCH] Download files with more descriptive file name. (#22) * Download files with more descriptive file name. * Remove imports. * Prettier. --- .github/workflows/secret-scanning.yml | 30 +++++++++++----------- README.md | 7 ++++- components/nodes/NodeDetails.tsx | 34 ++++++++++++++++++++----- components/publisher/PublisherNodes.tsx | 2 +- cors.json | 8 ++++++ next.config.js | 3 +-- package.json | 2 ++ pnpm-lock.yaml | 16 ++++++++++++ src/api/mutator/axios-instance.ts | 5 ++-- styles/globals.css | 2 +- 10 files changed, 81 insertions(+), 28 deletions(-) create mode 100644 cors.json diff --git a/.github/workflows/secret-scanning.yml b/.github/workflows/secret-scanning.yml index d0c9ff1..691082b 100644 --- a/.github/workflows/secret-scanning.yml +++ b/.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 \ No newline at end of file + 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 diff --git a/README.md b/README.md index e850f42..f4e2221 100644 --- a/README.md +++ b/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` diff --git a/components/nodes/NodeDetails.tsx b/components/nodes/NodeDetails.tsx index 5f6fdc1..c3411eb 100644 --- a/components/nodes/NodeDetails.tsx +++ b/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 && ( )} diff --git a/components/publisher/PublisherNodes.tsx b/components/publisher/PublisherNodes.tsx index 79690a0..48ff9b2 100644 --- a/components/publisher/PublisherNodes.tsx +++ b/components/publisher/PublisherNodes.tsx @@ -27,7 +27,7 @@ const PublisherNodes: React.FC = ({

- {publisher.name !== "" ? publisher.name : publisher.id} + {publisher.name !== '' ? publisher.name : publisher.id}

diff --git a/cors.json b/cors.json new file mode 100644 index 0000000..987669f --- /dev/null +++ b/cors.json @@ -0,0 +1,8 @@ +[ + { + "origin": ["*"], + "method": ["GET", "HEAD"], + "responseHeader": ["*"], + "maxAgeSeconds": 3000 + } +] diff --git a/next.config.js b/next.config.js index 7da27b5..75d8784 100644 --- a/next.config.js +++ b/next.config.js @@ -37,9 +37,8 @@ const conf = { destination: 'https://discord.gg/comfyorg', permanent: false, }, - ]; + ] }, - } // export default withMDX(conf); module.exports = withMDX(conf) diff --git a/package.json b/package.json index 3247908..a053601 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef46d04..dd0cffb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: axios: specifier: ^1.6.5 version: 1.6.8 + downloadjs: + specifier: ^1.4.7 + version: 1.4.7 firebase: specifier: ^10.11.1 version: 10.12.0 @@ -75,6 +78,9 @@ importers: '@types/async-busboy': specifier: ^1.1.1 version: 1.1.4 + '@types/downloadjs': + specifier: ^1.4.6 + version: 1.4.6 '@types/mixpanel-browser': specifier: ^2.49.0 version: 2.49.0 @@ -988,6 +994,9 @@ packages: '@types/debug@4.1.12': resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==} + '@types/downloadjs@1.4.6': + resolution: {integrity: sha512-mp3w70vsaiLRT9ix92fmI9Ob2yJAPZm6tShJtofo2uHbN11G2i6a0ApIEjBl/kv3e9V7Pv7jMjk1bUwYWvMHvA==} + '@types/es-aggregate-error@1.0.6': resolution: {integrity: sha512-qJ7LIFp06h1QE1aVxbVd+zJP2wdaugYXYfd6JxsyRMrYHaxb6itXPogW2tz+ylUJ1n1b+JF1PHyYCfYHm0dvUg==} @@ -1607,6 +1616,9 @@ packages: resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} engines: {node: '>=6.0.0'} + downloadjs@1.4.7: + resolution: {integrity: sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==} + eachr@3.3.0: resolution: {integrity: sha512-yKWuGwOE283CTgbEuvqXXusLH4VBXnY2nZbDkeWev+cpAXY6zCIADSPLdvfkAROc0t8S4l07U1fateCdEDuuvg==} engines: {node: '>=0.10'} @@ -4657,6 +4669,8 @@ snapshots: dependencies: '@types/ms': 0.7.34 + '@types/downloadjs@1.4.6': {} + '@types/es-aggregate-error@1.0.6': dependencies: '@types/node': 18.8.3 @@ -5348,6 +5362,8 @@ snapshots: dependencies: esutils: 2.0.3 + downloadjs@1.4.7: {} + eachr@3.3.0: dependencies: editions: 2.3.1 diff --git a/src/api/mutator/axios-instance.ts b/src/api/mutator/axios-instance.ts index da66686..aecdeaf 100644 --- a/src/api/mutator/axios-instance.ts +++ b/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) => { diff --git a/styles/globals.css b/styles/globals.css index 1bb2f6b..93ab152 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -8,4 +8,4 @@ body { color: white !important; } -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');