From 3fb5f2015b583e50165c36317f7deb859bcdf1e8 Mon Sep 17 00:00:00 2001 From: Martin Rubli Date: Wed, 9 Apr 2025 22:27:03 +0200 Subject: [PATCH] README.md: Add instructions for getting started --- README.md | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 8bca3f9..c314148 100644 --- a/README.md +++ b/README.md @@ -30,9 +30,26 @@ And below is how this might render: ## Documentation +### Getting started + +An [example website is available](https://gitlab.com/mrubli/hugo-mod-leaflet-example/) that illustrates how to use hugo-mod-leaflet in your own Hugo website. +In a nutshell: + +1. Add a dependency to `gitlab.com/mrubli/hugo-mod-leaflet.git` in your configuration (typically `hugo.toml` or `hugo.yaml`). +2. Find out how the theme of your choice lets you add code to the site's `` section. A good candidate to look is `layouts/_default/baseof.html` or other files in the same directory. (The example website [uses](https://gitlab.com/mrubli/hugo-mod-leaflet-example/-/blob/master/layouts/partials/site-scripts.html) the `layouts/partials/site-scripts.html` customization point of the [Ananke theme](https://github.com/theNewDynamic/gohugo-theme-ananke).) +3. Invoke the `leaflet-loader` shortcode from the `` section. Typically, you'd do this with a snippet like this one: + ``` + {{ if .HasShortcode "leaflet-map" }} + {{ partial "leaflet-loader" . }} + {{ end }} + ``` +4. Now you can use the shortcodes provided by hugo-mod-leaflet in your content files. + +### Shortcodes + The current shortcode documentation is contained at the top of [leaflet-map.html](layouts/shortcodes/leaflet-map.html) but is reproduced here for convenience: -### Syntax summary +#### Syntax summary ```go-html-template {{< leaflet-map centerLat=FLOAT centerLon=FLOAT zoom=INT width="STRING" height="STRING" resizable=BOOL maximizable=BOOL freezable=BOOL freezeOptions="STRING" >}} @@ -44,7 +61,7 @@ The current shortcode documentation is contained at the top of [leaflet-map.html {{< /leaflet-map >}} ``` -### Map options +#### Map options ``` centerLat/centerLon: @@ -74,7 +91,7 @@ freezeOptions: Example: freezeOptions=" " (to avoid the hugo-mod-leaflet default and use Leaflet.Freezy's defaults instead) ``` -### Layer options +#### Layer options ``` id: @@ -112,14 +129,14 @@ selectorPosition: Optional, defaults to "bottomleft". If specified for more than one layer, the last one wins. ``` -### Marker options +#### Marker options ``` lat/lon: Coordinates of the marker as decimal values. ``` -### Track options +#### Track options ``` path: @@ -137,7 +154,7 @@ downloadable: Optional, defaults to true. ``` -### Scale options +#### Scale options ``` position: @@ -145,7 +162,7 @@ position: Optional, defaults to "bottomright". ``` -### Elevation profile options +#### Elevation profile options ``` resizable: