7 files changed, 186 insertions, 0 deletions

diff --git a/snippets/css_html_showcase b/snippets/css_html_showcase
new file mode 100644
index 0000000..2941cc1
--- /dev/null
+++ b/snippets/css_html_showcase
@@ -0,0 +1,32 @@
+<div style="display: flex; align-items: center; flex-direction: row !important;">
+<pre>
+{
+  use: mapX
+  width: 300px
+  height: 400px
+  center: Taiwan
+}
+</pre>
+<pre>
+ => 
+</pre>
+  
+```map
+use: Maplibre
+width: 300px
+height: 400px
+center: [121,24]
+zoom: 6
+```
+  
+  
+  
+</div>
+
+<style>
+  pre {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 1.9;
+  }
+</style>
diff --git a/snippets/css_html_structure b/snippets/css_html_structure
new file mode 100644
index 0000000..e96d9f8
--- /dev/null
+++ b/snippets/css_html_structure
@@ -0,0 +1,85 @@
+<style>
+  ._dumby {
+    &::before {
+      content: 'class="Dumby"';
+    }
+    &, & * {
+      display: flex;
+      position: relative;
+      padding-top:2rem;
+      margin: 0.5rem;
+      &::before {
+        position: absolute;
+        top: 0.3rem;
+        left: 1rem;
+      }
+    }
+    
+    border: 5px solid red;
+    width: 100%;
+    background: rgba(255, 0, 0, 20%);
+  }
+  ._SemanticHtml {
+    flex: 80%;
+    display: block;
+    border: 3px solid blue;
+    background: skyblue;
+    &::before {
+      content: 'class="SemanticHtml"';
+    }
+  }
+  ._dumby-block {
+    border: 3px solid gray;
+    background: lightgray;
+    &::before {
+      content: 'class="dumby-block"';
+    }
+  }
+  ._target {
+    border: 3px solid chocolate;
+    background: wheat;
+    width: 100%;
+    height: 300px;
+    display: flex;
+    padding-top: 3rem;
+    &::before {
+      content: 'CUSTOM SELECTOR, by default:\Apre:has(.language-map)';
+      white-space: pre;
+    }
+  }
+  ._map-container {
+    flex: 50%;
+    border: 3px solid steelblue;
+    background: lightCyan;
+    padding: 0.5rem;
+    &::before {
+      transform: rotate(0.13turn) translate(0.7rem, 2.5rem);
+      content: 'class=\A"map-container"';
+      white-space: pre;
+    }
+  }
+  ._Showcase {
+    flex: 30%;
+    border: 3px solid green;
+    background: lightgreen;
+    &::before {
+      content: 'class="Showcase"';
+    }
+  }
+</style>
+
+<div class="_dumby">
+  <div class="_SemanticHtml">
+    <div class="_dumby-block">
+      <div class="_target">
+        <div class="_map-container"></div>
+        <div class="_map-container"></div>
+        <div class="_map-container"></div>
+      </div>
+    </div>
+    <div class="_dumby-block"></div>
+    <div class="_dumby-block"></div>
+  </div>
+  <div class="_Showcase">
+  </div>
+</div>
diff --git a/snippets/css_transition_common b/snippets/css_transition_common
new file mode 100644
index 0000000..4884c90
--- /dev/null
+++ b/snippets/css_transition_common
@@ -0,0 +1,21 @@
+@media (prefers-reduced-motion: no-preference) {
+  transition:
+    opacity .5s ease-in,
+    scale   .5s ease-in,
+    display .5s ease-in;
+  height  .5s ease-in;
+  transition-behavior: allow-discrete;
+}
+
+@starting-style {
+  opacity: 0;
+  scale: 1.1;
+}
+
+&[hidden] {
+  opacity: 0;
+  scale: .9;
+  display: none !important;
+  transition-duration: .4s;
+  transition-timing-function: ease-out;
+}
diff --git a/snippets/html_mapclay b/snippets/html_mapclay
new file mode 100644
index 0000000..a89867b
--- /dev/null
+++ b/snippets/html_mapclay
@@ -0,0 +1,8 @@
+<pre>
+use: Leaflet
+XYZ: https://tile.openstreetmap.jp/styles/osm-bright/512/{z}/{x}/{y}.png
+draw: true
+control:
+  scale: true
+</pre>
+<script data-target="pre" src='http://localhost:8080/mapclay/dist/mapclay.js'></script>
diff --git a/snippets/javascript_mutationoberserver b/snippets/javascript_mutationoberserver
new file mode 100644
index 0000000..48f17af
--- /dev/null
+++ b/snippets/javascript_mutationoberserver
@@ -0,0 +1,12 @@
+        new window.MutationObserver((ms) => {
+          for (const m of ms) {
+            console.log(m)
+            console.log('m', m.target.innerHTML)
+            console.log('m', m.target.classList)
+          }
+        }).observe(item, {
+          attributes: true,
+          attributeFilter: ['class'],
+          attributeOldValue: true,
+          characterDataOldValue: true
+        })
diff --git a/snippets/js_maplibre_terrain b/snippets/js_maplibre_terrain
new file mode 100644
index 0000000..a6466db
--- /dev/null
+++ b/snippets/js_maplibre_terrain
@@ -0,0 +1,27 @@
+map.addSource('hillshading', {
+  "type": "raster-dem",
+  "tiles": [
+    "https://osmhacktw.github.io/terrain-rgb/tiles/{z}/{x}/{y}.png"
+  ],
+  "tileSize": 256,
+  "maxzoom": 12
+});
+map.setTerrain({ 'source': 'hillshading', 'exaggeration': 1.5 });
+
+map.addLayer({
+  "id": "hillshading",
+  "type": "hillshade",
+  "source": "hillshading",
+  "minzoom": 6
+});
+
+map.on('load', function () {
+  document.getElementById('slider').addEventListener('input', function (e) {
+    console.log(e.target.value);
+    map.setPaintProperty(
+      'hillshading', 
+      'hillshade-illumination-direction', 
+      parseInt(e.target.value)
+    );
+  });
+});
diff --git a/snippets/sh_shebang b/snippets/sh_shebang
new file mode 100644
index 0000000..36ac368
--- /dev/null
+++ b/snippets/sh_shebang
@@ -0,0 +1 @@
+#! /bin/bash