feat: update default contents and used CSS

2 files changed, 55 insertions, 13 deletions

diff --git a/src/css/style.css b/src/css/style.css
index 72c8c5f..209ff0b 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -89,6 +89,16 @@ a:hover {
   text-decoration: underline;
 }
 
+code {
+  display: inline-block;
+  padding: 0.3em;
+
+  background-color: whitesmoke;
+
+  color: #333;
+  font-size: 1.2em;
+}
+
 pre {
   width: 100%;
 }
@@ -166,3 +176,21 @@ blockquote {
 
   text-align: center;
 }
+
+details {
+  display: block;
+  width: fit-content;
+  padding: .3rem 1rem;
+
+  border-radius: 4px;
+
+  background: #F0F0F0;
+
+  summary {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background: #E4E4E7;
+  }
+}
diff --git a/src/editor.mjs b/src/editor.mjs
index b93bad8..819cf68 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -74,19 +74,34 @@ You can use it to:
 
 1. [Roll a Dice] for a new map
 2. Hover on [GeoLink][example-geolink] to show point in maps.
-3. Add a new anchor by **Right Click** on a map, and **Right Click** on **Selected Text** to attach anchor
-4. Add more contents into [Editor] by text in [Markdown]
-5. Generated document is at left hand side, **Right click** for context menu.
-   You can:
-    + Select content block for browsing
+3. Add GeoLink by dragging **selected text**
+4. Change contents by [Editor] with [Markdown] text
+5. **Right click** to call context menu, you can:
+    + Change focus between maps
+    + Select a block for browsing
     + Switch layouts for various use cases
 
 
 If you want know more, take a look at subjects below:
-1. [How to write text in Markdown?][subject]
-2. [How can I save contents for next time][subject]
-3. [I want XXX feature in maps][subject]
-3. [I am a expeienced developer, show me what you got!][subject]
+1. [How to write Markdown text?](https://www.markdownguide.org/basic-syntax/)
+1. <details>
+      <summary>How can I save contents for next use?</summary>
+
+      Since All contents come from raw texts, you can:
+      1. Save current page as bookmark by [hash button](#create-hash "=>.mde-hash")
+      2. Copy texts in editor and save as \`.txt\` file
+      3. Use online service for hosting Markdown, for example: [HackMD](https://hackmd.io)
+
+   </details>
+1. <details>
+      <summary>I want more features in map!</summary>
+
+      DumbyMap use [mapclay](https://github.com/outdoorsafetylab/mapclay) to render maps.
+      1. You can use \`eval\` options to add custom scripts, see [tutoria](https://github.com/outdoorsafetylab/mapclay?tab=readme-ov-file#run-scripts-after-map-is-created) for more details
+      2. You can use custom Renderer indtead of default ones, see [tutoria](https://github.com/outdoorsafetylab/mapclay?tab=readme-ov-file#renderer) for more details
+
+   </details>
+1. [I am an experienced developer, show me what you got!](https://github.com/outdoorsafetylab/dumbymap)
 
 
 <br>
@@ -96,10 +111,9 @@ If you want know more, take a look at subjects below:
  <br>
 
 [Roll a dice]: #Click%20it! "=>.mde-roll"
-[example-geolink]: geo:24,121?xy=121,24
+[example-geolink]: geo:24,121?xy=121,24&text=Use%20yellow%20link%20point%20to%20map
 [Markdown]: https://www.markdownguide.org/basic-syntax/
-[Editor]: #This%20is%20editor! "=>.editor"
-[subject]: placeholder`
+[Editor]: #This%20is%20editor! "=>.editor"`
 
 /** Editor from EasyMDE **/
 const editor = new EasyMDE({
@@ -1100,7 +1114,7 @@ dumbyContainer.onmousedown = (e) => {
     line.position()
   }
 
-    context.classList.add('dragging-geolink')
+  context.classList.add('dragging-geolink')
   dumbyContainer.onmousemove = onMouseMove
   dumbymap.utils.renderedMaps().forEach(map => { map.style.cursor = 'crosshair' })
   dumbyContainer.onmouseup = function (e) {