Dev Center Hugo Documentation

tl;dr Publishing

Tutorials

To add a new tutorial, create a new Markdown file in the corresponding product/genre directory (content/developer-center/<product>) and use the following front matter:

---
title: A nice article title
author: Author name
publishDate: 1970-01-01
description: A description of the tutorial
image: # Optional, a URL or /images/developer-center/... path; omit to use the product's default image
communityURL: # Optional, a link to the Community article to include the original publication blurb
search: false # Optional; use to noindex, nofollow this content
algolia: false # Optional; use to remove from Algolia search
---

To make a set of tutorials in a product/genre directory into a series, use the series: true front matter for the whole section, and use Hugo’s normal weight on each page to set the order. A convenient way to set series: true for the section is by adding the following in the front matter of the corresponding _index.md:

---
...
cascade:
    series: true
---

See content/developer-center/onboarding for an example.

Applications

To add a new application, create a Markdown file in the corresponding product/genre’s application directory, content/developer-center/<product>/applications, with the following front matter (and no Markdown content):

---
title: A title to display on list pages
githubURL: The full URL to the GitHub repository
description: A description of the application
image: # Optional, a URL or /images/developer-center/... path; omit to use the product's default image
---

If the applications directory doesn’t exist, create it and an index.md file that only contains the YAML front matter headless: true (see existing directories for an example).

Videos

To add a new video, add a line to the youtubeIDs front matter in the main page, content/developer-center/<product>/_index.md:

---
...
youtubeIDs:
    - aBcEdFgHiJk
    - BcEdFgHiJkL
---

Layout Documentation

Main Page

The main page of the Developer Center is rendered by layouts/developer-center/main-page.html.

The icons and links in the Learn by Product section of the main page are defined by the Hugo config parameters in config.toml, params.devCenter.learnByProduct, and rendered by layouts/partials/developer-center/learnbyproduct.html. This partial expects a directory within content/developer-center that matches the entry in the config (lowercased and hyphenated appropriately) and an image similarly named in images/developer-center/default-<name>.svg.

The Tutorials to Build Apps section is automatically generated based on any file in a directory under content/developer-center.

List Pages

Each directory in content/developer-center has a list page defined by _index.md. These are rendered by layouts/developer-center/list.html.

List pages contain three sections: tutorials, applications, and videos:

  • The tutorials in the product/genre’s directory are automatically included on the list page.

  • The applications section is automatically generated from the files in the product/genre’s applications directory.

    The applications directory is a headless bundle so there are no pages published corresponding to this Markdown. Therefore, the content on these pages is not used and should be omitted.

  • The videos section is automatically generated based on the list of youtube IDs in the front matter of the list page.

Single Pages

Tutorials (and other leaf pages) are rendered by layouts/developer-center/single.html and use the same image lookup logic (containing directory under content/developer-center unless overridden with the image front matter).

Stack Builder

The stack builder page is a unique page rendered by layouts/developer-center/stackbuilder.html.