It's similar to issue #5, but instead should only show and link to the next few events. Should be responsive on both desktop and mobile devices. Design references can be found here.

Description

This is a collection of all the information we need to display on the website to release it.

• Name of club
• Logo
• Slogan/Motto
• About us
• Link to club introduction
  • Found here
• Social links
  • Facebook
  • GitHub
  • Slack
  • Email
  • Email sign up

The logo and the images in the slide show presentation are too big. As a result, the website takes too long to load. They need to be compressed to sizes less than 500KB. It's possible that the logo could be replaced with the svg version (found here), which would also make it scalable to different sizes.

Compression should be done via a cross-platform tool. Be sure to document how the images are compressed in the docs folder, so we can be consistent doing it in the future.

It is proper practice to give credit to other open source projects were using. Currently that is just the fonts, but it may grow to include more. We will create a CREDITS.md file (as described in the club-project-template) for this.

Should pull information from the technical part of our resources repo to display:

• The technology
• Description
• Useful links

Should be responsive on both desktop and mobile devices. Design references can be found here.

Add an ESLint configuration (we can come up with some general rules for our code if needed).

Integrate this with GitHub actions such that feature branches will fail actions on linting errors.

Master branch will fail to deploy and build on linting errors.

Description

We need a few example designs to start working off of. They can be made with anything (paper, software, etc). You can get input on the slack channel. Please share them below!

Currently there is no clear direction for the website. Some of the issues are from before the react conversion. There are a few main goals we need to complete before the website is in normal working condition again:

• Convert the frontend to react hooks. This is required since it changes much of the structure.
• Update documentation to match new processes and code.
• Revamp labels. The current labels need to be updated to better reflect the new direction of the project.
• Review all existing issues and either remove or rework them.
• Define a clear goal for v1.0 of the website. This includes intermediate milestones as well as any additional issues.

Would there be interest in hosting progress reports? I know in the past we've talked about project leads giving status reports to the club, but perhaps we should just publish them to the website instead!

Option 1: Allow Users with "Project Lead" Status to Submit Progress Reports

Prerequisite Work

This would be the heavier option for this system. We'd need to do a few things to implement it.

• Link frontend to backend login state
• Finish the club database for Single Source of Truth
• Allow server admin to assign roles / Pull project leads from database

Base Work

After we accomplish these, we could begin implementing the progress report system which would include the following base features.

• Allow Project Leads to upload or write reports on site
• Allow for editing on reports
• Links in the projects page to the most recent report and an archive of old reports
• GitHub profile picture of writer
• Formatted Report (Possibly mimic GitHub Markdown).

Stretch Goals

After the base features are implemented, we will want to add (a lot!) more polish onto the reports. These are features that would be nice to have, but only after we have a stable base.

• Create a more advanced editor, possibly resembling that on GitHub
• Show recent project updates on the home page
• Allow for Project Leads to insert a photo to represent their project, or have a single photo at the top (e.g. cover photo).
• Alert Project Leads with bot to write a new report
• Send an automated Tweet and Discord message with the project update

Option 2: Pull reports from GitHub

This option would involve less writing and changes on the website, but it's also a less interesting option over time. For this, we would use the GitHub API to pull a report.md file (which project leads would write) from the project repos. This would get rid of the need to create an editor on our site, and fast-track getting the page up. If enough people want this feature, we can discuss it, but Option 1 seems like a much better option to me.

We need the about page as seen at the bottom left here. It should have three separate sections about, history, and a get in touch. The first two should have a title and paragraph, the last should have a tile and a list of all of our social links with descriptions for them (e.g. Slack for announcements and project discussion, Facebook for events, GitHub for code, etc). Note: Don't worry about the header (#6) or footer (#7), as though are different tasks. It should be resizable for both mobile and desktop devices.

Description

Implement responsive design (have the website resize and arrange itself on different screen sizes). The experience on:

• small phones
• phones
• tablets
• laptops
• desktops

should be pleasant and present all the required information (from issue #2)

Examples

One way to do it might be using CSS grids with media queries. If you have another idea, please comment about it below!

The old website should redirect to the new one. Because it was hosted on GitHub, we'll need to use a client side option.

Once that works, make sure to minimize each page so they quickly redirect.

Resource

• Options

The ".html" looks a little unprofessional, as does having the home page go to "index.html". I'd like the current navigation to work without the ".html" and ".html".

The ".html" part probably needs to be changed in the nginx config. Though there might be some other option.

The "index.html" I think can be fixed with the homepage links on the other pages.

Resources

• index.html example
• nginx example

We originally chose "Noto Sans" and "Noto Serif", because they seemed like a good pair. In practice certain things (like the header and footer) seem off.

Some new suggestions, particularity for the header and footer, but other things as well, would be appreciated.

Resource

• Google fonts has a lot of options and will recommend some pairings

Both history and about (maybe even how to get started) should be more fully fleshed out.

After other issues in the first release milestone are finished we need to clean up the code and website to make it cohesive and responsive.

The list in the meetings column of the about page is too far to the left, especially on Webkit based browsers (Chrome and Safari). In addition, the look of the who list could be improved too.

One place to start might be removing all the default styling for ordered CSS lists, which can be done in the unified.css file. Though, the rest of the CSS modification will probably be in the about.css file.

The current styling/layout of the website is great for mobile, but I find a few things to be offsetting:

• excessive whitespace
• too harsh on the eyes
• an odd color scheme
• layout used to display elements that lack purpose or design utility

To solve this I suggest a few things:

1. A darker theme, the white can strain the eyes when trying to read or sift through the information presented.

2. A completely new layout bringing more when landing on the home page. Currently there is some excess information that does not help people find more about how to get involved. Use some examples from other clubs or other online resources.

3. More description about projects and how to get started on those rather than business-y keywords. (a.k.a. replace the 3 cards on the front with something more descriptive)

4. An additional component for simple event login so people can be recognized for attending (no email/password required).

5. Adding a bit more artwork and movement to the site either using CSS animations and/or images (isometric images are cool).

Here is a quick model for an informational component, just example text:
https://image.prntscr.com/image/gXk1oKy6T1epIhfOMtWzIw.png

We should direct people to the club's getting started repo in the get involved section of the club website.

Having a quick user sign-in form (no email/password pair required). This could easily be an integration with our Discord bot as well. I would suggest having email and name to account for people attending our events.

Some if cases to be aware of:

• no events currently active, let user know
• user already acknowledged their event attendance (no duplicate check-ins)
• recognize user is not registered, let them know they can track their event attendance if registered (and view their contribution status to our projects)
• if a user is a registered user, update their event attendance with event code/name (depending on schema)
• any other necessary cases in which make sign-ins as quick as possible
• VITAL: secure with reCaptcha, we don't need bot spam filling our database

OAuth is a new feature for the club website.

This would allow users to more easily login to the OSC website using pre-existing accounts using other services.

I would like to see this feature implemented using at least Google accounts. Possibly could do Facebook as well

Currently the CSS for the navigation bar (both in desktop and mobile modes) does not use Flexbox for positioning items. This means the code is messy then it needs to be. It would also be nice to use more up-to-date options as well.

Look through the Flexbox walk though on MDN and update both the desktop and mobile versions of the navigation bar to use Flexbox.

Each project could optionally show when the project is going to be released.

It could be related to the milestone (pulled from GitHub) or be a date set on the website itself. It would not have to be displayed if the project dosen't have one.

We need the home page layout as seen here and here. It should have a section for: the slideshow, promote, support, create, upcoming events, and how to get involved. Note: Don't worry about implementing the header (#6), footer (#7), slideshow (#8), or upcoming events (#9), as those are different tasks. Just create an empty element of those sizes as a place holder. The promote, support, and create should each have a title, image, and text area to describe the club (similar to this example). The get involved section should be a title and description. It should all be resizable for mobile and desktop devices.

A favicon is the little icon you see in a tab. Ours should be the club logo (it might need a background). It'd be great if we could just use the "small-logo.png" already in the assets folder. Remember to add the favicon to all the pages on the website.

To be frank, the About page leaves a lot to be desired in both content and design. Let's change that!

Since our About page is meant to hit all three of the main objectives of the Project Roadmap (#68), it has the responsibility of being both engaging and informative to members both old and new. The information is definitely there, but we need to present something more than a text document.

The long-term goal something akin to the SwampHacks Website, but for now we can focus on smaller improvements such as the following:

Photos

We've got the right idea on the Home page's slideshow, but the About page should definitely show some of our members. Perhaps we could show off some of the officers in one sections similar to how ACM does. And in another section, we can show the Project Leads!

Timeline

The current history section makes the page stretch more than it needs to, which makes it look less professional. Luckily, there's a great solution for situations exactly like this one: Timeline! I'm envisioning one that winds back and forth along the page showing different milestones in the club's history. Perhaps we could also color code sections to reflect either the current president or the current "era" of the club and include the president's picture.

We should have each of our active projects be it's own element, with a description, screenshot (if applicable), link, and list of members working on it

There is extra white space on the about page, on the top right and bottom left. It appears in both the desktop and mobile view (where the about page columns might also be pushed outside the frame to the right if the display is small enough).

This should be fixed with CSS in the about.css file. It is probably due to the minimum size of the components or the margin/padding.

In the current branch of the club-website repository, theme.js, and routes.js is not named correctly and must be changed to "Theme.js" and "Routes.js" in order to start the website.

his should help plan and explain the features and work that needs to be done for the project. It is a living document, so the specifics and goals will change overtime.

Goals

The website exists to do three things for the club

1. Help on-board new members
2. Help existing members by being a hub for club information
3. Make a good impression to visitors

Version 1.X

The website code is pretty straight forward right now (which is a good thing)! Though there are a couple improvements we could make.

The CSS/JavaScript class names are inconsistent and a little confusing at times. It will make it easier for others to make changes (and possibly simplify the CSS) if we adopted a consistent naming scheme like Title.

We could also decrease load times by reducing the image sizes. Ideally we either have a well documented set of steps to do this or we could configure some sort of bot to do so.

Related issues:

• #43, #66

Version 2

The website would be much more useful if it pulled information about events and projects from the back-end (which can manage if the project is active of send us all the upcoming events) and let members sign in to meetings.

The actual pulling of information is tied to the club-back-end, but work can be done on creating the visual look can definitely be worked on prior. In fact, there is already some work on getting the sign-in and events page done.

Features:

• Allow members to sign-in to evens, let them know if it succeeded, and prompt them for more information if requested.
  • #37
• Pull in and display event information from the back-end
  • #5, #36
• Pull in and display project information from the back-end

Version X

Look at what is most useful at this point. We've discussed showing meeting notes, rendering our club-resources (probably stored in the back-end) (#11), adding a contact page (#65), countdowns based on project milestone (#18), and just revamping the text and style to suit our goals better.

This panel should let users easily create, read, update and delete (CRUD) items in the club database (see issue #31). It should only let approved users access it, and will probably be hosted on a subdomain (like admin.ufopensource.club). It could use some sort of framework, but I'd like to see what people can come up with otherwise.

Another Open Source Student Network club has done something similar, so we should look at it to see how feasible it is.

Description

I'd like to have a page to display our current projects. Instead of updating this directly in the HTML, it should pull in information from the project's GitHub pages and out active projects file.

Currently the user landing page has no features or styling. This issue aims to create a more friendly user environment. A couple of key components include:

• Restyle the user sign out button
• Include a way for the user to see their attendance
• Include a way for the user to update their information
• Includes user project groups

There are other goals for the user page to display but these cannot be implemented until other features are completed first. If anyone else can think of important items to have on the user landing page please feel free to contribute.

The header should include the logo, links to the other pages on the website. It should also resize on smaller devices. To avoid clutter, the links should be hidden by some sort of menu button. When clicked the button should un-collapse and show the links.

Two fonts don't load: NotoSans-Regular.woff and NotoSerif-Regular.woff. Make sure both files exists in the repo, and that both are being properly deployed to the browser.

We should keep the current projects updated and have the website pull information from it. It needs to display the active projects in a similar way to the reference, and be responsive on both desktop and mobile devices. It should include

• Project picture (if available)
• Title
• Project lead
• Description
• Collaborators
• Links to the code and other sites (if available)

Design the look of an individual project item. Mock up with HTML and CSS what it would look like with some example content (don't worry about actually getting the information, that's issue #10). It should have a spot for the name of the project, a description, the project lead, links to the GitHub and other project contributors, and an optional image. It should resize for desktop and mobile devices.

Design the look of the resource item. Mock up with HTML and CSS what it would look like with some example content (don't worry about actually getting the information, that's issue #11). It should have a spot for the technology name, description, and links for it. It should resize for desktop and mobile devices.

It should have an auto-scrolling slide show that is responsive on both desktop and mobile devices. There should be arrows on either side to manually scroll through. Use minimal JavaScript if it's needed. References can be found here.

There was no class naming scheme at the start of this project. As a result, the current names are kind of a mess and I'm sure the CSS rules are more complicated because of it. I purpose (though I'm open to other suggestions) that we adopt the Title naming scheme, because it is simple and clean.

We need to:

• Update all class and ID names, using the new naming scheme, in the HTML files and their corresponding CSS
• After verifying the old rules till work, reduce and simplify CSS rules using the new names. Make sure that the actual look of the page is not altered negatively
• Add a CSS style guide (it should go into the club-resources repo, but we need to link to it from here) that includes the naming scheme and anything else that makes sense

Many websites will have a page with a contact form and/or links and email addresses to contact them directly. We do have all of our links in the footer, so I don't know if it is necessary as it just adds more to maintain and clutters the site. Another option would be to add a new field to the about page. My question is, do people think we need one?

Description

I'd like to have a page to display all of our meetings. Instead of updating this directly in the HTML, it should pull in information from either our Facebook or Google Calendar. The user should be able to click on the event and get information about when and where it is. It should also have some sort of image. If the event already happened and it has notes for it (mostly GBMs) it should display those too.

• Pull events from Facebook or Google Calendar
• Display them in a linear and/or calendar format
• Have location, time, and description per event
• Display meeting notes if they exist
• Add the next few upcoming meetings to the homepage

We need an event's page that will display all the events. It should by default show the next 10 upcoming events first, but have a switch to see all events in chronological order. The events will come from a REST call to the backend, but don't worry about that for now. Focus on creating the layout for each event and the whole page.

It should have links to our Facebook, GitHub, and Slack, preferably with icons for each site. Needs to be responsive on both desktop and mobile devices. Design references can be found here.

Design the look of the event item (top right). Mock up with HTML and CSS what it would look like with some example content (don't worry about actually getting the information, that's issue #5). It should have a spot for the event name, description, and link to the Facebook event page. It should resize for desktop and mobile devices.

Look into creating a database to store events, resources, project info, meeting attendance, and more (please add ideas below)! The idea is that we will have a common database where all projects (bots, website, future things) can access and store data relevant to the club. The website would send REST request (using JavaScript) to get the data and populate it into the page.

Things to consider

• Authentication
  • With access control (.e.g. only allow read access to events table for the website)
• Accessible via different tech
• Open source (of course)
• Familiar tech
• Other?

We should have a single sign in page for the club. It will be a form where people can enter in their UFL email address and click sign in. It will then communicate to the backend with a REST call (don't worry about that for right now), where it will get one of three messages:

1. Sign in complete, existing member
   • In this case just show a success message and empty the fields so someone else could sign in
2. Sign in complete, new member
   • Their email wasn't in out database, so we will pop up some additional fields (first name, last name, GitHub handle, if they would like to join out email list, if they would allow us to share their sign-in info with ACM) that the user could fill out (all or some of them) and submit or they could hit "no thanks" to not add the information. If they did submit additional info, make sure they get a confirmation as to weather the server sends back a revived reply or not (like in scenario 3).
3. Sign in failed
   • Something went wrong and their sign in was not recorded. You should have a message letting them know, so they can try again if they want.

Get SSL Certificates working from Let's Encrypt via Certbot. This would preferably be done with the Docker container, but I've had issues with that. So I'll try to get it with regular Certbot (and document it in the club-stack repo).

Fix visual issue where the nav-bar is too obstrusive in a certain range of screen dimensions such as medium sized screens (600 x 900 for example).

To Reproduce
Go to browser dev tools, and change the screen size to 600 x 900.

Expected behavior
Rearrange the nav-bar so it displays the different options in a less obtrusive way.

Screenshots