fix: ambassador program section #802

starlightknown · 2022-05-27T12:45:55Z

Description

added another file ambassador.js similar to tsc.js as @derberg suggested
added short paragraphs which @Barbanio wrote
didn't remove the TSC links because we don't have the schema yet

Related issue(s)

netlify · 2022-05-27T12:46:01Z

❌ Deploy Preview for asyncapi-website failed.

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`3f19fae`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/634eb52d5401c8000897295b

github-actions · 2022-05-27T12:52:07Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	38
🟢 Accessibility	95
🟠 Best practices	83
🟢 SEO	90
🔴 PWA	30

Lighthouse ran on https://deploy-preview-802--asyncapi-website.netlify.app/

magicmatatjahu

Very good, but you should consider extracting similar things (like icons) from this file (into a separate one), since you are using all the same code as in tsc-members page - that way you avoid code duplication.

quetzalliwrites · 2022-06-10T01:36:12Z

Very good, but you should consider extracting similar things (like icons) from this file (into a separate one), since you are using all the same code as in tsc-members page - that way you avoid code duplication.

I agree @magicmatatjahu. @starlightknown, do you know how to do this or would you like us to show you?

starlightknown · 2022-06-12T13:07:27Z

Very good, but you should consider extracting similar things (like icons) from this file (into a separate one), since you are using all the same code as in tsc-members page - that way you avoid code duplication.

I agree @magicmatatjahu. @starlightknown, do you know how to do this or would you like us to show you?

yep, I need some help here

AceTheCreator · 2022-06-27T09:53:36Z

@starlightknown How's it going? I noticed you need help with this PR. I'm here to help you :)

starlightknown · 2022-06-28T04:39:52Z

@starlightknown How's it going? I noticed you need help with this PR. I'm here to help you :)

yeah, regarding the comment above, how to add the icons in a separate file here

AceTheCreator · 2022-06-28T11:14:08Z

Hey @starlightknown 👋 Hope you're good :)

Here's a breakdown of how to extract those icons.

Step 1 - Navigate to the icons folder under the components folder.

Step 2 - Create an individual file for each icon needed. e.g. Twitter.js

Step 3 - Copy the icon code for each icon and paste them into their individual file(please have it at the back of your mind that you should include an export, so that you can import it later on) e.g export default function TwitterSVG() { return ( <svg className="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" > <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" /> </svg> ); }

Step 4 - After the completion of step 3, you should get rid of the icon code that already exists on the ambassador page and also on the Tsc page.

Step 5 - Import the icon component into the ambassador page or Tsc page using the following example import TwitterSVG from '../../components/icons/filepath'

Step 6 - After importing the icon, you can now use the icon component by simply providing it where it's needed. e.g <TwitterSVG />

Voila!
That's it, and I hope this was helpful. I'll be glad to jump on a call with you if you have any issues.

starlightknown · 2022-06-28T13:28:46Z

thank you for your help @AceTheCreator I made the changes

derberg

this is getting some progress ❤️

CC @Barbanio

I left some comments. We basically need to complete PR on community repo and ambassadors.json

also a comment, shouldn't the path be community/ambassadors instead of community/ambassador 🤔

derberg · 2022-06-28T14:02:38Z

pages/community/ambassador.js

+            <h3 className="font-semibold  text-primary-800 mb-2 lg:text-2xl lg:text-center">
+            What are the benefits of being an ambassador?
+            </h3>
+            <p className="my-4 text-base text-gray-500 lg:text-center">


would be good to do it as a bulletpoint list

derberg · 2022-06-28T14:04:21Z

pages/community/ambassador.js

+          </div>
+          <div>
+            <h3 className="font-semibold  text-primary-800 mb-2 lg:text-2xl lg:text-center">
+            How to become an ambassador?


also please make a list and link to Code of Conduct + link to guide on how to become an ambassador. I know PR in community repo is not merged yet, but link is already known

derberg · 2022-06-28T14:04:37Z

pages/community/ambassador.js

+        src="/img/avatars/questionmark.webp"
+        className="mx-auto rounded-full h-20 w-20 xl:w-28 xl:h-28"
+      />
+      <div className="my-4">Become an ambassador!</div>


please add link to guide on how to become an ambassador. I know PR in community repo is not merged yet, but link is already known

pages/community/ambassador.js

components/navigation/communityItems.js

pages/community/ambassador.js

quetzalliwrites · 2022-07-13T02:58:44Z

pages/community/ambassador.js

+            How to become an ambassador?
+            </h3>
+            <p className="my-4 text-base text-gray-500 lg:text-center">
+            To be an official AsyncAPI ambassador, there is no more important requirement than having the desire to work and spread the AsyncAPI tools.


"To be an official AsyncAPI ambassador, there is no more important requirement than having the desire to work and spread the AsyncAPI tools."

What does that mean though, really? as a user... if I landed on this page and wanted to understand the steps to become an ambassador, this sentence would only confuse me. It does not really tell me what work I have to actually do. It also alludes to helping spread something about the tools, but that isn't clear. (typo in the text aside)

@derberg @Barbanio what are actual items or steps a community member can do to become eligible to become an ambassador?

The idea is that the model currently in place will be used to add members to the Technical Steering Committee through PR. And later, the TSC or its delegated community repository maintainers will evaluate the applications according to the fulfillment of the requirements. It will be done through a PR flow.

we will link from here to asyncapi/community#361 once it is approved by TSC and merged

Co-authored-by: Alejandra Quetzalli <[email protected]>

quetzalliwrites · 2022-09-20T01:48:35Z

Heyo @starlightknown! ✨✨ It looks like you have a conflict that needs to be resolved, so you should prob get latest and see if that fixes it. 😄✌🏽

Is this ready for review again for @AceTheCreator and @derberg?

derberg

@Barbanio can you please have a look on the content, if it is ok

section What is an AsyncAPI ambassador? looks longer than others, maybe we can do something about it 🤔 like short it a bit?

@mcturco do you mind if we make the content a bit darker? it is really hard to read (same with TSC list)

derberg · 2022-09-20T08:13:40Z

pages/community/ambassador.js

+        src="/img/avatars/questionmark.webp"
+        className="mx-auto rounded-full h-20 w-20 xl:w-28 xl:h-28"
+      />
+      <a href="https://github.com/asyncapi/community/pull/361"><div className="my-4">Become an ambassador!</div></a>


please change link to https://github.com/asyncapi/community/blob/master/AMBASSADOR_ORGANIZATION.md#requirements-to-become-an-asyncapi-ambassador

and also make the whole card clickable, not only Become an ambassador!

@starlightknown I think you missed this comment

Barbanio · 2022-09-20T09:12:10Z

pages/community/ambassador.js

+            The AsyncAPI Ambassador brings AsyncAPI closer to the users and potential users of the project. It provides users and community members with the necessary tools and resources.
+They promote cooperation between users and disseminate the necessary tools to any specification user.
+They are engaged with the project in some way, either as a contributor, blogger, speaker, etc.
+They should also be willing to speak at community events or write technical content (i.e. blog posts, docs, etc.) that solves community needs.


To shorten the definition as suggested @derberg, how about deleting the second and last sentences and modifying the first one a little bit? It would look like this:

"The AsyncAPI Ambassador brings AsyncAPI closer to the project users and potential users. They promote cooperation between users and disseminate the necessary tools to any specification user. They are engaged with the project in some way, either as a contributor, blogger, speaker, etc."

mcturco

@mcturco do you mind if we make the content a bit darker? it is really hard to read (same with TSC list)

@derberg Yes, so as a matter of fact we are not using the right type styles on this page to match the type treatments on the rest of the website. We should be using the Typography components that were added when the website styles were updated to reflect the new brand. No one's fault, as we have not documented these components yet, but I have made some suggestions below to help get everything looking correct 😄

pages/community/ambassador.js

Co-authored-by: Missy Turco <[email protected]>

Barbanio · 2022-10-05T16:31:06Z

Hi @starlightknown!🙂 I left a suggestion to shorten the definition of "What is an AsyncAPI ambassador?". And I've also opened a PR (asyncapi/community#475) with the ambassadors' information. This is almost already! 🚀

derberg · 2022-10-06T07:23:37Z

@starlightknown the structure of data shown here will not change https://github.com/asyncapi/community/pull/475/files#diff-3972c4d1765c30a353c5f35562daa98dcd2bf7d3f2640d93f1ed03471777233e so you can already grab that file into your branch and work on that, instead of TSC members file.

The structure is a bit different. Instead of information about repositories that given TSC member maintains, you see information about contributions. There are different contribution types: presentation, article, workshop and iniciative_driver.

My suggestion is to keep it simple in this PR, and you could do something like:

so you just list all the contributions, using type name
it is of course a link that after click opens new tab
and you add title to the link, so on hover we display a tooltip with contribution title
dates are not important for the list. Dates are there so we later on can have automation that will help us validate if ambassador can still be an ambassador

And yes, I do not think doing ☝🏼 is enough. It is just a challenge to do something different as titles are somehow long. And replacing labels with proper icons also require some design work.

So I simply suggest minimum approach. And we just need a follow-up issue that @Mayaleeeee can pick up for hacktoberfest design work.

Thoughts?

derberg · 2022-10-18T07:16:53Z

fyi, file with list of initial ambassadors is already here in website repo https://github.com/asyncapi/website/blob/master/config/AMBASSADORS_MEMBERS.json

so you just need to update to latest master

starlightknown · 2022-11-23T13:53:54Z

since Ace made a PR, I'm closing this one

fix: ambassador program

2c98053

starlightknown requested review from fmvilas, derberg, magicmatatjahu and asyncapi-bot-eve as code owners May 27, 2022 12:45

fix: ambassador program

6f03d38

fix: description

66ff271

magicmatatjahu reviewed May 30, 2022

View reviewed changes

Merge branch 'master' into amb

5428b50

quetzalliwrites assigned starlightknown Jun 10, 2022

quetzalliwrites added the enhancement label Jun 10, 2022

fix: icons

c18ef5a

Merge branch 'asyncapi:master' into amb

aaf05f9

derberg reviewed Jun 28, 2022

View reviewed changes

Merge branch 'master' into amb

efa7d12