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").
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
- Install Harp in your computer
$ sudo npm install -g harp
- Clone this repository
$ git clone git@github.com:jorgepedret/harp-project-hub.git
- Start Harp server
$ harp server harp-project-hub --port 9966
- Visit http://localhost:9966/ in your browser and follow the instructions in the page
After you rename _data-sample.json to _data.json, the data structure is fairly simple to understand.
- Open your
_data.jsonfile - Add a new item to the
timelinecontainer
{
"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.
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:
MIT