From 6a1c655e01839dc3f3b40d567e998ca931594e22 Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Wed, 9 Oct 2024 21:14:59 +0800
Subject: docs: update example of custom layouts

---
 README.md                  |  31 ++++++++++++++++++++++++++-----
 assets/layout-example1.png | Bin 0 -> 152853 bytes
 assets/structure_1.jpg     | Bin 65104 -> 62747 bytes
 src/css/dumbymap.css       |   5 +++--
 4 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 assets/layout-example1.png

diff --git a/README.md b/README.md
index 8fec281..1a46a05 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,9 @@
 
 This library generate web maps from Semantic HTML, play around with [demo page](https://outdoorsafetylab.github.io/dumbymap/)
 
+> [!CAUTION]
+> API of DumbyMap is not stable now, use it carefully
+
 ## Getting Started
 
 Node.js:
@@ -20,12 +23,13 @@ document.body.append(container)
 markdown2HTML(container, '# Heading\n\n```map\nid: foo\nuse: Maplibre\n```\n')
 
 // Gernerate maps from code block
-const dumbymap = generateMaps(container)
+const dumbymap = generateMaps(container, options ?? {})
 ```
 
 Browser (CDN):
 - unpkg: https://unpkg.com/dumbymap@latest/dist/dumbymap.mjs
 
+
 ## Semantic HTML
 
 Dumbymap adds several features by Semantic HTML:
@@ -34,7 +38,7 @@ Dumbymap adds several features by Semantic HTML:
 
 Generated from Element fits CSS Selector `:has(.language-map)`
 
-It generates maps by `textContent` in YAML format, done by [`mapclay`](/outdoorsafetylab/mapclay).
+It generates maps by `textContent` in YAML format, done by [mapclay]
 
 For example:
 ~~~markdown
@@ -122,6 +126,13 @@ After `generateMaps()`, the container has the following structure:
 
 ![structure](./assets/structure_1.jpg)
 
+For each element:
+* `class="Dumby"`: Container of DumbyMap Contents. It uses attribute `data-layout` to switch layout
+* `class="SemanticHtml"`: Container of Semantic HTML
+* `class="Showcase"`: Container of map with `class="focus"`. Some layouts use it to display focused map
+* `class="dumby-block"`: Block contains part of contents of Semantic HTML.
+* `class="mapclay"`: Map generated by [mapclay]
+
 ## Layouts
 
 Dumbymap switch layouts by attribute `data-layout` of container. Most of the features are done by pure CSS.
@@ -130,13 +141,15 @@ You can add custom layout by options `layouts`. For example, the following code
 
 ```css
 .Dumby[data-layout='sticky'] {
+  max-width: 80em;
+
   .Showcase {
     display: block;
     width: 20vw;
     height: 40vh;
     position: absolute;
-    right: 0;
-    bottom: 0;
+    right: 20px;
+    bottom: 20px;
     background: red;
   }
 }
@@ -146,13 +159,19 @@ You can add custom layout by options `layouts`. For example, the following code
 generateMaps(container, { layouts: "sticky" })
 ```
 
+<details><summary>Result:</summary>
+
+![](./assets/layout-example1.png)
+
+</details>
+
 
 ## Dependencies
 
 - [leader-line](https://anseki.github.io/leader-line/)
 - [plain-draggable](https://anseki.github.io/plain-draggable/)
 - [markdown-it](https://github.com/markdown-it/markdown-it/)
-- [mapclay](https://github.com/outdoorsafetylab/mapclay)
+- [mapclay]
 - [EasyMDE](https://github.com/Ionaru/easy-markdown-editor)
 
 
@@ -168,3 +187,5 @@ generateMaps(container, { layouts: "sticky" })
 * [obsidian-map-view](https://github.com/esm7/obsidian-map-view)
 * [odyssey.js](http://cartodb.github.io/odyssey.js/)
 * [StoryMapJS](https://storymap.knightlab.com/)
+
+[mapclay]: https://github.com/outdoorsafetylab/mapclay
diff --git a/assets/layout-example1.png b/assets/layout-example1.png
new file mode 100644
index 0000000..ae9eddc
Binary files /dev/null and b/assets/layout-example1.png differ
diff --git a/assets/structure_1.jpg b/assets/structure_1.jpg
index 03e709d..8c238ca 100644
Binary files a/assets/structure_1.jpg and b/assets/structure_1.jpg differ
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index d31d7e6..10778e8 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -783,14 +783,15 @@ a[href^='http']:not(:has(img))::after,
 }
 
 .Dumby[data-layout='sticky'] {
+  max-width: 80em;
   .Showcase {
     display: block;
     width: 20vw;
     height: 40vh;
 
     position: absolute;
-    right: 0;
-    bottom: 0;
+    right: 20px;
+    bottom: 20px;
 
     background: red;
   }
-- 
cgit v1.2.3-70-g09d2