slack-visibility

[leandrumartin]

I felt there was some difficulty in locating the link to the Slack workspace. This PR attempts to improve the visibility of the link, in part by adjusting some navigational elements to make it clearer which pages are intended to provide resources for incoming contributors and which are for other purposes.

When I initially was looking for the link, I saw the sidebar had a link under "Connect with OSS > Get involved as an individual" labeled "Participate," and another labeled "Contribute." I got confused when "Participate" did not have a link listed there and was instead a directory to other pages, as the name and placement within the sidebar made it seem like it would have the same function as the "Contribute" link. So, in this PR I have moved it in the sidebar view to make its purpose as a directory to other subpages clearer. Other links in the sidebar are structured the same (as directories to other pages), so to keep the structure consistent I rearranged those in the sidebar as well.

With this I think I have addressed most of what caused my confusion in finding the link--I also acknowledge that I was navigating the interface with a different purpose from what a contributor would usually have, in that I was looking for a very specific link and not trying to find general information on how to participate. So I wasn't reading the paragraphs very thoroughly; I think the text on the pages makes the navigation make more sense when I read them from that angle.

However, should there also be added buttons or links elsewhere in the interface? I'm not sure it's fully necessary, but I can add something in if need be.

[kungfuchicken]

I like where this is going. Do you have the bandwidth to also create a React Component that is more visibly prominent, like a big button with a Slack logo and "Join Slack" or something similar that we can put in the header and pepper throughout pages?

[leandrumartin]

Yes, I can. However it seems like it would be hard to test at the moment as I'm running into trouble with npm install. As far as I can tell it's because of outdated/deprecated dependencies. I can work on this in another branch.

[leandrumartin]

I've now added a button to the top of the page linking to connect_with/community where people can then find the Slack link. I've made it a React component so that it can be inserted into any page.

(Unfortunately Docusaurus doesn't easily support adding a React component to the navbar--the only way to do it is kind of an officially supported workaround, and there hasn't been an updated way to do it.)

Where do you think would be some good spots to place this button?

[kungfuchicken]

Looking at this visually, it's too close and similar to the Donate button, and the call to action is a little ambiguous. I think it might be better to have a button that uses the Slack logo and links directly to the join link in the Contribute page.

• The button should only have the Slack logo, prefer monochrome black if possible, and no text
• There probably needs to be a small ~2px space between the donate button and the Slack button.
• The Slack button should be after Donate and before "Find us on GitHub" (we might want to have a graphical GitHub button after slack and before the text, or replace the text entirely with a graphical button if possible)
• We should add the graphical Slack join button to any page that has a Slack link inside it:
  • README.md
  • docs/connect_with/training.md
  • docs/connect_with/community.md
  • docs/connect_with/mentoring.md
• we should probably also add it at least once to pages that currently only mention Slack:
  • docs/programs/advocacy.md
  • docs/programs/consulting.md
  • docs/resources/playbooks/experiential_lerning.md (and fix that filename spelling typo)
  • docs/projects/oss_cybersecurity/about.md