eddiehubcommunity / eddiehubcommunity.github.io Goto Github PK
View Code? Open in Web Editor NEWInformation about our community
Home Page: http://eddiehub.org
License: Other
Information about our community
Home Page: http://eddiehub.org
License: Other
Let people know the technologies used in the project..
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 ๐
Who to contact if there is an issue, please do not tag these people for general tech questions
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?
here in this issue drop ideas regarding design, technology stack, new feature regarding the community website.
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
We have this in the SVG
xlink:href="data:img/png;base64
but for Chrome we need
xlink:href="data:image/png;base64
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
?
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.
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)
Common questions/answers people ask when new to our community
Edit: In our support
repo, we could have FAQs from the community questions
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?
We should add a code of conduct
I think the project cards should have a link to the repo for more information.
@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?
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
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?
Moderators component should take 1data item rather than the whole array
Originally posted by @eddiejaoude in #76 (comment)
New issues should be created for each feature below...
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?
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?
Eddie needs this done :) ps. assign it to him.
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 ๐
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
When editing a pull request the Cypress test is not kicking in. Type to add: edited should fix this
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?
Format with prettier and eslint. Make sure rules and formating are what we wish.
Project list to have the following information
What else?
We should have a CONTRIBUTING.md
file explaining how to contribute to this repository, for example, the Git commit message convention we should follow.
<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 ?
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.
If we are to link to the repo via the card the cursor should change to a pointer.
Add the style:
cursor:pointer
I think the homepage could use more testing. We should make sure project cards have are what we are expecting.
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
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
Would it be an idea to add links to the Community website cards?
For example the Hacktoberfest practice to the repo Hacktoberfest practice
<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>
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.
I think the should be a section on the website on how to join.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.