Skip to content

Latest commit

 

History

History
110 lines (79 loc) · 2.87 KB

README.md

File metadata and controls

110 lines (79 loc) · 2.87 KB
Raw

Project Hub + Harp

A Harp Boilerplate for Brad Frost’s Project Hub HTML template

Read more about project hubs on 24 Ways.

This is an HTML template for online project timelines (also known as "project hubs").

What is a project hub and why would I use one?

A project hub is a tool for keeping track of the progress of a design project. The hub lives online (either publically available or password protected), so that everyone involved in the team has access to it.

The benefits of using a project hub:

  • Serves as a centralized place for the project's key design/development materials
  • Easily and visually view project progress
  • Provides an archive for project artifacts
  • Keep clients and team members up to speed with design progress
  • Lives at a URL that doesn't change

Resources

Getting started

  1. Install Harp in your computer
$ sudo npm install -g harp
  1. Clone this repository
$ git clone git@github.com:jorgepedret/harp-project-hub.git
  1. Start Harp server
$ harp server harp-project-hub --port 9966
  1. Visit http://localhost:9966/ in your browser and follow the instructions in the page

How to add new events to the timeline

After you rename _data-sample.json to _data.json, the data structure is fairly simple to understand.

  1. Open your _data.json file
  2. Add a new item to the timeline container
{
  "timeline": [
    {
      "stamp": "August 9th, 2013",
      "content": "Sign contract",
      "links": {
        "View contract": "#"
      }
    }
  ]
}

If you wanna add a new one, simply append it to the top, like this:

{
  "timeline": [
    {
      "stamp": "August 14th, 2013",
      "content": "Kickoff Meeting",
      "links": {
        "View notes": "#",
        "View demo": "#"
      }
    },
    {
      "stamp": "August 9th, 2013",
      "content": "Sign contract",
      "links": {
        "View contract": "#"
      }
    }
  ]
}

Tip: Comas and quotes are important when writing JSON. Follow the same structure as the sample data to avoid syntax issues.

Publishing & Deploying

To convert your timeline project to HTML, JS and CSS, run harp compile from the command line and a www directory will be created with all your files contained inside it, which you can publish anywhere.

Here are some popular deploying options:

License

MIT