From 83a192f80dd5bf03e50adaa337990c94b111b330 Mon Sep 17 00:00:00 2001 From: andrewgryan Date: Wed, 17 Jul 2024 14:07:59 +0100 Subject: [PATCH] extend docs to include api docs --- docs/content/api/_index.md | 5 +++ docs/content/api/l-image-overlay.md | 54 +++++++++++++++++++++++++++++ docs/content/api/l-map.md | 52 +++++++++++++++++++++++++++ docs/static/style.css | 23 +++++++++++- docs/templates/api-page.html | 8 +++++ docs/templates/api.html | 12 +++++++ docs/templates/base.html | 1 + 7 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 docs/content/api/_index.md create mode 100644 docs/content/api/l-image-overlay.md create mode 100644 docs/content/api/l-map.md create mode 100644 docs/templates/api-page.html create mode 100644 docs/templates/api.html diff --git a/docs/content/api/_index.md b/docs/content/api/_index.md new file mode 100644 index 0000000..904b5cf --- /dev/null +++ b/docs/content/api/_index.md @@ -0,0 +1,5 @@ ++++ +title = "API documentation" +template = "api.html" +page_template = "api-page.html" ++++ diff --git a/docs/content/api/l-image-overlay.md b/docs/content/api/l-image-overlay.md new file mode 100644 index 0000000..d462f8e --- /dev/null +++ b/docs/content/api/l-image-overlay.md @@ -0,0 +1,54 @@ ++++ +title = "Image overlay" ++++ + +HTML equivalent to `L.imageOverlay` function. +Can be a child of `l-map` or `l-layer-group` elements. + +## Example + +A standard way to initialise an image overlay. + +```html + +``` + +More elaborate example, based on a Leaflet tutorial. + +```html + +``` + +## Parameters + +Mandatory HTML properties to successfully instantiate. + +| Attribute | Example | Description | +| -- | -- | -- | +| url | /path/to/image.png | HTTP URL to image | +| bounds | [[0, 0], [45, 45]] | LatLngBounds to define the image extent | + +## Properties + +| Attribute | Type | Description | +| -- | -- | -- | +| alt | string | Alt text related to image | +| opacity | float | Value to control transparency | + +## Events + +| Event key | Detail | Description | +| -- | -- | -- | +| l:layer:connected | | Triggered when connected to the document | + + diff --git a/docs/content/api/l-map.md b/docs/content/api/l-map.md new file mode 100644 index 0000000..8dab756 --- /dev/null +++ b/docs/content/api/l-map.md @@ -0,0 +1,52 @@ ++++ +title = "Map" ++++ + +HTML equivalent to `L.map` function. Can call methods, e.g. `map.fitWorld()`. + +## Example + +A standard way to initialise a map is with a center and a zoom level. + +```html + +``` + +To detect mobile device location, zoom to it and enable location event handlers. + +```html + + ... + +``` + +## Parameters + +Mandatory HTML properties to successfully instantiate a map. + +| Attribute | Example | Description | +| -- | -- | -- | +| center | [0, 0] | LatLng position | +| zoom | 0 | Zoom level | + +OR + +| Attribute | Example | Description | +| -- | -- | -- | +| fit-world | | Existence of this property calls `map.fitWorld()` | + +## Properties + +| Attribute | Value | Description | +| -- | -- | -- | +| fit-world | | Auto-fits map to world extent | +| on | | Used to connect `map.on` Leaflet event handler to HTML CusomEvent | +| locate | | `map.locate` method call options | + +## Events + +| Event key | Detail | Description | +| -- | -- | -- | +| ready | | Triggered by `map.whenReady` method | +| l:layer:connected | | Triggered by child elements when a layer is connected to the document | + diff --git a/docs/static/style.css b/docs/static/style.css index 088f306..48bbdb2 100644 --- a/docs/static/style.css +++ b/docs/static/style.css @@ -25,11 +25,14 @@ body { min-height: 100vh; display: grid; grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto; + row-gap: 1ch; } h1, h2, -h3 { +h3, +th { font-family: var(--font-family); font-weight: 400; font-style: normal; @@ -109,3 +112,21 @@ footer { font-family: var(--font-family); } } + +table { + inline-size: 100%; + background-color: var(--gray-2); + border-radius: var(--size-1); + border-collapse: collapse; + overflow: hidden; +} + +th { + background-color: var(--gray-9); + color: var(--gray-1); +} + +td, th { + padding: var(--size-2); + text-align: left; +} diff --git a/docs/templates/api-page.html b/docs/templates/api-page.html new file mode 100644 index 0000000..71f3c63 --- /dev/null +++ b/docs/templates/api-page.html @@ -0,0 +1,8 @@ +{% extends "base.html" %} + +{% block content %} +
+

{{ page.title }}

+ {{ page.content | safe }} +
+{% endblock %} diff --git a/docs/templates/api.html b/docs/templates/api.html new file mode 100644 index 0000000..a8882eb --- /dev/null +++ b/docs/templates/api.html @@ -0,0 +1,12 @@ +{% extends "base.html" %} + +{% block content %} +
+

{{section.title}}

+ +
+{% endblock content %} diff --git a/docs/templates/base.html b/docs/templates/base.html index 9247342..a5b0525 100644 --- a/docs/templates/base.html +++ b/docs/templates/base.html @@ -36,6 +36,7 @@
Home Articles + API