README.md: Add instructions for getting started

This commit is contained in:
Martin Rubli
2025-04-09 22:27:03 +02:00
parent 891cef7a8b
commit 3fb5f2015b

View File

@@ -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 `<head>` 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 `<head>` 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: