Skip to content

Custom Additions

damios edited this page Dec 15, 2023 · 19 revisions

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
  • A custom "copy to clipboard" action (assets/js/clipboard.js; added to the after_footer_scripts in _config.yml; the unminified code can be found here)

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.