Skip to content

Latest commit

 

History

History
100 lines (74 loc) · 5.21 KB

README.md

File metadata and controls

100 lines (74 loc) · 5.21 KB

Civic Tech DC Website

Welcome! This is the repository for the website for Civic Tech DC. It is a static site built with Jekyll. It is mostly Markdown/Liquid, HTML, Javascript, and CSS.

Table of contents

  1. Getting Started
  2. Issues
  3. Contributing
  4. File structure

Getting Started

Local Development

  1. First, make sure that you have git on your computer. Create your own fork of the repository, then clone it to your computer:

git clone git@github.com:[YOUR GITHUB NAME]/codefordc-website

  1. Now, install the correct version of Ruby.

We use asdf and its ruby plugin to configure Ruby for this project. You can see which version of Ruby we're using in the .tool-versions file.

First, if you're on Ubuntu, you may need to install some dependencies. If the install step doesn't work, try one or both of these commands:

sudo apt install libyaml-dev
sudo apt install libffi-dev

To install the Ruby plugin, run the following commands inside the project's directory:

asdf plugin add ruby https://github.com/asdf-vm/asdf-ruby.git
asdf install
  1. Install dependencies.

bundle install npm install

  1. Run a local version of the website.

This command will run gulp as a background process and then jekyll as a foreground process.

npm run serve

  1. Open a web browser page at localhost:4000

Issues

If you notice a problem or have an idea for an improvement you can submit an issue.

Contributing

Refer to the contribution instructions to contribute to this project. We have a project board where we track issues and ideas to be implemented.

Let us know if you get stuck in the Civic Tech DC Slack channel #civictechdc-website. Happy coding!

File Structure

.
├── .devcontainer                 // GitHub Codespaces configuration
├── .github                       // GitHub workflows
├── .prettier.rc                  // Prettier linting and formatting configuration
├── .prettierignore               // Files and directories that Prettier should ignore
├── .python-version               // Python version
├── .tool-versions                // Versions of Ruby, Node, etc.
├── 404.html                      // Page shown for 404 not found errors
├── CNAME                         // Used by GitHub Pages to host the website on a custom domain
├── Gemfile                       // Ruby dependencies
├── _config.yml                   // Jekyll configuration
├── _includes                     // Page components that are included in other pages
│   ├── core                      // Components used throughout the website or as part of core layouts
│   ├── components                // Reusabe components
├── _layouts                      // Jekyll layouts. These are the templates that other pages are built on
│   ├── base.html                 // Most basic page layout including HTML metadata, header, and footer
│   ├── default.html              // Default page layout used by most pages
│   ├── hero-image.html           // Used by the homepage. Has a hero image and transparent hero text
│   └── project.html              // Layout used to render project-specific pages
├── _projects                     // Collection of project files used to generate the list of projects displayed on the website
├── _site                         // 🔒 Do not modify. This diretory is generated by Jekyll and is the actual files served by the web server
├── assets                        // Assets referenced from within HTML/Markdown files
│   ├── css                       // 🔒 Do not modify. Minified CSS generated by USWDS. If you want to make CSS changes do so in `./sass/custom/styles.scss`
│   ├── fonts                     // Font files originally generated by USWDS
│   ├── images                    // Image files
│   ├── img                       // Image files generated by USWDS (should move this into a subdir of `images`)
│   └── js                        // Javascript files
│       └── meetup.js             // Used to fetch event data from Meetup.com and dynamically populate bare components rendered in HTML
├── gulpfile.js                   // Gulp configuration. This is used for custom build steps and for building USWDS
├── index.md                      // Homepage
├── package.json                  // Javascript dependencies
└── sass                          // SASS files for customizing CSS generated by USWDS
    ├── custom
    │   └── styles.scss           // Custom CSS that will be added to / overwrite USWDS CSS
    ├── main.scss                 // USWDS SASS configuration
    └── theme                     // USWDS SASS configuration