codecademycommunity / codecademycommunity.github.io

Codecademy community website for our Discord community

CodecademyCommunity.github.io

Welcome to the Codecademy Discord Community! 👋

This is the repository for our community website, which serves as a supplemental resource for the official Codecademy Discord server. Just like the Discord server itself, this site is built and maintained by volunteer moderators and community members.

All Contributions are Welcome! 🤝

We recognize that contributions to open source projects can come in all shapes and sizes, and no contribution is too small.

Below are a few ways you can contribute to our community website.

Feature requests and bug reports 🎨🐛

If you have any feature requests or suggestions, feel free to submit them here. We love to hear new ideas from community members on how we can improve our site!

If you notice any bugs, file a bug report after checking that there is no existing issue open for it here.

Development 🛠️

If you want to contribute to development of the website, please follow our Contribution Guide to get started.

---

Thanks for stopping by, and we hope to see you around our community!

codecademycommunity.github.io's Issues

Make FAQs view in react

FAQ Page

Purpose

An easy place to share answers to the commonly asked questions - things like "How long is x path?", "What course should I start with?"

Is your feature request related to a problem? Please describe.

There tends to be a lot of questions posted to the server that are commonly asked, and it would cut down on the number of repeated questions to have them answered in one place.

Proposed Solution

Anything that works!

Describe alternatives you've considered (optional)

A clear and concise description of any alternative solutions or features you've considered.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Page should have some of the most commonly asked questions and their answers (potentially with links to further resources)
• If you can wireframe, a screenshot of that would help!

Additional context

Add any other context or screenshots about the feature request here.

Nav menu navigation buttons causing page reload

Describe the bug

Using the nav menu buttons is causing a reload of the page for the SPA resulting in brief white "flash" and slower performance.

Expected behavior

With react router the page should not reload when navigating to another route.

To Reproduce

Set background color in console: document.body.style.backgroundColor = "red";
Navigate to new route - background color will be gone indicating site has reloaded.

Additional

React router Link component is recommended for internal site navigation.

Re-add support for modals

Purpose

A button on each <StaffCard /> with the ability to open (and close) a modal, eventually with that staff members bio.

Is your feature request related to a problem? Please describe.

Previously I added support for modals in #45 but moving over to React has rendered that obsolete and needs to be updated.

Proposed Solution

Add a modal to each StaffCard via Bulma and use component state to track whether it is open or closed.

Additional context

Previous modals can be seen here.
NOTE: Link will be obsolete when we merge port-to-react

Add homepage

Purpose

Add a homepage to the site to act as a hub and link to the rest of the site.

Is your feature request related to a problem? Please describe.

• Currently there is no way to access the other pages (unless you know the direct path to them).
• A homepage is pretty much essential for all sites.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Site should have a homepage
• Homepage should link to the rest of the site's pages.

Server Staff Bio Page

Discussed in #11

^{Originally posted by aedwardg September 17, 2021}
What does everyone think about having a server staff bio page?

I think some community members might find it cool to know a little bit more about our staff members. This could also serve as a place to include descriptions of the various staff roles.

Of course, we don't need to add personal info like real names, pics, GH handles, etc. if we don't want to, but at least a Discord handle and short blurb about each of us might be nice.

Purpose

As @aedwardg mentioned in the above discussion, it might be a nice page to have for users to know who the server staff are 🙂.

Proposed Solution

Any attempts/suggestions!

Acceptance Criteria

• Page should include features discussed above, and any others you think would be cool.

Add contact page view in React

Accessing page route other than root URL directly results in 404 error

Describe the bug

If you access one of the routes, such as /staff, directly in the browser address bar there is a 404 error. This can occur when bookmarking one of those pages or sending a link of it. It will produce same error when refreshing page under a route.

Expected behavior

The page that is accessed should render even if it's under a route such as /staff. Reloading the page under a route should also work.

To Reproduce

Steps to reproduce the behavior:

1. Enter https://codecademycommunity.github.io/staff in address bar of browser.

Additional context

SPAs are typically served from the main root URL so this problem is common. Various hosting providers offer solutions. CRA notes on GH Pages client side routing: https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing

Bulma styles are not overriden by css

Describe the bug

Custom CSS styles are being overriden by Bulma's styles (which they should not be)

Style the "sharing code" page

Purpose

Similar to #27, the sharing code page is very barebones and needs to be styled:

Proposed Solution

Page should use Bulma for responsivity and follow the same style as the other pages.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Page should be styled in a similar manner to other pages.
• Page should be responsive and use Bulma

Missing Profile Pictures

Describe the bug

Outdated images for Brussles and 8-Bit on the staff page, mean they don't display currently

To Reproduce

Go to staff page.
Brussles under Admins has a missing image, and 8-Bit under Moderators has a missing image.

Additional context

Current profile pictures are:
Brussles: https://cdn.discordapp.com/avatars/608641641284370462/9c6698249645077608227af19f0673b2.webp?size=128
8-Bit: https://cdn.discordapp.com/avatars/711997187290300546/4d491b9f6f5ff4b4465dd0bb325d2ca0.webp?size=128

Setup React Router

Make staff page view in React

Write a proper README.md

Purpose

What will this feature provide?

We need a README now that we are about ready to take contributions!

Is your feature request related to a problem? Please describe.

We don't have a README yet

Proposed Solution

Write a README to say what we're all about, and make it pretty.
Don't put contribution details in it, that's what CONTRIBUTING.md is for 🙂

Describe alternatives you've considered (optional)

A clear and concise description of any alternative solutions or features you've considered.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Write a README!

Additional context

Add any other context or screenshots about the feature request here.

Favicon doesn't display on deployed site

Describe the bug

The favicon added in #22 doesn't display on gh pages deployment (but works fine locally)

Expected behavior

Should be:

(local screenshot)

To Reproduce

Steps to reproduce the behavior:

1. Visit any deployed page on the site
2. Visit that same page by opening the .html locally

Additional context

Bit odd that it works locally but not on gh pages - I'll have a look and see if there's a quirk of github pages that would be causing this.

Add Emeritus mods

Purpose

Add the former staff members to the staff page.

Proposed Solution

Add a new "Moderator Emeritus" header underneath CoCo on the staff page and add the respective users to a new entry in staff.json.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Shaylin should be added to the staff page
• Elisabeth should be added to the staff page
• Calla should be added to the staff page

Add styling

Purpose

Make our site look great!

Proposed Solution

Style the site in the assets/css/style.css file. This can be based on Codecademy's own style guide here.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Add to the assets/css/style.css file.
• The site should be responsive.

Add responsive navbar and hamburger menu to responsive pages

Purpose

What will this feature provide?
A navbar menu for anyone viewing the site from mobile

Is your feature request related to a problem? Please describe.

Right now, the styled pages don't have a navbar when viewed from mobile

Proposed Solution

See documentation here:
https://bulma.io/documentation/components/navbar/

Describe alternatives you've considered (optional)

A clear and concise description of any alternative solutions or features you've considered.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• [ ]

Additional context

Add any other context or screenshots about the feature request here.

Description still set to default

Describe the bug

When linking to the page on discord, it displays 'Web site created using create-react-app' in the description.

Expected behavior

Should display a description of the website

To Reproduce

Post link to site.
Description says 'Web site created using create-react-app'

Add initial `.gitignore` file

Purpose

We should add a .gitignore file ASAP so that no weird files get pushed accidentally.

Is your feature request related to a problem? Please describe.

We don't want unwanted files pushed to the remote or even tracked locally.

Proposed Solution

Make a .gitignore with the typical stuff for HTML/CSS/JS projects. This should also exclude settings dirs like .vscode and .idea.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Should be a valid .gitignore file

Style "How to ask for help" page

Purpose

Add styling and responsiveness to the "How to ask for help" page, in line with the styling that has been applied to our other pages.

Proposed Solution

Use existing stylesheets and Bulma.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Style how_to_ask_for_help.html
• Make the page responsive
• Add proper link to that page in index.html

Additional context

Add any other context or screenshots about the feature request here.

Add new CoCos!

Purpose

The new CoCos need to be added to the staff page!

Proposed Solution

I'll probably include this in my PR for the staff page this weekend (sorry for the long delay) although if someone would rather tackle it separately by all means go ahead!

It also might be nice to hold off and see if the CoCos want to add it themselves, after the page is ported (should just be editing a .json so nothing difficult)

Make ask for help view in react

Update staff page

Purpose

Update the staff page to use the new colours and remove 8-bit, update Victoria's username and add AlexC as a CoCo.

Is your feature request related to a problem? Please describe.

Since the staff roles have been updated, the colours no longer match and should be updated to correspond to the new colours. The staff.json file also should be updated to reflect the fact that 8-bit has unfortunately stepped down.

Proposed Solution

Update the CSS to match the above, and remove 8-bit from staff.json.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Role colours and staff list should be updated to remove 8-bit and add Alex
• Victoria's username should be updated

Additional context

NB: It would potentially be an option to add former staff members to the staff page under a "Moderator Emeritus" header, although this probably would warrant some more discussion first.

Update to 8-bit / Shaylin bio

Need to update my bio now that I've retired as a mod.

Footer is not "sticky" on high resolution screens

Describe the bug

Currently in high resolution screens (e.g., WQHD, UHD, WUHD) the footer does not appear all the way at the bottom of the page.

Expected behavior

Footer should stay on the bottom no matter the screen resolution or zoom value

To Reproduce

Steps to reproduce the behavior:
If you're on a high res screen (higher than 1080p):

1. Go to website
2. See footer issue

If you're on 1080p or lower:

1. Go to website
2. Set browser zoom to something less than 100%
3. See footer issue

Screenshots

Desktop (please complete the following information if applicable):

• OS: Windows/MacOS
• Browser: Firefox

Potential solution

I think the answers in this SO thread should solve the problem:
https://stackoverflow.com/questions/43727032/hero-footer-not-at-bottom-of-page

Make homepage responsive

Purpose

Make the homepage responsive so it displays on mobile and tablet.
(I've given this the "needs discussion" label until we decide which CSS framework we'll use)

Is your feature request related to a problem? Please describe.

I didn't add any responsivity into my initial prototype for the homepage so it's currently very broken on mobile (and anything below a 1080p monitor for that matter):

Proposed Solution

It seems like the best solution for this would be to use a CSS framework (either Bulma or Bootstrap) - see here (https://discord.com/channels/810930683732033597/848577858388492298/906162493787869195)

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Homepage should have support for all commonly-used device types/screensizes

Responsive hamburger menu stays open after selection

Describe the bug

Responsive hamburger menu stays open after selection. This can perhaps give the appearance of a bug as it's hard to see the content on new page without closing it down using the small X.

Expected behavior

After selection of new page, it is probably better to be able to read content right away and not be blocked by the hamburger-menu.

To Reproduce

1. Simulate mobile screen
2. Press one of the hamburger menu selections.
3. Text on new page is covered by menu.

A Resource Page for the Community Website

Purpose

What will this feature provide?

• A page with additional resources on programming and programming related topics

Is your feature request related to a problem? Please describe.

It is not related to a problem.

Proposed Solution

Create a new page with a list of resources.

Describe alternatives you've considered (optional)

Making one & hosting it by myself, which may have the following problems:

1. I only know a limited amount of resources
2. It's better to have people verify the resources

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Create a new page with a list of resource

Additional context

Is it possible to use some form of markdown to HTML parser for easier maintaining the resource page?

Contact us page

Purpose

A lot of people are new to Discord and don't know how to use it. We should have a page that demonstrates how to contact our server staff with instructions and screenshots of using Modmail to inform us about errors.

Is your feature request related to a problem? Please describe.

We get lots of users who are new to Discord every month. Let's give them in-depth instructions on our site instead of on Discord.

Proposed Solution

Have at it!

Describe alternatives you've considered (optional)

The alternative is to have the instructions on Discord, but I think the website is a better medium for longform instructions.

Acceptance Criteria

• Page should include features discussed above, and any others you think would be useful for contacting staff, etc..
• If you can wireframe, a screenshot of that would be helpful!

Additional context

Add any other context or screenshots about the feature request here.

Update our CONTRIBUTING.md

Purpose

We want people to contribute, so let's tell them how!

Is your feature request related to a problem? Please describe.

We don't have a CONTRIBUTING.md with actual contribution instructions yet.

Proposed Solution

Let's get one written up!
Feel free to borrow what you need from the discord bot repo.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Write a CONTRIBUTING.md that goes over the steps of how to contribute to this project.

Additional context

Add any other context or screenshots about the feature request here.

Separate out the page-specific styles from the base styles

The base scss file has a lot of styles in it and it's not clear which (if any) were only put there for a single page. Double check and if some of these are for a specific page/layout/component then separate them out appropriately and rename as needed.

Style contact us page.

Purpose

Adding responsive styling to the "contact us" page (this is the final unstyled page that needs to be done).

Is your feature request related to a problem? Please describe.

The page is currently pretty barebones and needs styling (in a similar manner to the other pages):

Proposed Solution

Same as #29, #33 and #23

Describe alternatives you've considered (optional)

A clear and concise description of any alternative solutions or features you've considered.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Page should be styled.
• Styling should be consistent with other pages.
• Page should be responsive.

Create Issue and PR templates

Before we start accepting public contributions, we need to get some PR and Issue templates written up.

I can do this (maybe next week?) unless someone else wants to take a stab at it.

Fix Accessibility Issue

Describe the bug

We currently have an accessibility warning from ES Lint that we've temporarily disabled. This should be fixed.

CodecademyCommunity.github.io/src/Components/Header.jsx

Lines 20 to 28 in 7c5bb6d

	{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
	<a
	onClick={() => setIsActive(!isActive)}
	role="button"
	className={`navbar-burger burger ${isActive ? 'is-active' : ''}`}
	aria-label="menu"
	aria-expanded="false"
	data-target="navbar-items"
	>

Expected behavior

Warning should not occur and hamburger menu should look the same.

To Reproduce

Steps to reproduce the behavior:

1. Remove comment shown above
2. See ES Lint warning in your editor.

Additional context

In my own experimentation, I tried changing the <a> to a button but that causes a strange difference in the way the hamburger menu looks when it's activated. If we can avoid that, it would be nice, not sure why that happens.

React console warnings: Invalid DOM property `class`. Did you mean `className`?

Describe the bug

React strict mode warns about "class" when "className" is expected syntax.

Expected behavior

No warnings should occur in React Strict mode.

To Reproduce

Open site locally with "npm run start". Click on "Sharing Code" tab and see warning in console.

Individual Server staff bios

Discussed in #11

^{Originally posted by aedwardg September 17, 2021}
What does everyone think about having a server staff bio page?

I think some community members might find it cool to know a little bit more about our staff members. This could also serve as a place to include descriptions of the various staff roles.

Of course, we don't need to add personal info like real names, pics, GH handles, etc. if we don't want to, but at least a Discord handle and short blurb about each of us might be nice.

Thoughts

I'd like to have some individual server staff bios in order to give a little context about who we are as a team. This does not have to be personal information, and I'd encourage staff to not give out more information than they are comfortable with. If the only thing you want to share is "Likes to code in JavaScript" then that's fine.

Implementation

There are a few ways we can do this. I think the easiest way would be to have a separate page for each bio so that when you click on the avatar it takes you to that page. Another idea would be to have a modal containing the bio pop up when you click the person's avatar. If we go that route, we should probably make a proof of concept or wireframe ahead of time though.

Issues

Let's make a separate issue for each of the staff bios and allow each staff member to choose whether they want to make the PR for that issue or just provide us with a short blurb to put in there for them. We can also keep track here so we know when we're done and can close this issue.

Remaining bios:

• Brussels
• Fede
• el_cocodrilo
• Mariana
• Codeneutrino
• tgrtim
• 8-bit
• Victoria_DR
• megara | Rachel
• -Solace-
• Alex Wojtak
• Christo
• Lyall
• UnseenCode
• Hunter The Milk Turtle
• MikeJ
• Egoizumu

Make sharing code page view in React

Port cc!ban and cc!unban to v13

Describe the bug

cc!ban and cc!unban is not working in v13 port

Expected behavior

cc!ban and cc!unban should work in our v13 port

Style "staff bio" page

Purpose

The "Staff Bio" page added in #16 is currently pretty barebones (although thanks to the wonders of ✨flexbox✨ it is actually responsive):

The profile pictures for Fede, Mariana and UnseenCode also need updating as these have been changed by their respective user since I prototyped it.

Is your feature request related to a problem? Please describe.

The staff page is pretty empty and needs styling.

Proposed Solution

Probably by using something similar to #26 (I'll get on this once that one is merged - unless someone else wants to take a crack at it in which case go ahead!)

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Server staff page should be styled in a similar manner to the homepage.
• Page should be responsive

Add `<StaffCard />` component

Purpose

Replace the current div with a staff page component, this will also make it easier to re-add the modals for the staff bios.

Is your feature request related to a problem? Please describe.

At the moment we have a div for the staff cards, it would better follow standard React practice to have a seperate component for this instead. It will also help with adding modals as the logic for showing/hiding each modal can be handled on a per-component basis.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Staff card should be a new React component
• Data should be passed in via props.

Style modals

Purpose

Styling for the modals to display the staff pfp, name & bio.

Is your feature request related to a problem? Please describe.

At the moment they're pretty basic with just some styled text containing the bio.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Bios should be styled
• Bios should display staff profile picture, role, name & bio

Compile resources for how to share code on Discord

One page I really want to have on this site is a how-to for various ways to share code on Discord.

I'd like to cover the following, so let's start by gathering screenshots, etc., for these:

• Single lines of code
• Codeblocks (and syntax highlighting)
• Sharing Gists directly from Codecademy
• Sharing code screenshots from https://carbon.now.sh/
• Uploading an entire code file

Remove HTML files once all views have been created

Past Hackathons page

Purpose

One page I'd like to have on this site is a page where we showcase past hackathons. We could include a description of the hackathon, the top teams, the discord handles of the winners and/or the winning project's github repo.

Is your feature request related to a problem? Please describe.

We need to have more incentive for the community to engage in our hackathons! Hoping this might help.

Proposed Solution

Open to any/all attempts or suggestions!

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Page should include features discussed above, and any others you think would be cool.
• If you can wireframe, a screenshot of that would be helpful!

Add information about forking to contributing docs

Purpose

Will add information to potential collaborators on how to collaborate via a fork, since users who are not part of our org (or added as an outside contribute) do not have write access, so cannot create branches/push code/PRs etc.

Is your feature request related to a problem? Please describe.

Our current contributes guide only applies to users who already have write level access to the repo, which does not include any outside contributions. We would have to add a section explaining forks that users from outside the staff team can use.

This could either be added to the current CONTRIBUTORS.md or it could be added as a wiki page.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Contribution docs should have information on working off a fork

Adding to staff.json

Creating an issue in order to be able to add to staff.json

Change build and deploy action

Purpose

Use GitHub Actions to build CSS from SASS and deploy from a separate branch.

Is your feature request related to a problem? Please describe.

Right now we're having to commit all of the compiled CSS when we make a change so that the deploy uses the Bulma SASS styles. This is less than ideal and can cause huge diffs as well as unnecessary files on our repo.
Our current setup also results in an inaccurate languages graph:

Proposed Solution

Have git ignore the Bulma CSS locally and use GitHub Actions to compile the SASS for us, commit it to a separate branch, and deploy from that branch instead of main.

Acceptance Criteria

Please list the requirements the implementation of this feature should meet.

• Contributors shouldn't need to track/commit changes in bulma_styles.css when making SASS changes.
• GitHub Actions should compile the SASS and deploy from separate branch that has the generated bulma_styles.css file in it.
• Everything else works the same as before.

Additional context

Add any other context or screenshots about the feature request here.

Finalize Design for main page and Nav

Let's try to get this done in the next week or so. I'd like to get something up on this site, so we can start using this to help our server members.

Excessive top white-space and too large heading sizes on mobile

Describe the bug

On mobile devices with lower resolution (such as phones) there is excessive white space above the page headings. It is most noticable on the "How to share code" page. Less critical but also noticable: The page heading fontsizes also appears too large on mobile.

Expected behavior

The excessive white space should not be present on mobile devices. Page headings should be sized correctly for mobile devices.

To Reproduce

Steps to reproduce the behavior:

1. Use a typical phone browser.
2. Click on 'Sharing Code' (where the effect is biggest).
3. See the page heading too far down on the page and heading font size is very large.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

This is likely related to hardcoded values for margin and/or padding. Switching to a responsive setting for those may be an option. The bulma spacing helpers use rem which may be one approach to solving this. The page headings (especially the top one) also appears larger than ideal on mobile. An adjustment to responsive font sizes can perhaps also be included in the fix.