Custom Additions

Custom Elements

We also have some custom elements, which are located in the _includes directory.

Breadcrumbs

• Translates the permalink into a breadcrumb
• {% include breadcrumbs.html %}

Example:

Carousel

Front matter:

---
carousel_elements:
    - image: assets/images/index_showcase/game0.png
      title: Pathway <br/>by Robotality                           # optional
      link: https://store.steampowered.com/app/546430/Pathway/    # optional
    - image: assets/images/index_showcase/game1.png
      title: Residual <br/>by Orangepixel                         # optional
      link: https://store.steampowered.com/app/1290780/Residual/  # optional
---

• title is used to show a button (which leads to link), when the user hovers over the gallery image; to disable the hover effect, don't specify title

HTML:

<div style="max-width: 545px; margin-left: auto; margin-right: auto;">
      {% include carousel.html elements=page.carousel_elements height="103.8" unit="%" duration="7" control_color="#373737" %}
</div>

• control_color is optional; it changes the color of the controls; the default is #fafafa (light grey)

Example (while hovering):

Status badges

• Used in the roadmap
• Supports planned, wip, close and done
• {% include status.html is='planned' %}

Example:

List Elements

• Allows using unordered lists (<ul>) inside HTML tags, while retaining the ability to format them in Markdown
• Supports two levels of nesting
• Used on the features page
• {% include list.html title="Audio" items=page.list1 %}, where list1 is defined in the frontmatter as:

---
list1:
  - "**Cool element on lvl 1**"
  - "Even _better_ element"
  - a:                         # optional second level; name irrelevant
    title: "Title of lvl 2"
    items:
      - "First [element](https://libgdx.com) on lvl 2"
      - "Whatever"
---

Example of three lists inside responsive <div> tags:

Tag Preview

• Previews the latest post with a certain tag
• Used on index
• {% include tag_preview.html tag="changelog" type="left" %}; also configured via the frontmatter as follows:

---
tag_preview:
    image_path: /assets/images/update.jpeg
    alt: "image description"
    btn_label: "Just do it!"
    btn_class: "btn--primary"
---

Example:

Other Elements

• setup_flowchart:

Theme overrides, etc.

• An author note on top of posts (_includes/page__metadata.html):
• Added a custom wide2 and wide3 style (and adapted the default wide style), which should be used depending on which sidebar is disabled (_sass/minimal-mistakes.scss): wide should be used if there is only a left sidebar; wide2 utilizes the full page size when both sidebars are disabled; wide3 handles the situation when there is only a right sidebar
• Custom Footer Links (_includes/footer.html)
• Favicons (_includes/head/custom.html)
• A dark mode (_includes/head.html, _includes/masthead.html, assets/css/main2.scss), which is automatically enabled according to the user's OS or browser settings
• A modified version of the theme for wiki pages (_sass/wiki.scss, _layouts/default_wiki.html, _layouts/wiki.html); see also _includes/wiki_index.md and _includes/wiki_sidebar.md
• Automatically generated meta descriptions for wiki pages (_includes/seo.html): if no description or excerpt is specified for a wiki pages, the first 30 words of a page are used as meta description by default. However, there is one caveat with this automatic description generation: it processes the post content at a time when liquid tags are not yet parsed. So any wiki page that has liquid tags in their first few paragraphs should set a custom description.
• A simple search feature for wiki pages (wiki/search.md, _includes/wiki_masthead.html); it uses Lunr to index the full page content of the wiki pages
• Custom styles for the notice blocks (_sass/minimal-mistakes.scss)

Jekyll Plugins

Our custom Jekyll plugins are located in the _plugins directory.

libgdx_fetch_versions

Upon deployment of the page, this plugin automatically fetches the libGDX version data from the main repo and exposes it here and here.