Skip to content

Latest commit

 

History

History
114 lines (78 loc) · 4.13 KB

3-pages.md

File metadata and controls

114 lines (78 loc) · 4.13 KB

Pages

Creating pages

Strategy

If your page is structured like a post (e.g About page, blog posts, etc), you should opt create the majority of the content in markdown under its own directory under content/ and use an existing template. Only create a new template if an existsing one doesn't meet your needs or can't be modified to fit your needs.

For pages that making heavy use of HTML, macros and/or partials, you should make create the majority of the content in the template itself like how the home page was made (index.html). You will still need create a markdown file for it in order to set up the front matter. You just don't need to write any markdown inside of it.

Sections

Sections have pages under its directory. See content/blog/_index.md for an example of them. A section's index page is named _index.md.

Pages

Pages can either have a unique name under a section's directory e.g content/blog/vala-0.56.md or be named index.md. If named index.md, they will have the same URL as the path they are under. The latter option is useful for creating one-off page like the about page (content/about/index.md).

By default, all pages are under the root section which is the website's index page (content/_index.md).

Using Components

There are two types of components you can create:

  1. Partials - Don't let you pass data in. 1 file = 1 partial.
  2. Macros - Allow you to pass data in. Muliple macros can exist in one file.

It's up to you how you to decide to use these types of components to build up these pages. Each type has its advantages and disadvantages.

Metadata

A macros in head.html called og_data and og_data_with_image take care of this for you. It handles the creates the Open Graph tags and adds the description meta tag for you. It's recommended that you assign the parameters to the page/sections's variables in templates you make.

Front Matter

In all pages make sure that you fill in contain the following fields:

  • title
  • date (In the format of YYYY-MM-DD)
  • description

These are used when displaying the in link embeds.

Blog

Blog Front Matter

As well as the fields to include when creating pages in general, if the article is written from the context of a single person or group of people, you also should inlcude the extra.authors field with an array of strings (containg names).

Filling the extra.authors field is not mandatory though. By default, the author will be set to "The Vala Team"

These are used when displaying the posts across the site and also in link embeds.

Blog Post Titles

You don't need to create a <h1> in your markdown content. The value you have set in the title field of the front matter will be used in a <h1> that is part of the blog post template.

Home Page

Updating The Showcase Items

The showcase is rendered from a partial in templates/partials/showcase.html.

The actual data used to add each item to the showcase is in assets/showcase-items.json.

It's an array where each item is an JSON object with the following fields:

  • name - Name of the item
  • icon_path - Where the icon is relative to the website's repository.
  • url - Where the user goes whe they click on the item

Here's an example:

[
  {
    "name": "elementary OS",
    "icon_path": "icons/showcase/elementary.svg",
    "url": "https://elementary.io/"
  },
  {
    "name": "GNOME Boxes",
    "icon_path": "icons/showcase/gnome-boxes.svg",
    "url": "https://apps.gnome.org/en-GB/app/org.gnome.Boxes/"
  },
  {
    "name": "Planner",
    "icon_path": "icons/showcase/planner.svg",
    "url": "https://useplanner.com/"
  },
  {
    "name": "Starfish",
    "icon_path": "icons/showcase/starfish.svg",
    "url": "https://appcenter.elementary.io/hr.from.josipantolis.starfish/"
  },
  {
    "name": "BirdFont",
    "icon_path": "icons/showcase/birdfont.svg",
    "url": "https://birdfont.org/"
  },
  {
    "name": "Peek",
    "icon_path": "icons/showcase/peek.svg",
    "url": "https://github.com/phw/peek"
  }
]

Related Resouces