[FEATURE] styled QR codes #8640

loftwah · 2023-08-13T23:40:49Z

Description

We should update our QR code to use a stylized QR code library. There is a library here but it hasn't been maintained so I found a fork that fixes a couple of the issues.

Screenshots

It could all go here.

Additional information

No response

github-actions · 2023-08-13T23:41:01Z

To reduce notifications, issues are locked until they are https://github.com/EddieHubCommunity/LinkFree/labels/%F0%9F%8F%81%20status%3A%20ready%20for%20dev and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/LinkFree/blob/main/CONTRIBUTING.md

github-actions · 2023-08-15T10:46:43Z

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/LinkFree/blob/main/CONTRIBUTING.md

SaraJaoude · 2023-08-15T10:46:58Z

Great idea, thank you for the suggestion.

mishra-nikhil0110 · 2023-08-15T11:05:20Z

Hi, I would like to work upon this. Can you assign this to me?

Akhilbisht798 · 2023-08-15T19:24:55Z

This would look awesome. Great idea @loftwah

krol3 · 2023-08-16T00:15:03Z

I've just created my account, I miss the qr code generator !!

Jaiaggarwaaaaal · 2023-08-16T16:45:06Z

can you assign me the problem?

SaraJaoude · 2023-08-16T17:02:52Z

Hi, I would like to work upon this. Can you assign this to me?

@mishra-nikhil0110 you have another Issue assigned to you and as reflected in our Contributing Guide we only assign one Issue per person at any one time. I appreciate you have opened a PR for your existing Issue but this will need to be reviewed/accepted/merged by one of the maintainers before we assign anything else to you.

SaraJaoude · 2023-08-16T17:03:55Z

This would look awesome. Great idea @loftwah

@Akhilbisht798 I have assigned this to you

SaraJaoude · 2023-08-16T17:38:24Z

I've just created my account, I miss the qr code generator !!

@krol3 the generated QR code still exists for Profiles, please see screenshot. You can find it by clicking the orange arrow on your profile picture.

If you have queries on your Profile generally it is best to chat in the EddieHub Discord channel.

Akhilbisht798 · 2023-08-18T19:11:44Z

Hey, i think there is a problem with this QR library or its fork.
When i try to import it is show me error

ReferenceError: self is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.<anonymous>
file:/usr/src/app/node_modules/styled-qr-code/lib/styled-qr-code.js (1:208)

This is a long error. I just posted above part of it.

without even changing anything other in the file.
I tried to do this both its fork and original one it both have same error.

I tried to install a random library to check if i was doing something wrong so i imported react-player just to check. There was no problem with it.

If anyone can confirm this issue. OR point out if i am doing something wrong.

Akhilbisht798 · 2023-08-18T19:19:17Z

If this is true for anyone else. We can find another good QR code library for making styled QR.

loftwah · 2023-08-19T01:04:38Z

It is working for me (either library).

loftwah · 2023-08-19T01:17:41Z

Okay now this is getting fun. (code for this one)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Enhanced QR Code Styling</title>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/lib/qr-code-styling.js"></script>
    <style>
        /* Optional: add some styling to center the QR code on the page */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f7f9fc;
        }

        #canvas {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            border-radius: 16px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="canvas"></div>
    <script type="text/javascript">

        const qrCode = new QRCodeStyling({
            width: 300,
            height: 300,
            type: "svg",
            data: "https://linkfree.io/",
            image: "https://linkfree.io/_next/image?url=%2Flogo192.png&w=32&q=75",
            dotsOptions: {
                color: {
                    type: "radial-gradient",
                    value: ["#EA580C", "#F87171"]
                },
                type: "rounded"
            },
            cornersSquareOptions: {
                color: {
                    type: "radial-gradient",
                    value: ["#F87171", "#EA580C"]
                },
            },
            cornersDotOptions: {
                color: "#F87171"
            },
            backgroundOptions: {
                color: "#e9ebee",
            },
            borderOptions: {
                color: "#EA580C",
                width: 6
            },
            imageOptions: {
                crossOrigin: "anonymous",
                margin: 20
            }
        });

        qrCode.append(document.getElementById("canvas"));

        // You can uncomment this line if you wish to auto-download the QR Code
        // qrCode.download({ name: "enhanced_qr", extension: "svg" });
    </script>
</body>

</html>

I made a GitHub repo to show it here

Akhilbisht798 · 2023-08-19T13:46:56Z

@loftwah. I understand that this is working on simple html and css. But i think it is not working on LinkFree due to server side rendering (or maybe not as it has useState) or due to some other reason.
Even on simple import i am getting a error without changing any other thing.

Akhilbisht798 · 2023-08-19T13:58:24Z

Only things i have changed in the file.

using npm to install the package.
importing them to the file.
Using docker compose up --build to see changes

you can ignore the react-player as i have just used it to see if there is something wrong with my process. It works without any problem

This is the error i am getting.

loftwah · 2023-08-19T14:41:54Z

I get you, good point. I tried the example here for React and it wouldn't run when I used the latest NodeJS. I had to change back to version 14. It might be more complicated than I first thought. It worked for me on v14.21.3 in React.

I just checked our Dockerfile. We're using NodeJS version 18 which won't like this library.

Fork 1 and Fork 2 could potentially work.

Can confirm I get the same issue on NodeJS v18. I can't build LinkFree on the older version of NodeJS (not that it is an option either).

Akhilbisht798 · 2023-08-19T19:09:22Z

I have been searching for other option for qr code. The fork you have suggest seems great. I will now try to work with them.

Akhilbisht798 · 2023-08-20T16:35:04Z

Hey, @loftwah. I have checked your option that you have provided for qr code.
But still there are problem with them.
I have also raised a i issue for fork1.
Regarding the fork 2. I don't think they have put their version on npm or if they have they have not provided a way for downloading it in their README.md file

Akhilbisht798 · 2023-09-13T14:49:15Z

Hey, I have tried this issue. If anyone want to work on this go ahead.

loftwah · 2023-09-15T13:33:07Z

It is a tough one. I tried implementing it in my Rails project and had to put it on hold because it was a bit much for me.

dhruvilmehta · 2023-09-16T03:08:36Z

I think there is no actively maintained library for the styled QR Code. All the libraries are giving the same error which was mentioned above.

Akhilbisht798 · 2023-09-16T05:47:51Z

That is the case with this issue. They are not seem to work with our project.

vishalsingh2972 · 2023-09-16T13:06:12Z

Hey, I have tried this issue. If anyone want to work on this go ahead.

@Akhilbisht798 what's the issue, did you face any difficulty in doing this. I am a beginner in JS and wanted to know if I will be able to do this issue?

Akhilbisht798 · 2023-09-16T14:34:26Z

@vishalsingh2972, All the library mentioned in the issue, are not working properly. I think the main issue here can be that these library are not actively maintained.
other problem can be our component is server side rendered and this library is used in client side which is not a big issue can be handled but even after handling that i was not able to make it work with your code.
Give it a try. Hopefully you can make this work.

bikrantjajware · 2023-09-18T17:04:29Z

Hello, I have a approach to work on this using the same package. Here's how i'm approaching it

import the package using CDN link (script tag)
when the modal is opened we render the QR code using document.getElementById("qr_code_id")

What do you think, let me know

ckelwin · 2023-09-18T21:03:07Z

I managed to get this working using a different approach than @bikrantjajware , by dynamic importing the required library so that it gets loaded on the client side only. See link below as a reference.

https://stackoverflow.com/questions/66096260/why-am-i-getting-referenceerror-self-is-not-defined-when-i-import-a-client-side

If you prefer this method, do assign this issue to me. Thanks.

dev-shetty · 2023-09-22T02:12:31Z

Also just in case if it helps I found another react qrcode library.

eddiejaoude · 2023-09-24T07:15:05Z

We load the map dynamically, you can do something similar https://github.com/EddieHubCommunity/BioDrop/blob/main/pages/map.js#L16

ckelwin · 2023-09-24T07:37:19Z

Just realized this issue is unassigned. Can this be worked on? If so, do consider assigning it to me. My approach is the same as what Eddie suggested. Thank you.

SaraJaoude · 2023-09-24T10:36:59Z

Just realized this issue is unassigned. Can this be worked on? If so, do consider assigning it to me. My approach is the same as what Eddie suggested. Thank you.

@ckelwin I have assigned this to you.

bikrantjajware · 2023-10-06T11:32:48Z

Hello ,
found a simple solution for this, using the same library (qrcode.react). I see we are trying to use a different library for QRs, let me know if i should file a PR, while we are looking for a new library.
We just have to add imageSettings in the QRCodeCanvas like this
<QRCodeCanvas className="border border-white" value={${BASE_URL}/${data.username}} size={fallbackImageSize * 2} imageSettings={{ src: "https://upload.wikimedia.org/wikipedia/commons/b/b8/2021_Facebook_icon.svg", height: 60, width: 60, excavate: true, }} />
Here's the output

eddiejaoude · 2023-11-19T14:14:26Z

Great collaboration everyone! We have had some challenges with QR libraries. I think for now let's close this issue

ℹ️ eddiejaoude has some opened assigned issues: 🔧View assigned issues

loftwah added ⭐ goal: addition undefined 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet) labels Aug 13, 2023

github-actions bot locked and limited conversation to collaborators Aug 13, 2023

SaraJaoude added 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned) 🔢 points: 5 undefined and removed 🚦 status: awaiting triage Waiting for maintainers to verify (please do not start work on this yet) labels Aug 15, 2023

github-actions bot unlocked this conversation Aug 15, 2023

SaraJaoude assigned Akhilbisht798 Aug 16, 2023

SaraJaoude mentioned this issue Aug 31, 2023

[FEATURE] Updating QR code on landing page #8863

Open

Akhilbisht798 removed their assignment Sep 13, 2023

SaraJaoude mentioned this issue Sep 24, 2023

[FEATURE] QR Code as Mobile Wallpaper #9115

Closed

SaraJaoude assigned ckelwin Sep 24, 2023

ckelwin added a commit to ckelwin/BioDrop that referenced this issue Sep 24, 2023

Fixes EddieHubCommunity#8640 Updated to use styled QR codes.

53de906

ckelwin added a commit to ckelwin/BioDrop that referenced this issue Sep 24, 2023

Fixes EddieHubCommunity#8640 Updated to use styled QR codes.

8b00fb6

ckelwin mentioned this issue Sep 24, 2023

Updated to use styled QR codes #9155

Closed

6 tasks

ckelwin added a commit to ckelwin/BioDrop that referenced this issue Sep 28, 2023

Fixes EddieHubCommunity#8640 Updated QR to use next-qrcode.

fac6e46

ckelwin mentioned this issue Sep 28, 2023

Fixes EddieHubCommunity/BioDrop#8640 Updated QR to use next-qrcode. #9196

Closed

6 tasks

eddiejaoude closed this as not planned Won't fix, can't repro, duplicate, stale Nov 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEATURE] styled QR codes #8640

[FEATURE] styled QR codes #8640

loftwah commented Aug 13, 2023

github-actions bot commented Aug 13, 2023

github-actions bot commented Aug 15, 2023

SaraJaoude commented Aug 15, 2023

mishra-nikhil0110 commented Aug 15, 2023

Akhilbisht798 commented Aug 15, 2023

krol3 commented Aug 16, 2023

Jaiaggarwaaaaal commented Aug 16, 2023

SaraJaoude commented Aug 16, 2023

SaraJaoude commented Aug 16, 2023

SaraJaoude commented Aug 16, 2023

Akhilbisht798 commented Aug 18, 2023 •

edited

Loading

Akhilbisht798 commented Aug 18, 2023

loftwah commented Aug 19, 2023

loftwah commented Aug 19, 2023 •

edited

Loading

Akhilbisht798 commented Aug 19, 2023 •

edited

Loading

Akhilbisht798 commented Aug 19, 2023

loftwah commented Aug 19, 2023 •

edited

Loading

Akhilbisht798 commented Aug 19, 2023 •

edited

Loading

Akhilbisht798 commented Aug 20, 2023

Akhilbisht798 commented Sep 13, 2023 •

edited

Loading

loftwah commented Sep 15, 2023

dhruvilmehta commented Sep 16, 2023

Akhilbisht798 commented Sep 16, 2023

vishalsingh2972 commented Sep 16, 2023

Akhilbisht798 commented Sep 16, 2023

bikrantjajware commented Sep 18, 2023

ckelwin commented Sep 18, 2023

dev-shetty commented Sep 22, 2023 •

edited

Loading

eddiejaoude commented Sep 24, 2023

ckelwin commented Sep 24, 2023

SaraJaoude commented Sep 24, 2023

bikrantjajware commented Oct 6, 2023 •

edited

Loading

eddiejaoude commented Nov 19, 2023 •

edited by github-actions bot

Loading

[FEATURE] styled QR codes #8640

[FEATURE] styled QR codes #8640

Comments

loftwah commented Aug 13, 2023

Description

Screenshots

Additional information

github-actions bot commented Aug 13, 2023

github-actions bot commented Aug 15, 2023

SaraJaoude commented Aug 15, 2023

mishra-nikhil0110 commented Aug 15, 2023

Akhilbisht798 commented Aug 15, 2023

krol3 commented Aug 16, 2023

Jaiaggarwaaaaal commented Aug 16, 2023

SaraJaoude commented Aug 16, 2023

SaraJaoude commented Aug 16, 2023

SaraJaoude commented Aug 16, 2023

Akhilbisht798 commented Aug 18, 2023 • edited Loading

Akhilbisht798 commented Aug 18, 2023

loftwah commented Aug 19, 2023

loftwah commented Aug 19, 2023 • edited Loading

Akhilbisht798 commented Aug 19, 2023 • edited Loading

Akhilbisht798 commented Aug 19, 2023

Only things i have changed in the file.

This is the error i am getting.

loftwah commented Aug 19, 2023 • edited Loading

Akhilbisht798 commented Aug 19, 2023 • edited Loading

Akhilbisht798 commented Aug 20, 2023

Akhilbisht798 commented Sep 13, 2023 • edited Loading

loftwah commented Sep 15, 2023

dhruvilmehta commented Sep 16, 2023

Akhilbisht798 commented Sep 16, 2023

vishalsingh2972 commented Sep 16, 2023

Akhilbisht798 commented Sep 16, 2023

bikrantjajware commented Sep 18, 2023

ckelwin commented Sep 18, 2023

dev-shetty commented Sep 22, 2023 • edited Loading

eddiejaoude commented Sep 24, 2023

ckelwin commented Sep 24, 2023

SaraJaoude commented Sep 24, 2023

bikrantjajware commented Oct 6, 2023 • edited Loading

eddiejaoude commented Nov 19, 2023 • edited by github-actions bot Loading

Akhilbisht798 commented Aug 18, 2023 •

edited

Loading

loftwah commented Aug 19, 2023 •

edited

Loading

Akhilbisht798 commented Aug 19, 2023 •

edited

Loading

loftwah commented Aug 19, 2023 •

edited

Loading

Akhilbisht798 commented Aug 19, 2023 •

edited

Loading

Akhilbisht798 commented Sep 13, 2023 •

edited

Loading

dev-shetty commented Sep 22, 2023 •

edited

Loading

bikrantjajware commented Oct 6, 2023 •

edited

Loading

eddiejaoude commented Nov 19, 2023 •

edited by github-actions bot

Loading