## Website Elements

- Title
- Description
- Tabs that switches between categories
  - Apps
  - Tools (difference from apps?)
  - Archives
  - Videos
  - Articles
  - Discussions
- Below, after clicking category, show most popular tag within that category
  and allow further filtering. (future allow multiple tags? Will be hard without JS)
  - topic:blockchain
  - topic:ethereum
  - topic:research
  - topic:file-sharing
  - topic:chat
  - state:prototype
  - state:beta
  - state:stable
  - platform:firefox
  - platform:chrome
  - platform:windows
- List of items matching the selected filters ("apps" + "topic:chat" shows all chat apps)
- Each item gets a card
  - layout can be X amount of cards depending on screen width
  - each card has:
    - title
    - screenshot of item in action
    - first 80 characters of description
    - highlighted and on the top if `featured`
    - the title+description are normal anchor tags
    - Edit link for linking to the data file (and possibly row) in Github
      for easy editing
- Link to repository
- Link to issue/markdown file describing how to suggest new items
- Link to `Ecosystem` category on discuss.ipfs.io

## Data Structure

- Each category has it's own data file within `data/`
- Title for each item has to be unique (category should not be in URL)
- Screenshot location is based on title. If no screenshot found, should use a default image

Example `apps.yml`

```
title: 'Apps'
description: 'Applications built with IPFS or with functionality that uses IPFS'
items:
  - title: Akasha
    description: A Next-Generation Social Media Network, powered by Ethereum and embedded into IPFS
    featured: true
    url: https://akasha.world/
  - title: Alexandria
    description: Decentralized content publishing / monetization platform
    url: http://www.alexandria.io/learn/#integrated-technologies
    # `featured` defaults to false
```

Example `videos.yml`

```
title: 'Videos'
description: 'Videos about IPFS'
items:
  - title: IPFS Alpha | Why We Must Distribute The Web
    url: https://www.youtube.com/watch?v=skMTdSEaCtA
    featured: true
  - title: Juan Benet at Stanford 2015
    url: https://www.youtube.com/watch?v=HUVmypx9HGI
    # `featured` defaults to false
```

## Readme generation

The guide for developing/building the website should not be in `readme.md` but
rather in `develop.md` or similar, since `readme.md` will be generated by hugo
on build time. Basically it should create the same we have now, based on items
inside `data/`

## Sorting / Ordering / Ranking

We will have a `featured` flag which will put those items at the top. 

However, we need to ensure that Hugo sorts the same way always and might want
some other metrics for ranking, like the `state` of the project or similar.