The chicagojs.org from chicagojs

Add JSCamp Sponsor Logos

Create Sponsor Model on CMS
Add sponsors to CMS
Fetch sponsor info from CMS using built-in Gatsby GraphQL plugin
Create Sponsors Template in Website
Display sponsor logos on home page

Sponsor Model

title (enum): "Platinum", "Gold", "Silver", "Bronze"
name (string)
image (string)

The file to update lives here

You can see an example of this file here

CMS

The CMS lives under /admin and is powered by Netlify CMS.

Sponsor Images

All sponsor logos live under cloudinary. The image resource should match the image field under the CMS. No image extension is required (cloudinary is smart!)

For example:

Recommendation

build a getImageUrl function that consumes the image field and returns the full Cloudinary URL. That way if we ever need to change it, we can change it within one function.

Current JSON of all sponsors

This will need to be added into Netlify CMS

[
  {
    "title": "gold sponsors",
    "width": 300,
    "items": [
      {
        "name": "accenture interactive",
        "cloudinary": "accenture"
      },
      {
        "name": "cars.com",
        "cloudinary": "carsdotcom"
      },
      {
        "name": "server central",
        "cloudinary": "servercentral"
      },
      {
        "name": "turing group",
        "cloudinary": "turinggroup"
      }
    ]
  },
  {
    "title": "silver sponsors",
    "width": 270,
    "items": [
      {
        "name": "fraight ai",
        "cloudinary": "fraightai",
        "url": "https://res.cloudinary.com/chicagojs/image/upload/co_rgb:000000,e_colorize:100,f_auto,w_270/v1537038153/2018sponsors/fraightai.png",
        "options": {
          "co_rgb": "000000",
          "e_colorize": "100"
        }
      },
      {
        "name": "one north",
        "cloudinary": "onenorth",
        "url": "https://res.cloudinary.com/chicagojs/image/upload/co_rgb:000000,e_colorize:100,f_auto,w_270/v1537038153/2018sponsors/onenorth.png",
        "options": {
          "co_rgb": "000000",
          "e_colorize": "100"
        }
      },
      {
        "name": "braintree",
        "cloudinary": "braintree"
      },
      {
        "name": "fly io",
        "cloudinary": "fly"
      },
      {
        "name": "active campaign",
        "cloudinary": "activecampaign"
      },
      {
        "name": "quik order",
        "cloudinary": "quikorder"
      },
      {
        "name": "hash rocket",
        "cloudinary": "hashrocket"
      },
      {
        "name": "dragon spears",
        "cloudinary": "dragonspears"
      },
      {
        "name": "draftbit",
        "url": "https://res.cloudinary.com/chicagojs/image/upload/co_rgb:000000,e_colorize:100,f_auto,w_270/v1537038153/2018sponsors/draftbit.png",
        "cloudinary": "draftbit"
      },
      {
        "name": "next capital",
        "cloudinary": "nextcapital"
      }
    ]
  }
]

Add Code of Conduct Page

Create Code of Conduct folder & markdown file
Create /code-of-conduct route and point it to this page

The code of conduct exists at the top level of this readme.

Add Local Meetups & Events

Create Meetup model on CMS
Add all current Meetups to CMS
fetch meetup info from CMS using Gatsby Graphql plugin
Create meetup template (react)
display meetups on website

Meetup model

name (string)
info (string)
image? (string)
meetupId (string)

Current meetups to add (find Meetup links via Google)

Possible layout:

Fix typo in package.json

"keywords": [
    "chiccago",
    "javascript"
  ],

Just want to confirm that this is a typo and not intentional.

Add Job Board Model / Data Structure

Create JobPosting model on CMS
Create job listing react template
fetch job postings from CMS using Gatsby Graphql Plugin

Job Posting Model

title (string)
type (enum) "Full-Time", "Part-Time"
company (string)
remote (bool)
content (string)
link (string)
zipCode (string)

Github Jobs has a nice example:

Job Listing

Job Detail

Speak at a meetup button

Give users the ability submit a form to speak at a meetup:

form options:

name
email
which meetup?
topic
do you need help practicing / getting ready?

we can use airtable to power the back-end for this really nicely

Setup Prettier, eslint, and editorconfig

Make sure that prettier is integrated with ESLint. ESLint can use the Airbnb preset. Defaults are a good starting point.

Add Contact Info & Social Icon SVGs

Find Email, Slack, Facebook, Twitter, LinkedIn SVG Icons
Add contact info to General model in CMS
Add Email, Slack, Facebook, Twitter, LinkedIn Contact details to CMS
Create React template for Contact us (row)
Fetch data from CMS

CMS Setup

name (enum) "Email", "Slack", "Facebook", "Twitter", "LinkedIn"
link (string) The link to the contact info

CMS info should be set up here

SVG Icons

You can use create-simple-icon CLI to quickly generate the SVG icons

Contact Info

email: [email protected]
slack: https://chicagojs.slack.com
facebook: https://www.facebook.com/groups/chicagojs
twitter: https://twitter.com/chicago_js
linkedin: https://www.linkedin.com/groups/12147253/

When running master branch, getting a positionType error from the gql query in src/pages/job-listings/index.js since it’s a not a defined type (also breaks routing when running locally). This looks like originated with PR #20.

There are two options for resolving it:

Option 1: Removing or commenting it out positionType in src/pages/job-listings/index.js.
Option 2: Adding a positionType to src/data/jobListings.json.

I can open open up a PR with either option as a fix, wanted to see with the group if there was a preference.

Create Mobile Nav Slide-In Menu

Create a slide-in menu when hamburger icon is clicked in mobile view, likely from the right as same side as icon.

Site currently has breakpoint to convert nav menu to hamburger, but hamburger does not action when clicked currently.

@peterpme this would be a good first issue as well.

Create "Sign up to our mailing list" component using Mailchimp

Setup gatsby mailchimp plugin (located here)
add proper Mailchimp keys (ask @peterpme)
insert template onto the website footer

Create logo component
create navbar component
create section component

Layout Structure

logo
navbar
- code of conduct (see #9)
- meetups (see #3)
- sponsors (bottom, see #2)
- job board (see #6 #7)

Use Meetup Api to fetch upcoming meetups

fetch upcoming meetup info using meetupId stored in CMS
create upcoming react template
display upcoming on website

Meetup has an API we can use to fetch upcoming meetups and info.

Since we're storing the meetupId, all we have to do is parse & fetch this info

https://www.meetup.com/meetup_api/docs/

chicagojs / chicagojs.org Goto Github PK

chicagojs.org's Introduction

ChicagoJS.org

Gatsby Prerequisites

Access Locally

Getting Started (Without Netlify)

Setting up the CMS

Debugging

chicagojs.org's People

Contributors

Stargazers

Watchers

Forkers

chicagojs.org's Issues