Issue Context

Currently, when we add a new member to the members.json file, we then have to run a command to get updated member data from github. The problem is, the user needs to be authenticated with github on the command line to run this command.

This limitation prevents us from simply running the fetch on every build and excluding the membersData.json file from version control.

Is there a way to automate (via github actions perhaps) running this command and then committing the result?

Are there better solutions for this?

Issue Context

As discussed in Slack, it would be great to create an API of common developer terms, and a browser extension and/or page in virtualcoffee.io. When a learner comes up on a term they don't understand, they can use the resource to easily find the definition and helpful resources/examples.

Suggested Solution

We would build an API of common developer terms, which would include the definitions and other resources like example. This would then be used to build a browser extension and/or page on virtualcoffee.io.

I feel that we should focus on the API first, with this issue, as we'll need a functional API to build the other two projects. We could start issues for those projects when we have the API to work with. This is open for discussion.

Alternatives Considered

Additional Resources

Issue Context

Our December challenge needs some data tracking! Similar to the November challenge, we need a way for our members to track their stats throughout the month.

Suggested Solution

• Use a json file to store the data and allow users to edit
• Use 11ty to process the data in whatever forms are needed
• Display the data via nunjucks templates

Things to figure out

1. Data format:

This is a little more complex than the last challenge, since there are two people involved in one trackable pairing session. We want a list of sessions, and ideally adding an session should just be one edit. The tricky part comes with how to uniquely identify members, which would be a requirement if we want to show totals for each member. For example, imagine if I added two sessions, but spelled my name differently in each:

{
  "sessions": [
    {
      "members": [
        "Dan",
        "Vic"
      ],
      "description": "11ty virtualcoffee.io pairing session"
    },
    {
      "members": [
        "Daniel",
        "Bekah"
      ],
      "description": "11ty pairing session"
    }
  ]
}

There'd be no way to know programmatically that those are the same people. We'll also run in to naming collisions if we rely just on first names.

Couple solutions to this that pop into my brain:

1. Using github usernames:

{
  "sessions": [
    {
      "members": [
        "danieltott",
        "needcaffeine"
      ],
      "description": "11ty virtualcoffee.io pairing session"
    }
  ]
}

Pros: easy to edit, if we have member data we can use that to display actual names
Cons: may be confusing? Also dependent on users having added themselves to the members page and dependent on us never changing that in the future

2. Adding a participants list to the event json:

{
  "participants": {
    "danott": {
      "name": "Dan Ott"
    },
    "vicvijayakumar": {
      "name": "Vic Vijayakumar"
    },
    "bekahhw": {
      "name": "Bekah Hawrot Weigel"
    }
  },
  "sessions": [
    {
      "members": [
        "danott",
        "vicvijayakumar"
      ],
      "description": "11ty virtualcoffee.io pairing session"
    },
    {
      "danott": [
        "Daniel",
        "bekahhw"
      ],
      "description": "11ty pairing session"
    }
  ]
}

Pros: all data is contained in this one file, can easily add info specific to this event
Cons: a little more info for users to add/keep up to date.

I'm sure there are other options I haven't thought of yet.

2. What to display

Do we want a list of specific sessions? A matrix showing how many times people paired with different people? A leaderboard-style table with a row for each user? Other things??

Issue Context

I just filled out the form to be added as member and after I clicked submit I think I had a doubt if I entered the correct github username and other details and there was no way to for me to verify it

Suggested Solution

Show the details you submitted in the form in membership-thankyou/ page

Alternatives Considered

Mail could also be sent to the user with the details they entered

We spent our first month of the new year learning! This month, we did a choose your own adventure challenge. You might've learned something for work, explored a new topic, or took a deep dive into one you wanted to learn more about. And now we want to hear all about what resources worked for you! Below you'll find steps to add your favorite learning resources for the month.

To add the resources you'd recommend:

• Follow these steps to create a fork of this repository and clone it to your local machine.
  ** If you've previously worked on the site, make sure you pull down the latest version
• Create a branch called something like monthlychallenge/add-recommended-resources
• Open src/monthlychallenges/jan-2021/jan-2021.json
• Add your recommended resources to the end of the challengedata array

ENTRY FORMAT:

{
  "name": "Your Name",
  "resources": [
    {
      "title": "The title of your resource",
      "resourceLink": "link where others can find it",
      "description": "A brief description of the topic, level, coding language if applicable.",
      "price": "whatever you paid for it"
    }
  ]
}

• Commit the update
• At this point, you can preview the site locally, but it's not required. You will also be able to preview the changes after the PR is created.
  • To test locally, follow the Local Development steps listed in our README
• Push your branch up
• Create a Pull Request and be sure to include a link to this issue
• After the Pull Request is created, Netlify will automatically build a deploy preview and link to it in the Pull Request.

And you're done!

Our Contributing Guide has a lot of information about getting started with GitHub and Pull Requests, so you might want to take a look at that as well if you are new to this process.

Please feel free to add any questions here in the comments!

Issue Context

Currently the dateForDisplay isn't setting the correct time zone, so it's defaulting to UTC. For now, let's use EST and maybe in the future we can add a dynamic piece that adjusts to the user's local time zone.

Suggested Solution

The dateForDisplay filter is a custom one we created in `.eleventy.js:

const defaultDateOptions = {
  zone: 'edt',
};
eleventyConfig.addFilter(
  'dateForDisplay',
  (dateString, format = 'fff', opts = {}) => {
    const resolvedOptions = {
      ...defaultDateOptions,
      ...opts,
    };
    return DateTime.fromISO(dateString).toFormat(format, resolvedOptions);
  }
);

It's using Luxon's toFormat function, and I incorrectly set the zone param (edt is a typo, but even if I had typed it correctly it wouldn't work 🙄 ). Luxon docs have an entry for setting a time zone, and I think either the "IANA" format ('America/New_York') or the "fixed offset" format ('UTC+7') will work well here.

Just a note - since this is happening at build time, if we don't set a time zone, it will default to the time zone of the computer doing the build. So without a time zone set, when I run start or build on my machine, it is outputting EST times since I live in Cleveland. But the netlify build server is set to UTC, which is why on the site that's what we're seeing.

Alternatives Considered

Sometime in the future we can do some dynamic stuff but not now.

Issue Context

We now have three different loops where we're outputting the same markup for members. Let's abstract that out into a macro that we can call when displaying a member card.

Suggested Solution

We'll use a nunjucks macro for this.

Create a file called src/_includes/macros/members.njk, and create a macro called membercards. We can copy one of the membercards blocks from the existing src/members.njk template (the div <div class="membercards"> and its contents).

members.njk should look something like this:

{# src/_includes/macros/members.njk #}

{% macro membercards(membersList) %}
<div class="membercards">
  {% for member in members %}
    {# template content here #}
  {% endfor %}
</div>
{% endmacro %}

Then in the members template, we'll need to import the macro at the top of the file:

{% from "macros/members.njk" import membercards %}

Then we can replace the existing loops with our new macro:

{# example for the Members section #}
<h2 class="mb-sm-3 mb-md-5 display-4">Our Members</h2>
{{ membercards(members) }}

This can be applied to all three sections where we're looping through.

Describe the bug

On the members page (https://virtualcoffee.io/members/), if the GitHub user does not include http:// or https:// in their GitHub website link, a new tag is opened with the path appended to the virtual coffee URL instead of the GitHub website link.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://virtualcoffee.io/members/
2. Click on Suraj Panchal's name or website link
3. See error (404 page for virtual coffee)

Expected behavior

Should open to Suraj's website and not to a link in virtual coffee's website.

Screenshots

Desktop (please complete the following information):

• OS: MacOS Catalina
• Chrome
• Version 85.0.4183.121

Issue Context

We now have a couple pages that are generated from markdown (The Resources section, the Code of Conduct and November Challenge update for example) and they could look much nicer. Something's off with the spacing between headers paragraphs, and I feel like maybe we could do something like creating some styles for hr to create more space.

In the Resources section, I've started adding containers that we could use to only update styles inside those containers. You'll also see some headers with custom classes applied inside the markdown - I'd like to be able to remove those and have the headers look like that by default:

Suggested Solution

I think this can be a style-only change - I don't know that we need to make any big changes to the template or the markdown engine, although I'd be willing to entertain any ideas.

It may be a good idea for the purposes of this improvement to create a couple test pages with some different markdown elements etc, but the CoC is a pretty good example right off the bat since it has headers and text.

Issue Context

In the interest of getting this out the door as quick as possible, I wired this up using an existing GruntJS setup I had and then bolted 11ty on top of it. Grunt is super out of date and we're not using some of the nicer features that come along with 11ty, but it does work.

I'd like to see a more modern build system going here. Unfortunately 11ty doesn't have anything for assets, which is what I'd really like.

Here's what the current system has that I don't want to lose:

• npm start creates a local server and automatically rebuilds for local development
• npm build creates a production-ready build
• sass support
• JS concat/minification/etc/maybe? There's literally no javascript on the site right now, but grunt is set up to do simple concat/uglify. One of the reasons I didn't just jump in with Parcel et al is that to get styles you have to create a javascript file and import the css file. It's possible I'm overthinking this.
• postCSS support so we can run things like autoprefixer, purge, and nano
• cache-busting via filename hashes
• hooked in to 11ty somehow

There's a lot of funky variables in play here.

The things I am optimizing for:

• Very very easy to use as a contributor
  This is the biggest one. Should be able to npm install and then npm start and get to work without having to think about or understand what the build system is doing.
• Highly optimized output
  The main reason to use 11ty is to have a small and fast site. We're very close to a perfect lighthouse score, and I don't want the build system to affect that negatively.
• Can adjust down the line
  This is the biggest issue with the current setup - it's a house of cards ready to fall down. Grunt (and plugins) are very outdated, and if we add new features here it'll end up being really difficult to get grunt to work with them.

If you'd like to contribute to this issue, let's start a discussion here before getting to work so we can discuss approaches etc.

Ref: Discussions with AV Team

Proposed solution

Add more questions to the form to collect necessary data at time of talk proposal

Collaborators

@danieltott
@BekahHW

Context for documentation change

Noticed that the table of contents in CONTRIBUTING.md contains the sections Preferred code style and Commit message conventions which don't exist in the document. This is potentially offputting for contributors who may think there is information they need to know but that they can't find.

Proposed solution

If the team are planning to publish guidelines on these areas shortly it may make sense to leave as is until then. Otherwise I suggest removing the sections from the table of contents.

Describe the bug

The "VC GitHub" link on the homepage (under "Get Involved") is broken - it leads to a content not found page.

To Reproduce

1. Go to the homepage
2. Scroll down to "Get Involved"
3. Click "VC GitHub"
4. See: "Content not found"

Expected behavior

It should take me to the Virtual-Coffee GitHub link!

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome (but replicable on each browser)

Additional context

Not super familiar with the build setup y'all use, but poking around at src/github.njk:

---
tags:
  - topnav
hero: 'svg/undraw_version_control_9bpv.svg'
homePageBlocks:
  type: small
  key: VC GitHub
  order: 4
eleventyNavigation:
  key: GitHub
  url: https://github.com/Virtual-Coffee
  order: 4
permalink: false
---

noticed that the permalink key is false, and maybe that's being injected as the permalink for that navigation route (instead of https://github.com/Virtual-Coffee?). Definitely would defer to someone who is more experienced with eleventy than I am.

More than happy to submit a fix if someone else can verify this!

Issue Context

https://uses.tech/

It'd be cool to add a /uses page to display the tech we use to create the site.

Suggested Solution

Create a page with the url /uses!

I'd be happy to help review/collect/suggest things to add if needed.

Additional Resources

Some great examples in the wild:

• https://www.iamdeveloper.com/uses/ (@nickytonline ❤️ )
• https://vicvijayakumar.com/uses (@needcaffeine ❤️ )

Instead of redirecting to the github page, have the COC on the site.

Describe the bug

On the members page, the available for work labels link to the virtual coffee members page. Basically, it looks like the page is reloaded.

To Reproduce

Steps to reproduce the behavior:

1. Go to the members page
2. Click on any of the Available for Work labels
3. See error

Expected behavior

Personally, I would make it so the Available for work label did not link anywhere.

Desktop (please complete the following information):

• OS: Mac OSX (Catalina)
• Browser: Google Chrome
• Version 86.0.4240.80

Issue Context

Once the podcast is up and running, it would be nice to have a page that shows the episodes, gives the interviewee's headshot, the episode number, the title of the episode, and links to where people can listen.

Suggested Solution

I kind of like the idea of having cards with the info. Maybe we have a json file with the info and a template that outputs the cards.

Alternatives Considered

Maybe this doesn't have to be just for the podcast. If it makes sense to have a page that includes podcasts and youtube videos.

Additional Resources

Issue Context

We have an .editorconfig set, but have never set up prettier. Would like to install prettier and create a .prettierrc file with some options set, so that when a user saves a file we can run prettier. We'd also ideally be able to run prettier in a pre-commit hook so that we don't have to depend on contributors having vs code extensions etc.

Prettier has support for html, js, and markdown out of the box. I'm not sure if it has support for nunjucks files (.njk). There may be a plugin somewhere for it - ideally we could get something like that rolling as well.

This issue being "done" looks like:

• prettier installed/updated to latest version
• .prettierrc file at root, configured correctly
• lint-staged (or other - the prettier site has some links) set up in package.json so that files are formatted correctly regardless of editor setup
• All files run through prettier at the time of the PR so that everything can start fresh

Issue Context

Every month, we try to get the newsletter up on the site within a week of sending it out. Currently, we're moving them over "by hand."

You can look at the existing newsletters ( src > newsletter > issues) as a kind of template. The sections are all the same. The content needs updated, and sometimes that changes the way things look, for example, your list may have fewer items.

Steps to update

You can look at the existing newsletters ( src > newsletter > issues) as a kind of template. The sections are all the same. The content needs updated, and sometimes that changes the way things look, for example, your list may have fewer items

• In the code base, navigate to src > newsletter > issues and create a new file 2021-05.njk
• If you don't get the newsletter, you can use this link to check out the current issue for content to update.
• Add the latest issue using the format from the past issues.

If you have questions, please let us know. We're up for pairing if anyone wants to walk through this!

-Using https://meetingplace.io/api, show upcoming events.
-Add a link to sign-up page https://meetingplace.io/virtual-coffee

Increase accessibility on site for language support and to allow scalable zooming

Issue Context

In order to improve scan-ability, let's move a couple things around.

Suggested solution:

• Move date up into a .card-header and make it a link
• Make the last link into a .btn

The output will end up looking like this:

<div class="card mb-4">
  <a href="https://meetingplace.io/virtual-coffee/events/3183" class="card-header" target="_blank" rel="noopener noreferrer">October 20, 2020, 9:00 AM EDT</a>
  <div class="card-body">
    <h5 class="card-title">Virtual Coffee - Morning Crowd</h5>
    <p class="card-text">Description if it exists</p>
    <a href="https://meetingplace.io/virtual-coffee/events/3183" class="btn-sm btn btn-secondary" target="_blank" rel="noopener noreferrer">Details and RSVP</a>    
  </div>
</div>

I'm pulling these classes from the bootstrap card docs

Describe the bug

On the members page, if the member has a website, the label says “available for work” and if not the label says “hireable”

To Reproduce

Steps to reproduce the behavior:

1. Go to https://virtualcoffee.io/members/

Expected behavior

They should say the same thing

Issue Context

Using yarn has become a step that seems more and more unnecessary for smaller packages like this. It also adds an extra step and an extra layer of confusion for newer developers, and the yarn 2 update is just a debacle.

We lose nothing by switching.

Suggested Solution

Toss yarn out the window and use npm instead.

Alternatives Considered

Not doing anything and pushing through

Issue Context

Following the announcement of additions to the leadership team, I was thinking there should be a third section on the Members page headed 'Leadership Team'.

Suggested Solution

Underneath the 'Our Founders' section, before the 'Our Members' section, I would add a 'Our Leadership Team' section.

Alternatives Considered

Alternatively, there could be one 'Leadership' section with titles on the cards for the founders.

If this change is desired, I'd be interested in working on it.

Describe the bug

If a user has a smaller profile photo on github (I'm not sure what makes this happen), and that member also doesn't have a bio, the member block ends up not taking up all of the space that it should once we reach the sm breakpoint. You can see this currently with Vanessa's photo.

To Reproduce

If Vanessa updates her github profile in the meantime, you won't be able to see this, but currently:

Steps to reproduce the behavior:

1. Go to https://virtualcoffee.io/members/
2. Scroll down to Vanessa's profile

Expected behavior

All of them should be laid out the same

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser FF, Chrome, etc
• Version [e.g. 22]

Additional context

We're setting a max-width right now, it's possible setting that to just width would settle it. Would be open to other solutions as well.

That's it.

Issue Context

It would be cute to have the VC image as the favicon image on the website.

Suggested Solution

Possible steps:

1. Create favicon.ico image file of the VC logo, in src/assets/images
2. add to head tag of main index file

Alternatives Considered

Additional Resources

MDN - Adding_custom_icons_to_your_site

Describe the bug

eleventy-plugin-pwa goes through and adds all routes it finds to the precacheManifest, which is normally what we want. The problem is, our form thank-you pages are being caught in there, which is not what we want, since Netlify uses those to actually receive the POST submissions.

I have removed PWA support from the site for now (#150) - let's find a way to add it back in. I think somehow ignoring those pages will the the best way, but it would be nice to be able to do that at the template level (ie adding some sort of "do not cache" flag to the head matter) than maintaining a list at the 11ty configuration level.

What to do if your VSCode editor gets stuck in nunjucks after contributing to VC

First of all, you're not alone. This has happened to a lot of us, including myself (@Cerchie ).
Second, you can fix this! Read on.

Steps to fix the problem

Open up your VSCode editor. Click on 'Nunjucks' on the bottom right.

Once you've clicked, a screen should drop down from your Explorer search box.

Select 'HTML'.

Source

If you have any more questions, contact us, the collaborators.

Collaborators

@tkshill @danieltott @Cerchie

styled after article written by Andy Cochran

Describe the bug

When I want to preview changes before making a pull request, npm run build-preview throws an error.

Expected behavior

I expect it to BUILD!!! 😜

Additional context

Upon forking and cloning down the repo, I ran npm install in the terminal and fixed the warnings that showed in my terminal. I'm running npm version 6.14.6.

PR to follow shortly! 😀

Pairing is more than just coding with someone else. Pairing is about communication, teaching, learning, positive reinforcements, and growing.

This month, let’s work together to build on these skills. For this challenge, let’s try to hit 5 pairing sessions per person, limiting your pairing sessions to one Pomodoro session--twenty-five minutes--unless you have made arrangements with your partner. When you’ve finished one of your sessions, report back to the #monthly-challenge channel in slack and let us know how you did and what you worked on! We’ll track how many pomodoro sessions we hit. Before you start, take a look at Martin Fowler’s article On Pair Programming.

Keep track of our group progress here:

https://virtualcoffee.io/monthlychallenges/dec-2020/

To add your latest December Pairing session:

• Follow these steps to create a fork of this repository and clone it to your local machine.
• Create a branch called something like monthlychallenge/add-new-session
• Open src/monthlychallenges/dec-2020/dec-2020.json
• Add your pairing session to the end of the challengedata array
  • Note: Only one person in the pair needs to do this
  • Note 2: Please try to keep your names the same every time you add a new pairing session, and make them unique. This is to display the totals at the end of the page. For instance, if you use Dan one time, and Daniel another, you'll show up as two people in the totals
• Commit the update
• At this point, you can preview the site locally, but it's not required. You will also be able to preview the changes after the PR is created.
  • To test locally, follow the Local Development steps listed in our README
• Push your branch up
• Create a Pull Request and be sure to include a link to this issue
• After the Pull Request is created, Netlify will automatically build a deploy preview and link to it in the Pull Request.

And you're done!

Our Contributing Guide has a lot of information about getting started with GitHub and Pull Requests, so you might want to take a look at that as well if you are new to this process.

Please feel free to add any questions here in the comments!

If you're here then you're considering contributing to our community!

If you see something you think could be improved in any area of the site, please let us know. Comment below your ideas for improvements and let's see what we can create together!

Issue Context

We've established a layout pattern that we've used on a lot of pages, where the first block is an illustration + h1 and an optional lead subhead. Some examples:

• https://virtualcoffee.io/members/
• https://virtualcoffee.io/events/
• https://virtualcoffee.io/brownbag-idea/

I think we could create a new layout that uses this, and pass in front matter to set the illustration/h1/subhead

An example of what the front matter could look like for a page:

---
layout: "layouts/illustrationHeader.njk"
title: "Brownbag Talk Submission Form"
description: "Submit an idea for a Virtual Coffee Brown Bag talk"
permalink: "brownbag-idea/"
header: "Virtual Coffee: Brownbag"
subhead: "We can't wait to hear your talk!"
illustration: "svg/undraw_Presentation_62e1.svg"
---

The illustrationHeader.njk layout would extend the default.njk layout.

This isn't all set in stone, but I think it could work.

Alternatives Considered

The other way to do this would be by creating a macro, but the layout pattern would allow a Markdown file to use this nice layout, for example.

Additional Resources

• 11ty layouts
• 11ty layout chaining
• nunjucks macros

Issue Context

We're using really nice svgs from https://undraw.co/. Right now we're simply inserting them into templates via include:

{% include "svg/undraw_Add_user_re_5oib.svg" %}

The problem is there's no way to edit the <title>, and I also have been thinking it'd be nice to have the option edit the primary color. Right now they all have the same primary color (#d9376e). There may be some other attributes it'd be nice to have dynamic as well (maybe id and class?).

Suggested Solution

Create a nunjucks macro for displaying undraw svgs. I'd think the usage could look something like this:

{{ undrawSvg('undraw_Add_user_re_5oib.svg', {
  title: 'This is our title!'
}) }}

{# optionally change the primary color: #}
{{ undrawSvg('undraw_Add_user_re_5oib.svg', {
  title: 'This is our title!',
  color: '#dd7123' {# or currentColor even! #}
}) }}

Alternatives Considered

We probably could achieve the color thing via css and create some classes - then instead of passing a color we could just pass a class or some value from an enum (primary,secondary,etc). I'm open to anything here.

Can't really think of a better solution for the <title> situation though.

Just as a note, when I download svgs from undraw, they have a nice feature to set the primary color, but I have had to make sure to delete the height and width attributes. It might be nice to be able to just download them straight in and have the macro take care of them, but I can't think of a reasonable solution to this so I'm fine punting on it for now.

Issue Context

The lighthouse score for virtualcoffee.io is looking good and site is also mobile friendly. So it would be great if we could add PWA into site which gives users a native applications feel and works offline, works well in low networks and an icon on the phone‘s home screen.

Suggested Solution

While looking at quick way to make our site as PWA, I found Google workbox would be good and for 11ty we have already a plugin available which uses Google Workbox under hood.

Alternatives Considered

Additional Resources

https://www.npmjs.com/package/eleventy-plugin-pwa

Issue Context

Every month, we try to get the newsletter up on the site within a week of sending it out. Currently, we're moving them over "by hand."

You can look at the existing newsletters ( src > newsletter > issues) as a kind of template. The sections are all the same. The content needs updated, and sometimes that changes the way things look, for example, your list may have fewer items.
Steps to update

You can look at the existing newsletters ( src > newsletter > issues) as a kind of template. The sections are all the same. The content needs updated, and sometimes that changes the way things look, for example, your list may have fewer items

• In the code base, navigate to src > newsletter > issues and create a new file 2021-05.njk
• If you don't get the newsletter, you can use this link to check out the current issue for content to update.
• Add the latest issue using the format from the past issues.

If you have questions, please let us know. We're up for pairing if anyone wants to walk through this!

Describe the bug

As described in the slack today, there seems to be an issue with the members page (virtualcoffee.io/members/) - only one member is showing up under the "Our Members" header, despite there being 20+, which normally show up without issue.

To Reproduce

Head to https://virtualcoffee.io/members/, and scroll down to "Our Members"

Expected behavior

All members should show up

Screenshots / Additional Context

Multiple users were able to repro, as I was too:

Looking at the last production Netlify deploy build, it was apparent that something went wrong when the build process tried to read the JSON files that power that part of the build off the disk:

This almost seems like a temporary fluke on Netlify's part, because:

• I could not reproduce this locally, either in production or non-production builds
• More importantly, the latest preview deploys do not suffer from this issue, despite them not reverting or adding any code that would have significantly altered how those files are read in

The best part of Virtual Coffee is our members ❤️

In order to showcase our collective awesomeness, let's put together a members page!

Members will individually add their GitHub username. At build time, we'll pull down their GitHub profile and display their info on a page located at /members.

This is the first iteration of this feature, so we'll add features to it as we go.

Note - only PRs from existing Virtual Coffee members will be accepted

Attending one of our Virtual Coffee events is the best way to learn how to become a member.

Adding yourself to the members page:

GitHub Profile Information

Members can edit their GitHub profile at https://github.com/settings/profile

virtualcoffee.io will only ever have access to the public profile information, never anything private.

Info we'll use to build the members page:

• Name
• Profile Picture
• URL
• Bio
• Twitter Username

Before you submit a PR, take a moment and check out this information to make sure it's accurate and you feel comfortable displaying it on our site!

How to add or update your profile:

The steps below involve your GitHub username. For each of the steps below, replace yourusername with your actual GitHub username (mine is danieltott for example).

• Follow these steps to create a fork of this repository and clone it to your local machine.
• Create a branch called members/yourusername
• If you're adding your profile for the first time:
  • Create a copy of members/members/_EXAMPLE.ts and name it yourusername.ts
  • NOTE: for the file name and export name, please remove any dashes in your username. You can replace them with underscores or just remove them entirely. For example, if my username was virtual-coffee, we'd want to change that to virtualcoffee.ts for the file name, and for the export name in the next step.
  • Replace _EXAMPLE on line 4 with your github username

    - export const _EXAMPLE: MemberObject = {
    + export const yourusername: MemberObject = {

  • Update the github value to your username, and follow the comments in the file to customize any additional parts of your VC profile
  • Note - if you already have the local version running, you'll need to stop the server and restart it to see the new file.
  • Commit the new file
• If you're already on the page but would like to update your profile:
  • Find members/members/yourusername.ts
  • Inside you will find the file all set up, follow the comments in the file to update any data you'd like
  • Commit the modified file
• Push your branch up to your fork
• Create a Pull Request and link to this issue

At this point, the pull request will create a Deploy Preview that you can use to preview your changes.

If you'd like to try updating the data on your own, here are the steps you can follow, but it's not required.

• To test locally, follow the Local Development steps listed in our README
• After the site is installed, you'll need to follow these directions to create a Personal Access Token.
  • The token only needs permission for the user => read:user scope to function for this task:
    
• Once you have your token, create a new file called .env and copy the contents from .env.example. Then, uncomment the GITHUB_TOKEN line, and replace yourtoken with your token created in the previous step.
• Then run yarn start to preview your changes!
• Again, these steps are not required for the PR to be accepted

And you're done!

Our Contributing Guide has a lot of information about getting started with GitHub and Pull Requests, so you might want to take a look at that as well if you are new to this process.

Please feel free to add any questions here in the comments!

Describe the bug

Aria labels on social media icons on home page are aria-hidden="". I imagine what we want is aria-hidden="true". Feel free to assign to me or to someone who'd like to get started in on OS contributions. 💟

To Reproduce

Steps to reproduce the behavior:

1. Install lighthouse https://developers.google.com/web/tools/lighthouse
2. Click on lighthouse to run report

Expected behavior

Should be getting a 93 on a11y due to aria-labels on social media links.

Screenshots

Desktop (please complete the following information):

• OS: Catalina
• Browser Chrome

Describe the bug

This is most noticeable in iOS (safari/firefox). When a member's link is too long, it overflows the container and causes horizontal scrolling.

To Reproduce

In iOS Safari, or Chrome responsive mode with iPhone X selected, go to https://virtualcoffee.io/members/ and scroll down until you see an overflowed link - there are several. I think Aurelie's is the first one currently.

Expected behavior

The link text should be truncated if it is too long for the container. This can be done with CSS - and luckily Bootstrap already has a solution for us: https://getbootstrap.com/docs/4.5/utilities/text/#text-wrapping-and-overflow

That text-truncate class should take care of the issue for us!

The bootstrap docs have a note about block-level elements and inline elements - we'll probably want to make that link a block-level element as well so that the truncation works.

Screenshots

Overflowing behavior:

After truncating the text:

Issue Context

Currently on the members page, if a user doesn't have a website in their github profile, their name doesn't get a link. Let's set this to link to their github profile instead, so all the members' names look the same.

Suggested Solution

In src/members.njk, we display their name like this:

{% if member.blog %}
  <a href="{{member.blog}}" target="_blank" rel="noopener noreferrer">{{member.name}}</a>
{% else %}
  {{member.name}}
{% endif %}

Let's use a link to their github profile (member.html_url) instead of just the plain name if there's no member.blog

This will need to be done for founders and communityEngagement as well.

1. The README paragraph needs updating with the same, but slightly edited, introduction that is visible on the site itself.
2. Include the url "virtualcoffee.io" within the readme

Issue Context

November has come and gone! We need to update the copy on the November Monthly Challenge to signify that the challenge is over. Doesn't have to be a massive rewrite - just changing the tenses and some headlines will probably be enough. Maybe a short summary?

Alternatives Considered

Another option would be to leave the page as is, except add an update at the top saying something like "This challenge is over! We did a great job etc etc and are leaving the challenge page up for historical purposes" or something?

Describe the bug

On issue #13 there is a link to the README with instructions to get the site running locally. This link is broken.

• link is currently: https://github.com/Virtual-Coffee/virtualcoffee.io/issues/README.md#local-development

To Reproduce

Steps to reproduce the behavior:

1. Go to issue #13
2. Scroll down to How to add yourself section
3. Click on Local Development steps listed in our README link
4. See error

Expected behavior

This link should direct the user to README#local-development

Screenshots

(If applicable, add screenshots to help explain your problem.)

Desktop (please complete the following information):

• OS: macOS 10.15.6
• Browser: chrome
• Version: 85.0.4183.121

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

• I did not include the proper URL for the purpose of allowing someone to explore and find it themselves.

Happy Coding 🎃

Issue Context

Add July Challenge to the site

Steps

• Add folder src > monthlychallenges > july-2021
• Add index.njk to the file
• Using June 2021 as kind of a template, create July 2021 from docs in contributors
• Assign me to review PR once ready.

Issue Context

I love seeing everyone on our new Members page, but it's bothering me that Virtual Coffee's founders (@BekahHW and @saramccombs) aren't highlighted in any way. Let's fix that.

Suggested Solution

Layout-wise, I think maybe just add a header like "Our Founders" or "Our Founding Members" or something to that effect, put Bekah and Sara's blocks in there, and then another header like "Our Awesome Members" and display the rest as they currently are.

Our Founders
[bekah] [sara]

Our Members
[member1] [member2]
...

Approach

First step will be to basically duplicate what we have for members inside src/_data for founders:

• Create src/_data/founders and move src/_data/members/BekahHW.json and src/_data/members/saramccombs.json into there.
• Duplicate src/_data/members.js and call it founders.js
• Adjust code inside founders.js where appropriate

This would provide, through the magic of 11ty javascript data files, a data object available to our templates called founders

Then in src/members.njk we would be able to do {% for founder in founders %}...{% endfor %}

I'll leave it up to whoever implements this what html to specifically use. Just keep in mind we use bootstrap so all of their classes are available to us if needed.

After getting something together, submitting a PR will create a previewable link, so submitting a PR that may still need some work or with some design questions is very appropriate.

Issue Context

Currently we're using Bootstrap 4 - it would be great to upgrade to Bootstrap v5

Suggested Solution

Upgrade to the latest version of bootstrap, and go through their migration guide to address any breaking changes.

Issue Context

Every month, we try to get the newsletter up on the site within a week of sending it out. Currently, we're moving them over "by hand."

You can look at the existing newsletters ( src > newsletter > issues) as a kind of template. The sections are all the same. The content needs updated, and sometimes that changes the way things look, for example, your list may have fewer items.

Steps to update

You can look at the existing newsletters ( src > newsletter > issues) as a kind of template. The sections are all the same. The content needs updated, and sometimes that changes the way things look, for example, your list may have fewer items

• In the code base, navigate to src > newsletter > issues and create a new file 2021-04.njk
• If you don't get the newsletter, you can use this link to check out the current issue for content to update.
• Add the latest issue using the format from the past issues.

If you have questions, please let us know. We're up for pairing if anyone wants to walk through this!

The Virtual Coffee Monthly Challenge for November 2020 -> Blogging! We all work together to hit 50,000 words. Based off the NanWriMo (National Novel Writing Month) Challenge, but working together towards the goal while posting on our own blogs.

Keep track of our group progress here:

https://virtualcoffee.io/monthlychallenges/nov-2020/

To add your latest November post:

• Follow these steps to create a fork of this repository and clone it to your local machine.
• Create a branch called something like monthlychallenge/add-new-post
• Open src/monthlychallenges/nov-2020/nov-2020.json
• If you already have posts listed, find your name and add your newest post to the end of your list of posts
• If this is your first post for the challenge, add your name and details to the end of the list. You can copy any of the existing entries for an example
• Commit the update
• At this point, you can preview the site locally, but it's not required. You will also be able to preview the changes after the PR is created.
  • To test locally, follow the Local Development steps listed in our README
• Push your branch up
• Create a Pull Request and be sure to include a link to this issue
• After the Pull Request is created, Netlify will automatically build a deploy preview and link to it in the Pull Request.

And you're done!

Our Contributing Guide has a lot of information about getting started with GitHub and Pull Requests, so you might want to take a look at that as well if you are new to this process.

Please feel free to add any questions here in the comments!