Star

haumea.io0.72.4-beta

Installation

haumea requires python >= 3.6

  • pip install haumea
  • haumea -v
  • 0.72.4

Quickstart

You can create a skeleton project with the haumea-quickstart command

  • haumea-quickstart my-project
  • my-project
  • ├── content # All content for your website will live inside this directory
  • │  └── (pages)
  • ├── layouts # Stores .html templates files
  • │  └── partials
  • │     └── footer.html
  • │     └── header.html
  • │     └── head.html
  • │  └── _base.html
  • ├── public # Your site will be rendered into this dir
  • └── static # Stores all the static content: images, CSS, JavaScript, etc.

haumea build performs a build of your site to ./public (by default)

  • cd my-project
  • haumea build

haumea serve builds your site any time a source file changes ans serves it locally.
All external data from json-source are cached.

  • cd my-project
  • haumea serve
  • Look at http://localhost:8000

Documentation

Your content should be organized in a manner that reflects the rendered website.
Haumea directory structure :

  • yourprojectname
  • ├── content
  • │  └── index.html # Simple page
  • │  └── about.html # Simple page
  • │  └── blog # Subdirectory
  • │     └── post-1.html # Simple page
  • │     └── post-2.html # Simple page
  • │     └── .post-3.html # Shortcut page
  • │  └── products/ # Subdirectory
  • │     └── _product.html # Page bundle (create from a json array of data)
  • │     └── _product.graphql # graphql query
  • ├── layouts
  • │  └── partials
  • │     └── footer.html
  • │     └── header.html
  • │     └── head.html
  • │  └── _base.html
  • ├── public
  • └── static

Layouts templating tags

./layouts/*

  • {{ _content }} # render your content into template
  • {% include "partials/header.html" %} # basic template include

Contents templating tags

./content/*

Render json content (from your RESTful or GraphQL API)

  • {{ _json.short_title }}
  • <strong>{{ _json.regular_price|{:.2f} }}</strong>
  • {% if _json.regular_price > 10.0 %}
  •   <span>Price : </span>{{ _json.regular_price|{:.2f} }}
  • {% endif %}
  • {% for tag in _json.data.tags %}
  •   <a>{{ tag }}</a>
  • {% endfor %}
  • # Iter only the first 10 elements of the table of _json.data.tags array
  • {% for tag in _json.data.tags :10 %} Slice a sequence "start:end:step"
  •   <a>{{ tag }}</a>
  • {% endfor %}
  • <div>Date : {{ _json.createdAt|{:%Y-%m-%d} }}</div>

Render current page params

  • {{ _params.title }}
  • {{ _params.nav-title }}
  • {{ _params.meta-title }}
  • {{ _params.meta-desc }}
  • {{ _params.slug }}
  • ...

Render page categorized in news for taxonomy named category

  • {% for page in _taxonomies.category.news %}
  •   {{ page.nav-title }}
  • {% endfor %}

Render page categorized in #slug (dynamic from _json or _params)

  • {% for page in _taxonomies.category.#slug %}
  •   {{ page.nav-title }}
  • {% endfor %}

Render permalink

  • {% link "about.html" %}
  • {% link "/blog/post-2020.html#more" %}
  • {% link "#more" %}
  • ...

Render datetime

  • {% time %} # Output current timestamp

Render haumea version

  • {% haumea %} # Output current haumea version

Basic & advanced menu rendering

  • {% menu mymainmenu %}
  • <ul> <li><a href="">item 1</a></li> <li><a href="">item 2</a></li> <li><a href="">item 3</a></li> </ul>
  • {% menu footermenu a.item %}
  • <ul> <li><a class="item" href="">item 1</a></li> <li><a class="item" href="">item 2</a></li> <li><a class="item" href="">item 3</a></li> </ul>
  • {% menu mycustommenu nav.menu>div.item>a.link.is-active %}
  • <nav> <div><a class="link is-active" href="">item 1</a></div> <div><a class="link" href="">item 2</a></div> <div><a class="link" href="">item 3</a></div> </nav>

Content configuration

Haumea offers you 3 types of content :
Single page : example.html
Page bundle : _example.html
Shortcut page : .example.html


Single page - Example content/event.html

---
{
    "title": "My first content",
    "menus": ["main", "footer"],
    "taxonomies": {
        "tags": ["birthday", "party"],
        "types": ["event"]
    }
}
---
            

Single page from JSON or REST API - Example content/page.html

---
{
    "json-source" : "https://api.buttercms.com/v2/pages/*/sample-page/",
    "json-request-type" : "get",
    "json-params" : { "locale" : "fr" , "auth_token" : "XXXXXXX" },
    "json-root-node" : "data",

    "title" : "{{ _json.fields.title }} - {{ _json.fields.product_qty }}",
    "slug" : "test",

    "menus" : [ "main" ]
}
---         
           

Page bundle from JSON with GraphQL - Example content/blog/_post.html

"json-source" data must return an array.
Each element of the array will be used to generate a page
The slug must be dynamic and unique {{ _json.slug }}

---
{
    "json-source" : "https://graphql.datocms.com/",
    "json-request-type" : "graphql",
    "json-headers" : {"Authorization":"token xxxxxxx"},
    "json-root-node" : "data.allProduits",
    "json-taxonomies": [ {"node":"category","field":"slug"} ],

    "title": "{{ _json.title }}",
    "nav-title": "Navigation Title !",
    "meta-desc" : "{{ _json.meta_description }}",
    "meta-title" : "{{ _json.meta_title }}",
    "slug" : "{{ _json.slug }}",

    "menus" : [ "products", "footer" ],
    "layout" : "layout.html" # Default "_base.html"
}
---
            

GraphQL file - Example content/blog/_post.graphql

query {
    launchesPast(limit: 80) {
        mission_name
        details
        launch_date_local
        ships {
            name
            image
        }
    }
}
            

Shortcut page - Example with content/.haumea.html

---
{
    "title":"Haumea.io",
    "menus" : [ "main:4" ],
    "shortcut" : "https://github.com/guillbertrand/haumea"
}
---

Pagination

haumea supports pagination for your external data from json, RESTful API, GraphQL
You must specify the config field paginate to activate pagination on your content.

The templating tag {% pagination %} allow you to render pagination.
By default the following template is used : layouts/_pagination.html

Exemple #1

--- { "json-source" : "/data/posts.json", "title":"Haumea.io", "menus" : [ "main:4" ], "paginate": "_json.posts" } --- <div class="container"> {% for p in _pagination.current %} <div class="card"> <a href="{{ p.permalink }}">{{ p._params.nav-title }}</a> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> {% for tag in p._taxonomies.category %} <a href="/categories/{{ tag }}/">#{{ tag }}</a> {% endfor %} <time datetime="2016-1-1">{{ p._json.createdAt|{:%d-%m-%Y} }}</time> </div> </div> {% endfor %} {% pagination %} </div>

Exemple #2

--- { "json-source" : "/data/posts.json", "title":"Haumea.io", "menus" : [ "main:4" ], "taxonomies": { "category": ["health", "news"], "types": ["post"] }, "paginate": "_taxonomies.types.{{ _json.slug }}" } --- <div> {% for p in _pagination.current %} {{ p._json.title }} {% endfor %} {% pagination "custom/pagination.html" %} </div>

You can override default config param in your config.json file

{ "paginate" : 20, # default value : 10 "paginate-path" : "p", # default value : "page" }