Theme features

programming pages offers the following:

• pre-built site structure—just add documentation
• simple authoring syntax using Markdown and Liquid
• ready-to-use layouts, extensible to create new ones
• searchable content, with keyboard shortcuts (try h)
• mobile-ready design browsable on multiple devices
• styling for readability, leveraging Semantic UI
• clean site generation that scores well on Lighthouse audits
• compatibility with GitHub Pages for free hosting and simple publishing

Elements of the theme are explained in detail in the sections below:

• Title Bar
• Attribution
• Help overlay
• Navigation
  • Search input
  • Collection indices
• Content layouts

Overview

The programming pages theme provides a Home link () in the top left corner that returns to the site entry page, and a navigation menu () on the left side of the screen where content can be accessed via links under the collection tabs (e.g. Layouts, Examples, or Guides), or via the search box ().

To search for content, focus the search input, and start typing a term to search for. A results box will populate with best matches. Select one to navigate to the page.

Info
On a desktop, the s key will focus the search input. Open the help menu with the h key to see other keyboard shortcuts for toggling navigation tabs and searching.

Title Bar

The site title bar is fixed to the top of screen, and displays the following items:

• home link — built into the theme
• menu link — appears in narrow or mobile views, where the menu is collapsed
• project name — defined in _config.yml as project.name
• project version — defined in _config.yml as project.version

Attribution

At the bottom of every content page is the attribution element, which contains:

• documentation license — Creative Commons Attribution (CC-BY), built into the theme
• project copyright — composed from project.name and project.ownerin _config.yml, and the current year
• project repository — defined in _config.yml as project.repo

Help overlay

When a user presses the h key, a help overlay appears and shows the shortcut keys available for use.

Navigation

On the left-hand side of the site is a navigation pane that collapses in mobile or narrow desktop views. It contains a search field and the collection tabs.

Search input

All page titles are available to search for, and the search box will try to auto-complete best matches.

Search also includes words found in page.description and page.search_tags. Search results are categorized by collection, which can be overridden by page.category.

Collection indices

Collections provided by the user are represented by tabs in the navigation pane.

Collections may have sub-folders. When a folder name matches a content page, files in the folder will render as children of the content page.

Content layouts

The programming pages theme provides several pre-defined layouts for rendering different kinds of documentation content.

Please see the individual layout pages for more detail: