eddiehubcommunity / eddiehubcommunity.github.io

Information about our community

EddieHub Website

Salient is a Tailwind UI site template built using Tailwind CSS and Next.js.

Requirements

• nodejs
• npm

Getting started

Using Gitpod

Local development

To get started with this project, first install the npm dependencies:

npm ci

Next, run the development server:

npm run dev

Finally, open http://localhost:3000 in your browser to view the website.

License

This site template is a commercial product and is licensed under the Tailwind UI license.

Learn more

To learn more about the technologies used in this site template, see the following resources:

• Tailwind CSS - the official Tailwind CSS documentation
• Next.js - the official Next.js documentation
• Headless UI - the official Headless UI documentation

eddiehubcommunity.github.io's Issues

more sveltifying needed ...

  <div class="mt-6">
    <a
      href="https://youtube.com/eddiejaoude?sub_confirmation=1"
      class="inline-block text-sm m-2 px-4 py-2 leading-none border rounded border-white text-white hover:border-transparent hover:text-teal-500 hover:bg-white transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110"
    >
      <i class="fab fa-youtube-square"></i>
      YouTube</a
    >
    <a
      href="http://github.com/EddieJaoudeCommunity"
      class="inline-block text-sm m-2 px-4 py-2 leading-none border rounded border-white text-white hover:border-transparent hover:text-teal-500 hover:bg-white transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110"
    >
      <i class="fab fa-github-square"></i>
      GitHub</a
    >
    <a
      href="https://discord.com/invite/jZQs6Wu"
      class="inline-block text-sm m-2 px-4 py-2 leading-none border rounded border-white text-white hover:border-transparent hover:text-teal-500 hover:bg-white transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-110"
    >
      <i class="fab fa-discord"></i>
      Discord</a
    >
  </div>

This can be made a separate component too what do you say ?

Holding page for website

Open discussion for the community website

here in this issue drop ideas regarding design, technology stack, new feature regarding the community website.

Sveltifying Moderators part and decreasing the amount of divs hopefully and repetition for different design

Suggestion for different envato image on landing page

https://elements.envato.com/teamwork-UP8MCL7
or
https://elements.envato.com/technology-concept-8FW5ASH

Svelte

<script>
	import { fade } from 'svelte/transition';
	
	let name = 'Eddie Jaoude';
	let clickMe = () => name = 'New Name';
	$:doubleName = name + name;
	let data = [
		{
			name: 'Praveen',
			location: 'London'
		},
		{
			name: 'Mikey',
			location: 'Paris'
		}
	];
	let formData = '';
	
</script>

<style>
	h1 {
		color: red;
	}
	.faded {
		color: grey;
	}
</style>

<h1 on:click={clickMe}>Hello {name}!</h1>
<p>This is a message for {doubleName}</p>
<input name="name" bind:value="{formData}" placeholder="test name" /><button on:click="{()=> { 
	data = [{ name: formData, location: 'not found' }, ...data];
	formData = '';
	}}">Add</button>
{formData}
<ul>
	{#each data as item (item.name)}<li transition:fade="{{duration: 1000}}">{item.name} - <span class:faded="{item.location=='Paris'}">{item.location}</span></li>{/each}
</ul>

We need to refactor moderators component

Moderators component should take 1data item rather than the whole array

Originally posted by @eddiejaoude in #76 (comment)

Adding New branch

@eddiejaoude @BOLT04 I rebuild the community page in VueJS to showcase the difference. Can a branch be added to the GH before i do a pull request?

Our community mission statement

Something like...

We believe Open Source is for everyone
We are changing the world 1 pull request at a time (stolen from Hacktoberfest)
...

What else?

Projects: Add status label to each card

The possible values could be: (idea, started, mature, maintenance). We can also show the latest tag, if the project is versioned in GitHub.

Originally posted by @BOLT04 in #1 (comment)

GitHub Action to run Cypress tests

our project/repo list, technologies, state (alpha, beta, ...)

Initial from #5

lets list all of our community projects...

cards should look like this: -

Should the image on our readme.md link to something else

At the moment when you click on the community image on EJC it opens a new tap with a larger image.

Might it be a good idea to make that image link to something more useful instead? Maybe something like the newly created newcomers.md?

Who are the Moderators

Who to contact if there is an issue, please do not tag these people for general tech questions

Video with 1 sentence with people from the community

My idea was to create a video we can put along side our mission statement, include 1 sentence from different people from the community

What do you think? Would you take part?

Adding links to Github repos

Would it be an idea to add links to the Community website cards?

For example the Hacktoberfest practice to the repo Hacktoberfest practice

Missing link in readme.md, typo in contributing.md and newcomers.md

The images below highlight the areas affected.

Add a note on README for multiple tech branches (e.g. Vue.js)

We have the develop branch built with Svelte, but recently @RemcoHalman contributed with a Vue.js version. We should add a notice on the README so people are aware these branches are for some "display" purposes and to compare 😃

Hero SVG not appearing in chrome but works in Safari and Firefox

We have this in the SVG

xlink:href="data:img/png;base64

but for Chrome we need

xlink:href="data:image/png;base64

Moderators has UI problems on Firefox

Actual

Screenshot taken on Mozilla Firefox browser.

Expected

Screenshot taken on Google Chrome browser.

Note: This is just a reminder since our main target is Google Chrome. Still, we could investigate why this is happening and fix it 😃 .

Format and make sure prettier changes

Format with prettier and eslint. Make sure rules and formating are what we wish.

Amadine's links not working

GitHub Action to update the version number

It would be useful to know which version has been deployed. With a GitHub Action that increments the PR number and displays it on the website footer

Move SVG image from html file to external file

How to join our organization

I think the should be a section on the website on how to join.

HomePage project section could use more testing.

I think the homepage could use more testing. We should make sure project cards have are what we are expecting.

Automated testing

• Cypress
• Cucmber

Project list to show technologies used

Let people know the technologies used in the project..

Save the Cypress artifacts after Actions have run (failed)

Description

Cypress stores screenshots and videos when a test fails locally, we could keep these artifacts between builds. On GitHub Actions there is an official action for this "actions/upload-artifact" (check more info here), which when used gives an additional dropdown on the Action page.

More Links

• https://docs.cypress.io/guides/guides/continuous-integration.html#Record-tests
• https://github.com/cypress-io/github-action#record-test-results-on-cypress-dashboard
• https://github.com/cypress-io/github-action#artifacts

Chore: add eslint & prettier config

We are now using javascript for this project. It might be a good time to add some tools.
Should we keep the same code style as EddieBot?

Add back the spacing to Projects section

Description

I noticed on our deployed version of the website we have a margin of 8: https://github.com/EddieJaoudeCommunity/EddieJaoudeCommunity.github.io/blob/01c27e5fd2d8227395a6c7b1ff36fcb1a7eb458f/index.html#L47

Screenshot (main branch)

Screenshot (develop branch)

Solution

We can simply add the mb-8 class back, it probably got lost on some PR. Here is the line to change: https://github.com/EddieJaoudeCommunity/EddieJaoudeCommunity.github.io/blob/598649ef1bae144e99c944c76b4e36dd3a372a01/src/App.svelte#L86

Re run Cypress test on edit

When editing a pull request the Cypress test is not kicking in. Type to add: edited should fix this

Add Community GitHub Action to this repo

This is the community Action https://github.com/EddieJaoudeCommunity/gh-action-community

And here is an example of how to add it https://github.com/EddieJaoudeCommunity/support/blob/main/.github/workflows/community.yml

Tech stack for this project

Will we build this with HTML, CSS and perhaps JS, or do we use libraries and frameworks? And within frameworks, will we use CSS frameworks like Bootstrap or Tailwind and/or JS frameworks?

IMO we can keep it simple at first and build a website with HTML and CSS, what do you guys think?

Can I create react version of website?

I have seen this project has three branches. One is main branch, second branch is develop branch and it is made with sevelt and third branch is made with vuejs.

So, Can I try to make another version of this project with reactjs ?

Projects: Add main maintainers / point of contact

Note: This issue is related to #1 (comment)

We could add this information only on hover. Let me know what you think and how you think this can be implemented, but I was thinking of the main information to display always, then secondary info only shows on hover. This would reduce clutter and too much information at once. If a user hovers the card, we assume they want to know more so we show this list.

Consider using a tool to analyse the website (e.g. performance, accessibility)

Recently I heard of this GitHub action called Lighthouse Check and I think we can use it to start analyzing our website and see if there is anything we can improve 😃.

Every time a PR opens we could check if performance dropped or SEO went up because of X change (e.g. by adding good alt attributes).

What does everyone think?

welcome first time contributors

https://github.com/marketplace/actions/github-script#welcome-a-first-time-contributor

Code of Conduct

We should add a code of conduct

Cursor over card should change

If we are to link to the repo via the card the cursor should change to a pointer.

Add the style:

cursor:pointer

Create contributing file

We should have a CONTRIBUTING.md file explaining how to contribute to this repository, for example, the Git commit message convention we should follow.

Examples

• EddieBot contributing file
• EddieBotUI contributing file

More resources

• https://gist.github.com/PurpleBooth/b24679402957c63ec426
• https://github.com/PurpleBooth/a-good-readme-template
• http://conventionalcommits.org

Slight typo on newcomers.md

In newcomers.md

We have the following entry: "Now you can go ahead and effect the desired changes."

I think this should read: " Now you can go ahead and affect the desired changes."

i.e. affect instead of effect.

Add AXE accessibility to Cypress

Eddie needs this done :) ps. assign it to him.

Latest livestreams section on Home page

Hi everyone 😃,

I was thinking it would be cool to have a section with the latest livestreams/videos, below or maybe above the Projects section.
This could give a newcomer an idea of the sort of community we are, by the titles of the videos and thumbnails. Or it could give awareness to something they didn't watch and was really cool like this livestream about another organization open sourcing their projects.

Should we have a section for this on the home page? I'm not concerned about the complexity of this task in terms of technology and integration with the YouTube API for now. I was just wondering if this provides value to the community and the user going to our website.

What do you think? Let's start a discussion in the comments 😄.

Note: I was thinking how this is related to how Netflix shows like the latest content on their app but this is a bit different 😅

deploy svelte generated website

Suggestion: Project cards should have a link to the repo

I think the project cards should have a link to the repo for more information.

Project list with their technologies and status

Project list to have the following information

• project title
• project link
• main project maintainers / point of contact
• status (idea, started, mature, maintenance)
• technologies used

What else?

Our community FAQs in README/Website

Common questions/answers people ask when new to our community

• How do I join the Github Organisation
• ...

Edit: In our support repo, we could have FAQs from the community questions

Update Website screenshot on README.md

The screenshot of the website present on README.md needs to be updated since we now have more stuff on our website. This will help the community who come to visit this repository a good idea of our website from the image.

Also to include on the website

New issues should be created for each feature below...

• Code of Conduct
• why join our community
• Connect with us on:
  • Discord
  • GitHub Organisation
  • Live streams
  • Support repo
• Profile picture on these platforms
  • Its more friendly
  • Could be a pet or cartoon character, default pictures look like bots or spam
• our project/repo list, technologies, state (alpha, beta, ...)
• join our GitHub organisation