feat: update tutorial content for adding GeoLink

* add new module for hoding contents
* also add settings for linkify

4 files changed, 74 insertions, 67 deletions

diff --git a/src/css/style.css b/src/css/style.css
index 6b0c16d..8bae1b8 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -91,7 +91,9 @@ a:hover {
 
 code {
   display: inline-block;
-  padding: 0.3em;
+  padding-inline: 0.5em;
+
+  border-radius: 5px;
 
   background-color: whitesmoke;
 
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 974d4a3..c39a62c 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -67,10 +67,14 @@ export const markdown2HTML = (container, mdContent) => {
       return match
     },
   }
-  const patterns = ['[', '(', '📍', '\uFF08', '@', 'geo:', 'twd']
+  const patterns = ['[', '(', '📍', '\uFF08', '@', 'twd']
   patterns.forEach(prefix =>
     md.linkify.add(prefix, coordinateValue),
   )
+  md.linkify.add('geo:', {
+    validate: /(-?\d+\.?\d*),(-?\d+\.?\d*)/,
+    normalize: match => match,
+  })
 
   /** Custom rule for Blocks in DumbyMap */
   // FIXME A better way to generate blocks
diff --git a/src/editor.mjs b/src/editor.mjs
index e12073f..58393aa 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -5,6 +5,7 @@ import * as menuItem from './MenuItem'
 import { addAnchorByPoint } from './dumbyUtils.mjs'
 import { shiftByWindow } from './utils.mjs'
 import LeaderLine from 'leader-line'
+import * as tutorial from './tutorial'
 
 /**
  * @typedef {Object} RefLink
@@ -85,72 +86,10 @@ const toggleEditing = () => {
 }
 // }}}
 // Set up EasyMDE {{{
-/** Contents for tutorial **/
-const defaultContent =
-  `<br>
-
-> <big>Hello My Friend! This is DumbyMap!</big>
-
-<br>
-
-\`\`\`map
-use: Leaflet
-height: 120px
-XYZ: https://tile.openstreetmap.jp/styles/osm-bright/512/{z}/{x}/{y}.png
-\`\`\`
-
-
-DumbyMap generates **interactive document with maps** from raw texts.
-
-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 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 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 [tutorial](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 [tutorial](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>
-
-> <big>Have Fun ~<big>
-
- <br>
-
-[Roll a dice]: #Click%20it! "=>.mde-roll"
-[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"`
-
 /** Editor from EasyMDE **/
 const editor = new EasyMDE({
   element: textArea,
-  initialValue: defaultContent,
+  initialValue: tutorial.md,
   autosave: {
     enabled: true,
     uniqueId: 'dumbymap',
@@ -253,7 +192,7 @@ const editor = new EasyMDE({
       text: '\u{2753}',
       title: 'Reset for content for tutorial',
       action: () => {
-        editor.value(defaultContent)
+        editor.value(tutorial.md)
         refLinks = getRefLinks()
         updateDumbyMap()
       },
@@ -305,7 +244,7 @@ const contentFromHash = getContentFromHash(window.location.hash)
 window.location.hash = ''
 
 if (url.searchParams.get('content') === 'tutorial') {
-  editor.value(defaultContent)
+  editor.value(tutorial.md)
 } else if (contentFromHash) {
   // Seems like autosave would overwrite initialValue, set content from hash here
   editor.cleanup()
diff --git a/src/tutorial.mjs b/src/tutorial.mjs
new file mode 100644
index 0000000..15d5779
--- /dev/null
+++ b/src/tutorial.mjs
@@ -0,0 +1,62 @@
+export const md = `<!-- banner -->
+> <big><br>Hello My Friend! This is DumbyMap!<br><br></big>
+
+\`\`\`map
+use: Maplibre
+height: 120px
+style: https://tile.openstreetmap.jp/styles/openmaptiles/style.json
+\`\`\`
+
+
+DumbyMap generates **interactive document with maps** from raw texts.
+
+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 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 Markdown text?](https://www.markdownguide.org/basic-syntax/)
+1. <details>
+      <summary>How to add GeoLink in Markdown</summary>
+
+      The following formats are valid for GeoLink:
+      1. Surround coordinated with parenthesis: \`(<x>, <y>)\` or \`(<x>/<y>)\`     
+         For example: (121,23)
+      2. Have leading \`@\` symbol: \`@<x>,<y>\` or \`@<x>/<y>\`
+         For example: @121/23
+      3. Use geo URI scheme: \`geo:<lat>,<lon>\`
+         For example: geo:23,121
+   </details>
+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 [tutorial](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 [tutorial](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)
+
+
+<!-- footer -->
+> <big><br>Have Fun ~<br><br></big>
+
+[Roll a Dice]: #Click%20it! "=>.mde-roll"
+[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"`