Git Product home page Git Product logo

4c-site's Introduction

4C (The Cool Community of Content Creators)

Imagine The Cool Community For Content Creators or 4C, as a chill coffee shop (cooler even ๐Ÿ’ฃ). An inclusive and helpful environment, where we help content creators reach their goals by sharing experiences.

Gain access to exclusive talks/workshops with popular content creators, and hence, opportunities to collaborate.

We have games too! ๐ŸŽฎ

๐Ÿ‘‹ Join Us :

Join our amazing community on Discord and Twitter.

Discord CommunityTwitter Account


4C logo

๐Ÿ“ท Website overview

This repository concerns the 4C community website. Visit the website to stay up to date with community members' projects, active members, and other amazing content!

๐ŸŽ‰ Want to contribute?

Whether you are a community member or not, we would love your point of view! Feel free to first check out our code of conduct and also the contribution guidelines for any missing steps.

๐Ÿ’ป For Contributors

๐Ÿ”– Tech Stack

The code base of this repo uses

For contributing to the code, you will need

  • Node installed on your computer.
  • Basic knowledge of Git

๐Ÿ”– Contribution steps

You can directly work on this project on Gitpod!

Open in Gitpod

Or, to work on it locally,

  1. Fork this repository

  2. Clone the repo

    $ git clone [email protected]:<your github username>/4c-site.git
  3. Navigate to the cloned directory

    $ cd 4c-site
  4. Install dependencies

    $ npm install
  5. Start the project on localhost

    $ npm run dev
Troubleshooting

In the course of trying to set up the project locally, if you come across an error that says PWA is not supported, you can try the following steps below to fix it;

For Linux or Mac ๐Ÿ‘‡

  1. Go to 4c-site folder using cd 4c-site

  2. In the terminal,

    $ export NODE_OPTIONS=--openssl-legacy-provider
  3. If you get an error in the above code then use the option below

    $ unset NODE_OPTIONS=""
  4. Start the development server with

    $ npm run dev

For Windows ๐Ÿ‘‡

  1. Go to 4c-site folder using cd 4c-site
  2. In the terminal,
    $ set NODE_OPTIONS=--openssl-legacy-provider
  3. Start the development server with
    $ npm run dev

In order to run this project locally, you might require some additional configurations, such as downgrading your node version to v16. You may get an error similar to this:

node version mismatch

To fix this, downgrade your node version to v16. Here is a simple way of doing that with the nvm node version manager:

  1. Download and install nvm. Use nvm-setup.exe for windows, or install.sh on other systems.

  2. Install version v16

    $ nvm install 16.16.0
  3. Make your system use version 16 of node

    $ nvm use 16.16.0

To check if everything has worked, restart your shell and run node -v. The output should be v16.16.0. If it is, you can continue working on the project!

Run commit

   $ git commit -m <Commit-message>

๐Ÿ”– Adding a project to the project page

Note: The project page is reserved to display projects for community members only. Each member can put up only one project.

To add your project to the project page, head over to the /data directory, and subsequently, the projects.json file. There, you will find objects for each project.

For example,

{
  "name": "Francesco Ciulla",
  "title": "FREE Web3 Resources",
  "screenshot": "https://user-images.githubusercontent.com/18360871/199210192-f5599a23-f0b1-49ff-9c52-2554a72a2c14.png",
  "description": "A list of resources to learn Web3 for FREE",
  "link": "https://github.com/FrancescoXX/free-Web3-resources",
  "twitter": "https://twitter.com/FrancescoCiull4",
  "live_link": "https://www.freeweb3resources.com",
  "stack":  ["React", "CSS", "Solidity"]
}
  • Create a new object similar to the one above.
  • Follow the example above and create project details like;
    • Your name
    • The project's title
    • A screenshot
    • A short description
    • A link to the GitHub repo (If it is open source)
    • A link to your Twitter profile
    • A live link to the project.
  • Open a pull request ๐Ÿ‘

Notice anything odd and/or missing from this README or on the website itself? Feel free to raise an issue.

Join the amazing 4C community on discord, and follow us on Twitter to stay in the loop.

๐Ÿ”‘ License

This repository is under the MIT license.

Please leave a star โญ๏ธ All support is highly appreciated.

4c-site's People

Contributors

alireza1083 avatar arindam200 avatar arvindparekh avatar aryanbabber avatar avneesh0612 avatar ayushhagarwal avatar danspratling avatar devvsakib avatar divvsaxena avatar fi-krish avatar francescoxx avatar github-actions[bot] avatar haideralipunjabi avatar jsvigneshkanna avatar lambeboluwatife avatar lsfgrd avatar madhusaini22 avatar merouanezouaid avatar njong392 avatar priyankarpal avatar procode2 avatar schleidens avatar semantic-release-bot avatar shoruntech avatar siddharthshyniben avatar sumanpaikdev avatar tamalcodes avatar tobysolutions avatar yagazie-davidson avatar yudai-creator avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

4c-site's Issues

Misleading "why 4C" button

The "Why 4C" button hints at being a video, or at least some text. But it takes us to the Discord invite, which is misleading. I suggest we should either create a video or text, remove the button, or add a coming soon badge.

Move to organization?

I'm guessing we are going to make a lot more projects related to 4C. So IMO we should move the repository to a GitHub organization.

Contributors and Sponsors buttons on the contributors page are headings instead of buttons.

Issue

image

These buttons are not accessible via keyboard, additionally they should not be headings.

Current HTML

<section class="hidden mt-40 text-2xl bg-orange-100 md:block max-w-max">
  <h6 class="py-4 px-6  rounded hover:text-orange-600 transition-all delay-100 ease-out cursor-pointer text-orange-600">Contributors</h6>
  <h6 class="py-4 px-6 rounded hover:text-orange-600 transition-all delay-100 ease-out cursor-pointer text-gray-700">Sponsors</h6>
</section>

How to fix

There are numerous ways to fix, personally I would move the sponsors to a different page and change these into anchors (<a href="">) instead. If we did that they would be within a <nav> element and an <ul> to be semantically correct.

It needs discussion as I do not know what the intention is for the sponsor page and site navigation going forward so I cannot give good advice as to the best fix.

Temporary fix

Just to make them accessible to keyboard users I would swap the current <h6> elements out for <button> elements.

This will ensure they are at least keyboard focusable.

Obviously any handlers will need updating to ensure that pressing Enter still changes page.

Yet again this isn't a complete fix as we should manage focus when the page changes but it does at least make it so that keyboard users can access the sponsors page.

replace img element with next/image

Replace img element in ProfileCard component with Next.js's Image element

Why?
Next.js's Image element does a lot of good things behind the scene like performance optimization, lazy loading, image compression and serve the image in .webp format

If this issue sounds good, would love to create a PR on this.

Integration of Discord Widget

Insert the Discord PREMADE WIDGET below the "Join the community" button

Here is the code to insert:

<iframe src="https://discord.com/widget?id=784142072763383858&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>

Improvement of "4C" on navbar.

The 4C on the navbar looks to plain and can be improved to look better and pop out more on the page.

Ideas:
Add background , border.

"WHAT IS 4C?" colour contrast

Issue:

Colour contrast on the small text above the <h1>

<div class="col-span-2 lg:col-span-1">
  <!-- this text -->
  <p class="text-sm text-orange-600 font-bold tracking-wide uppercase">What is 4C?</p>
  <h1 class="mt-2 text-5xl font-extrabold tracking-tight text-gray-900 md:text-6xl">The Cool Community For <strong class="text-orange-600">Content Creators</strong></h1>

The current contrast is 3.35:1 and needs to be 4.5:1 minimum.

Suggested Fix Options:

1. Put the text within a box with a dark background with rounded corners.

Screenshot of changes detailed with CSS below

Styles

background-color: #212121; /*this is 4.54:1 contrast ratio */
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
margin-left: -1rem;
margin-bottom: -1rem;

2. Make the text darker (introduce third colour that allows for sufficient contrast).

A darker text colour, either the existing body text grey (text-gray-500) or another to be decided.

screenshot with text-gray-500 used on opening text

3. Make the text larger

Make the font size 24px equivalent (preferable to use rem which would be font-size: 1.5rem or tailwind equivalent)

font size increased on the initial text

Color Schema

Change the color schema of the site accordingly to the social colors:

#F2E205
#F2BE22 Main color
#F29422
#F26513 Main color
#D90404

bgcolors

Contributors page broke: Error 300

Bug Description
The sponsors tab of the contributors page broke. Apparently it's error #300 which is "Rendered fewer hooks than expected. This may be caused by an accidental early return statement."

Steps to Reproduce

  1. Go to https://4c.rocks/contributors
  2. Click on Sponsors Tab

Expected behavior
The page works

Actual behavior
The page broke

Screenshots/Recordings

Screen Shot 2021-10-04 at 8 48 26 PM

OS and Browser

  • OS: All
  • Browser: All

Additional context
N/A

Too much padding on left side

On the site, the text has a lot of padding but the image doesn't. This looks off and I think the padding should be made equal.

If you like I can open a PR for this.

`prefers-reduced-motion` required on contributors page

Issue

When you hover a profile card there is an animation that plays.

For people with vestibular disorders (motion sensitivity) this animation could cause them to feel ill. It can also be distracting for people with paranoia etc.

The animation needs to not fire if someone has set prefers-reduced-motion in their settings.

How to see if prefers-reduced-motion is activated on client machine

This can be gathered either with JS:

const query = '(prefers-reduced-motion: reduce)';
  const hasReducedMotion = window.matchMedia(query).matches

  if (hasReducedMotion) {
    ///disable the animations here
  }

Or with CSS it can be accessed as follows:

@media (prefers-reduced-motion: reduce) {
  /* do whatever you need to do to switch animations off here with CSS */
}

Someone will need to look at what is causing the animations so they can work out whether to disable via CSS or JS.

How to check it is fixed

To test you can open developer tools in Chrome, go to the "rendering" tab and scroll down to "Emulate CSS media feature prefers-reduced-motion" and set it to "prefers-reduced-motion: reduce"

image

At that point if you hover over one of the profile cards there should be no animation,

Open Graph and Twitter Cards

Feature Request

When sharing the site we should have Open Graph and Twitter Cards so that they are shareable as rich media cards.

This was mentioned in the comms chat on Discord.

Solution:

We require the following Meta Tags adding (bear in mind that these need to be configurable on a page by page basis ideally):

Open Graph

  • og:title - The title of the page or article.
  • og:type - probably website - there are a load of types though https://ogp.me/
  • og:url - The full canonical URL for the current page.
  • og:image - The full URL for the image associated with the page ("https://4c.rocks/images/[image]" not relative "images/[image]")

That is the minimum for Open Graph to work.

We probably also want:

  • og:description The description of the page or article. This should be different to the og:title.
  • og:image:alt Provides alternative text for the image supplied by the og:image tag. For top accessibility! (may need some thought on how to implement as the site grows).

Twitter Cards

  • twitter:card Determines the type of card to use. Types are:
    • summary - provides a Summary Card, which has a small square image alongside summary text.
    • summary_large_image - provides a Summary Card again with a larger image, more suitable when the image is rectangular.
    • player - provides a Player Card, with embedded video clips, audio streams and other media, useful for future sharing functionality etc.
  • twitter:title - Title of the page or article (equivalent to Open Graph's og:title).
  • twitter:description - Description of the page or article (equivalent to Open Graph's og:description).
  • twitter:site - The Twitter handle (do we have one yet? I only know @francescomm)
  • twitter:image - Full link to the image you want to use for the page (equivalent to Open Graph's og:image).
  • twitter:image:alt Supplies a text description of the image for visually-impaired users. Equivalent of og:image:alt

Implementation considerations

  • These should have the ability to be set differently on every page.
  • When we get to the article sharing section of the site these will need to be configurable so bear that in mind now.
  • I would suggest summary_large_image for the site at the moment as it looks better
  • Someone needs to design a nice image for this (might need another issue opening)

Example for a meta tag:

<meta name="twitter:title" content="4C - Cool Community for Content Creators, helping you grow your online following and improve your content creationa" />

More complete examples at: https://ogp.me/

Horizontal scroll on 13" Mac Book

The site seems to have a horizontal scroll on my 13 inch old Mac Book Air (Non-Retina screen)
Resolution: 1440 x 900
Browser: Brave

Build failing

A build is failing since few days. It would be great if someone could have a look.

Contributors script will not update user profile data

Bug Description
The Contributors script will not update user profile data. It only adds new users

Steps to Reproduce
Steps to reproduce the behavior:

  1. Contribute ;)
  2. Change your profile data
  3. Data not updated on contributors page

Expected behavior
User profile data is updated

Actual behavior
User profile data is not updated

Screenshots/Recordings
N/A

OS and Browser

  • OS: All
  • Browser: All

Additional context
Soon I'll open a PR with this issue fixed and many other enhancements, stay tuned!

Issue : Contributor section is not responsive in small screen

Bug Description
Sponsors and contributor menu bar is not present in small screen after going into the contributors section. It means it is not responsive.

Steps to Reproduce
Steps to reproduce the behavior:

  1. Go to 'Contributor section'
  2. Switch to Inspect mode and make screen small
  3. Scroll down through whole contributors but menu of Contributors or Sponsors is not present so that we can't switched into the Sponsors section
  4. See error

Screenshots/Recordings
https://user-images.githubusercontent.com/52608321/136772609-0963dd6e-d43e-4ba1-a471-5574769e60ca.mp4

OS and Browser

  • OS: [e.g. Windows 10]
  • Browser [e.g. Chrome, Safari]

Additional context
Add any other context about the problem here.

Cleanup navbar

Currently the navbar is made absolute and moved into place; I think this is needlessly complex. If you remove the absolute you can also remove a bunch of other classes and clean the code.

This won't change any functionality, it only simplifies code which can improve DX

I'll drop a PR if you assign me.

Add Issue template for better bug explanation and triage

Problem

I've checked the issues of bug reports and found out that they often do not have the information required to identify the bug and reproduce it.

Solution

Having an issue template will help identify, triage, implement the solution and makes the process seamless.

Remove "What is 4C?" thing

Honestly I don't think it looks good. It's kinda meaningless.

If you think otherwise feel free to close.

Create SEO social image (card) for the homepage

A simple update to make the 4C site more attractive in social posts

We need a new design for the SEO card to appear on twitter, facebook, Linkedin, and anywhere else the site might be shared.

This card should allow the flexibility that it can be used on other pages (with design changes).

This will then need to be uploaded to the repo and passed to the SEO component on the homepage

Create better SEO title & description for the homepage

Currently, the homepage is missing SEO title and description tags (the title simply says "4c") - this is not great for search or socials!

We need to update these tags to better reflect the site, something that really says what 4c is about.

The title should be short - around 55 characters
The description can be longer but not much - around 150 characters

Titles and descriptions longer than this will usually get cut off in most search engines and social media platforms

Once the content has been created, it will then need to be added to the page

You can see how to make changes here

#27 (comment)

Unsafe link to Github

The Github link could be made safer if rel="noopener" or rel="noreferrer" are included in the link.

Suggestion:

-<a href="https://github.com/FrancescoXX/4c-site" target="_blank" rel="noopener" rel="noreferrer">
+<a href="https://github.com/FrancescoXX/4c-site" target="_blank">

All social media links have repeated text for screen readers on the contributors page

The cards on the contributors page have various links to twitter, github etc.

The problem is that the screen reader text is just set to "GitHub", "Twitter" etc. so that means a screen reader only gets a list of links with no real meaning.

Instead they should read "Siddarth Github", "Siddarth Twitter" (where Siddarth is the username of that contributor) etc.

<span class="sr-only">github</span> <!-- this is the current screen reader text --> 
<span class="sr-only">[User Name] github</span> <!-- this is what we want instead -->

image

Any questions just ask!

Automating adding contributors

Currently the way new contributors are added is by manually editing the JSON file, which is kinda hard.

I was thinking of adding a new way: if you comment on an issue with a username, that user will be auto-added to the contributors.

This is achievable using GitHub actions, I can open a PR. Just wanted to get your opinions on this idea.

Add Home Button

Add the link to the top-left text

Link: 4c.rocks
Icon: Home

you can use react icons with the name FaHome

hhhhhUntitled

sdgsdghUntitled

there are duplicate `<main>` elements on the contributors page

<main class="flex flex-col justify-center min-h-screen overflow-hidden bg-orange-50">
   <!-- there should only be one `<main>` element, this second one needs removing and the classes adding to the outer one -->
    <main class="flex items-start justify-start w-full mt-20">
        [content]
    </main>
</main>

The inner <main> element needs removing and any relevant classes moving to the outer <main>.

A page should only ever have one <main> element and it should not exist inside another sectioning element (such as <header>, <footer>) etc.

Better document the SEO and Layout components

It's very easy to miss how to use the SEO and Layout components currently - if you're not familiar with this format

Simply, handles everything that appears on every page (Header and Footer). It also handles SEO (not a visual component, but it still appears on every page). Layout isn't limited to these 3 components, but this is all that every page uses for now.

Seo, header and footer data can be passed through to the layout component

<Layout seo={seo} header={header} footer={footer}>Page content</Layout>

The SEO component handles all the meta tags - right now it's currently set up to be fairly dynamic but it's not clear what is or isn't required. There's also no default "lang" (a SEO faux pas).

We need documentation for these two components (preferably, jsdoc) that explains how can be used

You can see a breakdown here #27 (comment)

Empty Space at the bottom of the home page

Bug Description
There is a noticeable white blank space at the bottom of the home page.

Steps to Reproduce
Steps to reproduce the behavior:

  1. Go to 'https://www.4c.rocks'
  2. Scroll down to 'bottom'
  3. See error

Expected behavior
The bottom border of home page that is the orange background section should be extended to the bottom.

Actual behavior
The height is maybe not fully provided to fit the entire page.

Screenshots/Recordings
Screenshot 2021-11-15 at 10 21 10 PM

OS and Browser

  • OS: [MacOS]
  • Browser [Safari]

Update the contributing guidelines

As I mentioned in the PR adding contributing guidelines #55 the contributing guidelines are incomplete. I would like to drop a PR finishing them, but I need this info:

  1. Any way of official contact with 4C (preferably email)
  2. Will the site be interactive in the future? Will it have settings/options/etc.? Plugins? (I'm just asking if you have it planned, not if you have it right now)
  3. What label is for issues which need to be worked on?
  4. Which build tool do you use for this site?
  5. Which test framework?
  6. Is there any way to skip ci for docs only? Something like a commit title with [ci skip]
  7. Any styleguides you use for this repo.

Once I have this info I'll be dropping a PR.

Background

Add a background using the social colors and the style of the logo below

#F2E205
#F2BE22
#F29422
#F26513
#D90404

bgcolors

Streamline favicon and opengraph

This issue is in relation to #29

Currently, pages/index.js and pages/contributors.js have the same copy of favicon and open graph

This can be and should be streamlined via components/Layout.js as @danspratling is suggesting in #29

The new structure can go as

const openGraph = { ... } // from static JSON file
const  Layout = ({seo = {}, header, children, ...rest}) => (
  <>
    <Header {...header} />
    <link rel="icon" ... />
    <NextSeo
        title="4C"
        description="The Cool Community For Content Creators"
        canonical="https://www.4c.rocks/"
        openGraph={seo.openGraph || openGraph}
    />
    <main ... >...</main>
  </>
)

With this, pages/index.js and pages/contributors.js will have only the responsibility of adding content components.

Horizontal Scrolling

Issue:

At certain screen sizes horizontal scroll bars appear.

horizontal scroll bars at 1920px

To replicate:

Set screen size to 1920px by 1080px or 1366px wide.

Suggested solve:

Replace the current: lg:scale-110 with a better way of positioning the image off to the right. Sadly my TailWind knowledge is poor but I would suggest another fix would be to simply add: overflow: hidden; on the <main> element.

`.sr-only` class needs replacing

Issue:

Current Screen Reader Only (sr-only) class just needs updating.

Solution:

Swap current .sr-only for the following:

.sr-only { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

More information on why at https://stackoverflow.com/a/62109988/2702894

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.