livecoders/website

Website for the Live Coders Twitch Team

livecoders/website

Website for the Live Coders Twitch Team.

Setup Instructions

The site is built with Gatsby. Make sure Node.js is installed before working on the site.

Clone down the repository and install the dependencies

git clone https://github.com/livecoders/website.git LCWebsite
cd LCWebsite
npm install

Then, to start up a development server, run the develop node command.

npm run develop

The site will be spun up on port 8000 and if you update any page, the site will reload automatically.

Member Page docs

Every member of the Live Coders will have a markdown file in the src/members folder of this repo.

If you want to watch a video on how this works, watch Live Coders Site: Tutorial on filling out a member page

Each page consists of the following initially:

---
username: csharpfritz
profile: ../img/members/csharpfritz.png
---

The username is used for the URL, the header, and the username to your twitch page. The profile is a relative path to where the profile image is located. All images are initally pulled from Twitch, but you can add your own image / update it whenever you wish (Remember to update filename / extension if it changes).

Then you can add even more content in the frontmatter. None of the following are required but include:

• social links:
  • twitter
  • instagram
  • devto
  • github
  • linkedin
  • stackoverflow
  • youtube (needs a full URL as a custom URL requires 100 subs or more on YT)
• schedule: an array of strings for when you stream. Feel free to add text including scheduled streams that you do on a frequent basis
• tags: an array of things you do. This includes programming languages, frameworks, spoken languages, etc
• sites: an array of additional sites you wish to showcase on your page. Limit this to only the URL

And after the frontmatter section, add a paragraph or two talking about what you do / what you do on your stream. You can use either 1st or 3rd person here.

So a full example may look like the following:

---
username: csharpfritz
profile: ../img/members/csharpfritz.png
twitter: csharpfritz
instagram: csharpfritz
youtube: https://www.youtube.com/user/jfritz828
schedule:
  - Sundays 10am - 12PM ET
  - Tuesdays 10am - 12PM ET
  - Wednesdays 10am - 12PM ET
  - Thursdays 10am - 12PM ET
  - Fridays 10am - 12PM ET: Fritz Fridays
tags:
  - C#
  - Blazor
sites:
  - https://jeffreyfritz.com
---

Jeffrey T. Fritz – or simply “Fritz” is a Program Manager for Microsoft on the ASP.NET and .NET Community Outreach teams...

website's Issues

Add Prettier Config

Add a .prettierrc file so we can standardize how things should be formatted.

OpenGraph images for the site

If we generate OpenGraph images for all of the various routes with the design style already existing site, if you link to a page on a social network like twitter or facebook or messaging app like slack or discord, it will pop up with an image instead of just the URL.

Live Channels listing on frontpage

Have the ability to see live channels on the frontpage. At the bottom of the listing have a link over to the team members listing

Member listing links do not work if username has any capitalization

The link from the member list does not work and just returns an empty page. Refreshing the page that you got to via the link will update the url to the correct capitalization and show the profile.

Home Page Image of Team Members Upside down on some browsers

On an iPad (at least), the photo of live coders in the second section is upside down. Some in stream chats have seen it as well. I've only seen it on the iPad.

Remove current conf banner, componentise, document on reuse

Here is the plan:

• Remove the LCC3 site-wide banner
• Create a conf site-wide banner for future use
• Add a link to the nav (header/footer/etc) for the static lcc3 page)

To enable:

• In the future, that banner can be used quickly
• A static page can be deployed quickly
• Future iteration is an index of conferences, each conf has a page, and a single "conferences" link in nav

Add 404 Page

The 404 Page needs some love. An interesting, funny and yet helpful page would be better.

Integrate Weekly statistics into homepage

Currently on the Live Coders Heatmap, there are weekly stats for the team at large. this could be transferred over to the homepage through an API that either is hit clientside or prefetched at buildtime

How about displaying an online/offline badge against everyones name / in their card on the members list / page details

I've implemented the same thing on my personal site, similar to the below, we can use shields.io to accomplish and display something like this, and clicking on the button launches that streamers twitch stream in a new tab.

Quick mockup:

If you think its a good/valid idea, I'm happy to take a stab at it

Keep custom profile images when running genMembers script

Today, running genMemebrs will retrieve the current profile image from twitch for all members. That means it's not possible to use a different image on the website vs twitch. I suggest we update the script to only download images for new entries to the member registry.

Twitch Setups Posts listing

Many of the Live Coders have blogposts about our setups (Hardware, OBS, Overlays, etc). It would be neat to have a page to have an aggregation of them so if you want to learn about a particular Live Coder's setup, it may be available there

Add StackOverflow to member profile links

Some users may be active on StackOverflow and it would be cool if they could show that off in their profile page.

If I didn't miss anything, a frontmatter entry like this should do:

stackoverflow-id: 2525313

Translates to https://stackoverflow.com/users/${stackoverflow-id}.

Add more prominent Twitch Team page link

@talk2MeGooseman commented that it's not blatant on how to get to the Twitch Team page, so it may be good to place it somewhere on the site (maybe like the main nav)

Tech Stack

We should figure out a tech stack for the site. If you have an idea for a stack that could be useful, make a comment below and try to have pros & cons for why that would be a good choice. If you like a stack already suggested, give it a 👍

Create a redirect URL for jersey orders

As mentioned on Discord, giving the jerseys a permanent link that redirects to the shop page to make it easier to remember and share. As @csharpfritz mentioned, making it an entry in the netlify.toml page would make the most sense, such as "jerseys.livecoders.dev".

There is one caveat I wanted to check about and discuss first, however. An HTTP 301 is a permanent redirect. Per the spec, browsers MAY cache this response and avoid a DNS lookup for later requests. Will the link for jersey orders remain the same year to year? I presume that the plan is to stick with Custom eSports barring anything unforeseen, in which case, all aboard!

However, if they decide to change their URL structure at some point, and don't add the 301 redirect on their end, I'm not sure how browsers would handle a permanent redirect to an HTTP 404 page, or even HTTP 310 (Gone).

Thoughts?

Archive List of Past Speakers

The Speakers page on the website is now empty? Where can we find a list of past talks and speakers from the April 9th conference?

Past speakers should be archived on the website, following the lead of most other conference websites.

For example, GitMerge 2020

Fix bl security vulnerability

Dependabot is throwing a warning that the bl package has a vulnerability of unintended memory exposure. Going through the chain, this is caused by one of the rollup plugins for the OpenGraph image generation script which the plugin has not been updated in years and there is not any signal of fixing it.

Instead, I'm just going to migrate the compilation of the react code in that script to use Webpack instead. I've done such in my personal website and it works the same of compiling the JSX down to regular JS that the browser can natively understand.

Pages' CSS added as Global

Issue

Within the application.css there is a background image for the hero class:

website/src/css/applications.css

Lines 1 to 6 in e804236

	.head {
	background-image: url("../img/home-hero-background.jpg");
	background-size: cover;
	text-align: center;
	padding-bottom: 150px;
	}

However, when you look at the live site, you can see that this image doesn't get load, but another CSS class will affect the head element instead:

This CSS is actually coming from olivecody.css:

website/src/css/olivecody.css

Lines 1 to 4 in e804236

	.head {
	background-image: url("../img/about-team-heo-background.jpg");
	background-size: cover;
	}

This issue isn't limited to Application and OliveCody but effects all pages. As each page is loading their associated CSS file, all of these properties are being added as part of the Global CSS.

Add a Resources Page

This resource page would be linked from the footer and contain items to resource like branding guide, digital swag repository, and any other helpful materials for reference. More to come.

Automate creating member pages

There is a NodeJS script at https://github.com/livecoders/website/tree/master/scripts/genMembers which will generate new member pages on the fly so we just need to hook it up to GitHub Actions and then set it on a schedule to occasionally generate pages as we add new members over time.

Please remove juiceboxhero from front page images.

Please remove my image from the front page collage. Thank you!

Add LinkedIn as a option for social media icon/link

Add option to include a linkedin url/name as a social options

Create static page for conference details

Articles and Section swap

Problem

The use of <article>s have been confused with that of <section>s in the current form of the website.

I say this since I see articles been used to reference standalone pieces of data of a whole picture and sections representing the self-contained distributable info.

Reason

<article>'s Definition

The HTML <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).

Source

<section>'s Definition

The HTML <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an HTML document. Typically, but not always, sections have a heading.

Source

Solution

Swap the articles with the sections and in some cases, remodeling needs to be done since it's also partially used as a generic container in some cases.

Member pages

It would be nice to have a single page for each member of the Live Coders to promote their stream and brand.

This also could include:

• content about what they do on stream
• regular stream times
• social media links
• links to personal sites / blogs

Accessibility review

There are a variety of accessibility violations as reported by the Axe, Wave and Lighthouse reports. Would be good to address!

Add a .devcontainer for launching the repo in a container with VSCode Remote Development

Missing YT link

Footer doesn't contain a link to the Live Coders YouTube channel.

Rename the genMembers workflow

The genMembers workflow is the daily CD build - it should be renamed as such as it actually updates the site.

We should also remove the commit and/or add the src/img/livecoders-collage.png file to the .gitignore file so it doesn't get commited and spam the live-coders-website channel on discord / emails via notifications.

GraphQL schema for member pages

It would be good to create a schema for the individual member page so if a member doesn't have a particular field or item that is common across the data model for the page, then it will just leave that field as null and then it can be conditionally checked before being rendered

Filtering & Searching on Team Members Listing

Have the ability to either search by name for streamers on the team or filter down by categories (Programming Languages, Technology, Category, Spoken Language, etc)

Open social and external links to a new tab/window

Update social and external links in members (and website's social links?) to a new tab or page. To keep visitors on this page than overtake the website.

Homepage Mobile View Width

Yes, there is an issue with the homepage width on mobile going past the max-width.

Add a blog-like feature

Add a blog feature to the site to help highlight and announce events, members, or other helpful details surrounding live coders.

This feature would include a landing page to scroll/browse through the articles. Pull up the article in a page of itself. Also tag topics/categories for each article. This way we can create a link to a topic of articles from other parts of the website.

Add an Option for Gitlab

I tend to use Gitlab over Github so thought an option for GitLab would be handy.

[BUG]: Update Outdated Twitter Icon on Website

Issue Summary:
The website currently uses an outdated Twitter (now known as 'X' ) icon that doesn't align with the latest design and branding guidelines provided by Twitter. This issue aims to request an update to the Twitter icon for a more cohesive and up-to-date user experience.

Steps to Reproduce:

1. Visit the website
2. Navigate to the footer section where the Twitter icon is displayed.
3. Observe the outdated Twitter icon design.

Expected Behavior:
The Twitter icon on the website should be up-to-date, in line with Twitter's (now known as 'X' ) current branding guidelines.

Actual Behavior:
The website is currently using an outdated Twitter (now known as 'X' ) icon, which can be confusing for users and does not reflect a commitment to maintaining a modern and polished appearance.

Team Roster

It would be useful to have a page that people can see a full listing of the team and be able to filter down based on various filters:

• currently live
• languages
• toolchains
• timezones

Add Swag store to website

Add a link and promote a few items from the Live Coders Swag store - https://www.designbyhumans.com/shop/livecoders/

One thought: add to Olive & Cody page.

Remove stale IWD conf banner