search

vishnuraghavb / EnBizCard

EnBizCard helps you create interactive and responsive HTML-based digital business cards that can be hosted with your website.
https://enbizcard.vishnuraghav.com
GNU Affero General Public License v3.0
469 stars 171 forks source link

Create Cloud Sync #45

Open drtobbyas opened 6 months ago

drtobbyas commented 6 months ago

Add feature to incorporate cloud sync in order to be able to save data and retrieve it for editing next time.

I have implemented this functionality on my forked branch. https://github.com/drtobbyas/EnBizCard

Here is a preview of how it works https://www.youtube.com/watch?v=hg-IDl4JBXA

I have created a Pull Request for this feature. https://github.com/vishnuraghavb/EnBizCard/pull/46

Do you mind reviewing and merging the PR here?

Brantlab commented 6 months ago

+1 Love it

alockbox commented 3 months ago

Can you save this as your own branch so I can use it instead?

drtobbyas commented 3 months ago

@alockbox I have it on my forked repo https://github.com/drtobbyas/EnBizCard/tree/feat/add-cloud-sync.

You pull and use the branch

alockbox commented 3 months ago

That's where I saw it, thanks! But I'm not too familiar with GitHub. I was able to clone the original one into a docker instance by using: cd /volume1/docker/ && sudo git clone https://github.com/vishnuraghavb/EnBizCard.git and then cd /volume1/docker/EnBizCard && docker-compose up -d

Trying that with yours didn't seem to work. I'll continue to try, the developer has not seemed to be very involved for over a year now. Even an upload feature for just critical fields would help, as the QR and everything else would generic dynamically based on that data. Thank you again for your work.

Edit: the closest I’ve gotten is cd /volume1/docker/ && sudo git clone -b feat/add-cloud-sync https://github.com/drtobbyas/EnBizCard.git

but as the .env file is missing I’m guessing it’s only pulling changed files? Even overwriting the original files with these and then spinning up doesn’t update the site for me to have the save feature. I must just be doing something wrong. I’ve tried every command I can think of to spin up an instance with this code.

alockbox commented 3 months ago

I started all over with a clean install of the branch and it still did not work. Exact steps and returns

  1. cd /volume2/docker/ && sudo git clone https://github.com/drtobbyas/EnBizCard.git A: Cloning into 'EnBizCard'...

  2. Copy and pasted the .env from the old install that just sets the port.

  3. cd /volume2/docker/EnBizCard && docker-compose up -d

A: Container enbizcard Creating

A: Container enbizcard Created

A: Container enbizcard Starting

A:Container enbizcard Started

  1. The new features from the branch did not show up. So I stopped the container then proceeded.

  2. sudo git config --global --add safe.directory /volume2/docker/EnBizCard

  3. cd /volume2/docker/EnBizCard && sudo git checkout feat/add-cloud-sync && git pull

A: Switched to a new branch 'feat/add-cloud-sync'

A: branch 'feat/add-cloud-sync' set up to track 'origin/feat/add-cloud-sync'.

A: Already up to date.

  1. Start container. Loads fine and looks like the master branch. New feature does not show up.
drtobbyas commented 3 months ago

@alockbox oh! you could have cloned the 'feat/add-cloud-sync' branch.

Anyway, I have merged it to the master branch. You can seamlessly clone now

git clone https://github.com/drtobbyas/EnBizCard.git

alockbox commented 3 months ago

@drtobbyas I did exactly that, but it looks exactly like the master branch. No IMPORT DATA section.

Attached is a pdf of the whole page from safari.

EnBizCard - An Open-Source Digital Business Card Generator.pdf

alockbox commented 3 months ago

@drtobbyas I compared my pages/index.vue to the one on yours and it looks the same. I even see the following:

[

div class="flex items-center">

Do you want to Import Data from the cloud?

drtobbyas commented 3 months ago

Screencast from 09-06-2024 16:31:56.webm I just reran it and all the new additions are there.

Also you need to follow the video tutorial on how to create and set up cloudinary account https://www.youtube.com/watch?v=hg-IDl4JBXA

alockbox commented 3 months ago

Thank you for doing that. Yes, I watched the entire video before I started. The toggle should show up from a fresh install of your branch with no cloudinary account right though? I don't even get the toggle.

The exact code I'm running is:

  1. cd /volume2/docker/ && sudo git clone https://github.com/drtobbyas/EnBizCard.git

  2. create .env with "ENBIZCARD_PORT=22212"

  3. cd /volume2/docker/EnBizCard && docker-compose up -d

  4. browse to http://192.168.1.xxx:22212

  5. No toggle

drtobbyas commented 3 months ago

Try to run without docker just like I did in my recent screencast. BTW you are not adding --build to your docker compose, it will not rebuild the image. Use

cd /volume2/docker/EnBizCard && docker-compose up -d --build

or

yarn dev

alockbox commented 3 months ago

Yeah running without docker isn't really going to be an option on my Synology NAS.

Using the --build command results in a lot of errors.

Maybe this is why the creator has not accepted the fork... it was designed to be easy to setup in docker. Even the instructions that show up on your page reference docker install with compose.

I guess this is just at an impasse now.

FYI this with the --build command, these are the errors:

Current status: 17 (Interrupted) Standard output/error:

1 [internal] load .dockerignore

1 transferring context: 34B done

1 ...

2 [internal] load build definition from Dockerfile

2 transferring dockerfile: 32B done

2 DONE 0.2s

1 [internal] load .dockerignore

1 DONE 0.3s

3 [internal] load metadata for docker.io/library/nginx:alpine

3 DONE 0.5s

4 [internal] load metadata for docker.io/library/node:16.17.0-alpine

4 DONE 0.5s

5 [build 1/6] FROM docker.io/library/node:16.17.0-alpine@sha256:2c405ed42fc0fd6aacbe5730042640450e5ec030bada7617beac88f742b6997b

5 DONE 0.0s

6 [stage-1 1/2] FROM docker.io/library/nginx:alpine@sha256:69f8c2c72671490607f52122be2af27d4fc09657ff57e42045801aa93d2090f7

6 DONE 0.0s

7 [internal] load build context

7 transferring context: 49.56kB 0.0s done

7 DONE 0.2s

8 [build 2/6] WORKDIR /app

8 CACHED

9 [build 3/6] COPY package*.json ./

9 CACHED

10 [build 4/6] RUN npm i

10 CACHED

11 [build 5/6] COPY . .

11 CACHED

12 [build 6/6] RUN npm run generate

12 1.368

12 1.368 > enbizcard@1.0.0 generate

12 1.368 > nuxt generate

12 1.368

12 3.377

12 3.377 ERROR Error while requiring module @nuxt/postcss8: Error: Cannot find module '/app/@nuxt/postcss8'

12 3.377 Require stack:

12 3.377 - /app/index.js

12 3.377

12 3.379

12 3.379 [nuxt:tailwindcss] ERROR Error occurred while loading @nuxt/postcss8 required for Nuxt 2.15.8, is it installed?

12 3.379

12 3.388

12 3.388 FATAL Cannot find module '/app/@nuxt/postcss8'

12 3.388 Require stack:

12 3.388 - /app/index.js

12 3.388

12 3.388 Require stack:

12 3.388 - index.js

12 3.388 at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)

12 3.388 at Function.resolve (node:internal/modules/cjs/helpers:108:19)

12 3.388 at Function._resolve [as resolve] (node_modules/jiti/dist/jiti.js:1:241829)

12 3.388 at resolveModule (node_modules/@nuxt/kit/dist/index.mjs:2210:29)

12 3.388 at requireModule (node_modules/@nuxt/kit/dist/index.mjs:2215:24)

12 3.388 at loadNuxtModuleInstance (node_modules/@nuxt/kit/dist/index.mjs:2451:92)

12 3.388 at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2407:47)

12 3.388 at async setup (node_modules/@nuxtjs/tailwindcss/dist/module.mjs:463:7)

12 3.388 at async ModuleContainer.normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:2112:17)

12 3.388 at async ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:20)

12 3.388 at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:51:7)

12 3.388 at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)

12 3.388

12 3.394

12 3.394 ╭─────────────────────────────────────────────────────╮

12 3.394 │ │

12 3.394 │ ✖ Nuxt Fatal Error │

12 3.394 │ │

12 3.394 │ Error: Cannot find module '/app/@nuxt/postcss8' │

12 3.394 │ Require stack: │

12 3.394 │ - /app/index.js │

12 3.394 │ │

12 3.394 ╰─────────────────────────────────────────────────────╯

12 3.394

12 ERROR: executor failed running [/bin/sh -c npm run generate]: exit code: 1

[build 6/6] RUN npm run generate:

12 3.394 ╭─────────────────────────────────────────────────────╮

12 3.394 │ │

12 3.394 │ ✖ Nuxt Fatal Error │

12 3.394 │ │

12 3.394 │ Error: Cannot find module '/app/@nuxt/postcss8' │

12 3.394 │ Require stack: │

12 3.394 │ - /app/index.js │

12 3.394 │ │

12 3.394 ╰─────────────────────────────────────────────────────╯

12 3.394

failed to solve: executor failed running [/bin/sh -c npm run generate]: exit code: 1

alockbox commented 3 months ago

@drtobbyas I got it up and running, I'll share the code once I clean it up.

But I've noticed not all fields are returned. For example, when selecting the PRODUCT option under Featured Content, then uploading an image in the field "add product image", the image is not loaded when the save url is restored.

I have masked the data, but this is the data I am referencing. I've verified the image exists by direct url.

"contentType":"product","url":"https://res.cloudinary.com/dnfrXXXXX/image/upload/v1717979341/product_eh0i4w.png"}]}],

The original branch does exhibit unusual behavior i.e. a Title or text needs to be added before the image will appear for a product. I can attach a video example but it's a fast thing to check. But this one no matter what it does the image does not populate.