Create ModalSharePage component

[andrewtavis]

Terms

• I have searched open and closed feature requests
• I agree to follow activist's Code of Conduct

Description

This issue would focus on the creation of the modal component from which activist pages can be shared to other platforms. Designs for this component can be seen here on Figma and can further be seen below:

This component should be put in the frontend/components/modal directory, with the logic for the modal being copied from others in that directory. Icons would ideally come from one icon source on Icones such as CoreUI Brands.

How to get sharing to function for each of the given applications is up for discussion, but adding an extension for this purpose would be ok if needed.

Contribution

Happy to support someone who has interest in working on this or get to it myself eventually :) This is a good first issue, but is a bit more involved than others, so it'd be great to plan how to implement this before work gets started 😊

[andrewtavis]

Note that #582 should be finished before this, but this issue can also be worked on at the same time :)

[GrandSuccess87]

I'm happy to take this one!

[andrewtavis]

Hey @GrandSuccess87! Thanks for the offer to help and for your interest in activist 😊 Sure you can work on this, and I'll assign you now. Let me merge in #595 so we have the base component finalized for this and then we'll be good to go!

[GrandSuccess87]

Wonderful! I'll check out the design specifications and keep my eyes open for the finalized base component so that I can come up with ideas for the implementation.

[andrewtavis]

Sounds great, @GrandSuccess87! Looking forward to working with you! 😊

[GrandSuccess87]

Likewise! Same here! 🚀💪

[andrewtavis]

Hey there @GrandSuccess87 👋 We've closed up #582, so you've got the green light on this now 🟢🚗😊

[GrandSuccess87]

Great! I forked/cloned the repo and have the application running in my local environment with the recommended extensions installed. I'll check out the new code for #582! I was reviewing the Figma and was curious about the expected functionality when the user clicks "View QR Code". Should this display the QR code enlarged in another modal?

[andrewtavis]

All sounds great! For the QR code one you'd basically close the current modal and open up ModalQRCode :) You can see the functionality on say a template events page like /events/1/about where clicking the QR code enlarges it and provides a download functionality so people can put it on posters, etc 😊

[andrewtavis]

So in short to answer your question, yes great idea, and it's already been implemented 😇😊

[GrandSuccess87]

Got it! Okay, I'll check out the functionality on that page. Thanks!

[andrewtavis]

Very welcome! Let me know if you have any other questions 😊

[GrandSuccess87]

Hello! I may have overlooked this in the coding standards for new pull requests, so forgive me if I have 😆 but I was wondering if there's an established naming convention for new branches?

For example, feature/581-Create-Modal-Share-Page-Component. {{type_of_task}}/{{task_number}}-{{Name-of- task}}

[andrewtavis]

Thanks for asking, @GrandSuccess87! We generally don't have conventions except for starting with #{issue_number} so it directly gets connected :) Conventional commits are mentioned in the contributing guide, but this is not enforced as of now. What you suggested sounds great though! 😊

[GrandSuccess87]

Helloo! I wanted to take this moment to share my thoughts on the implementation with you below.

Here's what I'm thinking:

1. Since we're already able to view an enlarged version of the QR code in a modal, we could create further customizations to display the social media icons to match the Figma design. From here, we can utilize the social media APIs to implement the share functionality!

2. I did some searching and found this Vue social sharing npm library. We could also utilize its feature to share to multiple networks. We should be able to use this with our base modal and customize the designs!

3. And as a final option, I was thinking we can utilize a browser extension. Google Chrome has a variety of options that I'm currently reading through as well. https://www.socialmediatoday.com/content/6-best-google-chrome-extensions-social-media-sharing

Also, I believe I saw an option to copy the link to clipboard in the Figma design. For this, I'm thinking we can just create a function or utilize an npm package.

Let me know your thoughts!

[andrewtavis]

Thanks for all the research and thought into this, @GrandSuccess87! I'd say we should stick with option one or two so we're browser agnostic (as popular as Chrome is). Do you have preferences? Seems like option two should cover most of the major ones, and using the library would mean that if there were API changes for other products we'd be able to pick them up via an upstream change to the Vue library? Maybe go with that and we can implement single APIs for what's missing?

And yes a simple function or package for copying the link to the clipboard sounds like a plan to me 😊

Let me know if you need more input! :)

[GrandSuccess87]

Morning @andrewtavis! No problem at all -- my pleasure!

Previously I was leaning towards #2. However, I just noticed support for Vue 3 is currently on Alpha and naturally will be buggy. The changelog says the last update was 2 years ago. So I found a different library does support Vue 3, but according to its docs, I don't see all the networks in the Figma or the ability to add custom ones.

Here's the new one I found:

https://www.npmjs.com/package/vue-socials#documentation-

[andrewtavis]

Evening, @GrandSuccess87! 😊

Should we do the same with the new library as far as support what we can with the library and go direct to APIs for that that we can't? Or are you leaning more towards just doing direct APIs now? We can also do APIs if you think libraries are just not there. Also happy to work with you on this and we can split it up a bit based on endpoints!

[GrandSuccess87]

Absolutely, I think a combination of this library and APIs should suffice. From what I can tell we'll just need to use APIs for Signal, Instagram, and Matrix. Happy to split it up to where I tackle what's supported by the library and you take those three or split it up by row, I could take the top. Either works for me!

[andrewtavis]

Let's get the ones for the library in with the UI and then we can make separate issues for the other platforms :) I'll doubtless take Signal and Matrix, and maybe you or someone else wants to do Instagram 😊 Thanks for all the planning here!

[GrandSuccess87]

Anytime!! Sounds like a plan to me! Also, I can take Instagram ;)

[andrewtavis]

Awesome, thank you @GrandSuccess87 😊

[GrandSuccess87]

Hi @andrewtavis! Just wanted to say thanks for the helpful input on our recent dev sync!

I now have the modal opening as expected utilizing BtnAction and from there was able to add in support for sharing across various platforms. I have some customizations, CSS styling, and some additional functionality to add in, but all in all, great progress! 🚀

I do have a few follow-up questions for ya:

1. I noticed the Core UI icons don’t exactly match the Figma.

For example, in the Figma, Telegram has a black background and on core UI there are only 2 options and the one that more closely resembles the Figma has gray background. For the twitter (maybe whould we call it X now instead?) icon, there was only one option and the bird is gray rather than black. This is pretty much the trend I'm seeing. Also Core UI does not have an SMS/Text icon so I picked a placeholder for now. Are we okay using a different tool or keep as is? I'm happy to explore Google Fonts or Font Awesome 😃

2. Are there tickets / issues created for adding sharing functionality for the non-supported social media platforms (Signal, Instagram, and Matrix)? I don't believe so from when I last checked yesterday, happy to create those!

3. Regarding Sharing verbiage:

• does Activist have a designated Twitter handle you'd like me to use?
• Any designated hashtags you'd like me to include? So far I have the following: hashtags: ['activist', 'activism', 'community building', 'social change', 'ecological change', 'open-source', 'organization management', 'political action']
• Will the following suffice for subject and body?
  subject: 'Share this site!',
  body: 'Check out this site! https://activist.org/'
• Just to confirm, is https://activist.org/ the correct domain to display when sharing?

[andrewtavis]

Hey @GrandSuccess87! Super exciting progress here! 😊

Answers to your questions:

1. If you can't find something in CoreUI for the icons, then check Bootstrap icons bi: :) If nothing's in either then don't stress, send along a placeholder and I can figure it out. The icons in Figma are kind of what I could figure out as we're using Bootstrap there mostly, but sometimes things don't work and we need to make out own like those in the icon components directory.
2. They have not been created, and adding them in would be very appreciated!
3. Multiple parts below:
   • We do have a Twitter handle that we've done nothing with, and we might just not do anything with it... It's @activist_org though as with Instagram :)
   • All of those hashtags should good to me! I'll ping @therealhoppi who would have a better idea as I'm basically social media agnostic (except for GitHub 😇).
   • For the subject and body maybe the following:
     • Subject: "Share activist!"
     • Body: "Check out activist! https://activist.org/"
   • That is the correct URL and will continue to be, as even if we do add in app.activist the normal domain will be for the landing page (not as much of a point for a subdomain though as people will not need an account to search)

Let me know if you have further questions!

[andrewtavis]

Ah btw, we always lower case the org name, so activist, not Activist ✨😊

[GrandSuccess87]

Got it! I've taken note of the above!

(Will keep ya posted on updates and await the reply regarding the hashtags of choice we'd like to use.)

[andrewtavis]

Good comment from @therealhoppi: the subject and body should use the name/url of the event, organization or group (etc) :) Had it in mind for this and didn't connect the dots. So Share {Name}! and Check out {Name}! {url} 😊

[therealhoppi]

@GrandSuccess87 - thank you for that great work!

#'s don't play a huge role in discovery anymore on most social networks – so I'd advocate for 'activism' and 'organizing' in the beginning as defaults and then experiment with different ones in the future :)

[andrewtavis]

Let's use "activism" and "organizing" and then use the ones you suggested after, @GrandSuccess87 😊 Thanks for all this!

[GrandSuccess87]

Noted! I'll get started on adding all this in, thank you both!

[GrandSuccess87]

Hii @andrewtavis! Just wanted to give ya a quick update on where things are:

I need to setup / test the following:

• Messenger

• SMS sharing

• QR Modal

• Facebook (I noticed the npm package we chose is actually using Facebook Workplace which is different from Facebook so we may have to pull this into a separate ticket)

• Share across events / organizations / groups.

• Was able to test sharing the event name using the verbiage we discussed. I couldn't see where the code for groups lives but maybe I overlooked that

Aside from that, will also need to:

• Add JS logic to copy the url to clipboard and share via pasting it
• CSS - modify modal background color, view QR code text label text to match Figma
• Fix image preview for Twitter Sharing
• Fix the scripting tag syntax error for exporting multiple things. The docs for the vue socials npm says to use script tags but this conflicts with script setup tag (will probably be easier to show you this in person 😄)

At some point I'd love to refractor to reduce duplicated code 😄, should I make a ticket for that or bake that into this one?

[andrewtavis]

Hey @GrandSuccess87! Thanks for all the work here :) You can bake the refactor into this one so we have it all cleaned up from the start, and then we can make some more issues starting after that 😊 Let's go through this a bit tomorrow to discuss what else needs to happen. Looking forward to checking it out!

[GrandSuccess87]

Wonderful, sounds like a plan!

[andrewtavis]

25494c2 does the final touches here, @GrandSuccess87 😊 Hope the edits are alright for you! What I did:

• Minor formatting changes like using a grid for the options
• I used the icon component instead of SVGs
• I used Tailwind a bit more for colors
• I changed the name of the base element to MetaTagSocialMedia so that it goes with others
  • Maybe making this into a tag directory and including things like the GitHub and Matrix icons from LandingCommunityBanner could make sense?
• I used i18n keys for all the texts
• I switched over some of the icon providers so we're using one for all the company icons

Thanks again for so much hard and consistent work to get this all done! Really amazing :) :) Please let me know what you'd have interest working on from here!

[GrandSuccess87]

Thanks for the breakdown of the new edits you made, they look great! I also like the idea of utilizing MetaTagSocialMedia and LandingCommunityBanner components together more :)

I'm going to take a look at the open issues we have and see what I'd like to tackle next!

[andrewtavis]

Nice @GrandSuccess87! Looking forward to the next one 😊😊 Let me make an issue for the social media tag, but no need to pick that one up if there are others that are more interest!