Add a share solution button

[rishipurwar1]

Add a share solution button

[yash-blmnm]

@rishipurwar1 Hi I am new to open source contribution, but I have 5years of experience working with Frontend Frameworks. I would like to work on this issue with some help. Thanks.

[rishipurwar1]

@yash-blmnm Assigned to you!

[yash-blmnm]

@rishipurwar1 I am unable to push the code to remote. Getting the error, 403 Forbidden.

[yash-blmnm]

• I have added the Share Icon adjacent to Github URL and website URL.
• It opens a small container consisting of social icons with sharing URLs.
• The icons transform and scale up on hover.
• On clicking the social icons, a blank tab opens redirecting to the share window.
• The container closes on clicking outside.
• Attached are the images

[rishipurwar1]

Hey @yash-blmnm
Great Job
but Is it possible for you to convert it into a modal like this?
https://www.uidesigndaily.com/posts/sketch-share-post-social-day-913
I think the above looks much better and remove this google + icon and change it to LinkedIn and also add Reddit and discord button and place a Twitter icon in the first place and then discord.

And you also need to add a default intent.
For the Twitter share icon, you can do something like this: https://twitter.com/intent/tweet?text=Hello%20world, you just need to replace the text query dynamically.
For more detail on tweet intent: https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview

text query could be:

**Hello Everyone!
I've just completed the "Random Quote Generator" CODINGSPACE Challenge.

Here's a link to my solution: https://www.codingspace.codes/solution/h1lgfjk1i7kiYmRA4MtA

Any feedback and suggestions on how I can improve are very welcome!**

[rishipurwar1]

You need to break this task down, first work on building this modal and then show me how it looks then proceed further.

If you need any help, feel free to ping me.

[yash-blmnm]

@rishipurwar1
I have built a sample modal for the share icons. Please share your thoughts

Also, is there any other social platform needed to be added to the list?

[rishipurwar1]

@rishipurwar1 I have built a sample modal for the share icons. Please share your thoughts

Also, is there any other social platform needed to be added to the list?

Great Job!
Looks really good to me

Here is my feedback:

• Add Reddit icon
• In the copy link section, you need to put the link of the codingspace solution, not the website link.
• Change the background color to some dark to match our dark theme. (see other models on our website for reference i.e when we download a challenge)
• Add hover effect on icons(You can change the border color to purple, similar to this profile border.

- [ ] When someone clicks on the copy to clipboard button, it should show link copied(but this task is completely optional if you have time then only do this task)

and Can we use "Share your solution" instead of "Share solution"? What sounds good to you?

Overall it looks great.

[rishipurwar1]

@yash-blmnm any updates on this?

[purnima176108]

Is there anything that needs to be solved regarding the share solution button?

[imps1001]

@rishipurwar1 I want to work on this. I have been working on web development for 2 years, but this is my first time for open source contribution. I would like to do this task.

[rishipurwar1]

@rishipurwar1 I have built a sample modal for the share icons. Please share your thoughts

Also, is there any other social platform needed to be added to the list?

Great Job! Looks really good to me

Here is my feedback:

• Add Reddit icon
• In the copy link section, you need to put the link of the codingspace solution, not the website link.
• Change the background color to some dark to match our dark theme. (see other models on our website for reference i.e when we download a challenge)
• Add hover effect on icons(You can change the border color to purple, similar to this profile border.

• When someone clicks on the copy to clipboard button, it should show link copied(but this task is completely optional if you have time then only do this task)
  and Can we use "Share your solution" instead of "Share solution"? What sounds good to you?

Overall it looks great.

@yash-blmnm have you fixed the above issues?

[rishipurwar1]

Is there anything that needs to be solved regarding the share solution button?

@yash-blmnm already working on this one.
You can pick a different issue.

[yash-blmnm]

@rishipurwar1 Almost completed with the solution. I Will update tonight.

[rishipurwar1]

ok

[yash-blmnm]

Hi @rishipurwar1 Please review if these changes are okay.

One more varient for hover

[rishipurwar1]

Really looks good to me.

Just to confirm Is it vertically and horizontally centered?
And one more thing what happens when you click on these social icons like Twitter. Ideally, these buttons should have default intent. For example, the Twitter button should have a default tweet embedded in a button, so, when you click on Twitter, it opens a Twitter website and has a default tweet on it something like this

Hello Everyone!
I've just completed the "Random Quote Generator" CODINGSPACE Challenge.

Here's a link to my solution: https://www.codingspace.codes/solution/h1lgfjk1i7kiYmRA4MtA

Any feedback and suggestions on how I can improve are very welcome!

You can check this random quote generator, you'll get the idea: https://quotegeneratorapp.netlify.app/

And after making the above changes, please make a PR for this, but only commit those files in which you made changes.

[rishipurwar1]

If you need any help in embedding default text in these buttons, please do let me know. This feature is going to be an important feature for the users.

[rishipurwar1]

You can make use of this package: https://www.npmjs.com/package/react-share but this package doesn't include a discord button. I think we can make this thing without using this package, just need to think a little bit.

[yash-blmnm]

@rishipurwar1
Just to confirm Is it vertically and horizontally centered?

• Yes I have aligned them using flex and justified using `space-between. so the addition or removal of icons doesn't impact the design.

• On clicking any icon, the users are taken to the respective sharing pages.
  Eg.

If you need any help in embedding default text in these buttons, please do let me know. This feature is going to be an important feature for the users.

• Yes, I am able to redirect to the Linkedin Sharing page, and Url is embedded, but the summary is not getting embedded. The URL I am using is https://www.linkedin.com/sharing/share-offsite?url=${url}&summary=${text}
• How to add a Link for the Discord share Icon?

[yash-blmnm]

@rishipurwar1 Should we also provide a text box for the users to edit the summary/text before they select any sharing options?
Just a suggestion from the user's point of view.

[rishipurwar1]

• but the summary is not getting embedded. The URL

Please check this StackOverflow post: https://stackoverflow.com/questions/10713542/how-to-make-a-custom-linkedin-share-button
May help you

[rishipurwar1]

• How to add a Link for the Discord share Icon?

I don't think we have a way to do that. Any ideas what we can do instead of this?

[rishipurwar1]

and is facebook one working fine?

[rishipurwar1]

@rishipurwar1 Should we also provide a text box for the users to edit the summary/text before they select any sharing options? Just a suggestion from the user's point of view.

Good Idea!
Where do you want to place this text box?

[yash-blmnm]

• For Linkedin, I followed the StackOverflow post, yet it is not displaying the title or summary as expected. I think it is expected behavior.
  Also in react-share code, they have used only the URL in LinkedIn Share Button
  https://github.com/nygardk/react-share/blob/master/src/LineShareButton.ts
  nygardk/react-share#184
• Discord - Could we add the invite link here?
• Facebook is working fine i.e the test is displayed in Facebook
• Please find a sample Text box to edit summary

[rishipurwar1]

Yes! we can add the discord invite link for now
and the text summary looks good. Can we add this text box below the copy link?
Is it possible to add a link to a particular channel of our discord server i.e share-your-solutions?
and please test your changes on different screen sizes.

@rishipurwar1 Should we also provide a text box for the users to edit the summary/text before they select any sharing options? Just a suggestion from the user's point of view.

Good Idea! Where do you want to place this text box?

Yes! we can add the discord invite link for now
Is it possible to add a link to a particular channel of our discord server i.e share-your-solutions?

[rishipurwar1]

• Please find a sample Text box to edit summary

and the text summary looks good. Can we add this text box below the copy link?
and please test your changes on different screen sizes.

[yash-blmnm]

1. Adding Text summary below Copy Link. Also, as you could see, made the modal responsive.

2. Discord Link - I have not used Discord before, but I could see from the documentation that we could create invite links to private channels.
   https://discord.com/moderation/360060481813-103:-Basic-Channel-Setup

[rishipurwar1]

1. Adding Text summary below Copy Link. Also, as you could see, made the modal responsive.

1. Discord Link - I have not used Discord before, but I could see from the documentation that we could create invite links to private channels.
   https://discord.com/moderation/360060481813-103:-Basic-Channel-Setup

Looks really good!

For now! Add a discord invite link because we want users to share their solutions on public channels not on private channels.
and make a pr to the development branch and only commit those files in which you made changes.

[rishipurwar1]

@yash-blmnm any updates on this?

[yash-blmnm]

Hi @rishipurwar1 I compiled all my changes. But I am still unable to push to remote.

[rishipurwar1]

Can you please share a screenshot of the error message?

…

On Wed, Oct 27, 2021, 07:12 yash-blmnm ***@***.***> wrote: Hi @rishipurwar1 <https://github.com/rishipurwar1> I compiled all my changes. But I am still unable to push to remote. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#122 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANTEVEBGXWP5H3JUALZ2PFDUI5KJFANCNFSM5FL4T76A> .

[yash-blmnm]

@rishipurwar1 any updates regarding this?

[rishipurwar1]

Hello @yash-blmnm sorry for the late reply
I think you're directly pushing the changes on my repo.
Have you forked my repo?

[yash-blmnm]

No, I am using one cloned using SSH.

…

On Tue, Nov 2, 2021 at 5:17 PM Rishi Purwar ***@***.***> wrote: Hello @yash-blmnm <https://github.com/yash-blmnm> sorry for the late reply I think you're directly pushing the changes on the repo. Have you forked my repo? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#122 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGRCY2742IJJOPKSQNSF3Y3UJ7FVBANCNFSM5FL4T76A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[rishipurwar1]

No, I am using one cloned using SSH.
…
On Tue, Nov 2, 2021 at 5:17 PM Rishi Purwar @.***> wrote: Hello @yash-blmnm https://github.com/yash-blmnm sorry for the late reply I think you're directly pushing the changes on the repo. Have you forked my repo? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#122 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGRCY2742IJJOPKSQNSF3Y3UJ7FVBANCNFSM5FL4T76A . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

First, create a fork of my repo and then clone the forked repo! it should work.