codeforfoco / codeforfoco.github.io Goto Github PK

View Code? Open in Web Editor NEW

9.0 6.0 24.0 30.86 MB

Code for Foco's website.

Home Page: http://codeforfoco.org

License: MIT License

CSS 42.22% HTML 53.38% Ruby 0.33% JavaScript 4.06%

civic-hacking code-for-america foco website jekyll

codeforfoco.github.io's Introduction

Code For Fort Collins

This repo is for our organization's website at codeforfoco.org.

Getting Started

Before you can run the website on your machine you need to ensure you have some prerequisites installed:

Fork this repository and clone your fork.
cd into the cloned directory.
Run git submodule update --init --recursive to install several third-party submodules.
Install Ruby V2 or greater, we recommend you use RVM.
Install bundler by running gem install bundler.
Install any Ruby dependencies by running bundle install.

Once all the dependencies have been installed you run the development server with:

bundle exec jekyll serve

Open your browser up to localhost:8080 to view the development site.

Contributing

We welcome new contributors. Be sure to check out guide on contributing, which includes instructions on how to fork, clone, branch, commit, pull request and sync your fork.

Not sure where to start? Look for open issues on GitHub, or message the team on our Slack site. If you aren't on our Slack, click here for an invite.

TL;DR Contribution Workflow:

Fork this repository and Clone your fork locally.
Checkout a new branch on which to make your changes.
Make edits. Try to match existing coding style.
Test your changes.
Commit your changes. Push your changes to your fork on GitHub.
Submit a new pull request and your changes will be reviewed and merged.

Code Standards

Development in a team environment can result in code inconsistency, which may have undesired impacts including a reduction in readability. Therefore we ask that you standardize and "beautify" your code before submitting a pull request. A few options to simplify this process are outlined below.

EditorConfig project

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.

This tool eliminates common inconsistencies such as tab style and line endings, and has plugins available for most modern IDEs and text editors. Find yours here.

Linters

Linters validate your code and provide errors and warnings when validation is not met. Here are some linters for common text editors:

linter for Atom and these language-specific linters:
SublimeLinter for Sublime Text and these language-specific linters:

Beautifiers

The settings for beautifying this repo's code is found in .csscomb.json and .jsbeautifyrc at the root of the project. Implementation of the settings is carried out by various plugins specific to each text editor. Here are some of the most common:

atom-beautify is an all-in-one package for Atom that will handle beautification of most common languages (FYI it's a big package so it takes a little while for the installation to complete!).
Sublime Text does not have an all-in-one beautifier, but Sublime-HTMLPrettify should suffice for this project.

Site Architecture

The CFFC website will ultimately adhere to an organized, intuitive, and SEO-friendly navigation and content structure, currently based on this model:

Bugs / Feedback / Suggestions

We encourage you to open up an issue if you have any feedback, suggestions or bugs.

License

MIT, see LICENSE for full license.

codeforfoco.github.io's People

Contributors

Stargazers

Watchers

codeforfoco.github.io's Issues

Content Formatting

Right now there is no sort of margin on paragraphs and headers.

Add instructions to readme on how to add content

Need to write instructions on how to add blog posts, projects etc.

Slack Invite Automation

One of the first iterations of the site had an input for slack invites. Let's add it back in.

Allow Tags in Projects

i.e. programming languages or technologies used, the industry the project serves (government, transportation, non profit, etc).

Add Sponsor Page

Add a page with information on different sponsorship opportunities (formerly part of #35)

Set header image for projects to project screenshot

Every category has the same header image. The project category would look much better if we replaced the header image with a screenshot or picture related to the project.

Add section for partners

Need to add a section for partners, potentially each partner could be separate markdown file or they could all just be piled into one.

homepage "buttons" should be all clickable

hover color of link text should be more readable too!

Update description of Code for Fort Collins

The current description is nebulous. It does not describe who we are and what we do. We should update the site to have a better description.

update installation instructions

os x install homebrew
install ruby using homebrew
add rubygems to your path
install bundler
run bundler in repo

Add humans.txt

Add in a humans.txt for us to sign our names and leave some messages 😃

Add minutes section and template

Migrate minutes from Google docs to our website
Create a template file for minutes for that post directory.
Add minutes to website chart, see #91.

Google forms are painful to use, limit collaboration, who can view, edit and take minutes.

Github and git allows for people to collaborate on minutes. Project leaders can fill in the minutes for their current project. It enables anybody to edit, modify, create and take minutes. We can use markdown to format and take minutes and SASS to style them.

Standardize code syntax

Add a dotfile that tells all editors to style the code the same and use the same line endings so that beautifies don't bleep everything up.

EDIT (Jason): let's include a few things:

~~editorconfig~~ added in 0104d7e
~~csscomb~~ added in 4d0fce5
jsbeautifyrc (already in this branch: https://github.com/CodeForFoco/codeforfoco.github.io/tree/code-standards)

Use only GitHub supported plugins for jekyll

Use only github supported plugins so that it is easier for beginners to get started.

This way they dont need to install jekyll, ruby and bundler.

Create Completed Projects Page

Investigate build issues.

Builds worked fine up until the merge of last week's minutes. We reverted to the last built commit and the repository still won't build.

Create list of tasks for beginners to get started on

Add and label a lot of tiny tasks for onboarders to start editing.

Link to GitHub Issues / Ideas

Image sizing

A lot of the images are stretched or displayed at too large of a size for their resolution.

Allow lists in registry posts

Jekyll ain't having it: #101 (comment)

Investigate other Code for * websites.

Investigate other Code for websites for ideas on how we can improve our own.

Some starting points:

Code for Boulder
Code for Denver

Update "Sponsor" info for 2017

Logo and description for FVC Americas (the new tenant in the building where we do our meetups)

Add solar-scorecard project page

Originally part of CodeForFoco/solar-scorecard#26

Follow instructions here: https://github.com/CodeForFoco/codeforfoco.github.io/blob/master/_posts/projects/README.md

clickable 'want to get involved'

Currently only the a tags in the li tags are clickable in the 'want to get involved' section of the front page. Perhaps being to be able to click the whole li section that currently responds to a hover would be more intuitive.

Nav menu on smaller screens

Currently the navigation menu disappears below 1000px. Need something for mobile users...

Add upcoming events section

embed MeetUp Widget below header area but above the fold

Improve home page and nav responsiveness

The title was pretty snug at certain screen sizes even with FoCo abbreviated, and much more so now with it spelled out in full:

Just need to drop the font size and line-height down a bit on a breakpoint or two.

Decrease header sizes

Show more information above the fold on desktop.

Create site architecture diagram

Sitemap/whatever to describe the site layout. Makes it easier to structure code and links, etc.

screenshot in readme
link to original in readme

Flow of partners logo out of whack

Main page partners logos flow weirdly on 1366 x 768 screen (actually 1080p with 150% dpi scale on windows). I think we should resize to fit at least 3 logos side to side when viewed with such a standard page size as ~720p.

Allow Member/User Photos

In the _registry.

Maybe permit gravatars?

Mismatch with partners pictures dimensions

The partners pictures are sized differently on the main page and the individual partners pages. OpenCity is stretched on main, fine on partner. City of Foco is fine on main, stretched on foco.

Minutes for August 10

Anybody remember the highlights? 🤔

Create project page template

Suggested:

layout: post
title: "project title"
date: 2017-05-12 12:00:00 -0700
image: projects/project-image.svg
categories: projects
status: in-progress or complete
tech-tags: php, wordpress, website, app, responsive, etc.
industry-tags: transportation, recycling, crime, whatever

Customer description

Who they are, what they do.

Project summary

What we did/are doing.

Nerd specs

We are a coding org, what are the tech details?

Hosting
Languages/platforms
Other nerdery

Hamburgers and reformatting.

I broke the hamburgers by removing the span.

Just putting this here to remind me to add them back in.

If for some reason my reformatting gets in the way of a pull request I can revert.

Show current projects

What are we working on RIGHT NOW? Ideally have a page or post for each, but at a minimum just link to the corresponding GitHub repo for now.

Project summary
Who is working on it (href to member page)
Tags (see #86)

Support HTTPS

Right now all assets are src'd or href'd using http so the site doesn't load assets when visited over https.

Initial Build of Project

Following guide in readme.md I ran the final command

bundle exec jekyll serve

and the error I got was:

Liquid Exception: no implicit conversion of Fixnum into String in /_layouts/default.html

I checked default.html, and there is no number => string conversion, thus it must be in a sub file. As I've never used jekyll, I could use some help on this one.

Idea submission form -- backend

EDIT: breaking this out into separate front/back end issues. -Jason

Add an idea submission form to the website which emails out the team or sends a message to slack.

"Hey you've got an idea to make Fort Collins better? Let us know your thoughts."

CFFC logo as favicon

Because why not.

Super low priority...

Fix project setup and add instructions to readme

create README.md in Registry posts area

There is now a link to Registry in onboarding (thanks to @englehorn 😄):
https://github.com/CodeForFoco/codeforfoco.github.io/tree/master/_posts/registry

A README.md there would also be helpful. GitHub website renders a README.md automatically if it finds one.

The README.md would include

instructions on how to use template.md (very useful! thanks @itorain ! 😸 )
fork process and Pull Request process (this might already be covered elsewhere? a link from README itself to that would be directly useful too)

Idea submission form -- front end

The front half of #36

Required Fields

name
email
idea summary/title (will become title of GH issue)
idea description (will become body of GH issue)

Also Need

note/disclaimer indicating that submitter will be contacted

Bike Coop project description

Add summary/description to FCBC project page: https://github.com/CodeForFoco/codeforfoco.github.io/blob/master/_posts/projects/2017-05-11-fort-collins-bike-coop.md

For projects, could probably have a one-line summary field in addition to the more detailed primary content. I think Wordpress calls it "the excerpt".

Horizontal Scroll

On any screen resolution there is about 20 pixels of horizontal scroll
There is about 20 pixels of whitespace right of the website

Confirmed on both Firefox and Chrome.

Improve SEO

Not a mega concern, but it would be nice to show up in first page of Google results for searches like fort collins volunteer coding. I got to page 6 and still didn't see the site using that criteria.

Not an expert, but things that help SEO:

Good site architecture (well-structured site outline, internal links, URL stuff, etc.)
Keywords within content
Meta- titles, meta tags
???