16 files changed, 296 insertions, 37 deletions

diff --git a/X11/openbox/rc.xml b/X11/openbox/rc.xml
index 652c003..fec04e7 100644
--- a/X11/openbox/rc.xml
+++ b/X11/openbox/rc.xml
@@ -109,8 +109,8 @@
           sh -c '
             xdotool search --name @OPENBOX_CONFIG windowactivate || \
             alacritty --title @OPENBOX_CONFIG \
-            -o "window.dimensions.lines=32" \
-            -o "window.dimensions.columns=70" \
+            -o "window.dimensions.lines=30" \
+            -o "window.dimensions.columns=80" \
             -e nvim ~/.config/openbox/rc.xml;
             openbox --reconfigure
           '
@@ -541,7 +541,7 @@
     <keybind key="W-e">
       <action name="Execute">
         <command>
-          alacritty -e nvim -c 'r !xsel -ob' -c 'nmap &lt;C-c&gt; :w !xsel -ib&lt;CR&gt;:qa!&lt;CR&gt;'
+          alacritty -e nvim -c 'r !xsel -ob' -c 'normal A' -c 'startinsert' -c 'nmap &lt;C-c&gt; :w !xsel -ib&lt;CR&gt;:qa!&lt;CR&gt;'
         </command>
       </action>
     </keybind>
diff --git a/alias b/alias
index e40ef38..5d9fad9 100644
--- a/alias
+++ b/alias
@@ -208,7 +208,7 @@ date.reset() {
 alias clock.reset='hwclock --systohc'
 unalias gr &>/dev/null
 gr() {
-  grep -IR $@ . --exclude-dir=node_modules
+  grep -IR $@ . | sed '/^.\{2048\}./d'
 }
 alias findn='find . -iname'
 
@@ -478,7 +478,6 @@ alias curl.wifi='curl -I google.com | grep -E "^Location:" | cut -d" " -f2 | xse
 # misc
 alias foo='echo bar > foo && echo File foo is created && ls -lh foo'
 alias bar='echo foo > bar && echo File bar is created && ls -lh bar'
-unalias gr &>/dev/null
 alias wcl='wc -l'
 alias x='xdg-open'
 alias yl='youtube-dl'
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
diff --git a/tigrc b/tigrc
index 8817f54..c7b6589 100644
--- a/tigrc
+++ b/tigrc
@@ -140,9 +140,10 @@ bind main gs ?@git merge %(branch) --squash
 bind main p none # override default pager binding
 bind main pp ?git push
 bind main pP ?git push -u %(remote) %(branch):%(branch)
-bind main pR ?git push -u %(remote) %(branch):%(branch)
-bind main pc ?git push -u %(remote) %(commit):%(branch)
 bind main pr ?git push -u '%(prompt Which remote? )' %(branch):%(branch)
+bind main pfr ?git push -u '%(prompt Force push to which remote? )' %(branch):%(branch) -f
+bind main pR ?git push -u %(remote) %(branch):%(branch)
+bind main pc ?git push -u '%(prompt Which remote? )' %(commit):%(branch)
 bind main pF ?git push --force
 bind main pd ?git push %(remote) :%(branch)
 bind generic pD ?git push '%(prompt Delete from which remote? )' :'%(prompt Which reference? )'
@@ -151,8 +152,7 @@ bind generic pD ?git push '%(prompt Delete from which remote? )' :'%(prompt Whic
 bind main <C-F> ?git fetch %(remote)
 bind main gf ?git fetch '%(prompt Which remote? )'  # Go to Fetch a specific remote
 bind main gF ?git fetch '%(prompt Which remote? )' '%(prompt Which branch? )'
-bind main pu !git pull %(remote) %(branch)
-bind main pf !git pull '%(prompt Pull from witch remote? )' %(branch)
+bind main pu !git pull '%(prompt Pull from witch remote? )' %(branch)
 bind main pU ?git pull --rebase
 
 # reset/rebase/revert
diff --git a/vim/init/basic.vim b/vim/init/basic.vim
index 79ed3fd..6553a6c 100644
--- a/vim/init/basic.vim
+++ b/vim/init/basic.vim
@@ -86,6 +86,12 @@ set display=lastline
 set lazyredraw
 set whichwrap=b,s
 
+" linebreak, ref: https://stackoverflow.com/questions/1204149/smart-wrap-in-vim
+set breakindent
+" ident by an additional 2 characters on wrapped lines, when line >= 40 characters, put 'showbreak' at start of line
+set breakindentopt=shift:4,min:40,sbr
+set showbreak=>>
+
 " Tab
 set showtabline=2
 
diff --git a/vim/init/config.vim b/vim/init/config.vim
index 4676942..5c53728 100644
--- a/vim/init/config.vim
+++ b/vim/init/config.vim
@@ -216,6 +216,34 @@ augroup InitFileTypes
   endfunc
 
   " }}}
+  " Javascript {{{
+
+  au FileType javascript call InitJavascriptFile()
+  function! InitJavascriptFile()
+    setlocal wrap sw=2 ts=2
+
+    setlocal foldexpr=JsdocLevel() foldmethod=expr
+
+    let l:jsdocPrefix = "JSDOC: "
+    setlocal foldtext=JSdocFoldText()
+  endfunc
+
+  function! JsdocLevel()
+    let jsdoc = matchstr(getline(v:lnum), '^\zs\s*\/\*\*\ze')
+    if !empty(jsdoc)
+      let foldlevel = len(matchstr(jsdoc, '^\zs\s*\ze')) + 1
+      return '>'.foldlevel
+    else
+      " Contents
+      return "="
+    endif
+  endfunc
+
+  function! JSdocFoldText()
+    return "JSDOC: ".matchstr(getline(v:foldstart + 1), '^[\* ]*\zs.*\ze')
+  endfunc
+
+  " }}}
   " HTML {{{
 
   " Usage: <leader>cl(ass) or <leader>id to edit html tag attribute
@@ -235,8 +263,11 @@ augroup InitFileTypes
       startinsert
     endif
   endfunc
-  autocmd FileType html,markdown nnoremap <buffer> <leader>cl :call <SID>ChangeAttr("class")<CR>
-  autocmd FileType html,markdown nnoremap <buffer> <leader>id :call <SID>ChangeAttr("id")<CR>
+  autocmd FileType html,markdown,javascript nnoremap <buffer> <leader>cl :call <SID>ChangeAttr("class")<CR>
+  autocmd FileType html,markdown,javascript nnoremap <buffer> <leader>id :call <SID>ChangeAttr("id")<CR>
+  autocmd FileType css,javascript nnoremap <buffer> <F9> :let LINE=line(".")<CR>:silent! %!npx standard --stdin --fix 2>/dev/null<CR>:exe LINE<CR>
+  autocmd FileType css,javascript nmap <buffer> <F8> cdg:let LINE=line(".")<CR>:%!stylelint --fix --stdin 2>/dev/null<CR>:exe LINE<CR>
+  autocmd FileType css,javascript set formatprg=prettier
 
   " Reload preview server
   autocmd BufWrite *.html,*.js,*.css call ReloadServer()
@@ -279,4 +310,5 @@ augroup InitFileTypes
 
 augroup END
 
-" }}}
+let g:ale_lint_on_save = 1
+let g:ale_fix_on_save = 1
diff --git a/vim/init/keymaps.vim b/vim/init/keymaps.vim
index 2d58fe9..07be9b3 100644
--- a/vim/init/keymaps.vim
+++ b/vim/init/keymaps.vim
@@ -476,6 +476,7 @@ let g:quitVimWhenPressingCtrlC = 1
 function! ToggleQuit()
   let g:quitVimWhenPressingCtrlC = !g:quitVimWhenPressingCtrlC
   let message = g:quitVimWhenPressingCtrlC ? "Unlock" : "Lock"
+  nnoremap ZZ <C-c>
   echo message
 endfunction
 nnoremap \q :call ToggleQuit()<CR>
@@ -502,7 +503,7 @@ function! CloseBufferSafely()
     tabclose
   else
     " Switch to proper buffer
-    let next_buf = get(t:bufs, bufnr('#')) ? bufnr('#') : filter(t:bufs, 'v:val != '..bufnr)[-1]
+    let next_buf = filter(t:bufs, 'v:val != '..bufnr)[-1]
     exe "b "..next_buf
     " exe "buffer ".g:lastbuffer
     call filter(t:bufs, 'v:val != '..bufnr)
diff --git a/vim/mini.lua b/vim/mini.lua
index 177d80a..7451258 100644
--- a/vim/mini.lua
+++ b/vim/mini.lua
@@ -564,11 +564,14 @@ require("lazy").setup({
       require("telescope").setup({
         defaults = {
           preview = {
+            filesize_limit = 0.5,
             filesize_hook = function(filepath, bufnr, opts)
-              local max_bytes = 100000
+              local max_bytes = 10000
               local cmd = { "head", "-c", max_bytes, filepath }
               require('telescope.previewers.utils').job_maker(cmd, bufnr, opts)
-            end
+            end,
+            timeout = 50,
+            highlight_limit = 1,
           },
           mappings = {
             i = {
@@ -644,10 +647,10 @@ require("lazy").setup({
         "<leader>sF",
         function()
           require("telescope.builtin").find_files({
-              follow = ture,
-              no_ignore = true,
-              hidden = true,
-              file_ignore_patterns = {},
+            follow = ture,
+            no_ignore = true,
+            hidden = true,
+            file_ignore_patterns = {},
           })
         end,
         { desc = "telescope find all files" }
@@ -826,24 +829,22 @@ require("lazy").setup({
     lazy = false,
     config = function()
       require("which-key").setup({
-        defaults = {
-          win = {
-            -- don't allow the popup to overlap with the cursor
-            no_overlap = false,
-            -- width = 1,
-            height = { min = 10, max = 25 },
-            -- col = 0,
-            -- row = math.huge,
-            -- border = "none",
-            padding = { 1, 2 }, -- extra window padding [top/bottom, right/left]
-            title = true,
-            title_pos = "center",
-            zindex = 1000,
-            -- Additional vim.wo and vim.bo options
-            bo = {},
-            wo = {
-              -- winblend = 10, -- value between 0-100 0 for fully opaque and 100 for fully transparent
-            },
+        win = {
+          -- don't allow the popup to overlap with the cursor
+          no_overlap = false,
+          -- width = 1,
+          height = { min = 10, max = 25 },
+          -- col = 0,
+          -- row = math.huge,
+          -- border = "none",
+          padding = { 1, 2 }, -- extra window padding [top/bottom, right/left]
+          title = false,
+          title_pos = "center",
+          zindex = 1000,
+          -- Additional vim.wo and vim.bo options
+          bo = {},
+          wo = {
+            -- winblend = 10, -- value between 0-100 0 for fully opaque and 100 for fully transparent
           },
         },
       })
@@ -1477,6 +1478,24 @@ require("lazy").setup({
   --   end,
   -- },
   -- -- }}}
+  -- ALE {{{
+  {
+    'dense-analysis/ale',
+    config = function()
+      -- Configuration goes here.
+      local g = vim.g
+
+      g.ale_ruby_rubocop_auto_correct_all = 1
+
+      g.ale_linters = {
+        ruby = { 'javascript', 'standard' },
+        lua = { 'lua_language_server' }
+      }
+
+      vim.keymap.set("n", "\a", vim.cmd("ALEDisable"))
+    end
+  },
+  -- }}}
 })
 
 -- KEYMAPS {{{
diff --git a/vim/spell/en.utf-8.add b/vim/spell/en.utf-8.add
new file mode 100644
index 0000000..d4297c4
--- /dev/null
+++ b/vim/spell/en.utf-8.add
@@ -0,0 +1,16 @@
+#eoLink/!
+GeoLink/!
+GeoLink
+GeoLink
+geo
+dumbymap
+Dumbymap
+mapclay
+EasyMDE
+js
+CDN
+unpkg
+mjs
+DocLink
+StoryMapJS
+afterMapRendered
diff --git a/vim/spell/en.utf-8.add.spl b/vim/spell/en.utf-8.add.spl
new file mode 100644
index 0000000..a9f1927
--- /dev/null
+++ b/vim/spell/en.utf-8.add.spl