tags 117 | with class="mermaid". From these tags mermaid will try to read the 118 | diagram/chart definitons and render them into svg charts. 119 | ______________________________________________________ 120 | SPB introduction: Add relation/comparative to https://etherpad.org/ 121 | ______________________________________________________ 122 | Page load profiling: 123 | https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.oficina24x7.com%2FBlockchain%2Fethereum_map.html%3FshowSearchMenu%3Dtrue 124 | ______________________________________________________ 125 | - Improve demo 126 | ______________________________________________________ 127 | - When clicking on a given tag allow to show related tags with matching 128 | coindicences. For example, when clicking on "persistence" show related 129 | tags like "storage"[20 matches], "serialization"[3 matches], ... 130 | ______________________________________________________ 131 | - when a query like ...?topics=NonExistingTopic is selected there is 132 | no way in UI to un-select the non-existing-topic and an empty result 133 | is show for "AND" searchs. 134 | ______________________________________________________ 135 | Add also standard meta-topics: 136 | TODO, important, ... 137 | 138 | Example programming classification to allow N dimensional searchs : 139 | · CLASSIFICATION 1 (General) : pending, important, urgent, blocking, ? 140 | · CLASSIFICATION 2 (doc.nature) : tutorial (howto, ...), config, procedure, report, links new, log, 141 | code, anex, bill/invocice/delivery_note, budget, estimation, ... 142 | · CLASSIFICATION (dificulty) : dif1 -> dif2 -> ... -> dif10 143 | · CLASSIFICATION 2 (Soft LifeCicle): tools -> documentation -> development -> debugging -> 144 | validation (unitests, functional, ...) -> close 145 | -> IOP (dev,tst,pre,beta,pro) -> monitorización -> incidencias -> QA 146 | · CLASSIFICATION 4 (Environement) : DEV, TST, PRE, PRO 147 | · CLASSIFICATION 5 (Product) : product1, product2, ... 148 | · CLASSIFICATION 9 (prog.Lang) : javascript, java, batch, ruby, shell, Silverlight, python, ? 149 | · CLASSIFICATION 12 (Roll) : Programmer, Analist, DevOps, manager, ? 150 | · CLASSIFICATION 13(lecture time) : 7min -> 15min -> 30min -> 1h -> 4h -> 1d -> 1w -> 1m 151 | · .. 152 | 153 | General taxonomies: 154 | { IT : [ performance, redundancy, log, monitoring, 155 | analytics, testing, CI, IaC, ...], 156 | documentacion : ... } 157 | ______________________________________________________ 158 | Allow to add titles for topics. Ex: 159 | { "101": "Info for newcommers, must-know, ...", 160 | "transaction": "TXs signed by clients sent to node ...", 161 | ... } 162 | ______________________________________________________ 163 | Allow to order topics by family: 164 | (meta-topics of topics) 165 | Allow dev mode so that page is reloaded with existing layout (open note) 166 | ______________________________________________________ 167 | Allow to search by "glummed/nearby tags": 168 | - This requires first to define what is a "nearby tag". 169 | ______________________________________________________ 170 | Allot to use variables inside links. For example: 171 | @[http://${AZURE_ARTICLES}/azure-preview-portal-using-resource-groups/] 172 | instead of: 173 | @[http://azure.microsoft.com/en-us/documentation/articles/azure-preview-portal-using-resource-groups/] 174 | ______________________________________________________ 175 | Allow to change pre white-space css in case of overflow: 176 | REF: https://stackoverflow.com/questions/7138772/how-to-detect-overflow-in-div-element 177 | ______________________________________________________ 178 | Internal search must invoque the query directly 179 | (not reload the page if possible) 180 | ------------------------------------------ 181 | Allow to open "popup" in new window 182 | ------------------------------------------ 183 | https://stackoverflow.com/questions/13955163/imitating-a-blink-tag-with-css3-animations 184 | ------------------------------------------ 185 | https://www.infoq.com/news/2019/03/flexsearch-fast-full-text-search 186 | C&P from https://www.infoq.com/news/2019/03/flexsearch-fast-full-text-search/ 187 | ... in a given amount of time, 300 times more search operations than Wade, 188 | the next fastest search library. 189 | - Typical basic full-text search features include: 190 | - stemming : Ex. 'caring' matches 'care' 191 | - stopword handling : avoid irrelevant results (remove articles, common words,...) 192 | - phrase matching : control how much distance can be allowed between words 193 | - basic fuzzy matching: 194 | - autocomplete : 195 | - suggestions : 196 | - search expressions : 197 | - synonym search : 198 | 199 | 200 | ------------------------------------------ 201 | Highperf code editor for the web: 202 | https://ace.c9.io 203 | https://stackoverflow.com/questions/15485153/enable-vim-mode-in-gist-ace-editor 204 | 205 | - https://codepen.io/buglessir/pen/EJQZWW 206 | JS: Save/download blob as file 207 | ______________________________________________ 208 | href rel attribute: 209 | https://www.w3schools.com/TAGS/att_a_rel.asp 210 | 211 | Value Description 212 | ------------ ---------------------------------- 213 | alternate Provides a link to an alternate representation 214 | of the document (i.e. print page, translated or mirror) 215 | 216 | author Provides a link to the author of the document 217 | 218 | bookmark Permanent URL used for bookmarking 219 | 220 | external Indicates that the referenced document is not part of the 221 | same site as the current document 222 | 223 | help Provides a link to a help document 224 | 225 | license Provides a link to copyright information for the document 226 | 227 | next Provides a link to the next document in the series 228 | 229 | nofollow Links to an unendorsed document, like a paid link. 230 | used by Google to specify that the Google search spider 231 | should not follow that link. 232 | 233 | noreferrer Requires that the browser should not send an HTTP referer 234 | header if the user follows the hyperlink 235 | 236 | noopener Requires that any browsing context created by following 237 | the hyperlink must not have an opener browsing context 238 | 239 | prev The previous document in a selection 240 | 241 | search Links to a search tool for the document 242 | 243 | tag A tag (keyword) for the current document 244 | _______________ 245 | https://www.zotero.org/ 246 | Your personal research assistant 247 | Zotero is a free, easy-to-use tool to help you collect, 248 | organize, cite, and share research. 249 | _______________ 250 | SEO,Rich Structured Data for Search Engines: 251 | https://www.infoq.com/news/2021/02/seo-structured-data-rich-snippet/ 252 | ---------------------------------------------- 253 | Add share icon. 254 | ---------------------------------------------- 255 | pack js/css into html: 256 | https://github.com/mahhov/inline-scripts/blob/master/src/inlineScriptTags.js 257 | ----------------------------------------------- 258 | https://lunrjs.com/ 259 | 260 | Simple 261 | 262 | Designed to be small, yet full featured, Lunr enables you to provide a great search experience without the need for external, server-side, search services. 263 | Extensible 264 | 265 | Add powerful language processors to give more accurate results to user queries, or tweak the built-in processors to better fit your content. 266 | Everywhere 267 | 268 | Lunr has no external dependencies and works in your browser or on the server with node.js 269 | ______________________________________________ 270 | Six Degrees of Wikipedia [ENG] 271 | https://www.meneame.net/story/six-degrees-of-wikipedia-eng 272 | 273 | Inspirado en el concepto de seis grados de separación, Six Degrees 274 | of Wikipedia recorre los hipervínculos de Wikipedia para encontrar 275 | el menor número de clics que se necesitan para navegar entre 276 | cualquiera de los casi seis millones de páginas de la mayor 277 | enciclopedia gratuita en línea del mundo. Introduce los títulos de 278 | dos páginas de Wikipedia en las casillas de este sitio, haz clic en 279 | el botón "Go!" y descubre lo conec 280 | ____________________________________________ 281 | Loading modules like: 282 | 285 | works on on Firefox Desktop/mobile and Chrome desktop. Fails on Chrome mobile :( !!! 286 | 287 | 288 | -------------------------------------------------------------------------------- /WebTechnologies/W3C_Identity.dia: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/earizon/IT_notes/470985e57e5c85b719ae0dab867c4df20044d2e4/WebTechnologies/W3C_Identity.dia -------------------------------------------------------------------------------- /WebTechnologies/W3C_Identity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 200 | -------------------------------------------------------------------------------- /WebTechnologies/map.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | WebTechnologies map (WiP) 11 | 12 | 13 | 14 | Please, visit the brand new version here 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-minimal -------------------------------------------------------------------------------- /background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/earizon/IT_notes/470985e57e5c85b719ae0dab867c4df20044d2e4/background.jpg -------------------------------------------------------------------------------- /beautify.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | sed "s/[/]-/┌─/g" | \ 3 | sed "s/-[\]/─┐/g" | \ 4 | sed "s/_[/]/─┘/g" | \ 5 | sed "s/[\]_/└─/g" | \ 6 | sed "s/-[/]/─┘/g" | \ 7 | sed "s/[\]-/└─/g" | \ 8 | sed "s/}-/├─/g" | \ 9 | sed "s/-{/─┤/g" | \ 10 | sed "s/-v-/─┬─/g" | \ 11 | sed "s/-^-/─┴─/g" | \ 12 | sed "s/-x-/─┼─/g" | \ 13 | sed "s/-|-/─┼─/g" | \ 14 | sed "s/->/─→/g" | \ 15 | sed "s/<-/←─/g" | \ 16 | sed "s/-/─/g" | \ 17 | sed "s/|/│/g" | \ 18 | sed "s/-+-/-┼-/g" |\ 19 | sed "s/^>/├/g" | \ 20 | sed "s/<$/┤/g" 21 | -------------------------------------------------------------------------------- /check_urls.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | if [[ $# != 1 ]] ; then 4 | echo "Ussage: $0 htmlFileToCheck" 5 | exit 1 6 | fi 7 | 8 | FILE=$1 9 | 10 | for delimiter in "'" '"'; do 11 | # WARN: only first link is captured: 12 | # REF: http://skybert.net/unix/non-greedy-matching-in-sed/ 13 | SED_EXPR="s/^.*href=[${delimiter}]$[^${delimiter}]*$[${delimiter}].*$/\1/" 14 | (cat ${FILE} | grep "href=${delimiter}" | sed ${SED_EXPR} | while read url ; do 15 | echo $url | grep -q "^http" || continue 16 | echo $url | sed "s/#.*$//" 17 | done ) | \ 18 | sort | uniq | while read url ; do 19 | # echo $url 20 | wget --spider -O /dev/null -o /dev/null $url 21 | if [[ $? != 0 ]] ; then 22 | echo $url 23 | fi 24 | done 25 | 26 | done 27 | -------------------------------------------------------------------------------- /custom.js: -------------------------------------------------------------------------------- 1 | export function preLoad() { 2 | console.log("debug custom preLoad"); 3 | } 4 | 5 | export function postLoad() { 6 | console.log("debug custom postLoad"); 7 | let html = '' 8 | +'

' 9 | +'' 10 | + '' 11 | // + '' 18 | + '' 19 | 20 | const div1 = document.getElementById('printButton'); 21 | div1.insertAdjacentHTML('afterend', html) 22 | } 23 | 24 | 25 | -------------------------------------------------------------------------------- /escapeHTML.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | sed "s//˃/g" 5 | 6 | -------------------------------------------------------------------------------- /generate_sitemap.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | SITEMAP1="github-sitemap.xml" 4 | SITEMAP2="24x7-sitemap.xml" 5 | 6 | declare -A sitemap2URL 7 | sitemap2URL[${SITEMAP1}]="https://singlepagebookproject.github.io/IT_notes" 8 | sitemap2URL[${SITEMAP2}]="http://www.oficina24x7.com" 9 | 10 | for SITEMAP in ${SITEMAP1} ${SITEMAP2} ; do 11 | cat << __EOF > ${SITEMAP} 12 | 13 | 14 | __EOF 15 | done 16 | 17 | ( 18 | cat << EOF 19 | index.html 1.0 20 | Blockchain/ethereum_map.html 1.0 21 | JAVA/java_map.html 1.0 22 | General/cryptography_map.html 1.0 23 | WebTechnologies/map.html 1.0 24 | DevOps/devops_map.html 0.5 25 | Architecture/architecture_map.html 0.5 26 | Architecture/financial_arch_map.html 0.3 27 | Cloud/cloud_map.html 0.5 28 | EOF 29 | ) | while read FILE PRIORITY ; do 30 | for SITEMAP in ${SITEMAP1} ${SITEMAP2} ; do 31 | LASTMOD=$(stat --format=%y $FILE | sed "s/ .*//") 32 | echo $LASTMOD 33 | cat << ______EOF >> ${SITEMAP} 34 | 35 | ${sitemap2URL[${SITEMAP}]}/${FILE}?showSearchMenu=true 36 | ${LASTMOD} 37 | monthly 38 | ${PRIORITY} 39 | 40 | ______EOF 41 | done 42 | done 43 | 44 | for SITEMAP in ${SITEMAP1} ${SITEMAP2} ; do 45 | cat << __EOF >> ${SITEMAP} 46 | 47 | __EOF 48 | done 49 | 50 | wc -l ${SITEMAP1} ${SITEMAP2} 51 | -------------------------------------------------------------------------------- /github-sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | https://singlepagebookproject.github.io/IT_notes/index.html?showSearchMenu=true 5 | 2021-06-14 6 | monthly 7 | 1.0 8 | 9 | 10 | https://singlepagebookproject.github.io/IT_notes/JAVA/java_map.html?showSearchMenu=true 11 | 2021-06-13 12 | monthly 13 | 1.0 14 | 15 | 16 | https://singlepagebookproject.github.io/IT_notes/General/cryptography_map.html?showSearchMenu=true 17 | 2021-06-13 18 | monthly 19 | 1.0 20 | 21 | 22 | https://singlepagebookproject.github.io/IT_notes/WebTechnologies/map.html?showSearchMenu=true 23 | 2021-06-13 24 | monthly 25 | 1.0 26 | 27 | 28 | https://singlepagebookproject.github.io/IT_notes/DevOps/devops_map.html?showSearchMenu=true 29 | 2021-06-14 30 | monthly 31 | 0.5 32 | 33 | 34 | https://singlepagebookproject.github.io/IT_notes/Architecture/architecture_map.html?showSearchMenu=true 35 | 2021-06-13 36 | monthly 37 | 0.5 38 | 39 | 40 | -------------------------------------------------------------------------------- /google19773fb18c739b62.html: -------------------------------------------------------------------------------- 1 | google-site-verification: google19773fb18c739b62.html -------------------------------------------------------------------------------- /help.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HelpMan to the rescue! 6 | 7 | 22 | 23 | 33 | 34 | 35 |
36 |

HelpMan to the rescue!!!

37 | 38 | 39 |

Basic Usage

40 | double-click (mouse) or long-press (touch-screen) on a cell to zoom into highlighted content 41 | 42 |

Searching for content

43 |

Click on the "telescopic sight" icon to open the search/filter menu.
45 |
Label Navigating hints: 47 |
- Content addressing newcomers is tagged with the "101" label. If you are not in US, this number can look arbitrary. Some more info is available here. 49 |
- "TODO" tag means incomplete content. You can skip it or try to contribute with a pull request or opening a new issue. 51 |
- Other common labels or topics include: 53 |
  - qa: Quality assurance related topic. Things that help you do better thing in no more time.
  - low_code: Things that let you create working stuff with minimal coding or work (ussually it also mean better "QA").
  - testing: Information on how to test things work the way you expected
  - resource: external links, tools, bibliography, ...
  59 |
61 |

Search for matching text in any "zoom-able" element by filling the regex text input.
63 | The "single-line" checkbox can be chequed to search only matching text in a single-line and 64 | the "case-match" checkbox to match only if Upper/lower case match.
65 | NOTE: user-input is interpreted as a regular expression.
66 | Advanced users can profit from this feature to create powerful queries
67 | Normal users can ignore this feature or, if curious, learn about the magic of regular expression 68 | by clicking 69 | [here]. 70 | Just some regex simple examples: 71 |

 72 | Ex.1:
 73 | city.*Paris               ← Search for city then any character (.) repeated zero or more times (*) then Paris
 74 | Ex.2:
 75 | year.20\d\d               ← Search for year followed by any character (:,-,white space,...) followed by 20 and two more digits
 76 | Ex.3:
 77 | [<][^>]+@[^>]+\.[^>]+[>] ← Search email likes <alice@mail.com>
 78 | └─┴──────────────────────── Search for <
 79 |    ┊    ┊┊   ┊┊┊    ┊┊ ┊   
 80 |    └───┴─────────────────── followed by any character except ">" ([^>]) one or more times (.+) 
 81 |         ┊┊   ┊┊┊    ┊┊ ┊   
 82 |         └────────────────── followed by "@"
 83 |          ┊   ┊┊┊    ┊┊ ┊   
 84 |          └───┴───────────── followed by any character except ">" ([^>]) one or more times (.+) 
 85 |               ┊┊    ┊┊ ┊   
 86 |               └┴─────────── followed by dot character (\.)
 87 |                ┊    ┊┊ ┊   
 88 |                 └───┴────── followed by any character except ">" ([^>]) one or more times (.+) 
 89 |                      ┊ ┊   
 90 |                      └─┴─── followed by >
 91 |

92 |
93 |

Optionally click on any topic to filter out/in any non/related topics. The AND/OR checkbox let's 95 | to choose whether content must contain ALL or ANY selected topic.
96 | Only zoomable contant that has been previously tagged or labeled with matching topics will be searched for. 97 |
Finally click on the "Search Now!" button (or Press "Enter" key) to execture the search
Matching zoomable content will be highlighted while non-matching zoomable elements will be 100 | hidden by default.
Browse visually around the highlighted content to see if the context matches with the search.
Press the "ESC" key shortcut in your keyboard or the [show all] link 103 | to show again all cells and their relation in the context of the matched content (the "neighborhood" 104 | of matching elements)
Other shortcuts: 106 |
107 | "z" (lower-case z): Orbit/Zoom-out
108 | ">" (Upper-case z): macro/Zoom-in
109 |
110 |

112 | NOTE: When just a single zoomable element match the search its content will automatically be zoomed-in
113 | This behaviour allows to create external links to you page that automatically opens the 114 | desired cell/content using a link similar to: 115 | 116 | [this example link]
117 | Otherwise the different zoomable elements will be highlighted and the user will choose which one to zoom-in.
118 | Once you click on one of the the left/right arrows icons can be clicked to move to previous/next search match, 119 | or you can close the zoom and click on another zoomable element. 120 | 121 |

Sharing content

122 |

The full page book can be shared as a normal web page by sharing its URL (Universal Resource Locator)
If you want to put the attention or highlight some particular topic inside the book,add the 125 | query parameter "topics=topic1,topic2,..". For example:
126 | Share the linux administration page highlighting topics related to audit_user:
127 | ./DevOps/linux_administration_summary.html?topics=audit_user
128 | Share the same page, highlight other topic (learn_x_in_y_min):
129 | ./DevOps/linux_administration_summary.html?topics=learn_x_in_y_min 130 |
The URL query parameter can be used to share a text-search. For example:
132 | Share the linux administration page highlighting any cell including the word "disk": 133 | ./DevOps/linux_administration_summary.html?query=disk
134 | Or containing the word "disk" but restricting to the topic audit_user: 135 | ./DevOps/linux_administration_summary.html?query=disk&topics=audit_user
136 |
By default search menu with exiting topics is diplayed. add next parameter to the URL to hide it showSearchMenu=false. For Example:
138 | /DevOps/linux_administration_summary.html?showSearchMenu=false
or a search with text and topics pre-selected
139 | 140 | /DevOps/linux_administration_summary.html?showSearchMenu=false=false&query=ssh&topics=audit_user 141 |
Standard HTML id attribute can be added to link to a concrete cell. It will be automatically open. Use the standard link hash (#) like: 143 | 144 | /DevOps/linux_administration_summary.html#external_links 145 |

147 | 148 |

Editing the content

149 |

Content is standard html
Use GitHub pull request to request occasional changes.
Become a member of The Single-Page-Book Project@GitHub to add you own IT_notes page books or publish in your prefered repository

154 | 155 |

The Lord of Text is back to claim his Kindom!

156 | - To help the Lord of Text fight back the badness of Power Points 157 | a curated list or weapons follows: 158 |

160 | template txt figures that will work by just doing a Copy&Paste 161 |

162 |   Common Arrows         Less/Greater-than
163 |   ← →  ↑ ↓  ⇿           html-friendly replacements
164 |                         ˂  ˃  ⅋
165 |                         <  >  & replacements
166 |                         javascript will convert them back
167 |                         at display time to avoid problems
168 |                         with copy&paste in other programs
169 | 
170 |   Boxes                                      Trees 
171 |   ┌─────┬─────┐ ┌───┐  ┌────┐  ┌───┬───┬───┐ ├─ level1.1     
172 |   │     │     │ │   │  │    │  │   │   │   │ │  │            
173 |   │     │     │ │   │  ├────┤  │   │   │   │ │  ├─ level2.1  
174 |   ├─────┼─────┤ │   │  │    │  │   │   │   │ │  │   │        
175 |   │     │     │ └───┘  ├────┤  │   │   │   │ │  │   └─ level3
176 |   │     │     │        │    │  └───┴───┴───┘ │  │            
177 |   └─────┴─────┘        └────┘                │  └─ level2.2  
178 |                                              │               
179 |                                              └─ level1.2     
180 |   
181 |   ┌────────────────────────┬─┐    Pointing hands: 
182 |   │*TEMPLATE  FOR TOPICS  *│ │    ☚ ☛
183 |   ├────────────────────────┘ │
184 |   │                          │
185 |   │                          │
186 |   │                          │
187 |   └──────────────────────────┘
188 |   
189 |   Other useful symbols:                        
190 |    https://en.wikipedia.org/wiki/Arrows_(Unicode_block)  
191 |       0   1   2   3   4   5   6   7   8   9   A   B   C   D   E   F     
192 |   U+219x  ←   ↑   →   ↓   ↔   ↕   ↖   ↗   ↘   ↙   ↚   ↛   ↜   ↝   ↞   ↟ 
193 |   U+21Ax  ↠   ↡   ↢   ↣   ↤   ↥   ↦   ↧   ↨   ↩   ↪   ↫   ↬   ↭   ↮   ↯ 
194 |   U+21Bx  ↰   ↱   ↲   ↳   ↴   ↵   ↶   ↷   ↸   ↹   ↺   ↻   ↼   ↽   ↾   ↿ 
195 |   U+21Cx  ⇀   ⇁   ⇂   ⇃   ⇄   ⇅   ⇆   ⇇   ⇈   ⇉   ⇊   ⇋   ⇌   ⇍   ⇎   ⇏ 
196 |   U+21Dx  ⇐   ⇑   ⇒   ⇓   ⇔   ⇕   ⇖   ⇗   ⇘   ⇙   ⇚   ⇛   ⇜   ⇝   ⇞   ⇟ 
197 |   U+21Ex  ⇠   ⇡   ⇢   ⇣   ⇤   ⇥   ⇦   ⇧   ⇨   ⇩   ⇪   ⇫   ⇬   ⇭   ⇮   ⇯ 
198 |   U+21Fx  ⇰   ⇱   ⇲   ⇳   ⇴   ⇵   ⇶   ⇷   ⇸   ⇹   ⇺   ⇻   ⇼   ⇽   ⇾   ⇿ 
199 |

200 | If your system has basic unix utilities instaled (Linux, Mac, BSD, or 201 | Windows Git Bash), you can use the beautify.sh 202 | script as well. This scripts will also fix problem with conflictive html 203 | characterers ( < > , & ) replacing with equivalent but 204 | non-conflictive ones 205 |

Ascii Flow online diagram editor easify box diagrams
figlet.org: Create large ascii letters
PlantText: Easy creation of UML sequence diagrams
htmleditor.io light-weigth online html editor
arthursonzogni.com/Diagon Flow diagrams, math diagrams, tables, ... to ASCII
editors with block/column edit mode and macro-support that will walk with you in your feat:
212 |
- Vim: (Love him and it will love you for the rest of your life!)
- UltraEdit
- gedit
- Notepad++
- Eclipse
- ...
220 |

222 | 223 | 224 |

Provide Feedback:

225 |

If you find some bug, or something difficult to use, or a missing feature comes to your mind, 227 | please, follow [this link] 228 | to create a new issue. 229 |
If you want to actively contribute with new features or add new recipes or IT_notes, please, 231 | clone the https://github.com/singlepagebookproject/IT_notes 232 | repository, edit at will and submit a pull request. 233 |

235 | 236 | 237 | 238 | -------------------------------------------------------------------------------- /helpman.icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /httpServer.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/python3 2 | 3 | from os import chdir,fork,environ 4 | 5 | from http.server import HTTPServer, SimpleHTTPRequestHandler 6 | 7 | if 'HOST' in environ : 8 | HOST=environ['HOST'] 9 | else: 10 | HOST='127.0.0.1' 11 | print(HOST) 12 | 13 | newpid = fork() 14 | if newpid != 0: 15 | chdir('..') 16 | port = 8001 17 | else: 18 | port = 8000 19 | httpd = HTTPServer( (HOST,port), SimpleHTTPRequestHandler ) 20 | httpd.serve_forever() 21 | -------------------------------------------------------------------------------- /icons.txt: -------------------------------------------------------------------------------- 1 | ● Bullets SubI : ₀₁₂₃₄₅₆₇₈₉₊₋₌₍₎ 2 | ●•·✓ ₐₑₒₓₔₕₖₗₘₙₚₛₜ 3 | SuperI: ⁰ⁱ¹²³⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ 4 | 5 | ┌ https://en.wikipedia.org/wiki/Arrows_(Unicode_block) 6 | │ ← ↑ → ↓ ⇠ ⇡ ⇢ ⇣ ↖ ↗ ⇖ ⇗ ↱ ↴ ↰ 7 | │ ⇇ ⇈ ⇉ ⇊ ⏴ ⏶ ⏵ ⏷ ↙ ↘ ⇙ ⇘ ↳ ↲ ↵ 8 | │ ◀ ▲ ▶ ▼ ◁ △ ▽ ▷ ↢ ↣ ⇤ ⇚ ⇥ ⇛ 9 | │ ↼ ↾ ⇀ ⇃ ↽ ↿ ⇁ ⇂ ↩ ↪ ↔ ↕ 10 | │ ↞ ↟ ↠ ↡ ↤ ↥ ↦ ↧ ⇐ ⇑ ⇒ ⇓ ⇦ ⇧ ⇨ ⇩ 11 | │ ⇄ ⇅ ⇋ ⇌ ⤡ ⇱ ↶ ↷ ⤢ ⇲ ⇽ ⇾ 12 | └───────────────────────────────────────────── 13 | 14 | ┌ UML ────────────────────────────────────────────────────────┐ 15 | │ ┌────────────┐ message ↑ dependency | │ 16 | │ ─┼─ UML │ ─────────▶ | ----------→ | │ 17 | │ ─┼─ Component │ | dependency | │ 18 | │ │ │ | ←---------- ↓ │ 19 | │ └────────────┘ │ 20 | │ ╭─────╮ ● Initi.state ◀─ ASSOCIATION ─▶ ▲ │ 21 | │ │state│ ◉ Final.state │ │ 22 | │ ╰─────╯ ▼ │ 23 | │ │ 24 | │ ● GENERALIZATION │△ ● REALIZATION △ │ 25 | │ par.◁───── child ││ ○◁╴╴╴╴... ┆┆ │ 26 | │ child ────▷ par. ▽│ ···╶╶╶╶▷○ ▽ │ 27 | │ "IS A" inheritance ○ Interfaz │ 28 | │ ··· Implementation │ 29 | │ ● DELEGATION: │ 30 | │ par.◇───── child ┌────────┐ ┌────────┐ │ 31 | │ │ClassA │ ┌─│ Shape │ │ 32 | │ Makes child part of ├────────┤ │ ├────────┤ │ 33 | │ parent class by using │ shape ·◇──────┘ │ ... │ │ 34 | │ aggregation. ├────────┤ ├────────┤ │ 35 | │ │ draw() │ │ draw() │ │ 36 | │ └────────┘ └─△──────┘ │ 37 | │ ● COMPOSITION: Every car has an │"IS A" │ 38 | │ ┌────────┐ engine ┌────────┐ ┌───────┴────┬───··· │ 39 | │ │ Car │◆────────┤ Engine │ ┌──┴─────┐ ┌──┴────┐ │ 40 | │ └────────┘ └────────┘ │ Circle │ │Ellipse│ │ 41 | │ ● Aggregation: Cars may have COMPOSITION+AGGREGATION │ 42 | │ ┌────────┐passengers┌──────────┐ allow DELEGATION as a │ 43 | │ │ Car │◇─────────┤Passengers│ (SAFER) alternative to the│ 44 | │ └────────┘ └──────────┘ "IS A" inheritance. │ 45 | └─────────────────────────────────────────────────────────────┘ 46 | 47 | ┌─ BPMN ────────────────────────────────────────────────────────────────────────────── 48 | │ See also: https://github.com/bpmn-io/bpmn-font/tree/master/dist/font 49 | │ ○ Start Event, ◎ Intermediary/Boundary Event, ◇ Gateway, 50 | │ ◷ Timer Start Event, ◈ Complex Gateway, 51 | │ ┌──────┐ ┌─────────────┐ ┌──────────────────┬──────────────────┐ 52 | │ │ Task │ │○ Expanded │ ▴ │ Actor A │ Actor B │ 53 | │ └──────┘ │ Subproccess│ ◂ ▸ ├──────────────────┼──────────────────┤ 54 | │ └─────────────┘ ▾ │ ○ │ │ 55 | │ ┌─┬─ Pool Participant "A" ─────────────────┐│ │ │ ┌──────────┐ │ 56 | │ │A│ Some con- ││ ▼ │ ┌─▶│○ Expanded│ │ 57 | │ │c│ ┌──────┐ ┌──────────┐ • dition?││ ┌──────┐ │ │ │ Subproc.│ │ 58 | │ │t│○──▶│ Task •─▶│○ Expanded│ ╱ ╲ ││ │ Task •─────────┘ └───•──────┘ │ 59 | │ │o│ └──────┘ │ Subproc.•──▶• ? ▸ No ││ └──────┘ │ ▼ Some │ 60 | │ │r│ └──────────┘ ╲ ╱ ││ │ ╱ ╲ condi- │ 61 | │ │ │ ▾ ││ │ NO◂ • tion? │ 62 | │ │A│ Yes ││ │ ╲ ╱ │ 63 | │ └─┴────────────────────────────────────────┘│ │ ▾ │ 64 | │ │ │ YES │ 65 | └────────────────────────────────────────────────────────────────────────────────────── 66 | 67 | ┌ Geometric ──────────────────────────────────────────────┐ 68 | │ https://www.w3schools.com/charsets/ref_utf_geometric.asp│ 69 | │ ▲ ▴ △ ▵ ◤ ◥ ◸ ◹ ◜ ◝ ◠ ◄ ► ◅ ▻ │ 70 | │ ◀ ▶ ◂ ▸ ◁ ▷ ◃ ▹ ◣ ◢ ◺ ◿ ◟ ◞ ◡ ◆ ◇ ◈ ◊ ◰ ◱ ◲ ◳ │ 71 | │ ▼ ▾ ▽ ▿ ◴ ◵ ◶ ◷ │ 72 | │ ■ □ ▢ ▣ ▤ ▥ ▦ ▧ ▨ ▩ ◼ ◻ ▪ ▫ ▬ ▭ ▮ ▯ ▰ ▱ ◧ ◨ ◩ ◪ ◫ │ 73 | │ ◯ ○ ◦ ◌ ◍ ◉ ◎ ● ◐ ◑ ◒ ◓ ◔ ◕ ◖ ◗ ◬ ◭ ◮ │ 74 | │ ◘ ◙ ◚ ◛ │ 75 | └─────────────────────────────────────────────────────────┘ 76 | ┌─┬─┬┈┈┈┈┬╌──┬─┐ ┐┎─┰┄─┄┰┅┅┒ ╔═╦═╗ ╓──╥──╖ ╒══╤══╕ ⌠ ⎧ ⎫ 77 | │ ┊ ┆╌╌╌╌│ │ ╵┃ ┃ ┃ ┃ ║ ║ ║ ║ ║ ║ │ │ │ ⎪ ⎪ ⎪ 78 | │ ┊ ┆ │ │ │ │┃ ┃ ┃ ┃ ╠═╬═╣ ╟──╫──╢ ╞══╪══╡ ⎪ ⎨ ⎬ 79 | │ ┊ ┆ │ │ │ │┃ ┃ ┃ ┃ ║ ║ ║ ║ ║ ║ │ │ │ ⎪ ⎪ ⎪ 80 | ├─┼─┼────┼───┼─┤ ┤┠─╂───╂──┨ ╚═╩═╝ ╙──╨──╜ ╘══╧══╛ ⌡ ⎩ ⎭ 81 | │ │ ┇ │ │ │ │┃ ┃ ┃ ┃ xxx ╲ ╱ ╱╲ ╱╲ • ▴ 82 | │ │ ┇ │ │ │ │┃ ┃ ┃ ┃ └ yyy ╳ ╲╱ ╱◜◝╲ ╱ ╲ ╱ ╲ 83 | │ │ ┇ │ │ │ ╷┃ ┃ ┃ ┃ ├ zzz ╱ ╲ ╲◟◞╱ • • ◂ ▸ 84 | └─┴─┴────┴───┴─┘ ┘┖─┸───┸──┚ └ ... ╲╱ ╲ ╱ ╲ ╱ 85 | └╴──┴─────╶┘ • ▾ 86 | 87 | ┌╶╶╶╶▷ beautify.sh ╶╶┐ 88 | ┆input output▽ 89 | /----v----\ ┌────┬────┐ 90 | | | | │ │ │ 91 | }----x----{ ├────┼────┤ 92 | | | | │ │ │ 93 | \_---^---_/ └────┴────┘ 94 | 95 | ┌─── Math Unicode Symbols ─────────────────────────────────────────────────┐ 96 | │ @[https://www.unicode.org/charts/PDF/U2200.pdf] │ 97 | │ ● ORDER RELATIONS ● LOGICAL OPs │ 98 | │ ≺ ≻ PRECEDES/SUCCEEDS ∧ LOGICAL AND │ 99 | │ ≼ ≽ PRECEDES/SUCCEEDS ∨ LOGICAL OR │ 100 | │ OR EQUAL TO │ 101 | │ ≾ ≿ PRECEDES/SUCCEEDS OR │ 102 | │ EQUIVALENT TO │ 103 | │ ⊀ ⊁ DOES NOT PREC./SUCC. │ 104 | │ │ 105 | │ ● MISCELLANEOUS ● SET MEMBERSHIP │ 106 | │ ∞ INFINITY ∈ ∉ ELEMENT OF │ 107 | │ π PI ∋ ∌ CONTAINS AS MEMBER │ 108 | │ ∀ FOR ALL ● SET RELATIONS: │ 109 | │ ʗ COMPLEMENT ⊂ ⊄ (NOT) A SUBSET OF │ 110 | │ ∂ PARTIAL DIFFERENTIAL ⊃ ⊅ (NOT) SUPERSET OF │ 111 | │ ∃ ∄ THERE DOES(/NOT) EXISTS ⊆ ⊇ SUB/SUPER-SET OF OR = TO │ 112 | │ Ø EMPTY SET ● SET OPERATIONS: │ 113 | │ Δ "DELTA" Inc|Laplace Op ∩ INTERSECTION │ 114 | │ ∇ "NABLA" gradient, ∪ UNION │ 115 | │ ∴ ∵ THEREFORE, BECAUSE ⋃ n-ary UNION │ 116 | │ │ 117 | │ ● N-ary operators ● OPERATORS ● INTEGRALS │ 118 | │ (N inputs, 1 output) ± ∫ ∫∫ ∫∫∫ (DOUBLE/...)│ 119 | │ ∏ N-ARY PRODUCT ∘ RING OPERATOR ∮ ∲ (ANTI)CONTOUR INT.│ 120 | │ ∐ N-ARY COPRODUCT √ ∛ ∜ SQUARE/... ROOT ∮∮ ∮∮∮ SURFACE/VOLUME │ 121 | │ Σ N-ARY SUMMATION α PROPORTIONAL TO ∱ CLOCKWISE INTEGRAL │ 122 | │ │ 123 | │ ● RELATION ● "QUANTITATIVE" RELATIONS │ 124 | │ ∣ ∤ DOES (NOT) DIVIDES ≤ ≥ LESS/GREATER-THAN OR = TO │ 125 | │ ǁ ∦ (NOT) PARALLEL TO ≦ ≧ LESS/GREATER-THAN OVER = TO │ 126 | │ ∶ RATIO ≨ ≩ LESS/GREATER-THAN BUT NOT = TO │ 127 | │ ∷ PROPORTION ≮ ≯ NOT LESS/GREATER-THAN │ 128 | │ ∺ GEOMETRIC PROPORTION ≰ ≱ NEITHER LESS/GREA.-THAN NOR = TO │ 129 | │ ≃ ≄ (!) ASYMPTOTICALLY = TO ≲ ≳ LESS/GREA.-THAN OR EQUIVALENT TO │ 130 | │ ≅ APPROX. EQUAL TO ≴ ≵ NEITHER LESS/GREATER-THAN │ 131 | │ ≆ APPROX. BUT NOT EQUAL NOR EQUIVALENT TO │ 132 | │ ≇ NEITHER APPROX. NOR ACTUA. ≶ ≷ LESS/GREATER-THAN OR GREATER-THAN │ 133 | │ ≈ ≉ (!) ALMOST EQUAL TO ≸ ≹ NEITHER LESS/GREATER-THAN │ 134 | │ ≊ ALMOST EQUAL OR EQUAL TO NOR GREATER-THAN │ 135 | │ ≍ ≭ (!) EQUIVALENT TO │ 136 | │ ≖ RING-IN EQUAL TO ● GROUP RELATIONS │ 137 | │ ≗ RING EQUAL ⊲ ⋪ (NOT) NORMAL SUBGROUP OF │ 138 | │ ≝ EQUAL TO BY DEFINITION ⊴ ⋬ (NOT) NORMAL SUBGROUP OF │ 139 | │ ≞ MEASURED BY OR = TO │ 140 | │ ≟ QUESTIONED EQUAL TO ⊳ ⋫ DOES (NOT) CONTAIN AS │ 141 | │ ≠ NOT EQUAL TO NORMAL SUBGROUP │ 142 | │ ≡ ≢ (NOT) IDENTICAL TO ⋭ ⊵ DOES (NOT) CONTAIN AS │ 143 | │ ≣ STRICTLY EQUIVALENT TO NORMAL SUBGROUP │ 144 | │ │ 145 | │ ● https://en.wikipedia.org/wiki/Mathematical_Operators_(Unicode_block) │ 146 | │ 0 1 2 3 4 5 6 7 8 9 A B C D E F │ 147 | │ U+220x ∀ ∁ ∂ ∃ ∄ ∅ ∆ ∇ ∈ ∉ ∊ ∋ ∌ ∍ ∎ ∏ │ 148 | │ U+221x ∐ ∑ − ∓ ∔ ∕ ∖ ∗ ∘ ∙ √ ∛ ∜ ∝ ∞ ∟ │ 149 | │ U+222x ∠ ∡ ∢ ∣ ∤ ∥ ∦ ∧ ∨ ∩ ∪ ∫ ∬ ∭ ∮ ∯ │ 150 | │ U+223x ∰ ∱ ∲ ∳ ∴ ∵ ∶ ∷ ∸ ∹ ∺ ∻ ∼ ∽ ∾ ∿ │ 151 | │ U+224x ≀ ≁ ≂ ≃ ≄ ≅ ≆ ≇ ≈ ≉ ≊ ≋ ≌ ≍ ≎ ≏ │ 152 | │ U+225x ≐ ≑ ≒ ≓ ≔ ≕ ≖ ≗ ≘ ≙ ≚ ≛ ≜ ≝ ≞ ≟ │ 153 | │ U+226x ≠ ≡ ≢ ≣ ≤ ≥ ≦ ≧ ≨ ≩ ≪ ≫ ≬ ≭ ≮ ≯ │ 154 | │ U+227x ≰ ≱ ≲ ≳ ≴ ≵ ≶ ≷ ≸ ≹ ≺ ≻ ≼ ≽ ≾ ≿ │ 155 | │ U+228x ⊀ ⊁ ⊂ ⊃ ⊄ ⊅ ⊆ ⊇ ⊈ ⊉ ⊊ ⊋ ⊌ ⊍ ⊎ ⊏ │ 156 | │ U+229x ⊐ ⊑ ⊒ ⊓ ⊔ ⊕ ⊖ ⊗ ⊘ ⊙ ⊚ ⊛ ⊜ ⊝ ⊞ ⊟ │ 157 | │ U+22Ax ⊠ ⊡ ⊢ ⊣ ⊤ ⊥ ⊦ ⊧ ⊨ ⊩ ⊪ ⊫ ⊬ ⊭ ⊮ ⊯ │ 158 | │ U+22Bx ⊰ ⊱ ⊲ ⊳ ⊴ ⊵ ⊶ ⊷ ⊸ ⊹ ⊺ ⊻ ⊼ ⊽ ⊾ ⊿ │ 159 | │ U+22Cx ⋀ ⋁ ⋂ ⋃ ⋄ ⋅ ⋆ ⋇ ⋈ ⋉ ⋊ ⋋ ⋌ ⋍ ⋎ ⋏ │ 160 | │ U+22Dx ⋐ ⋑ ⋒ ⋓ ⋔ ⋕ ⋖ ⋗ ⋘ ⋙ ⋚ ⋛ ⋜ ⋝ ⋞ ⋟ │ 161 | │ U+22Ex ⋠ ⋡ ⋢ ⋣ ⋤ ⋥ ⋦ ⋧ ⋨ ⋩ ⋪ ⋫ ⋬ ⋭ ⋮ ⋯ │ 162 | │ U+22Fx ⋰ ⋱ ⋲ ⋳ ⋴ ⋵ ⋶ ⋷ ⋸ ⋹ ⋺ ⋻ ⋼ ⋽ ⋾ ⋿ │ 163 | │ │ 164 | │ https://en.wikipedia.org/wiki/Miscellaneous_Mathematical_Symbols-A │ 165 | │ 0 1 2 3 4 5 6 7 8 9 A B C D E F │ 166 | │ U+27Cx ⟀ ⟁ ⟂ ⟃ ⟄ ⟅ ⟆ ⟇ ⟈ ⟉ ⟊ ⟋ ⟌ ⟍ ⟎ ⟏ │ 167 | │ U+27Dx ⟐ ⟑ ⟒ ⟓ ⟔ ⟕ ⟖ ⟗ ⟘ ⟙ ⟚ ⟛ ⟜ ⟝ ⟞ ⟟ │ 168 | │ U+27Ex ⟠ ⟡ ⟢ ⟣ ⟤ ⟥ ⟦ ⟧ ⟨ ⟩ ⟪ ⟫ ⟬ ⟭ ⟮ ⟯ │ 169 | └──────────────────────────────────────────────────────────────────────────┘ 170 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Oficina 24x7 14 | 46 | 55 | 56 | 57 |

58 | WARN: This project has been replaced by the newer, faster and lighter: 59 | TXT World Domination!!!!/ 60 |

61 |

Growing collection of classified and curated IT notes, mental maps, books powered by
the Single Page Book Project

62 | 63 |

Current list of Single Page Books:

64 |

66 | Cryptography map 67 |
Common sub-topics: 68 | [Low Code], 69 | [Secret Management], 70 | [Standards], 71 | [Use Cases] 72 |
74 | JAVA map 75 |
Common sub-topics: 76 | [Low Code + persistence.SQL] 77 | [Low Code + scalability] 78 |
80 | Linux Admin.Map 81 |
Common sub-topics: 82 | [Monitoring], 83 | [Security], 84 | [Troubleshooting]. 85 |
87 | Web Technologies Map 88 |
Common sub-topics: 89 | [Data Visualization], 90 | [Search Engine Positioning (SEO)], 91 | [Quality Assurance], 92 | [CSS 101], 93 | [Javascript 101], 94 | [Angular], 95 | [Monetization], 96 |
98 | DevOps map 99 |
Common sub-topics: 100 | [Git], 101 | [Shell Script], 102 | [Quality Assurance], 103 | [Containerization] 104 |
106 | Soft.Architecture map 107 |
Common sub-topics: 108 | [Database Engines], 109 | [Scalability], 110 | [Storage], 111 | [Data Architecture], 112 | [Security], 113 |
115 | Ethereum Map 116 |
Common sub-topics: 117 | [Network Consensus], 118 | [Solidity], 119 | [EVM], 120 | [Scalability], 121 | [Gas Price], 122 | [Quality Assurance], 123 | [Wallets], 124 |

126 |

127 |

128 | Core Author: Enrique Arizón Benito
129 | Inspired by: 130 |

Johannes Gutenberg
Niklas Luhmann' notes taking system
Tim Berners-Lee
Brendan Eigh
Jimmy Wales
濱野純 (Junio Hamano)
many others

139 |

140 |
141 |

142 | Follow us on 143 | Github 144 |

145 | 146 |
147 | 148 | 149 | 150 | 151 | 152 | 153 | -------------------------------------------------------------------------------- /labelIcon.svg: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /map_template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | ??? map 9 | 10 | 11 | 12 | 13 | 14 |

15 | XXX Map 16 |

17 | Who-is-Who
18 | -OºOrangeº
19 | -BºBlueº
20 | -GºGreenº
21 | -RºRedº
22 |

23 | 24 |

25 | External Links:
26 | @[https://www.google.com]
27 | @[https://www.wikipedia.org]
28 | @[https://www.qwant.com]
29 | ...
30 | |---------------|
31 | [[learnXinYmin?]]
32 |

33 | 34 |

35 | Building blocks 36 |

37 | learnXinYMin
38 |

39 |

40 | 41 |

42 | Full Journey 43 |

44 | ....
45 |

46 |

47 | ....
48 |

49 | 50 |

51 |

52 | Non Classified
53 |

54 | bla bla bla
55 |

56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /map_v1.css: -------------------------------------------------------------------------------- 1 | @media only screen { /* desktop and mobile (vs paper) MEDIA ONLY SCREEN START {{{ */ 2 | *[console] { 3 | background-color:black !important; 4 | color :#AFA !important; 5 | line-height :1.2em; 6 | } 7 | 8 | @font-face{ 9 | font-family: 'source_code_pro'; 10 | font-weight: 400; 11 | font-style: normal; 12 | font-stretch: normal; 13 | src: url('./source-code-pro/EOT/SourceCodePro-Regular.eot') format('embedded-opentype'), 14 | url('./source-code-pro/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2') format('woff2'), 15 | url('./source-code-pro/WOFF/OTF/SourceCodePro-Regular.otf.woff') format('woff'), 16 | url('./source-code-pro/OTF/SourceCodePro-Regular.otf') format('opentype'), 17 | url('./source-code-pro/TTF/SourceCodePro-Regular.ttf') format('truetype') ; 18 | } 19 | 20 | #upper_bar { 21 | position: fixed; top: 0; width: 100%; z-index: 100; height: 1.8rem; 22 | font-size:2.0rem; 23 | padding:0.2em; 24 | background-color:#DDD; 25 | outline: 1px solid black; 26 | white-space: nowrap; 27 | box-shadow: 0 0 200px orange; 28 | margin-left: -0.5rem; /* must match inverted body.margin-left*/ 29 | margin-bottom: 0.5rem; 30 | } 31 | 32 | body { 33 | font-family: sans-serif; 34 | font-size:16px; /* overrided in mobile */ 35 | padding: 0; 36 | margin: 0; 37 | line-height:1.0; 38 | background-color:#EEE; 39 | margin-left: 0.5rem; /* must match inverted upper_bar.margin-left*/ 40 | padding-top: 3rem; 41 | } 42 | 43 | #zoomDiv, #searchForm { 44 | display:none; 45 | left: 1%; 46 | height:auto; 47 | max-height: 95%; 48 | min-width:50%; 49 | max-width: 94%; 50 | overflow: auto; 51 | color:#000; border-radius: 0.5rem; border: 4px solid black; font-size: 1rem; 52 | box-shadow: 0 0 10px black; 53 | padding: 0.5rem; 54 | } 55 | 56 | 57 | #zoomDivControls { 58 | width: 100%; 59 | border-bottom: 1px solid black; 60 | position: fixed; 61 | } 62 | 63 | @keyframes searchFormTransparency { 64 | from { opacity: 0.9; } 65 | 50% { opacity: 0.9; } 66 | to { opacity: 0.0; } 67 | } 68 | #searchForm { 69 | position: fixed; 70 | top: 2.8rem; 71 | z-Index:9; 72 | width:96%; 73 | height:auto; 74 | box-shadow: 0 0 10px black; 75 | background-color: #FFE; 76 | transition: width 1s; 77 | opacity: 0.9; 78 | max-height: 90%; 79 | } 80 | #searchForm[resultFound] { 81 | animation-name : searchFormTransparency; 82 | animation-duration : 3.00s; 83 | animation-delay : 0.0s; 84 | } 85 | 86 | #searchAndMode { margin-bottom: 0.7em; } 87 | 88 | @keyframes zoomDivAnimation { 89 | from { bottom: 100%; } 90 | to { bottom: 0.5rem; } 91 | } 92 | #zoomDiv { 93 | z-Index:10; 94 | position: fixed; 95 | width:auto; 96 | bottom: 0.5rem; 97 | animation-name : zoomDivAnimation; 98 | animation-duration : 1.50s; 99 | animation-delay : 0.0s; 100 | background-color: #EFF; 101 | opacity: 0; 102 | transition: opacity 1s ease-out; 103 | max-height: calc( 100% - 5.5em ); 104 | } 105 | #zoomDiv[maximized=true] { 106 | position: absolute; 107 | top: 0; left: 0; bottom: 0; right: 0; 108 | max-width: 100%; max-height: 100%; z-index: 1000; 109 | } 110 | 111 | @keyframes keyframesSearchFound { 112 | from { left: 0; } 113 | to { left: -100%; } 114 | } 115 | 116 | 117 | .lectureMode0 { } 118 | .lectureMode1 { 119 | line-height: 1.4em; 120 | } 121 | pre.lectureMode1 { 122 | white-space: pre-wrap; 123 | } 124 | 125 | .lectureMode2 { 126 | white-space: normal; 127 | font-family: sans-serif; 128 | letter-spacing: 0.05em !important; 129 | line-height: 1.7em; 130 | } 131 | 132 | #historyBackFor { 133 | font-family:monospace; 134 | color:blue; 135 | font-size:1.7rem; 136 | } 137 | 138 | th, h1, h2, h3, h4 { font-family: sans-serif; } 139 | 140 | b { 141 | color: #0A9; 142 | font-weight:500; 143 | background-color: white; 144 | } 145 | 146 | *[zoom] { 147 | opacity:0.7; 148 | background-color:#EEEEEE; 149 | margin: 3px 0 0 3px; 150 | outline: 1px solid grey; 151 | padding : 2px 1px 2px 1px; 152 | background: linear-gradient(to bottom, #F3F9A7 33%, #CAC531 100%); 153 | } 154 | @keyframes zoomOverAnimation { 155 | from {transform:scale(1.5); opacity: 0.3; } 156 | 90% {transform:scale(1.0); opacity: 0.3; } 157 | to {transform:scale(1.0); opacity: 1.0; background: white } 158 | } 159 | 160 | * > *[zoom]:hover { 161 | font-weight: bold; 162 | background-color : white; 163 | animation-name : zoomOverAnimation; 164 | animation-duration : 1.50s; 165 | animation-delay : 0.0s; 166 | z-index : 5; 167 | transform : scale(1.05); 168 | background : white; 169 | outline : 3px solid green; 170 | } 171 | 172 | 173 | #zoomHTMLContent > *[zoom]:hover { 174 | font-weight: inherit; 175 | transform: none; 176 | } 177 | 178 | #zoomHTMLContent { } 179 | #zoomHTMLContent > * > *[xsmall] , 180 | #zoomHTMLContent > * > *[title] { 181 | font-size: 1.5em; 182 | } 183 | 184 | 185 | *[id=zoomHTMLContent] > * { 186 | opacity:1.0; 187 | } 188 | 189 | div[group] > *[zoom] { 190 | padding : 2px 10px 2px 1px; 191 | } 192 | 193 | #zoomDiv *[zoom] { 194 | line-height: initial; 195 | margin-right: 1.0rem; 196 | box-shadow: none; 197 | background-color: inherit; 198 | letter-spacing: -0.1em; 199 | max-width: 100%; 200 | overflow: auto; 201 | display: contents; 202 | } 203 | #zoomDiv math[zoom] { display: initial; } 204 | 205 | *[title] { 206 | width:auto; 207 | font-family: monospace; 208 | font-weight: bold; 209 | font-size:0.7rem; 210 | color: brown; 211 | text-align:right; 212 | line-height:1.0em; 213 | padding-top:0; 214 | padding-bottom:0; 215 | word-wrap:break-word; 216 | padding-right:0.1rem; 217 | padding-left:0.0rem; 218 | outline:0px; 219 | } 220 | div[group] >span[title], 221 | div[groupv] >span[title] 222 | { 223 | font-size: 1.2rem; 224 | color: darkgreen; 225 | } 226 | 227 | pre[zoom] { 228 | float: left; width: auto; 229 | margin:0 0 2px 0; 230 | } 231 | 232 | pre, code, kbd, samp, tt { 233 | font-family:'source_code_pro',monospace, monospace; 234 | font-size:1em; 235 | } 236 | *[zoom] pre { outline: 0px; } 237 | math[zoom]{ padding:1.1em 0 1.1em 0; } 238 | pre > b { } 239 | 240 | *[cite] { font-style: italic; } 241 | *[TODO]:before { content: "◔ "; } 242 | pre[labels*="TODO"] { border-left: 3px solid red; } 243 | 244 | *[zoom] { font-size:0.0006rem; } 245 | img[zoom],svg[zoom]{ max-width:8rem; max-height:8rem;} 246 | #zoomDiv svg[zoom]{ max-width:none; max-height:none;} 247 | *[xsmall],*[zoom] > *[title] 248 | { white-space:normal; font-size:0.7rem; word-wrap: normal; } 249 | *[xxbig] { font-size:1.7em; font-weight: bold; color:#007733;} 250 | *[xbig] { font-size:1.5em; } 251 | 252 | *[hidden] { display:none; } 253 | div[floatl] { float:left ; margin-right:1em; border-left:1px solid #99f; border-top:1px solid #99f; max-width:calc(49% - 1em);} 254 | div[floatr] { float:right; margin-left :1em; border-left:1px solid #99f; border-top:1px solid #99f; max-width:calc(49% - 1em);} 255 | ul,ol { margin-top:0.3em; margin-bottom:0.3em; margin-left: 1.0em; padding-left: 0rem; } 256 | #zoomDiv [zoom] , #zoomDiv * [zoom], #zoomDiv * * [zoom], #zoomDiv * * * [zoom]{ font-size:1em; } 257 | #zoomDiv img[zoom] , #zoomDiv * img[zoom], #zoomDiv * * img[zoom], #zoomDiv * * * img[zoom]{ max-width:100%; max-height:100%;} 258 | 259 | /* REF: https://stackoverflow.com/questions/4910077/select-all-child-elements-recursively-in-css */ 260 | #zoomDiv *[xsmall] , #zoomDiv *[title] , 261 | { font-size:2em; font-weight: bold; text-decoration: underline; } 262 | #zoomDiv * td { font-size:1em; } 263 | 264 | a { text-decoration:none; font-family:'Source Code Pro',monospace; padding:0.0;} 265 | a[href^="#"]:before /* mark internal anchor */ { content: ">"; } 266 | a[href^="#"]:after /* mark internal anchor */ { content: "<"; } 267 | a:visited { color:blue; } 268 | td { 269 | font-size: 0.8rem; 270 | vertical-align: top; 271 | padding:2px; 272 | margin:0; 273 | } 274 | td,th {background-color:#FFFFFF; overflow: hidden; } 275 | 276 | table { width:100% border:0; margin: 0;} 277 | 278 | *[zoom] { min-height:0.4rem; cursor: cell; } 279 | /* div[zoom] { white-space: pre; } */ 280 | #zoomDiv > *[zoom] { border-top:0px ; cursor: pointer; } 281 | 282 | hr { 283 | color: black; 284 | outline: 1px solid #999; 285 | border: 0px; 286 | height: 0.1em; 287 | margin: 0.1rem 0.0rem 0.0rem 0.0rem ; 288 | } 289 | 290 | #idLabelsFilter 291 | { 292 | vertical-align: middle; 293 | font-size:2.5rem; 294 | height:0.9em; 295 | outline: 1px solid black; 296 | box-shadow: 1px -1px 4px #000; 297 | cursor: crosshair; 298 | } 299 | #loupe,#zoomSlider { float:right; } 300 | #idLabelsFilter[active=true] { 301 | background-color: #AFA; 302 | } 303 | 304 | #inputQuery, #matchNumber { 305 | font-size:1.0em; 306 | font-weight:bold; 307 | margin: 1.0rem 0 0.1rem 0; 308 | cursor: auto; 309 | color:green; 310 | } 311 | #inputQuery { width: 75%; box-shadow: 0 0 4px blue; } 312 | #inputQuery:not(:placeholder-shown) { background-color: black; color: #DFD; } 313 | #matchNumber { width: 15%; float: right; display: inline-block; } 314 | 315 | #buttonRefineSeach { 316 | padding: 0; 317 | } 318 | 319 | #divElementLabels { 320 | display: table-footer-group: 321 | text-align: right; 322 | vertical-align: top; 323 | padding-top: 3.5rem; 324 | } 325 | 326 | .labelButton { 327 | margin-left:0.5rem; 328 | margin-bottom:0.5rem; 329 | border: 3px solid black; 330 | border-radius: 0.5rem; 331 | padding: 0.3rem 0.5rem 0.3rem 0.5rem; 332 | font-size:0.9em; 333 | cursor: crosshair; 334 | display: inline-block; 335 | } 336 | .labelButton[selected=false] { 337 | background-color: white; 338 | } 339 | .labelButton[selected=true] { 340 | background-color: black; 341 | color: white; 342 | } 343 | 344 | /* TODO:(qa) refactor styles for buttons */ 345 | #divClose1, #divClose2, 346 | #switchMaximize, #unhide, #butSwitchLectureMode, #textSizeSlider, #cellIDPanell, #copyLabels { 347 | font-size:1.1rem; 348 | padding: 0.1rem 0.3rem 0.1rem 0.3rem; 349 | border-radius: 1rem; 350 | text-align: center; 351 | background-color: #EEF; 352 | box-shadow: 0 0 4px blue; 353 | white-space: nowrap; 354 | cursor: context-menu; 355 | } 356 | #switchMaximize, #unhide, #butSwitchLectureMode, #textSizeSlider, #cellIDPanell, #copyLabels { 357 | color:blue; 358 | border: 3px solid blue; 359 | } 360 | #copyLabels { float: right; } 361 | #divClose1, #divClose2 { 362 | color:grey; 363 | border: 3px solid black; 364 | display: inline-block; 365 | margin-right:0.5em; 366 | font-weight: bold; 367 | } 368 | 369 | #cellIDPanell { 370 | color: black; 371 | border: none; 372 | border-radius: 0.5rem; 373 | display: inline; 374 | } 375 | #cellIDPanell:empty { 376 | display: none; 377 | } 378 | 379 | #switchMaximize, #butSwitchLectureMode, #textSizeSlider { 380 | display: inline; 381 | margin-right:0.5em; 382 | } 383 | #textSizeSlider { 384 | vertical-align: text-top; 385 | } 386 | #unhide { 387 | float: right; width: auto; 388 | margin-right:0.5em; 389 | } 390 | 391 | #historyBackFor { 392 | display:inline; 393 | margin-left:0rem; 394 | font-family: 'Source Code Pro',monospace, monospace; 395 | } 396 | 397 | 398 | div[group], div[groupv] { 399 | /*outline: 3px solid black;*/ 400 | margin-right: 0.3rem; 401 | margin-bottom: 0.6rem; 402 | vertical-align: top; 403 | padding-left: 2px; /* helps with color hint during navigation */ 404 | border-radius: 0.5rem; 405 | box-shadow: 5px 5px 5px grey; 406 | } 407 | 408 | *[textFound="true"] { 409 | outline: 1px solid #0F0; 410 | background-color: #DFD; 411 | border-top: 5px dotted green; 412 | } 413 | 414 | #zoomDiv *[textFound="true"] { 415 | outline: inherit; 416 | background-color: inherit; 417 | } 418 | 419 | 420 | *[textFound="false"],div[textFound="false"] { display:none; !important; } 421 | *[textFound="debug"],div[textFound="debug"] { background-color: #AAA; } 422 | 423 | /* 424 | div[group]:empty, div[groupv]:empty { 425 | display: none; 426 | } 427 | */ 428 | 429 | *[groupv] { 430 | width: min-content; 431 | max-width: min-content; 432 | display:inline-grid; 433 | background: linear-gradient(to bottom, #FFF 33%, #AAA 100%); 434 | } 435 | *[group] { 436 | display: inline-block; 437 | background: linear-gradient(to right, #FFF 33%, #DDD 100%); 438 | background-image: url('/IT_notes/background.jpg'); 439 | background-repeat: no-repeat; 440 | background-position: 50% 0; 441 | background-size: cover; 442 | /* max-width: min-content; */ 443 | } 444 | 445 | *[groupv] > *[zoom] { margin: 0 0.1rem 0.2rem 0.1rem; } 446 | *[group] > *[zoom] { margin: 0.2rem; } 447 | 448 | #idLabelSearchAndMode { 449 | color: #0000CC; 450 | } 451 | 452 | span[labelcount] { 453 | font-family: monospace; 454 | font-size: 0.7em; 455 | vertical-align: top; 456 | color: grey; 457 | } 458 | 459 | *[tagCount] { 460 | font-size:0.8rem; 461 | position: relative; float: right; 462 | top: 0.0em; right: -0.6em; 463 | outline: 1px solid gray; background-color:white; 464 | margin:0; padding:0; 465 | } 466 | 467 | #previewTop { 468 | background: linear-gradient(to bottom, #F3F9A7 33%, #CAC531 100%); 469 | padding: 1px 0 3px 0; 470 | margin: 0; 471 | text-align: center; 472 | font-family: inherit; 473 | font-weight: bold; 474 | letter-spacing: 0.1em; 475 | } 476 | 477 | #closePreview { 478 | position: absolute; right: 0; top: -1px; 479 | float: right; 480 | padding: 2px; 481 | outline: 1px solid black; 482 | } 483 | 484 | /* WARN: We don't want cell's background colors 485 | * for printed media, only screen displays { */ 486 | *[bggray] { background-color:gray !important;} 487 | *[bgyellow] { background-color:yellow !important;} 488 | *[bgblue] { background-color:#CCF !important;} 489 | *[bgorange] { background-color:#FFDF5F!important;} 490 | *[bggreen] { background-color:#AFA !important;} 491 | *[bgbrown] { background-color:#FFEBCD!important;} 492 | *[bgred] { background-color:#FF8888!important;} 493 | /* } */ 494 | 495 | .labelBlock { margin-bottom: 0.2em } 496 | 497 | .labelBlockTitle { 498 | display: inline-block; 499 | width: 10em; 500 | text-align: right; 501 | color: #030; 502 | font-weight: bold; 503 | text-decoration: underline; 504 | } 505 | 506 | .labelPrefixGroup { 507 | display: inline-block; 508 | width: calc( 98% - 10em); 509 | vertical-align: top; 510 | border-bottom: 2px solid black; 511 | color: #707; 512 | font-style: italic; 513 | } 514 | 515 | } /* }}} MEDIA ONLY SCREEN END */ 516 | 517 | @media (hover:on-demand), (pointer : coarse) { /* MOBILE devices */ 518 | /* 519 | * ^^^ REF: https://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen 520 | **/ 521 | 522 | /* START LONG-PRESS { */ 523 | *[zoom] { 524 | /* Disable select https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */ 525 | -webkit-touch-callout: none; /* iOS Safari */ 526 | -webkit-user-select: none; /* Safari */ 527 | -khtml-user-select: none; /* Konqueror HTML */ 528 | /* -moz-user-select: none; */ /* Firefox */ 529 | -ms-user-select: none; /* Internet Explorer/Edge */ 530 | user-select: none; /* Non-prefixed version, currently 531 | supported by Chrome and Opera */ 532 | 533 | } 534 | 535 | #zoomDiv [zoom] , #zoomDiv * [zoom], #zoomDiv * * [zoom], #zoomDiv * * * [zoom] 536 | { 537 | /* Disable select https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting */ 538 | -webkit-touch-callout: initial; /* iOS Safari */ 539 | -webkit-user-select: initial; /* Safari */ 540 | -khtml-user-select: initial; /* Konqueror HTML */ 541 | -moz-user-select: initial; /* Firefox */ 542 | -ms-user-select: initial; /* Internet Explorer/Edge */ 543 | user-select: initial; /* Non-prefixed version, currently 544 | supported by Chrome and Opera */ 545 | } 546 | body { font-size:32px; !important; } 547 | 548 | *[xsmall], *[zoom] *[title] { font-size:0.9rem; } 549 | /* END LONG-PRESS } */ 550 | #printButton,#hint01 { display: none; color:red; } 551 | 552 | *[zoom] > not:span[title] { display: normal; !important; } 553 | 554 | #zoomSlider, #loupe { display: none; } 555 | 556 | *[group],*[groupv] { 557 | max-width: initial; 558 | } 559 | *[group] { width: 95%; } 560 | *[groupv] { width: 45%; } 561 | 562 | /* #searchForm { max-height: 20rem; } */ 563 | } 564 | 565 | @media print { /* printed paper / "PDFs" */ 566 | *[zoom] { 567 | page-break-after:always; 568 | } 569 | body { margin: 8mm 8mm 8mm 8mm; } 570 | div { padding: 0; margin: 0 } 571 | .noprint { display: none !important; } 572 | *[title] { 573 | /*font-family: monospace;*/ 574 | font-weight: bold; 575 | font-size:1.3rem; 576 | color: brown; 577 | text-align:right; 578 | line-height:1.0em; 579 | } 580 | *[xsmall] { 581 | font-weight:bold; 582 | color: orange; 583 | } 584 | 585 | pre, code, kbd, samp, tt{ 586 | font-family:'Source Code Pro',monospace, monospace; 587 | font-size:1em; 588 | white-space: break-spaces; 589 | } 590 | 591 | *[textFound="false"] { display:none; } 592 | } 593 | 594 | @media all { /* screen and paper */ 595 | 596 | *[gray] { color:gray !important; } 597 | *[yellow] { color:#DD0 !important; } 598 | *[blue] { color:#559 !important; } 599 | *[orange] { color:#D09 !important; } 600 | *[green] { color:green !important; } 601 | *[brown] { color:brown !important; } 602 | *[red] { color:red !important; } 603 | 604 | /* cli (command-line-interface) allows to format text 605 | * as computer-console output: 606 | * Just wrap text inside

or similar. 607 | * probably oneline alternative: $º$ ... º is simpler 608 | * and more suitable when adding left/right comments. 609 | * {{{ */ 610 | *[cli] { 611 | /* clear: both; */ 612 | /* box-sizing: border-box; */ 613 | /* position: relative; */ 614 | /* border-radius: 0 0 1em 1em; */ 615 | /* box-shadow: 0.1em 0.1em 2px #090909; */ 616 | /* padding: 1em; */ 617 | /* word-wrap: break-word; */ 618 | /* overflow-wrap: break-word; */ 619 | /* font-family: "Ubuntu Mono","DejaVu Sans Mono", "Courier New", Courier, monospace; */ 620 | background: rgba(9, 9, 9, 0.6); 621 | color: #63de00; 622 | max-width: min-content; 623 | padding-left: 0.2em; 624 | padding-bottom: 0.2em; 625 | border-radius: 0 0 0.5em 0em; 626 | box-shadow: 4px 2px 8px #090909; 627 | } 628 | 629 | *[cli]::before { 630 | display: inline-block; 631 | position: relative; 632 | width: 100%; 633 | content: "⏺ Console ⏎"; 634 | color: #c9c9c9; 635 | font-size: smaller; 636 | font-weight: bold; 637 | background: #010101; 638 | /* 639 | left: -12px; 640 | top: -12px; 641 | padding: 12px; 642 | line-height: 4px; 643 | */ 644 | } 645 | /* }}} */ 646 | .innerSearch,.innerLink { 647 | display: inline; 648 | color:blue; 649 | } 650 | 651 | span[sub] { vertical-align: sub ; font-size:0.5em; letter-spacing: 0.6em; } 652 | span[super] { vertical-align: super; font-size:0.5em; letter-spacing: 0.6em; } 653 | 654 | } /*media all, screen and paper */ 655 | -------------------------------------------------------------------------------- /map_v1.js: -------------------------------------------------------------------------------- 1 | import { preLoad , postLoad } from './custom.js'; 2 | 3 | // TODO:(0) put document.getElementById("zoomDiv") is const var. 4 | const SF = { /* search Form */ 5 | searchFormDOM : window, 6 | searchForm_labelsDOM : window, 7 | regexQuery: "", 8 | singleLineMode : false, 9 | matchCaseMode : false, 10 | fullWordMode : false, 11 | labelANDMode : true, 12 | labelAndOrText : { 13 | true : "Note contains ALL selected topics", 14 | false: "Note contains ANY selected topic" 15 | }, 16 | copyLabels : function() { 17 | var text = ""; 18 | LM.DDBB.labelMap_key_list.forEach( label_i => { text += label_i + "\n" } ) 19 | alert("select and copy:\n\n" + text) 20 | }, 21 | switchANDORSearch : function() { 22 | SF.labelANDMode=!SF.labelANDMode 23 | document.getElementById("idLabelSearchAndMode").innerHTML = SF.labelAndOrText[SF.labelANDMode] 24 | SE.executeSearch() 25 | }, 26 | onSearchInputChanged : function () { 27 | if (SF.regexInputTimer !== null) { 28 | clearTimeout(SF.regexInputTimer) 29 | SF.regexInputTimer = null 30 | } 31 | if (SF.hideFormTimer !== null) { 32 | clearTimeout(SF.hideFormTimer) 33 | SF.hideFormTimer = null 34 | } 35 | document.getElementById("searchForm").removeAttribute("resultFound"); 36 | SF.regexQuery = this.value 37 | SF.regexInputTimer = setTimeout(SE.executeSearch, 1000) 38 | }, 39 | renderSearchForm : function() { 40 | const div = document.createElement('div'); 41 | div.setAttribute("id", "searchForm") 42 | div.classList.add("noprint") 43 | document.body.insertBefore(div,document.body.children[0]) 44 | let html = '' 45 | + '

' 46 | + ' ' 47 | + '

' 48 | + ' ' 49 | + '

' 50 | + '
' 51 | + ' ' 52 | + ' single-line' 53 | + ' ' 54 | + ' Case-Match' 55 | + ' ' 56 | + ' Full Word' 57 | + '

' 58 | + '
' 59 | + '

Copy Labels

' 60 | if (LM.DDBB.labelMap_key_list.length > 0) { 61 | html += 62 | '' 63 | + '' 64 | + '
\n' 65 | + '

\n' 66 | + '

\n' 67 | } else { 68 | html += "(No topics found).
\n" 69 | } 70 | div.innerHTML = html; 71 | document.getElementById("divClose1").addEventListener("click", SF.hideSearchForm); 72 | document.getElementById("unhide" ).addEventListener("click", function () { 73 | SE.resetTextFoundAttr(true); 74 | this.setAttribute("hidden","true"); 75 | }) 76 | document.getElementById("copyLabels").addEventListener("click", SF.copyLabels ) 77 | if (LM.DDBB.labelMap_key_list.length > 0) { 78 | document.getElementById("searchAndMode").addEventListener("change", SF.switchANDORSearch ) 79 | } 80 | const swithSingleLineDom = document.getElementById("singleLineOnly") 81 | const swithCaseSensitDom = document.getElementById("caseSensitive") 82 | const swithCaseFullWord = document.getElementById("fullWord") 83 | swithSingleLineDom.addEventListener('click', ()=>{ SF.singleLineMode=swithSingleLineDom.checked; } ) 84 | swithCaseSensitDom.addEventListener('click', ()=>{ SF.matchCaseMode =swithCaseSensitDom.checked; } ) 85 | swithCaseFullWord .addEventListener('click', ()=>{ SF.fullWordMode =swithCaseFullWord.checked; } ) 86 | 87 | const domInputQuery = document.getElementById("inputQuery") 88 | domInputQuery.addEventListener("input", SF.onSearchInputChanged ) 89 | domInputQuery.focus() 90 | 91 | SF.searchFormDOM = div; 92 | SF.searchForm_labelsDOM = document.getElementById("searchFormLabels") 93 | }, 94 | regexInputTimer : null, 95 | hideFormTimer : null, 96 | sorterForRootTopicCache : {}, 97 | generateSorterForRootTopic : function (root) { 98 | let result = SF.sorterForRootTopicCache[root] 99 | if (result != null) { return result } 100 | result = function(a,b) { 101 | const aStartsWithRoot = ( a.indexOf(root) == 0 ) 102 | const bStartsWithRoot = ( b.indexOf(root) == 0 ) 103 | if ( aStartsWithRoot && !bStartsWithRoot) return -1 104 | if (!aStartsWithRoot && bStartsWithRoot) return 1 105 | if (a > b) return 1 106 | if (a < b) return -1 107 | return 0 108 | } 109 | SF.sorterForRootTopicCache[root] = result 110 | return result 111 | }, 112 | showSearchForm : function() { 113 | SF.searchFormDOM.style.display="block"; 114 | document.getElementById("inputQuery").value = SF.regexQuery 115 | document.getElementById("searchAndMode").checked = SF.labelANDMode 116 | document.getElementById("singleLineOnly").checked = SF.singleLineMode 117 | document.getElementById("caseSensitive" ).checked = SF.matchCaseMode 118 | document.getElementById("fullWord" ).checked = SF.fullWordMode 119 | document.getElementById("idLabelSearchAndMode" ).innerHTML = SF.labelAndOrText[SF.labelANDMode] 120 | const openDiv = '

' 121 | var htmlLabels = openDiv 122 | Object.keys(LM.DDBB.treeOfTopics).sort() 123 | // Render topics without children "packed" in one group 124 | .filter ( root_topic => { return LM.DDBB.treeOfTopics[root_topic].length == 1 } ) 125 | .forEach ( root_topic => { htmlLabels += LM.renderLabel(root_topic, false, true, "prefixIgnoredForTrue" )} ); 126 | htmlLabels += "

" 127 | if ( Object.keys(LM.DDBB.treeOfTopics).length > 0 ) { 128 | htmlLabels += openDiv 129 | + "

(axis)topic.

" 130 | + "

(coordinate)subtopic

" 131 | + "

" 132 | } 133 | // Render topics with children "packed" in their own group 134 | Object.keys(LM.DDBB.treeOfTopics).sort() 135 | .filter ( root_topic => { return LM.DDBB.treeOfTopics[root_topic].length != 1 } ) 136 | .forEach ( root_topic => { 137 | const root_topic_prefix = root_topic.replace(".*", "") 138 | htmlLabels += openDiv + "

"+ root_topic_prefix +".

" 139 | htmlLabels += "

" 140 | LM.DDBB.treeOfTopics[root_topic] 141 | .sort(SF.generateSorterForRootTopic(root_topic)) 142 | .forEach( topic => { 143 | htmlLabels += LM.renderLabel(topic, true, false, root_topic_prefix ) 144 | }) 145 | htmlLabels += "

" 146 | htmlLabels += "

" 147 | }); 148 | SF.searchForm_labelsDOM.innerHTML = htmlLabels; 149 | document.querySelectorAll('.labelButton').forEach( 150 | domElement => { 151 | domElement.addEventListener('click', LM.onLabelClicked) 152 | } 153 | ) 154 | }, 155 | hideSearchForm : function() { 156 | SF.searchFormDOM.style.display="none"; 157 | }, 158 | } 159 | 160 | const ZW = { /* ZOOM Window */ 161 | dom : window, 162 | 163 | getMouseType : function () { 164 | // 2021-06-09: Not used, but can be very useful in a future. 165 | if (window.matchMedia("(pointer: coarse)").matches) { return "finger" } 166 | if (window.matchMedia("(pointer: fine)" ).matches) { return "mouse" } 167 | return "none" 168 | }, 169 | textSizeSlider : document.body, 170 | renderZoomBox : function() { /* Executed once at page load */ 171 | const dom1 = document.createElement('div'); 172 | dom1.setAttribute("id", "zoomDiv") 173 | dom1.innerHTML = "" 174 | + "

" 175 | + "

" 176 | + '

╔╗

' 177 | + "

" 178 | + "← " 179 | + "→" 180 | + "? " 181 | + "

" 182 | + '

' 183 | + ' Read Mode: ' 184 | + '

' 185 | + ' ' 187 | + "

" 188 | + "

" 189 | + "

" 190 | ZW.dom = dom1 191 | document.body.insertBefore(dom1,document.body.children[0]) 192 | document.getElementById("divClose2").addEventListener("click", ZW.doCloseZoom); 193 | document.getElementById("GoBack" ).addEventListener("click", NAV.goBack); 194 | document.getElementById("GoForw" ).addEventListener("click", NAV.goForward); 195 | ZW.textSizeSlider = document.getElementById("textSizeSlider" ) 196 | ZW.textSizeSlider.addEventListener("input", 197 | () => { 198 | document.getElementById("zoomHTMLContent"). 199 | querySelector("*[zoom]").style.fontSize=""+(ZW.textSizeSlider.value/100.)+"rem" 200 | } 201 | ); 202 | document.getElementById("switchMaximize" ).addEventListener("click", function () { 203 | const state = document.getElementById("zoomDiv").getAttribute("maximized") 204 | document.getElementById("zoomDiv").setAttribute("maximized", state=="true"?"false":"true") 205 | }) 206 | 207 | document.getElementById("butSwitchLectureMode" ) 208 | .addEventListener("click", ZW.switchLectureMode); 209 | ZW.updateButtonSwitchLectureMode() 210 | }, 211 | doOpenZoom : function(e) { 212 | if (e.target != null ) e = e.target; 213 | for (let c = 0 ; c < 4 /* TODO:(qa) 4 max depth level is arbitraty */ ; c++) { 214 | if (e.getAttribute("zoom") != null) break 215 | e = e.parentNode 216 | } 217 | ZC.zoomStatus = 1 218 | if(NAV.visited.indexOf(e)>=0) { 219 | NAV.visited_idx = NAV.visited.indexOf(e) 220 | } else { // Apend new visits only 221 | NAV.visited.push(e) 222 | NAV.visited_idx =NAV.visited.length-1 223 | } 224 | 225 | if (NAV.visited.length > 1) { 226 | document.getElementById("historyBackFor").style.display="inline" 227 | document.getElementById("cellNofM").innerHTML = 228 | NAV.visited_idx+1 + "/"+(NAV.visited.length) 229 | } else { 230 | document.getElementById("historyBackFor").style.display="none" 231 | } 232 | 233 | 234 | let sLabels=""; 235 | if (e.attributes && e.attributes.labels) { 236 | /* list -> Set -> array leaves non-repeated/unique elements*/ 237 | Array 238 | .from( 239 | new Set(e.attributes.labels.value.split(","))) 240 | .filter(e => !!e) 241 | .forEach(label_i => { sLabels += LM.renderLabel(label_i, true, true ) }) 242 | } 243 | document.getElementById("divElementLabels").innerHTML = sLabels 244 | const zoomHTML = document.getElementById("zoomHTMLContent") 245 | const regexNewParagraph = new RegExp("\n\b*[^•|-|·|✓|┌|│|├]$\n$","g") 246 | zoomHTML.innerHTML = e.outerHTML.replaceAll(regexNewParagraph,"
") 247 | .replaceAll(/\n/g,"
") 248 | 249 | document.getElementById("cellIDPanell").innerHTML=e.id ? ("id:"+e.id ):""; 250 | zoomHTML.querySelectorAll('.innerSearch').forEach( 251 | dom => { 252 | dom.addEventListener('click', function() { SE.executeSearch(dom.innerHTML) }) 253 | } 254 | ) 255 | zoomHTML.querySelectorAll('.innerLink').forEach( 256 | dom => { 257 | const target = document.getElementById(dom.getAttribute("value")) 258 | dom.addEventListener('click', function() { ZW.doOpenZoom(target) } ) 259 | } 260 | ) 261 | 262 | 263 | ZW.dom.style.display="block" 264 | ZW.dom.style.opacity="0" 265 | setTimeout(() => { ZW.dom.style.opacity="1" } , 300) 266 | setTimeout(function() { 267 | zoomHTML.scrollIntoView({ behavior: 'smooth', block: 'start' }) 268 | document.getElementById("zoomDiv").scrollTop = 0 269 | }, 1) 270 | return false; 271 | }, 272 | lectureModePtr : 0, 273 | lecturModeDescriptionList : [" ⇶ ", " ⇉ ", " ⇆ " ], 274 | getNextLectureMode : function () { 275 | let result = (ZW.lectureModePtr+1) % ZW.lecturModeDescriptionList.length; 276 | return result; 277 | }, 278 | switchLectureMode : function () { 279 | const zoomHTML = document.getElementById("zoomHTMLContent").querySelector('*[zoom]:first-of-type') 280 | zoomHTML.classList.remove("lectureMode"+ZW.lectureModePtr) 281 | ZW.lectureModePtr = ZW.getNextLectureMode(); 282 | zoomHTML.classList.add("lectureMode"+ZW.lectureModePtr) 283 | ZW.updateButtonSwitchLectureMode() 284 | }, 285 | updateButtonSwitchLectureMode : function() { 286 | document.getElementById("butSwitchLectureMode" ).innerHTML = 287 | ZW.lecturModeDescriptionList[ ZW.getNextLectureMode() ]; 288 | }, 289 | doCloseZoom : function() { 290 | ZW.dom.style.display="none"; 291 | ZW.dom.style.opacity="0"; 292 | MB.onZoomClosed() 293 | } 294 | } 295 | 296 | const ZC = { /* map zoom Control */ 297 | idxZoomRule:-1, 298 | idxXTitleRule:-1, 299 | zoomStatus: 0, // 0 = inactive, 1 = zoomedContent 300 | cssRules : [], 301 | initialZoomSize : 0.6, /* must match css * 1000 */ 302 | initCSSIndexes : function() { 303 | ZC.cssRules = document.styleSheets[0]['cssRules'][0].cssRules; 304 | for (let idx=0; idx [title]") { 308 | ZC.idxXTitleRule=idx 309 | } 310 | } 311 | }, 312 | onZoom : function() { 313 | const switchElementsOn = 90 314 | if (ZC.slider.value < switchElementsOn /* change title size */) { 315 | const newFontSize = ZC.slider.value / 100. 316 | ZC.cssRules[ZC.idxXTitleRule].style['font-size']=newFontSize +'rem' 317 | ZC.cssRules[ZC.idxZoomRule ].style['font-size']=0.0001 + 'rem' 318 | } else /* change normal text size*/ { 319 | const delta0 = (ZC.slider.value - switchElementsOn) 320 | const delta1 = Math.pow(delta0, 1.3) 321 | const newFontSize = delta1/1000. 322 | ZC.cssRules[ZC.idxZoomRule ].style['font-size']=newFontSize + 'rem' 323 | } 324 | }, 325 | } 326 | 327 | const NAV = { // Navigation 328 | visited:[], 329 | visited_idx:-1, 330 | goBack : function() { 331 | if(NAV.visited_idx == 0) return 332 | NAV.visited_idx-- 333 | let e = NAV.visited[NAV.visited_idx] 334 | ZW.doOpenZoom(e); 335 | }, 336 | goForward : function() { 337 | if(NAV.visited_idx == NAV.visited.length-1) return 338 | NAV.visited_idx++ 339 | let e = NAV.visited[NAV.visited_idx] 340 | ZW.doOpenZoom(e); 341 | } 342 | } 343 | 344 | const LM = { // Lavel management 345 | state : { 346 | labelMapSelected : { /* label : isSelected true|false */ } 347 | }, 348 | DDBB : { // immutable once initialized. Convention: Use Upper Case for Immutable Objects 349 | flatMap : { /* label : dom_list*/ }, // TODO:(0) rename topic2DOMList 350 | treeOfTopics : { /* topic_root_label : child_topics */ }, // TODO:(0) Rename to treeOfTopics /* depth 1 */ 351 | labelMap_key_list : [], // TODO:(0) rename to labelMap_key_list ordered 352 | countPerLabelStat : {}, 353 | endInitialization : function (inputLabelMap) { 354 | // STEP 1: create flatMap topic -> [dom_element1, dom_element2, ... ] 355 | LM.DDBB.flatMap = inputLabelMap 356 | 357 | // STEP 2: create topic list ordered alphabetically 358 | const topic_list = Object.keys(inputLabelMap).sort() 359 | topic_list.forEach( (topic) => { 360 | LM.DDBB.countPerLabelStat[topic] = inputLabelMap[topic].length } 361 | ) 362 | 363 | // STEP 3.1: create topic tree parent (depth 1) 364 | const tree_root_list = topic_list.filter( 365 | (topic) => topic.indexOf('.*') == topic.indexOf('.') && /* skip topic.subtopic.* */ 366 | topic.indexOf('.*') == topic.length-2 ) /* allow only topic.* (vs topic.*....) */ 367 | 368 | /* STEP 3.2: Create topic tree children (depth 2) 369 | * 370 | * "topic1.*" : [ "topic1.*" ] 371 | * "topic2.*" : [ "topic2.*", "topic2.sub1", "topic2.sub2, ... ] 372 | * "topic3.*" : ... 373 | */ 374 | tree_root_list.forEach( (root_topic) => { 375 | const prefix = root_topic.replace(".*","") 376 | const child_topic_content = [] 377 | topic_list.forEach( (topic) => { 378 | /* tip1: fix overlapping problems (e.g: "ha" matching . "topicN.(ha)rdaware, ...) 379 | * by forcing to match "ha." or ".ha." */ 380 | if ( topic.indexOf(prefix +"." ) == 0 || 381 | topic.indexOf( "."+prefix+"." /* tip1 */ ) > 0 || 382 | topic.endsWith("."+prefix) 383 | ) { 384 | child_topic_content.push(topic) 385 | } 386 | }) 387 | if (child_topic_content.length == 0) { 388 | throw new Error("at least root_topic must match its prefix") 389 | } 390 | LM.DDBB.treeOfTopics[root_topic] = child_topic_content 391 | }) 392 | LM.DDBB.labelMap_key_list = topic_list 393 | window.SPB_DEBUG_LM = LM // Useful for debugging purposes. 394 | } 395 | }, 396 | isAnyLabelSelected : function() { 397 | return Object.keys(LM.state.labelMapSelected).length > 0 398 | }, 399 | setLabelSelectedOnOff : function( labelKey, bOnOff ) { 400 | if (bOnOff) { 401 | LM.state.labelMapSelected[labelKey] = bOnOff 402 | } else { 403 | delete LM.state.labelMapSelected[labelKey] 404 | } 405 | }, 406 | refreshLabelsUI : function() { 407 | document.querySelectorAll('.labelButton').forEach( e => { 408 | e.addEventListener('click', LM.onLabelClicked) 409 | if (!e.attributes) { 410 | e.attributes = { selected : { value : "false" } } 411 | } 412 | const labelKey = e.getAttribute("value") 413 | const isSelected = !! LM.state.labelMapSelected[labelKey] 414 | e.attributes.selected.value = ""+isSelected 415 | } 416 | ) 417 | }, 418 | onLabelClicked : function (e) { 419 | const dom = e.target 420 | const labelKey = dom.value ? dom.value : dom.getAttribute("value") 421 | if (!dom.attributes) { // TODO:(0) Use internal DDBB (vs storing in DOM) @mb 422 | dom.attributes = { selected : { value : "false" } } 423 | } 424 | if (dom.attributes.selected.value == "false") { 425 | LM.setLabelSelectedOnOff( labelKey, true) 426 | } else { 427 | LM.setLabelSelectedOnOff( labelKey, false) 428 | } 429 | if (LM.isAnyLabelSelected()){ 430 | document.getElementById("idLabelsFilter").setAttribute("active","true"); 431 | } else { 432 | document.getElementById("idLabelsFilter").removeAttribute("active"); 433 | } 434 | LM.refreshLabelsUI() 435 | SE.executeSearch() 436 | }, 437 | renderLabel : function(topic, showAsterisk, showPrefix, prefix) { 438 | let sTopic = showAsterisk ? topic : topic.replace(".*","") 439 | if (!showPrefix ){ 440 | sTopic = sTopic + "." // e.g.: topic1.101 -> topic1.101. 441 | // ^ fix overlapping problems (eg: 'ha' (high availability) 'hardware' ) 442 | sTopic = sTopic 443 | .replace("." + prefix + ".",".") // prefix == 101, topic == topic1.101. 444 | .replace(prefix + ".","") // prefix == 101, topic = 101.topic1 445 | sTopic = sTopic.substring(0,sTopic.length-1) // remove final "." 446 | } 447 | let cssAtribute = (topic.indexOf("todo")>=0) ? " red" : "" 448 | let html = "

"+sTopic+"

" 450 | if (sTopic!="*") html += ""+LM.DDBB.countPerLabelStat[topic]+"" ; 451 | return html 452 | }, 453 | getDomListForLabelPrefix: function (labelKey) { 454 | const matchingKeys = LM.DDBB.labelMap_key_list 455 | .filter((k) => { 456 | const topicDot = labelKey.replace(".*","."), 457 | dotTopic = "."+labelKey.replace(".*","") 458 | return k.startsWith(topicDot) || 459 | k.endsWith (dotTopic) 460 | }) 461 | var result = [] 462 | for (let idx=0; idx { 487 | inputTopic = inputTopic.trim() 488 | while (inputTopic.endsWith(".")) { inputTopic = inputTopic.substring(0,inputTopic.length-1) } 489 | if (inputTopic=="") return 490 | inputTopic = inputTopic.indexOf(".") >= 0 ? inputTopic : inputTopic+".*" 491 | let list = (!!inputDDBB[inputTopic]) ? inputDDBB[inputTopic] : [] 492 | effectiveTopicList.push( inputTopic ) 493 | list.push(node) 494 | inputDDBB[inputTopic] = list 495 | const topicPrefixAsterisk = inputTopic.substring(0, inputTopic.indexOf(".") ) + ".*" 496 | if (!!! inputDDBB[topicPrefixAsterisk] /* maybe topic1.sub exists but topic1.* not */ ) { 497 | inputDDBB[topicPrefixAsterisk] = [] 498 | } 499 | labelCount++ 500 | }) 501 | node.setAttribute("labels",effectiveTopicList.join()) 502 | if (labelCount>0) { 503 | const countEl = document.createElement('div'); 504 | countEl.setAttribute("tagCount", "") 505 | countEl.innerHTML = labelCount 506 | node.insertBefore(countEl,node.children[0]) 507 | } 508 | } 509 | LM.DDBB.endInitialization(inputDDBB) 510 | } 511 | } 512 | 513 | const IC = { // Input Control 514 | onKeyUp: function(e) { // Keyboard controller 515 | if (e.code === "Escape") { 516 | if (ZC.zoomStatus === 0) { 517 | SE.resetTextFoundAttr(true) 518 | } else { 519 | ZW.doCloseZoom() 520 | } 521 | } 522 | if (e.key === "PageDown") { NAV.goForward(); return } 523 | if (e.key === "PageUp" ) { NAV.goBack (); return } 524 | 525 | if (e.code === "Enter") { ZW.doCloseZoom() } 526 | if (e.code === "F1") doHelp() 527 | }, 528 | showPreviewTimeout : null, 529 | showPreviewEvent : null, 530 | showPreviewInZoom : function() { ZW.doOpenZoom(IC.showPreviewEvent) }, 531 | initInputControl: function(){ 532 | document.addEventListener('keyup' , IC.onKeyUp) 533 | const nodeList = document.querySelectorAll('*[zoom]') 534 | for (let idx in nodeList) { 535 | const node = nodeList[idx] 536 | if (!!! node.addEventListener) continue 537 | IC.LPC.enableDblClick (node) 538 | IC.LPC.enableLongTouch(node) 539 | } 540 | }, 541 | LPC : { /* (L)ong (P)ress (C)control */ 542 | longpress : false, 543 | presstimer : null, 544 | click : function(e) { 545 | if (IC.LPC.presstimer !== null) { 546 | clearTimeout(IC.LPC.presstimer) 547 | IC.LPC.presstimer = null 548 | } 549 | if (IC.LPC.longpress) { return false } 550 | }, 551 | start : function(e) { 552 | var self = this 553 | if (e.type === "click" && e.button !== 0) { return } 554 | IC.LPC.longpress = false 555 | 556 | if (IC.LPC.presstimer === null) { 557 | IC.LPC.presstimer = setTimeout(function() { 558 | ZW.doOpenZoom(self) 559 | IC.LPC.longpress = true 560 | }, 1000) 561 | } 562 | 563 | return false; 564 | }, 565 | cancel : function(e) { 566 | if (IC.LPC.presstimer !== null) { 567 | clearTimeout(IC.LPC.presstimer); 568 | IC.LPC.presstimer = null; 569 | } 570 | }, 571 | enableDblClick : function (node) { 572 | node.addEventListener('dblclick', ZW.doOpenZoom, true) 573 | }, 574 | enableLongTouch : function (node) { 575 | node.addEventListener("touchstart", IC.LPC.start); 576 | node.addEventListener("mouseleave", IC.LPC.cancel); 577 | node.addEventListener("touchend" , IC.LPC.cancel); 578 | node.addEventListener("touchleave", IC.LPC.cancel); 579 | node.addEventListener("touchcancel",IC.LPC.cancel); 580 | } 581 | } 582 | } 583 | 584 | const TPP = { // (T)ext (P)re (P)rocessor 585 | doTextPreProcessing : function () { 586 | // create re-usable regex outside loop. 587 | const document_name=window.location.pathname.split("/").pop() 588 | 589 | const nodeList = document.querySelectorAll('*[zoom]') 590 | for (let idx in nodeList) { // TODO:(qa) Replace on demand, when cell opened. 591 | let N = nodeList[idx] 592 | let H = N.innerHTML 593 | if (!!! H) { continue } 594 | 595 | // Open new window with pre-recoded search: 596 | // [[Troubleshooting+restorecon?]] 597 | H = H.replace( /\[\[([^\?]*)\?\]\]/g, 598 | "

" 599 | + "" 601 | + " (⏏ )" 602 | ) 603 | // 1st) replace External link 604 | H = H.replace(/@\[(http.?[^\]]*)\]/g," [$1]") 605 | // 2nd) replace relative (to page) link 606 | H = H.replace(/@\[([^\]]*)\]/g," [$1]") 607 | 608 | // Add support for inner links: '@[#internalId]' 609 | H = H.replace(/@\[#([^\]]*)\]/g, "

[$1]

") 610 | 611 | H = H.replace(/Gº([^º\n]*)º/g, " $1 ") 612 | H = H.replace(/Rº([^º\n]*)º/g, " $1 ") 613 | H = H.replace(/Bº([^º\n]*)º/g, " $1 ") 614 | H = H.replace(/Oº([^º\n]*)º/g, " $1 ") 615 | H = H.replace(/Qº([^º\n]*)º/g, " $1 ") 616 | H = H.replace(/Yº([^º\n]*)º/g, " $1 ") 617 | H = H.replace(/[$]º([^º\n]*)º/g, " $1 ") 618 | H = H.replace(/_º([^º\n]*)º/g, "$1 ") 619 | H = H.replace(/^º([^º\n]*)º/g, "$1 ") 620 | H = H.replace( /º([^º\n]*)º/g, " $1 ") 621 | H = H.replace( /[˂]/g, "<") 622 | H = H.replace( /[˃]/g, ">") 623 | H = H.replace( /[⅋]/g, "&") 624 | // Some utf-8 hand icons do not work properly while editing in vim/terminal 625 | // but looks much better in the final HTML. Replace icons: 626 | H = H.replace(/☜/g, "👈") 627 | H = H.replace(/☝/g, "👆") 628 | H = H.replace(/☞/g, "👉") 629 | H = H.replace(/☟/g, "👇") 630 | // H = H.replace(/[.]\n/g, ".
") 631 | // H = H.replace(/[:]\n/g, ":
") 632 | // H = H.replace(/\n\s*\n/g, "

") 633 | N.innerHTML = H 634 | // TODO:(enhancement) Add markdown table parser. 635 | // REF: https://github.com/blattmann/mdtablesparser/blob/master/js/parser.js 636 | } 637 | 638 | }, 639 | } 640 | 641 | const MB = { // Menu Bar 642 | renderMenuBar : function (){ 643 | const searchDiv = document.createElement('div'); 644 | searchDiv.setAttribute("id", "upper_bar") 645 | searchDiv.classList.add("noprint") 646 | searchDiv.innerHTML = '' 647 | + '

' 648 | + '❓' 649 | + 'Print' 650 | + '🔍︎' 651 | + '' 653 | + '
' 654 | document.body.insertBefore(searchDiv,document.body.children[0]) 655 | document.getElementById("idLabelsFilter").addEventListener("click", SF.showSearchForm) 656 | document.getElementById("idLabelsFilter").addEventListener("click", SF.showSearchForm) 657 | ZC.slider = document.getElementById("zoomSlider" ) 658 | ZC.slider.addEventListener("input", ZC.onZoom ) 659 | { 660 | // https://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser 661 | const meta = document.createElement('meta') 662 | meta.setAttribute("name", "viewport") 663 | meta.setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no") 664 | document.head.insertBefore(meta,document.head.children[0]) 665 | } 666 | document.getElementById("printButton").addEventListener("click", MB.spbQuickPrint ) 667 | }, 668 | spbQuickPrint : function() { 669 | if (window.confirm('Use browser [print...] for print-previsualization.-')) { 670 | window.print() 671 | } 672 | }, 673 | onZoomClosed : function() { }, 674 | } 675 | 676 | function switchLinksToBlankTarget() { 677 | // Change default a.target to blank. 678 | const nodeList = document.querySelectorAll('a') 679 | const thisDoc=document.location.origin+document.location.pathname; 680 | for (let idx in nodeList) { 681 | const nodeHref = nodeList[idx].href 682 | if (!nodeHref) { continue } 683 | if (! (nodeHref.startsWith("http")) ) continue 684 | if ( nodeHref.startsWith(thisDoc)) continue 685 | nodeList[idx].target='_blank' 686 | } 687 | } 688 | 689 | function pageLoadedEnd() { 690 | let id=window.location.hash.replace("#","") 691 | if (id=="") { 692 | id = getParameterByName("id") || "" 693 | } 694 | if (!!id) { 695 | const targetDom = document.getElementById(id) 696 | if (!!targetDom) { 697 | ZW.doOpenZoom(targetDom); 698 | return; 699 | } 700 | } 701 | 702 | 703 | // Parse query parameters 704 | let csvLabels = getParameterByName("topics") || "" 705 | csvLabels = csvLabels.toLowerCase() 706 | let label_l = (!!csvLabels) ? csvLabels.split(",") : [] 707 | label_l.forEach(label => { 708 | const bLabelExists = LM.getDomListForLabelPrefix(label).length > 0 709 | if (! bLabelExists) { 710 | alert ("topic:" +label +" has been \n dropped/renamed") 711 | return; 712 | } 713 | LM.onLabelClicked({ target : {value : label} }); 714 | }) 715 | let query = getParameterByName("query") 716 | if (!!query) { SF.regexQuery = query; } 717 | if (!!query || !!label_l) { 718 | SE.executeSearch() 719 | } 720 | 721 | let doShowSearchMenu = getParameterByName("showSearchMenu") || "" 722 | if (["0","false"].indexOf(doShowSearchMenu.toLowerCase())<0) { 723 | SF.showSearchForm(); 724 | } 725 | try { 726 | postLoad(); 727 | } catch(err) {console.dir(err)} 728 | } 729 | 730 | function onPageLoaded() { 731 | if ( window.spbLoaded ) { 732 | console.log("Already loaded") 733 | return 734 | } 735 | console.log("Initializing SPB") 736 | window.spbLoaded = true 737 | try { preLoad(); } catch(err) {console.dir(err)} 738 | 739 | IC.initInputControl(); 740 | switchLinksToBlankTarget(); 741 | 742 | TPP.doTextPreProcessing() 743 | ZC.initCSSIndexes() 744 | LM.createLabelIndex() 745 | 746 | ZW.renderZoomBox(); 747 | SF.renderSearchForm() 748 | MB.renderMenuBar(); 749 | 750 | pageLoadedEnd() 751 | } 752 | 753 | window.addEventListener('load', onPageLoaded ) 754 | 755 | function getParameterByName(name, url) { 756 | if (!url) url = window.location.href; 757 | name = name.replace(/[\[\]]/g, '\\$&'); 758 | const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), 759 | results = regex.exec(url); 760 | if (!results) return null; 761 | if (!results[2]) return ''; 762 | return decodeURIComponent(results[2].replace(/\+/g, ' ')); 763 | } 764 | 765 | Array.prototype.union = function(a) 766 | { 767 | var r = this.slice(0); 768 | a.forEach(function(i) { if (r.indexOf(i) < 0) r.push(i); }); 769 | return r; 770 | }; 771 | Array.prototype.intersection = function(a) 772 | { 773 | var r = []; 774 | var ref = this.slice(0); 775 | a.forEach(function(i) { if (ref.indexOf(i) >= 0) r.push(i); }); 776 | return r; 777 | }; 778 | 779 | const SE = { // (S)earch (E)ngine 780 | searchAndMark : function (node, finalRegex) { 781 | const htmlContent = (SF.singleLineMode) 782 | ? node.innerHTML 783 | : node.innerHTML.replace(/\n/gm, ' ') 784 | const searchFound = finalRegex.test(htmlContent) 785 | // reset after search: 786 | // REF: https://stackoverflow.com/questions/11477415/why-does-javascripts-regex-exec-not-always-return-the-same-value 787 | finalRegex.lastIndex = 0; 788 | node.setAttribute("textFound", searchFound?"true":"false") 789 | if (searchFound) { 790 | for ( 791 | let nodeI = node.parentElement ; 792 | nodeI != null && nodeI != document.body ; 793 | nodeI = nodeI.parentElement ) { 794 | nodeI.setAttribute("textFound", "true") 795 | } 796 | NAV.visited.push(node) 797 | window.lastElementFound = node 798 | } 799 | return searchFound 800 | }, 801 | executeSearch : function(query) { 802 | const unhideButton = document.getElementById("unhide"); 803 | unhideButton.setAttribute("hidden",""); 804 | 805 | if (typeof query != "string") query = ""; 806 | if (!!query) { SF.regexQuery = query; } 807 | let finalQueryRegex = SF.regexQuery.replace(/ +/g,".*"); 808 | SE.resetTextFoundAttr(false); 809 | const isEmptyQuery = /^\s*$/.test(finalQueryRegex) 810 | 811 | if (SF.fullWordMode) { 812 | finalQueryRegex = "\\b"+finalQueryRegex+"\\b" 813 | } 814 | 815 | if ((!LM.isAnyLabelSelected()) && isEmptyQuery) { return false; /* Nothing to do */ } 816 | 817 | [document.querySelectorAll('div[group]' ), 818 | document.querySelectorAll('div[groupv]')].forEach(nodeList => { 819 | nodeList.forEach(node => { 820 | node.setAttribute("textFound", "false") 821 | }) 822 | }) 823 | // If some label has been selected then choose only those with matching labels 824 | document.querySelectorAll('*[zoom]').forEach(node => { 825 | node.setAttribute("textFound", "false") 826 | }) 827 | var innerZoom_l = [] 828 | if (LM.isAnyLabelSelected()) { 829 | let label_l=Object.keys(LM.state.labelMapSelected) 830 | innerZoom_l = LM.getDomListForLabelPrefix(label_l[0]); 831 | for (let idx=0; idx;]?(" + finalQueryRegex + ")", regexFlags) 846 | 847 | var numberOfMatches = 0 848 | 849 | NAV.visited=[] 850 | 851 | var foundElement = false 852 | for (let idx2 in innerZoom_l) { 853 | const node = innerZoom_l[idx2] 854 | if (false/* true => change node background in debug mode */) { 855 | node.setAttribute("textFound", "debug") 856 | } 857 | if (node.innerHTML == null) continue 858 | if (!node.setAttribute ) continue 859 | if (SE.searchAndMark(node,finalRegex)) { 860 | numberOfMatches++ 861 | foundElement = true 862 | } 863 | } 864 | if (numberOfMatches == 1) { 865 | ZW.doOpenZoom(lastElementFound); 866 | } 867 | let sMatchText = "no matches" 868 | if (numberOfMatches > 0) { 869 | sMatchText = numberOfMatches + " found" 870 | document.getElementById("searchForm").setAttribute("resultFound","true") 871 | SF.hideFormTimer = setTimeout(()=> { SF.hideSearchForm() }, 3000 ) // @ma 872 | setTimeout(()=>{ 873 | document.getElementById("searchForm").removeAttribute("resultFound") 874 | } , 3500 ) // @ma 875 | 876 | } 877 | document.getElementById("matchNumber").innerHTML = sMatchText 878 | unhideButton.removeAttribute("hidden",""); 879 | return false // avoid event propagation 880 | }, 881 | resetTextFoundAttr : function(bKeepHighlightedSearch) { 882 | /* 883 | * bKeepHighlightedSearch = true: => Do not reset textFound== true attribute 884 | * (keep highlighted content in the context of the full page) 885 | * Just remove textFound=false to 'unhide' non-matching zoomable content 886 | * (textFound==false is assigned to display none in css) 887 | * bKeepHighlightedSearch = false => Reset all (remove any textFound attribute) 888 | */ 889 | const removeNodeList = document.querySelectorAll('*[textFound]'); 890 | if (removeNodeList.length == 0) return; // Nothing to do. 891 | for (let idx in removeNodeList) { 892 | if (!removeNodeList[idx].setAttribute) continue; // <- Umm: works fine at page-load, fails in following searchs 893 | if (bKeepHighlightedSearch && removeNodeList[idx].getAttribute("textFound") == "true") continue; 894 | removeNodeList[idx].removeAttribute("textFound"); 895 | } 896 | } 897 | } 898 | -------------------------------------------------------------------------------- /source-code-pro/EOT/SourceCodePro-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/earizon/IT_notes/470985e57e5c85b719ae0dab867c4df20044d2e4/source-code-pro/EOT/SourceCodePro-Regular.eot -------------------------------------------------------------------------------- /source-code-pro/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | 5 | This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /source-code-pro/OTF/SourceCodePro-Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/earizon/IT_notes/470985e57e5c85b719ae0dab867c4df20044d2e4/source-code-pro/OTF/SourceCodePro-Regular.otf -------------------------------------------------------------------------------- /source-code-pro/README.SPB.md: -------------------------------------------------------------------------------- 1 | Source: https://github.com/adobe-fonts/source-code-pro/ 2 | -------------------------------------------------------------------------------- /source-code-pro/README.md: -------------------------------------------------------------------------------- 1 | # Source Code Pro 2 | 3 | Source Code Pro is a set of OpenType fonts that have been designed to work well 4 | in user interface (UI) environments. In addition to a functional OpenType font, this open 5 | source project provides all of the source files that were used to build this OpenType font 6 | by using the AFDKO makeotf tool. 7 | 8 | ## Font installation instructions 9 | 10 | * [macOS](https://support.apple.com/en-us/HT201749) 11 | * [Windows](https://www.microsoft.com/en-us/Typography/TrueTypeInstall.aspx) 12 | * [Linux/Unix-based systems](https://github.com/adobe-fonts/source-code-pro/issues/17#issuecomment-8967116) 13 | * Bower
14 | `bower install git://github.com/adobe-fonts/source-code-pro.git#release` 15 | * npm 2.x
16 | `npm install --fetch-only git://github.com/adobe-fonts/source-code-pro.git#release` 17 | * npm 3.x
18 | `npm install git://github.com/adobe-fonts/source-code-pro.git#release` 19 | 20 | ## Getting Involved 21 | 22 | Send suggestions for changes to the Source Code OpenType font project maintainer, [Paul D. Hunt](mailto:opensourcefonts@adobe.com?subject=[GitHub]%20Source%20Code%20Pro), for consideration. 23 | 24 | ## Further information 25 | 26 | For information about the design and background of Source Code, please refer to the [official font readme file](https://www.adobe.com/products/type/font-information/source-code-pro-readme-file.html). 27 | -------------------------------------------------------------------------------- /source-code-pro/TTF/SourceCodePro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/earizon/IT_notes/470985e57e5c85b719ae0dab867c4df20044d2e4/source-code-pro/TTF/SourceCodePro-Regular.ttf -------------------------------------------------------------------------------- /source-code-pro/WOFF/OTF/SourceCodePro-Regular.otf.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/earizon/IT_notes/470985e57e5c85b719ae0dab867c4df20044d2e4/source-code-pro/WOFF/OTF/SourceCodePro-Regular.otf.woff -------------------------------------------------------------------------------- /source-code-pro/WOFF/TTF/SourceCodePro-Regular.ttf.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/earizon/IT_notes/470985e57e5c85b719ae0dab867c4df20044d2e4/source-code-pro/WOFF/TTF/SourceCodePro-Regular.ttf.woff -------------------------------------------------------------------------------- /source-code-pro/WOFF2/OTF/SourceCodePro-Regular.otf.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/earizon/IT_notes/470985e57e5c85b719ae0dab867c4df20044d2e4/source-code-pro/WOFF2/OTF/SourceCodePro-Regular.otf.woff2 -------------------------------------------------------------------------------- /source-code-pro/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/earizon/IT_notes/470985e57e5c85b719ae0dab867c4df20044d2e4/source-code-pro/WOFF2/TTF/SourceCodePro-Regular.ttf.woff2 -------------------------------------------------------------------------------- /source-code-pro/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "source-code-pro", 3 | "version": "1.017", 4 | "main": "source-code-pro.css", 5 | "homepage": "https://github.com/adobe-fonts/source-code-pro", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/adobe-fonts/source-code-pro.git" 9 | }, 10 | "authors": [ 11 | { "name": "Paul D. Hunt" } 12 | ], 13 | "description": "Source Code Pro font family by Adobe", 14 | "license": "SIL OFL 1.1" 15 | } 16 | -------------------------------------------------------------------------------- /source-code-pro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "source-code-pro", 3 | "version": "2.30.1", 4 | "description": "Source Code Pro is a set of OpenType fonts that have been designed to work well in user interface (UI) environments.", 5 | "keywords": [ 6 | "font", 7 | "sans-serif", 8 | "monospace", 9 | "Adobe", 10 | "OpenType", 11 | "otf", 12 | "ttf", 13 | "woff", 14 | "woff2", 15 | "eot" 16 | ], 17 | "homepage": "https://adobe-fonts.github.io/source-code-pro", 18 | "bugs": { 19 | "url": "https://github.com/adobe-fonts/source-code-pro/issues" 20 | }, 21 | "license": "OFL-1.1", 22 | "author": { 23 | "name": "Paul D. Hunt" 24 | }, 25 | "contributors": [ 26 | { 27 | "name": "Teo Tuominen" 28 | }, 29 | { 30 | "name": "Frank Grießhammer" 31 | }, 32 | { 33 | "name": "Miguel Sousa" 34 | } 35 | ], 36 | "repository": { 37 | "type": "git", 38 | "url": "git+https://github.com/adobe-fonts/source-code-pro.git#release" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /source-code-pro/source-code-pro.css: -------------------------------------------------------------------------------- 1 | @font-face{ 2 | font-family: 'Source Code Pro'; 3 | font-weight: 400; 4 | font-style: normal; 5 | font-stretch: normal; 6 | src: url('./EOT/SourceCodePro-Regular.eot') format('embedded-opentype'), 7 | url('./WOFF2/TTF/SourceCodePro-Regular.ttf.woff2') format('woff2'), 8 | url('./WOFF/OTF/SourceCodePro-Regular.otf.woff') format('woff'), 9 | url('./OTF/SourceCodePro-Regular.otf') format('opentype'), 10 | url('./TTF/SourceCodePro-Regular.ttf') format('truetype'); 11 | } 12 | -------------------------------------------------------------------------------- /testing/manual_testing.txt: -------------------------------------------------------------------------------- 1 | Open demo.html: 2 | 3 | (in parallel check that no exceptions are raised in JS console) 4 | 5 | - Test on firefox / Google Chrome 6 | 7 | - Check search by regex. 8 | - It must open the cell when just one cell found 9 | 10 | - Check search by id. 11 | http://127.0.0.1:8001/IT_notes/WebTechnologies/map.html#angular_summary 12 | - It must open the cell 13 | 14 | - The button "see all" must appear. 15 | 16 | - Check bookmarks with filters work: 17 | - http://127.0.0.1:8001/IT_notes/JAVA/java_map.html?topics=async/reactive 18 | - http://127.0.0.1:8001/IT_notes/JAVA/java_map.html?topics=async/reactive&query=vert.x 19 | 20 | - Open Math and check that it works 21 | (by default css room '#zoomDiv [zoom]' hides

tags.
22 |   http://127.0.0.1:8001/IT_notes/demo.html#mathml_demo1
23 |   http://127.0.0.1:8001/IT_notes/demo.html#mathml_demo2
24 |   http://127.0.0.1:8001/IT_notes/demo.html#mathml_demo3
25 | 
26 | - Check that absolute URLs works like:
27 |   @[http://....]
28 | 
29 | - Check that shortcut links work: 
30 |   http://127.0.0.1:8001/IT_notes/demo.html#link_shortcuts
31 | 
32 | - Check that relative #id=... in URL opens the cell properly:
33 |   @[../MachineLearning/map.html#timecop_summary]
34 | 
35 | - Check match md5sum:
36 |   md5sum map_v1.css  IT_notes/map_v1.css ../SPB/map_v1.css
37 |   md5sum map_v1.js   IT_notes/map_v1.js  ../SPB/map_v1.js
38 |   
39 | - Check no console.logs(...) , deletemes, ... @ma, .... are present
40 |   in final map_v1.js
41 | 
42 | - Check that source code pro fonts are loaded properly and diagrams are displayed
43 |   "OK" in mobile phones:
44 |   Test URL: http://127.0.0.1:8000/Blockchain/ethereum_map.html?topics=diagram
45 | 
46 | 
47 | - Check that $º...º style is applied properly.
48 | 


--------------------------------------------------------------------------------
/tools.txt:
--------------------------------------------------------------------------------
  1 | HTML tools:
  2 | - https://htmleditor.io
  3 | -----------------------
  4 | https://github.com/tldr-pages/tldr/blob/master/pages/common/linkchecker.md
  5 | - Command line client to check HTML documents and websites for broken 
  6 |   links. More information: https://linkchecker.github.io/linkchecker/.
  7 | 
  8 | -----------------------
  9 | ASCII Diagrams:
 10 | http://asciiflow.com/: General (Block like) txt diagrams.
 11 | 
 12 | PlantUML : 
 13 |            text to UML (a Local Java version exists, as well as online
 14 |            To generate text diagram (Asci-art) use the flag -txt | -utxt
 15 |            in the local plantuml or one online version with text output 
 16 |            support. 
 17 |            For example @[https://www.planttext.com/]
 18 | 
 19 |            Quickly generate sequence diagrams from text. 
 20 |            Ex: (Using  https://www.planttext.com/)
 21 | 
 22 |            ──────────────────  ->  ─────────────────────────────
 23 |            INPUT                           OUTPUT 
 24 |            ──────────────────  ->  ─────────────────────────────
 25 |                                    ┌─┐          ┌─┐          ┌─┐
 26 |            @startuml           ->  │A│          │B│          │C│
 27 |                                    └┬┘          └┬┘          └┬┘
 28 |            participant A       ->   │ message 1  │            │ 
 29 |            participant B            │───────────>│            │ 
 30 |            participant C       ->   │            │            │ 
 31 |                                     │            │ message 1  │ 
 32 |            A -> B: message 1   ->   │            │───────────>│ 
 33 |            B -> C: message 1        │            │            │ 
 34 |            C -> B: reply 1     ->   │            │  reply 1   │ 
 35 |            B -> A: reply 1          │            │<───────────│ 
 36 |                                ->   │            │            │ 
 37 |            @enduml                  │  reply 1   │            │ 
 38 |                                ->   │<───────────│            │ 
 39 |                                    ┌┴┐          ┌┴┐          ┌┴┐
 40 |                                ->  │A│          │B│          │C│
 41 |                                    └─┘          └─┘          └─┘
 42 | 
 43 | 
 44 | - /usr/bin/figlet: ASCII Titles
 45 | 
 46 | - https://www.utf8icons.com/subsets
 47 | 
 48 | - https://jekyllrb.com/
 49 |   Transform your plain text into static websites and blogs
 50 | ___________________
 51 | https://www.cyberciti.biz/tips/unix-linux-draw-any-kind-of-boxes-around-text-editor.html
 52 | Boxes command is a text filter and a little known tool that can draw 
 53 | any kind of ASCII art box around its input text.
 54 | - email signatures, 
 55 | - ...
 56 | _____________________
 57 | Evernotes to markdown
 58 | https://www.reddit.com/r/Zettelkasten/comments/gng35v/convert_evernote_notes_to_zettelkasten_markdown/?utm_medium=android_app&utm_source=share 
 59 | ________________________
 60 | - asciinema: Terminal recorder and JS player
 61 | https://asciinema.org/docs/how-it-works
 62 | ########################
 63 | https://github.com/commonmark/cmark
 64 | https://github.com/tldr-pages/tldr/blob/master/pages/common/cmark.md
 65 | Converts CommonMark Markdown formatted text to html, latex, ...
 66 | ########################
 67 | https://github.com/tldr-pages/tldr/blob/master/pages/common/column.md
 68 | standard Unix tool to tabulate data
 69 | 
 70 | Format standard input or file into multiple columns. Rows are filled before columns;
 71 | default separator is whitespace.
 72 | 
 73 | Format output for a 30 characters wide display:
 74 | $ printf "header1 header2\nbar foo\n" | column -c {{30}}
 75 | 
 76 | Split columns automatically and auto-align in a tabular format:
 77 | $ printf "header1 header2\nbar foo\n" | column -t
 78 | 
 79 | Specify column delimiter character for the -t option (e.g. "," for csv);
 80 | default is whitespace:
 81 | 
 82 | printf "header1,header2\nbar,foo\n" | column -t -s{{,}}
 83 | 
 84 | Fill columns before filling rows:
 85 | $ printf "header1\nbar\nfoobar\n" | column -c {{30}} -x
 86 | ###################
 87 | https://github.com/tldr-pages/tldr/blob/master/pages/common/csslint.md
 88 | ##############
 89 | Reformat a text file by joining its paragraphs and limiting the line 
 90 | width to given number of characters (75 by default). More 
 91 | information: https://www.gnu.org/software/coreutils/fmt.
 92 | 
 93 | https://github.com/tldr-pages/tldr/blob/master/pages/common/fmt.md
 94 | ##################
 95 | https://github.com/tldr-pages/tldr/blob/master/pages/common/gotty.md
 96 | Share your terminal as a web application. More information: https://github.com/yudai/gotty.
 97 | or removed over time. More information: https://gource.io.
 98 | ####################
 99 | github.com/sathissideris/ditaa
100 | Convert ASCII draws to beautify png images.
101 | 
102 | 


--------------------------------------------------------------------------------