When trying out HUGO as a possible framework for this website, I did some research into shortcodes that could be useful for the topics I’m passionate about.

Displaying GPX Tracks

For displaying GPX Tracks I stumbled across the hugo-gpx-module shortcode.
The creator of this shortcode travels the world with offroad motorcycles and documents the journeys on his Blog.
Besides displaying GPX Tracks on a Leaflet map, the module also automatically generates a summary, an elevation profile, allows multiple GPX Tracks on a single map instance and is extensively customizable. The shortcode gets installed as a hugo module.

Example

🗺️
Loading map...

Displaying 3D Models

I actually didn’t find a lightweight shortcode for displaying 3D Models, so I decided to build one myself with a little help from the Google Model Viewer.

<script
	type="module"
	src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"
></script>

{{ $model := resources.Get (.Get "src") }} {{ if $model }}
<model-viewer
	src="{{ $model.RelPermalink }}"
	alt="3D Modell"
	auto-rotate
	camera-controls
	style="width: 100%; height: 400px; background-color: #ffffff"
>
</model-viewer>
{{ else }}
<p style="color: red">Model not found: {{ .Get "src" }}</p>
{{ end }}

The only downside is, that this shortcode only supports .glb files. This is not ideal, as I work with .stl files for 3D-Printing. However, I found a easy-to-use converter.

Example