Shortcodes on Hugo Solstice Theme

Agenda

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

Agendas can be added to the site through an agenda.yaml data file added in a subfolder of the data folder for the target locale (for localization, for default, create/use the “en” folder). An example of this path is as follows, data/en/agenda.yaml. The data should be similar to the following format:

complete: true
types:
- name: Demo
id: 1
color: "#e44"
- name: Keynote
id: b2
color: "#a0a"
items:
- name: Open-source software
presenter: Ken K.
type: 1
vod: "#1"
- name: How to 'how to'
presenter: Jim Bob
type: b2
vod: "#2"
- name: Industry Keynote
presenter: Eclipse Foundation, .etc
type: b2
vod: "#3"
- name: Best practices for Interneting your Things
presenter: Adam A.
type: b2
vod: "#4"
- name: Break (2020 sample)
time: 12:00pm EDT
type: break

Types represent the different types of sessions being held at the event. Normally creating the CSS for these types will be created automatically on render based on the color passed in the data file. If no color is set, no CSS would be generated for the type. Additionally, a new CSS rule may be added via custom code. This rule should resemble the following, replacing <id> with the id value set in the type and <color> with a hex color code:

FAQ

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:13 -0400

Examples:

You can see an example on the FAQ page

List wrapper

webdev@eclipse-foundation.org (Christopher Guindon) — Sun, 23 Jun 2019 15:50:36 -0400

The list wrapper component allows for more complex HTML lists to be created while retaining the ability to input markdown content into list items. While the List wrapper is the recommended way of getting complex list outputs to keep markdown rendering more cleanly, a secondary option is also available to groups more experienced with raw HTML code.

Note: all code samples in this page have had short code < and > characters replaced with < and > to ensure that it is rendered correctly in preview. When using this code, these characters should be replaced.

Paginated video list

webdev@eclipse-foundation.org (Christopher Guindon) — Thu, 15 Dec 2022 00:00:00 +0000

Renders an aggregated, paginated and filterable list of videos from playlists.

How it works

This shortcode uses Hugo’s resources.GetRemote function to fetch YouTube RSS feeds for each playlist in real-time during site build. This means:

Registration

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:27 -0400

Default

I have links too. Not very useful though.

The event is now over! Thank you for your interest and attendance!

Default w/ year

Solstice RSS blog list

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 19:52:27 +0000

Default

When using a custom mustache template

Text target

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:27 -0400

You can add a span with an ID to a markdown file using the following shortcode: {{< text_target id="sample" >}}Text to target{{</ text_target >}}

Text to target

User bios

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:27 -0400

!! TODO

Default State

Default User

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus nec nisi iaculis placerat. Maecenas accumsan quis est vel ornare. Suspendisse molestie feugiat dapibus. Integer malesuada at justo eget fermentum. Integer consectetur sodales est, sit amet euismod elit faucibus sed. Pellentesque dictum aliquam nisl iaculis dictum. Nulla pharetra, sapien et semper elementum, nibh magna egestas justo, at aliquam nisl nibh ac turpis. Donec maximus orci massa, feugiat pretium metus consequat vel. Duis mollis ante leo, vitae mollis nulla efficitur vitae.

Users display

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:27 -0400

!!TODO

With carousel

Meet the Program Committee

Sed quis tellus ligula. Mauris aliquam risus lectus, vitae pretium ex imperdiet vestibulum. Praesent eget cursus neque. Integer vehicula ipsum lectus, eget consequat nisi placerat ac. Etiam id lacus laoreet lacus rhoncus facilisis. Nullam varius mattis lorem, quis pulvinar turpis condimentum a. Pellentesque erat massa, vehicula iaculis imperdiet non, facilisis in enim. Maecenas tincidunt posuere lectus sit amet ullamcorper.

Duis leo erat, pharetra eget gravida nec, condimentum non justo. Proin eu nisl ac magna cursus gravida. Sed varius justo egestas, bibendum urna et, tempor elit. Donec sagittis, libero quis commodo consequat, sem eros vulputate velit, in porta est erat elementum dolor. Aliquam tempor, dolor et consectetur bibendum, neque nunc fermentum sapien, eu pharetra ante eros vel leo. Nunc sit amet urna ac lorem molestie fermentum.

Video list

webdev@eclipse-foundation.org (Christopher Guindon) — Thu, 15 Dec 2022 00:00:00 +0000

Renders a list of playlists. Accepts a comma-separated string of playlist IDs which correspond to IDs found on the Media Link API.

Parameters

Providing playlist IDs

You can use the playlist_ids shortcode parameter to list out your playlist IDs. These need to be comma separated.

The playlist ID needs to be from a channel which is managed by the Media Link API. You can find a JSON list of accepted channels here.

YouTube

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:27 -0400

You can add a youtube video to a markdown file using the following shortcode: {{< youtube "6BsxSJJb6-g" >}}

Resolution

To use the thumbnail with the highest available resolution, use the second positional parameter and set the value to "max".

Newsroom resources

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

You can display resources from the Eclipse Newsroom using the newsroom/resources shortcode.

Usage

Code used on this page:

{{< newsroom/resources wg="ecd_tools" title="White Papers" type="white_paper" >}}
{{< newsroom/resources wg="ecd_tools" title="Case Studies" type="case_study" >}}
{{< newsroom/resources wg="ecd_tools" title="Survey Reports" type="survey_report" >}}

Projects

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

The eclipsefdn_projects shortcode renders a working group’s projects. They can be filtered by category or search.

Parameters

Name	Type	Description
`templateId`	`string \| nil`	The mustache template to use.
`url`	`string`	URL of the PMI endpoint to use.
`types`	`string \| nil`	Types of projects to display. Accepts the following: `"projects"`, `"proposals"`.
`classes`	`string \| nil`	Classes for the block.
`display_categories`	`bool`	Toggle the display of category filters.
`categories`	`string \| nil`	Path to the JSON file containing project categories.
`is_static_source`	`bool \| nil`	If projects are from an endpoint other than the PMI, set this to `true`.
`sorting_method`	`string \| nil`	Accepts the following: `"alphanumeric"`, `"random"`.
`page_size`	`number \| nil`	Set the maximum number of projects to display.

Examples

Following list of projects has been filtered to display “Jakarta EE” projects, randomly sorted, and with a page size of 3:

Static projects

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

When this shortcode is passed is_static_source, you must provide it a url which points to a json resource.

If you are on localhost, ensure you disable CORS in your browser to view.

Example:

View All Projects

Events

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:04 -0400

You can add events to a markdown file using the following shortcodes: {{< events >}} or {{< events_table >}}

To add events, create a events.yml file in the data folder and add the code bellow:

title: Events
tagline: Come meet the Eclipse Community at these upcoming events!
#buttons
more_button_text: View More Events <i class="fa fa-arrow-down"></i>
submit_button_text: Submit Event
submit_button_link: https://gitlab.eclipse.org/eclipsefdn/it/webdev/hugo-solstice-theme/-/issues/new?issue%5Bassignee_id%5D=&issue%5Bmilestone_id%5D=
items:
-
name: Example Event 1
location: Location, Location
date: Month xx, xxxx
expire_date: 2030-03-28T23:59:00-00:00
button_url: https://gitlab.eclipse.org/eclipsefdn/it/webdev/hugo-solstice-theme/-/issues/new?issue%5Bassignee_id%5D=&issue%5Bmilestone_id%5D=
button_text: Button text
-
name: Example Event 2
location: Location, Location
date: Month xx, xxxx
expire_date: 2030-03-28T23:59:00-00:00
button_url: https://gitlab.eclipse.org/eclipsefdn/it/webdev/hugo-solstice-theme/-/issues/new?issue%5Bassignee_id%5D=&issue%5Bmilestone_id%5D=
button_text: Button text

Examples:

Members

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:51:20 -0400

To add members, create markdown files in the content/membership/members folder and add the following code to those files:

---
title: "Member 1"
date: 2019-03-14T05:10:00-00:00
draft: false
logo: "https://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-foundation-grey-orange.svg"
website: ""
participation_levels: "participation_level_1"
member_id: 1
---
This is an example of a members item.

Examples:

You can see an example on the Members page

Newsroom events

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

Default

Default w/ title

Events

Default w/ title + class

Events

Publish target (eclipse_org)

Type (ve)

Count (5)

Paginate

Custom Date Format (`yyyy-MM-dd 'at' HH:mm`)

Custom template (copy of events list template)

Newsroom news

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

Note: each news container on a given page needs a unique ID. If an ID is not provided on a page with multiple news blocks, functionality may become unstable.

Default

Default w/ title

News

Default w/ title + class

News

Publish target (eclipse_org)

Type (community_news)

Count (5)

Paginate

Custom Date Format (`QQQ yyyy`)

Custom template (copy of news no match height template)

Twitter buttons

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:27 -0400

A shortcode wrapper for the Twitter button embeds.

Follow Button

A button to follow a Twitter profile. To display this type of button, set the type parameter to "follow".

Set Handle*

The Twitter handle can be set from the site’s config.toml file or by using the handle parameter.

Size Property*

The size parameter can be set to “default” or “large”.

Twitter timeline

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:27 -0400

A shortcode wrapper for the Twitter timeline embeds.

Follow @EclipseFdn

Dark Mode Enabled

Dark mode can be enabled by setting the dark parameter to "true".

Follow @EclipseFdn

Tweet Limits

The maximum number of tweets displayed can be controlled using the tweet_limit parameter.

In the following example, we set the tweet_limit to "1".

Follow @EclipseFdn

Testimonials

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:22 -0400

You can add testimonials to a markdown file using the shortcode {{< testimonials >}}

To add testimonials, create a testimonials.yml file in the data folder and add the code below:

items:
-
text: Text of the testimonial 1
title: Name of the person
-
text: Text of the testimonial 2
title: Name of the person

Base data source

"Text of the testimonial 1 (loc data/testimonials.yml)"

– Name of the person

Taxonomy list

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Apr 2019 15:52:39 -0400

You can display taxonomy lists to a markdown file using the following shortcode: {{< taxonomy_list taxonomy="participation_levels" section="membership" term="participation_level_1" >}}

Examples:

Participation level 1

Cards

webdev@eclipse-foundation.org (Christopher Guindon) — Mon, 01 Jan 0001 00:00:00 +0000

Standard cards

Test card

Esse incididunt ipsum nulla consectetur tempor elit. Mollit adipisicing esse labore consectetur irure ut reprehenderit sit. Quis do cupidatat qui quis nostrud laboris nulla incididunt laborum sit sit qui id cupidatat.

Download now Or don't

Test card

Figure

webdev@eclipse-foundation.org (Christopher Guindon) — Wed, 17 Jun 2026 00:00:00 +0000

Renders an image inside a <figure> element with optional caption, link, and styling. Builds on Hugo’s built-in figure shortcode with Bootstrap classes for the theme’s look and feel.

A sample figure with a caption

Parameters

Parameter	Description
`src`	Image URL. Required.
`alt`	Alternative text. Falls back to `caption` (with markdown stripped) when omitted.
`caption`	Caption text rendered below the image. Supports markdown.
`title`	Optional title rendered above the caption.
`attr`	Attribution text rendered after the caption. Supports markdown.
`attrlink`	URL wrapping the `attr` text.
`link`	URL wrapping the image.
`target`	`target` attribute for the `link` anchor (e.g. `_blank`).
`rel`	`rel` attribute for the `link` anchor.
`class`	CSS classes applied to the `<figure>` element. Defaults to `col-xs-24`.
`imgClass`	CSS classes applied to the `<img>` element. Defaults to `img-responsive`.
`width`	`width` attribute on the `<img>` element.
`height`	`height` attribute on the `<img>` element.
`view_full_size`	When truthy, renders a “View full size” link that opens the source image in a new tab. The link is only visible on extra small screens (`xs` breakpoint).

Examples

Basic usage

{{< figure src="https://picsum.photos/id/1018/800/450" alt="A mountain landscape" >}}

With caption and title

{{< figure
 src="https://picsum.photos/id/1018/800/450"
 title="Mountain"
 caption="A sample figure with a caption"
 attr="Lorem Picsum"
 attrlink="https://picsum.photos/"
>}}

View full size link

For images that are hard to read at small screen widths (e.g. complex diagrams with fine-grain text), set view_full_size="true" to render a “View full size” link below the image. The link points to the image source and opens it in a new tab. It is only visible at the xs breakpoint — resize your browser window to see it.

Shortcodes on Hugo Solstice Theme

Agenda

FAQ

List wrapper

Paginated video list

How it works

Registration

Default

Default w/ year

Solstice RSS blog list

Default

When using a custom mustache template

Sponsors

Table of contents

Table of Contents

Introduction

Usage

Parameters

Text target

User bios

Default State

Default User

Users display

With carousel

Meet the Program Committee

Video list

Parameters

Providing playlist IDs

YouTube

Resolution

Newsroom resources

Usage

Projects

Parameters

Examples

Static projects

Events

Members

Newsroom events

Default

Default w/ title

Events

Default w/ title + class

Events

Publish target (eclipse_org)

Type (ve)

Count (5)

Paginate

Custom Date Format (yyyy-MM-dd 'at' HH:mm)

Archive

Custom template (copy of events list template)

Newsroom news

Default

Default w/ title

News

Default w/ title + class

News

Publish target (eclipse_org)

Type (community_news)

Count (5)

Paginate

Custom Date Format (QQQ yyyy)

Custom template (copy of news no match height template)

Twitter buttons

Follow Button

Set Handle*

Size Property*

Twitter timeline

Dark Mode Enabled

Tweet Limits

Testimonials

Base data source

Taxonomy list

Participation level 1

Cards

Standard cards

Test card

Test card

Figure

Parameters

Custom Date Format (`yyyy-MM-dd 'at' HH:mm`)

Custom Date Format (`QQQ yyyy`)