arevdata 0.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (289) hide show
  1. package/README.md +499 -0
  2. package/dist/arevdata.cjs +38955 -0
  3. package/dist/arevdata.cjs.map +1 -0
  4. package/dist/arevdata.js +38955 -0
  5. package/dist/arevdata.js.map +1 -0
  6. package/dist/assets/flags/LICENSE.flag-icons.txt +21 -0
  7. package/dist/assets/flags/README.md +11 -0
  8. package/dist/assets/flags/index.html +88 -0
  9. package/dist/assets/flags/overrides/xn.svg +6 -0
  10. package/dist/assets/flags/svg/ad.svg +150 -0
  11. package/dist/assets/flags/svg/ae.svg +6 -0
  12. package/dist/assets/flags/svg/af.svg +81 -0
  13. package/dist/assets/flags/svg/ag.svg +14 -0
  14. package/dist/assets/flags/svg/al.svg +5 -0
  15. package/dist/assets/flags/svg/am.svg +5 -0
  16. package/dist/assets/flags/svg/ao.svg +13 -0
  17. package/dist/assets/flags/svg/ar.svg +32 -0
  18. package/dist/assets/flags/svg/at.svg +4 -0
  19. package/dist/assets/flags/svg/au.svg +8 -0
  20. package/dist/assets/flags/svg/az.svg +8 -0
  21. package/dist/assets/flags/svg/ba.svg +12 -0
  22. package/dist/assets/flags/svg/bb.svg +6 -0
  23. package/dist/assets/flags/svg/bd.svg +4 -0
  24. package/dist/assets/flags/svg/be.svg +7 -0
  25. package/dist/assets/flags/svg/bf.svg +7 -0
  26. package/dist/assets/flags/svg/bg.svg +5 -0
  27. package/dist/assets/flags/svg/bh.svg +4 -0
  28. package/dist/assets/flags/svg/bi.svg +15 -0
  29. package/dist/assets/flags/svg/bj.svg +14 -0
  30. package/dist/assets/flags/svg/bn.svg +36 -0
  31. package/dist/assets/flags/svg/bo.svg +673 -0
  32. package/dist/assets/flags/svg/br.svg +45 -0
  33. package/dist/assets/flags/svg/bs.svg +13 -0
  34. package/dist/assets/flags/svg/bt.svg +89 -0
  35. package/dist/assets/flags/svg/bw.svg +7 -0
  36. package/dist/assets/flags/svg/by.svg +18 -0
  37. package/dist/assets/flags/svg/bz.svg +145 -0
  38. package/dist/assets/flags/svg/ca.svg +4 -0
  39. package/dist/assets/flags/svg/cd.svg +5 -0
  40. package/dist/assets/flags/svg/cf.svg +15 -0
  41. package/dist/assets/flags/svg/cg.svg +12 -0
  42. package/dist/assets/flags/svg/ch.svg +9 -0
  43. package/dist/assets/flags/svg/cl.svg +13 -0
  44. package/dist/assets/flags/svg/cm.svg +15 -0
  45. package/dist/assets/flags/svg/cn.svg +11 -0
  46. package/dist/assets/flags/svg/co.svg +7 -0
  47. package/dist/assets/flags/svg/cr.svg +7 -0
  48. package/dist/assets/flags/svg/cu.svg +13 -0
  49. package/dist/assets/flags/svg/cv.svg +13 -0
  50. package/dist/assets/flags/svg/cy.svg +6 -0
  51. package/dist/assets/flags/svg/cz.svg +5 -0
  52. package/dist/assets/flags/svg/de.svg +5 -0
  53. package/dist/assets/flags/svg/dj.svg +13 -0
  54. package/dist/assets/flags/svg/dk.svg +5 -0
  55. package/dist/assets/flags/svg/dm.svg +152 -0
  56. package/dist/assets/flags/svg/do.svg +121 -0
  57. package/dist/assets/flags/svg/dz.svg +5 -0
  58. package/dist/assets/flags/svg/ec.svg +138 -0
  59. package/dist/assets/flags/svg/ee.svg +5 -0
  60. package/dist/assets/flags/svg/eg.svg +38 -0
  61. package/dist/assets/flags/svg/er.svg +8 -0
  62. package/dist/assets/flags/svg/es.svg +544 -0
  63. package/dist/assets/flags/svg/et.svg +14 -0
  64. package/dist/assets/flags/svg/fi.svg +5 -0
  65. package/dist/assets/flags/svg/fj.svg +120 -0
  66. package/dist/assets/flags/svg/fm.svg +11 -0
  67. package/dist/assets/flags/svg/fr.svg +5 -0
  68. package/dist/assets/flags/svg/ga.svg +7 -0
  69. package/dist/assets/flags/svg/gb.svg +7 -0
  70. package/dist/assets/flags/svg/gd.svg +27 -0
  71. package/dist/assets/flags/svg/ge.svg +6 -0
  72. package/dist/assets/flags/svg/gh.svg +6 -0
  73. package/dist/assets/flags/svg/gm.svg +14 -0
  74. package/dist/assets/flags/svg/gn.svg +7 -0
  75. package/dist/assets/flags/svg/gq.svg +23 -0
  76. package/dist/assets/flags/svg/gr.svg +16 -0
  77. package/dist/assets/flags/svg/gt.svg +204 -0
  78. package/dist/assets/flags/svg/gw.svg +13 -0
  79. package/dist/assets/flags/svg/gy.svg +9 -0
  80. package/dist/assets/flags/svg/hn.svg +18 -0
  81. package/dist/assets/flags/svg/hr.svg +58 -0
  82. package/dist/assets/flags/svg/ht.svg +116 -0
  83. package/dist/assets/flags/svg/hu.svg +7 -0
  84. package/dist/assets/flags/svg/id.svg +4 -0
  85. package/dist/assets/flags/svg/ie.svg +7 -0
  86. package/dist/assets/flags/svg/il.svg +14 -0
  87. package/dist/assets/flags/svg/in.svg +25 -0
  88. package/dist/assets/flags/svg/iq.svg +10 -0
  89. package/dist/assets/flags/svg/ir.svg +219 -0
  90. package/dist/assets/flags/svg/is.svg +12 -0
  91. package/dist/assets/flags/svg/it.svg +7 -0
  92. package/dist/assets/flags/svg/jm.svg +8 -0
  93. package/dist/assets/flags/svg/jo.svg +16 -0
  94. package/dist/assets/flags/svg/jp.svg +11 -0
  95. package/dist/assets/flags/svg/ke.svg +23 -0
  96. package/dist/assets/flags/svg/kg.svg +4 -0
  97. package/dist/assets/flags/svg/kh.svg +61 -0
  98. package/dist/assets/flags/svg/ki.svg +36 -0
  99. package/dist/assets/flags/svg/km.svg +16 -0
  100. package/dist/assets/flags/svg/kn.svg +14 -0
  101. package/dist/assets/flags/svg/kp.svg +15 -0
  102. package/dist/assets/flags/svg/kr.svg +24 -0
  103. package/dist/assets/flags/svg/kw.svg +13 -0
  104. package/dist/assets/flags/svg/kz.svg +36 -0
  105. package/dist/assets/flags/svg/la.svg +12 -0
  106. package/dist/assets/flags/svg/lb.svg +15 -0
  107. package/dist/assets/flags/svg/lc.svg +8 -0
  108. package/dist/assets/flags/svg/li.svg +43 -0
  109. package/dist/assets/flags/svg/lk.svg +22 -0
  110. package/dist/assets/flags/svg/lr.svg +14 -0
  111. package/dist/assets/flags/svg/ls.svg +8 -0
  112. package/dist/assets/flags/svg/lt.svg +7 -0
  113. package/dist/assets/flags/svg/lu.svg +5 -0
  114. package/dist/assets/flags/svg/lv.svg +6 -0
  115. package/dist/assets/flags/svg/ly.svg +13 -0
  116. package/dist/assets/flags/svg/ma.svg +4 -0
  117. package/dist/assets/flags/svg/mc.svg +6 -0
  118. package/dist/assets/flags/svg/md.svg +70 -0
  119. package/dist/assets/flags/svg/me.svg +116 -0
  120. package/dist/assets/flags/svg/mg.svg +7 -0
  121. package/dist/assets/flags/svg/mh.svg +7 -0
  122. package/dist/assets/flags/svg/mk.svg +5 -0
  123. package/dist/assets/flags/svg/ml.svg +7 -0
  124. package/dist/assets/flags/svg/mm.svg +12 -0
  125. package/dist/assets/flags/svg/mn.svg +14 -0
  126. package/dist/assets/flags/svg/mr.svg +6 -0
  127. package/dist/assets/flags/svg/mt.svg +58 -0
  128. package/dist/assets/flags/svg/mu.svg +8 -0
  129. package/dist/assets/flags/svg/mv.svg +6 -0
  130. package/dist/assets/flags/svg/mw.svg +10 -0
  131. package/dist/assets/flags/svg/mx.svg +382 -0
  132. package/dist/assets/flags/svg/my.svg +26 -0
  133. package/dist/assets/flags/svg/mz.svg +21 -0
  134. package/dist/assets/flags/svg/na.svg +16 -0
  135. package/dist/assets/flags/svg/ne.svg +6 -0
  136. package/dist/assets/flags/svg/ng.svg +6 -0
  137. package/dist/assets/flags/svg/ni.svg +129 -0
  138. package/dist/assets/flags/svg/nl.svg +5 -0
  139. package/dist/assets/flags/svg/no.svg +7 -0
  140. package/dist/assets/flags/svg/np.svg +13 -0
  141. package/dist/assets/flags/svg/nr.svg +12 -0
  142. package/dist/assets/flags/svg/nz.svg +36 -0
  143. package/dist/assets/flags/svg/om.svg +115 -0
  144. package/dist/assets/flags/svg/pa.svg +14 -0
  145. package/dist/assets/flags/svg/pe.svg +4 -0
  146. package/dist/assets/flags/svg/pg.svg +9 -0
  147. package/dist/assets/flags/svg/ph.svg +6 -0
  148. package/dist/assets/flags/svg/pk.svg +15 -0
  149. package/dist/assets/flags/svg/pl.svg +6 -0
  150. package/dist/assets/flags/svg/ps.svg +6 -0
  151. package/dist/assets/flags/svg/pt.svg +57 -0
  152. package/dist/assets/flags/svg/pw.svg +11 -0
  153. package/dist/assets/flags/svg/py.svg +157 -0
  154. package/dist/assets/flags/svg/qa.svg +4 -0
  155. package/dist/assets/flags/svg/ro.svg +7 -0
  156. package/dist/assets/flags/svg/rs.svg +292 -0
  157. package/dist/assets/flags/svg/ru.svg +5 -0
  158. package/dist/assets/flags/svg/rw.svg +13 -0
  159. package/dist/assets/flags/svg/sa.svg +25 -0
  160. package/dist/assets/flags/svg/sb.svg +13 -0
  161. package/dist/assets/flags/svg/sc.svg +7 -0
  162. package/dist/assets/flags/svg/sd.svg +13 -0
  163. package/dist/assets/flags/svg/se.svg +4 -0
  164. package/dist/assets/flags/svg/sg.svg +13 -0
  165. package/dist/assets/flags/svg/si.svg +18 -0
  166. package/dist/assets/flags/svg/sk.svg +9 -0
  167. package/dist/assets/flags/svg/sl.svg +7 -0
  168. package/dist/assets/flags/svg/sm.svg +75 -0
  169. package/dist/assets/flags/svg/sn.svg +8 -0
  170. package/dist/assets/flags/svg/so.svg +11 -0
  171. package/dist/assets/flags/svg/sr.svg +6 -0
  172. package/dist/assets/flags/svg/ss.svg +8 -0
  173. package/dist/assets/flags/svg/st.svg +16 -0
  174. package/dist/assets/flags/svg/sv.svg +593 -0
  175. package/dist/assets/flags/svg/sy.svg +6 -0
  176. package/dist/assets/flags/svg/sz.svg +34 -0
  177. package/dist/assets/flags/svg/td.svg +7 -0
  178. package/dist/assets/flags/svg/tg.svg +14 -0
  179. package/dist/assets/flags/svg/th.svg +7 -0
  180. package/dist/assets/flags/svg/tj.svg +22 -0
  181. package/dist/assets/flags/svg/tl.svg +13 -0
  182. package/dist/assets/flags/svg/tm.svg +204 -0
  183. package/dist/assets/flags/svg/tn.svg +4 -0
  184. package/dist/assets/flags/svg/to.svg +10 -0
  185. package/dist/assets/flags/svg/tr.svg +8 -0
  186. package/dist/assets/flags/svg/tt.svg +5 -0
  187. package/dist/assets/flags/svg/tv.svg +9 -0
  188. package/dist/assets/flags/svg/tw.svg +34 -0
  189. package/dist/assets/flags/svg/tz.svg +13 -0
  190. package/dist/assets/flags/svg/ua.svg +6 -0
  191. package/dist/assets/flags/svg/ug.svg +30 -0
  192. package/dist/assets/flags/svg/us.svg +9 -0
  193. package/dist/assets/flags/svg/uy.svg +28 -0
  194. package/dist/assets/flags/svg/uz.svg +30 -0
  195. package/dist/assets/flags/svg/va.svg +190 -0
  196. package/dist/assets/flags/svg/vc.svg +8 -0
  197. package/dist/assets/flags/svg/ve.svg +26 -0
  198. package/dist/assets/flags/svg/vn.svg +11 -0
  199. package/dist/assets/flags/svg/vu.svg +21 -0
  200. package/dist/assets/flags/svg/ws.svg +7 -0
  201. package/dist/assets/flags/svg/xk.svg +5 -0
  202. package/dist/assets/flags/svg/xn.svg +6 -0
  203. package/dist/assets/flags/svg/ye.svg +7 -0
  204. package/dist/assets/flags/svg/za.svg +17 -0
  205. package/dist/assets/flags/svg/zm.svg +27 -0
  206. package/dist/assets/flags/svg/zw.svg +21 -0
  207. package/dist/data/languages/index.html +86 -0
  208. package/dist/docs/api-worker-plan/index.html +439 -0
  209. package/dist/docs/cities/index.html +193 -0
  210. package/dist/docs/continents-currencies/index.html +306 -0
  211. package/dist/docs/countries/index.html +274 -0
  212. package/dist/docs/country-maps/index.html +262 -0
  213. package/dist/docs/flags/index.html +300 -0
  214. package/dist/docs/geography/index.html +454 -0
  215. package/dist/docs/languages/index.html +304 -0
  216. package/dist/docs/phone-codes/index.html +152 -0
  217. package/dist/docs/states/index.html +334 -0
  218. package/dist/docs/world-map/index.html +345 -0
  219. package/dist/examples/vue-app/index.html +208 -0
  220. package/dist/index.html +784 -0
  221. package/dist/robots.txt +2 -0
  222. package/dist/style/app.css +1 -0
  223. package/dist/types/__tests__/cities.test.d.ts +1 -0
  224. package/dist/types/__tests__/continents.test.d.ts +1 -0
  225. package/dist/types/__tests__/countries.test.d.ts +1 -0
  226. package/dist/types/__tests__/countryMaps.test.d.ts +1 -0
  227. package/dist/types/__tests__/geography.test.d.ts +1 -0
  228. package/dist/types/__tests__/index.test.d.ts +1 -0
  229. package/dist/types/__tests__/phoneCodes.test.d.ts +1 -0
  230. package/dist/types/__tests__/states.test.d.ts +1 -0
  231. package/dist/types/__tests__/translations.test.d.ts +1 -0
  232. package/dist/types/api/index.d.ts +5 -0
  233. package/dist/types/api/index.test.d.ts +1 -0
  234. package/dist/types/api/query.d.ts +3 -0
  235. package/dist/types/api/response.d.ts +16 -0
  236. package/dist/types/api/router.d.ts +1 -0
  237. package/dist/types/api/routes/cities.d.ts +2 -0
  238. package/dist/types/api/routes/countries.d.ts +2 -0
  239. package/dist/types/api/routes/health.d.ts +1 -0
  240. package/dist/types/api/routes/maps.d.ts +1 -0
  241. package/dist/types/api/routes/meta.d.ts +1 -0
  242. package/dist/types/api/routes/phoneCodes.d.ts +1 -0
  243. package/dist/types/data/cities.d.ts +22 -0
  244. package/dist/types/data/continents.d.ts +9 -0
  245. package/dist/types/data/countries.d.ts +23 -0
  246. package/dist/types/data/countryMaps.d.ts +104 -0
  247. package/dist/types/data/currencies.d.ts +13 -0
  248. package/dist/types/data/flags.d.ts +37 -0
  249. package/dist/types/data/geography.d.ts +48 -0
  250. package/dist/types/data/languages/index.d.ts +2 -0
  251. package/dist/types/data/languages/language.test.d.ts +1 -0
  252. package/dist/types/data/languages/languageData.d.ts +6 -0
  253. package/dist/types/data/languages/languageFunctions.d.ts +43 -0
  254. package/dist/types/data/languages/translations/ar.d.ts +1189 -0
  255. package/dist/types/data/languages/translations/de.d.ts +1189 -0
  256. package/dist/types/data/languages/translations/es.d.ts +1189 -0
  257. package/dist/types/data/languages/translations/fr.d.ts +1189 -0
  258. package/dist/types/data/languages/translations/hi.d.ts +1189 -0
  259. package/dist/types/data/languages/translations/it.d.ts +1189 -0
  260. package/dist/types/data/languages/translations/ja.d.ts +1189 -0
  261. package/dist/types/data/languages/translations/ko.d.ts +1189 -0
  262. package/dist/types/data/languages/translations/nl.d.ts +1189 -0
  263. package/dist/types/data/languages/translations/pl.d.ts +1189 -0
  264. package/dist/types/data/languages/translations/pt.d.ts +1189 -0
  265. package/dist/types/data/languages/translations/ru.d.ts +1189 -0
  266. package/dist/types/data/languages/translations/tr.d.ts +1189 -0
  267. package/dist/types/data/languages/translations/zh.d.ts +1189 -0
  268. package/dist/types/data/phoneCodes.d.ts +16 -0
  269. package/dist/types/data/states.d.ts +18 -0
  270. package/dist/types/data/translations/ar.d.ts +1832 -0
  271. package/dist/types/data/translations/de.d.ts +2005 -0
  272. package/dist/types/data/translations/es.d.ts +1852 -0
  273. package/dist/types/data/translations/fr.d.ts +1860 -0
  274. package/dist/types/data/translations/hi.d.ts +1816 -0
  275. package/dist/types/data/translations/it.d.ts +1824 -0
  276. package/dist/types/data/translations/ja.d.ts +1833 -0
  277. package/dist/types/data/translations/ko.d.ts +1832 -0
  278. package/dist/types/data/translations/nl.d.ts +1826 -0
  279. package/dist/types/data/translations/pl.d.ts +1818 -0
  280. package/dist/types/data/translations/pt.d.ts +1829 -0
  281. package/dist/types/data/translations/ru.d.ts +1838 -0
  282. package/dist/types/data/translations/tr.d.ts +1818 -0
  283. package/dist/types/data/translations/zh.d.ts +1834 -0
  284. package/dist/types/data/translations.d.ts +73 -0
  285. package/dist/types/data/worldMap.d.ts +122 -0
  286. package/dist/types/index.d.ts +33 -0
  287. package/dist/types/types/index.d.ts +348 -0
  288. package/dist/types/utils/geo.d.ts +101 -0
  289. package/package.json +67 -0
package/dist/docs/world-map/index.html ADDED
@@ -0,0 +1,345 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1">
5
+ <meta name="type" content="content">
6
+ <title>World Map</title>
7
+ <link href="/style/app.css" rel="stylesheet" type="text/css">
8
+ </head>
9
+ <body class="page--world-map">
10
+ <div class="page-container">
11
+ <header class="header">
12
+ <div class="header__container">
13
+ </div>
14
+ </header>
15
+ <main class="main">
16
+ <section class="section">
17
+ <div class="container">
18
+ <div class="content"><h1 id="world-map" tabindex="-1">World Map</h1>
19
+ <p><code>arev</code> ships a full vector world map as inline SVG path data, together with helper functions to render, style, and highlight countries.<br>
20
+ Countries are identified by their <strong>ISO 3166-1 alpha-2</strong> codes (e.g. <code>&quot;US&quot;</code>, <code>&quot;DE&quot;</code>, <code>&quot;JP&quot;</code>), which match the <code>alpha2</code> field used throughout the rest of the library.</p>
21
+ <hr>
22
+ <h2 id="data" tabindex="-1">Data</h2>
23
+ <h3 id="worldmapcountries%3A-worldmapcountry%5B%5D" tabindex="-1"><code>worldMapCountries: WorldMapCountry[]</code></h3>
24
+ <p>Raw path data for <strong>211 countries and territories</strong>.<br>
25
+ Each entry has:</p>
26
+ <table>
27
+ <thead>
28
+ <tr>
29
+ <th>field</th>
30
+ <th>type</th>
31
+ <th>description</th>
32
+ </tr>
33
+ </thead>
34
+ <tbody>
35
+ <tr>
36
+ <td><code>code</code></td>
37
+ <td><code>string</code></td>
38
+ <td>ISO 3166-1 alpha-2 code (e.g. <code>&quot;DE&quot;</code>)</td>
39
+ </tr>
40
+ <tr>
41
+ <td><code>name</code></td>
42
+ <td><code>string</code></td>
43
+ <td>Common English country name</td>
44
+ </tr>
45
+ <tr>
46
+ <td><code>paths</code></td>
47
+ <td><code>string[]</code></td>
48
+ <td>One or more SVG path <code>d</code> attribute strings (island nations may have several)</td>
49
+ </tr>
50
+ </tbody>
51
+ </table>
52
+ <h3 id="world_map_viewbox" tabindex="-1"><code>WORLD_MAP_VIEWBOX</code></h3>
53
+ <p><code>&quot;0 0 2000 857&quot;</code> — the viewBox for the world map canvas.</p>
54
+ <h3 id="world_map_defaults" tabindex="-1"><code>WORLD_MAP_DEFAULTS</code></h3>
55
+ <p>Default styling values used when no overrides are passed:</p>
56
+ <pre class="language-ts"><code class="language-ts"><span class="token punctuation">{</span>
57
+ fill<span class="token operator">:</span> <span class="token string">"#d0d0d0"</span><span class="token punctuation">,</span>
58
+ stroke<span class="token operator">:</span> <span class="token string">"#ffffff"</span><span class="token punctuation">,</span>
59
+ strokeWidth<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
60
+ hoverFill<span class="token operator">:</span> <span class="token string">"#a0a0a0"</span><span class="token punctuation">,</span>
61
+ width<span class="token operator">:</span> <span class="token string">"100%"</span><span class="token punctuation">,</span>
62
+ height<span class="token operator">:</span> <span class="token string">"auto"</span><span class="token punctuation">,</span>
63
+ className<span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
64
+ <span class="token punctuation">}</span>
65
+ </code></pre>
66
+ <hr>
67
+ <h2 id="types" tabindex="-1">Types</h2>
68
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">interface</span> <span class="token class-name">WorldMapCountry</span> <span class="token punctuation">{</span>
69
+ code<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// ISO alpha-2</span>
70
+ name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
71
+ paths<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// SVG path `d` strings</span>
72
+ <span class="token punctuation">}</span>
73
+
74
+ <span class="token keyword">interface</span> <span class="token class-name">WorldMapOptions</span> <span class="token punctuation">{</span>
75
+ fill<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// Default country fill</span>
76
+ stroke<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// Border colour</span>
77
+ strokeWidth<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// Border width (SVG units)</span>
78
+ hoverFill<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// Fill on mouse hover</span>
79
+ width<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// SVG width attribute</span>
80
+ height<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// SVG height attribute</span>
81
+ className<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// CSS class on &lt;svg></span>
82
+ <span class="token punctuation">}</span>
83
+
84
+ <span class="token keyword">interface</span> <span class="token class-name">WorldMapHighlight</span> <span class="token punctuation">{</span>
85
+ code<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// ISO alpha-2</span>
86
+ fill<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// Highlight colour</span>
87
+ label<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// Accessible &lt;title> text</span>
88
+ <span class="token punctuation">}</span>
89
+ </code></pre>
90
+ <hr>
91
+ <h2 id="functions" tabindex="-1">Functions</h2>
92
+ <h3 id="getworldmapsvg(options%3F)" tabindex="-1"><code>getWorldMapSvg(options?)</code></h3>
93
+ <p>Returns a complete <code>&lt;svg&gt;…&lt;/svg&gt;</code> string for the full world map.</p>
94
+ <p>Every country <code>&lt;path&gt;</code> element has:</p>
95
+ <ul>
96
+ <li><code>id</code> — ISO alpha-2 code, e.g. <code>id=&quot;DE&quot;</code></li>
97
+ <li><code>data-code</code> — same code</li>
98
+ <li><code>data-name</code> — human-readable country name</li>
99
+ </ul>
100
+ <p>This lets you target individual countries using plain CSS or JavaScript:</p>
101
+ <pre class="language-css"><code class="language-css"><span class="token comment">/* CSS */</span>
102
+ <span class="token selector">#DE</span> <span class="token punctuation">{</span> <span class="token property">fill</span><span class="token punctuation">:</span> steelblue<span class="token punctuation">;</span> <span class="token punctuation">}</span>
103
+ <span class="token selector">#FR</span> <span class="token punctuation">{</span> <span class="token property">fill</span><span class="token punctuation">:</span> crimson<span class="token punctuation">;</span> <span class="token punctuation">}</span>
104
+ </code></pre>
105
+ <pre class="language-js"><code class="language-js"><span class="token comment">// JavaScript</span>
106
+ document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"FR"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>fill <span class="token operator">=</span> <span class="token string">"red"</span><span class="token punctuation">;</span>
107
+ </code></pre>
108
+ <p><strong>Signature:</strong></p>
109
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">getWorldMapSvg</span><span class="token punctuation">(</span>options<span class="token operator">?</span><span class="token operator">:</span> WorldMapOptions<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
110
+ </code></pre>
111
+ <p><strong>Example:</strong></p>
112
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getWorldMapSvg <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
113
+
114
+ <span class="token comment">// Inject into the DOM</span>
115
+ document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token operator">!</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">getWorldMapSvg</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
116
+ fill<span class="token operator">:</span> <span class="token string">"#e8f4f8"</span><span class="token punctuation">,</span>
117
+ stroke<span class="token operator">:</span> <span class="token string">"#aaaaaa"</span><span class="token punctuation">,</span>
118
+ hoverFill<span class="token operator">:</span> <span class="token string">"#4a90e2"</span><span class="token punctuation">,</span>
119
+ className<span class="token operator">:</span> <span class="token string">"world-map"</span><span class="token punctuation">,</span>
120
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
121
+ </code></pre>
122
+ <hr>
123
+ <h3 id="highlightcountries(highlights%2C-options%3F)" tabindex="-1"><code>highlightCountries(highlights, options?)</code></h3>
124
+ <p>Returns an SVG with specific countries rendered in custom colours.<br>
125
+ All other countries use the base <code>fill</code> from <code>options</code>.</p>
126
+ <p><strong>Signature:</strong></p>
127
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">highlightCountries</span><span class="token punctuation">(</span>
128
+ highlights<span class="token operator">:</span> WorldMapHighlight<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
129
+ options<span class="token operator">?</span><span class="token operator">:</span> WorldMapOptions<span class="token punctuation">,</span>
130
+ <span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
131
+ </code></pre>
132
+ <p><strong>Example – highlight election winners:</strong></p>
133
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> highlightCountries <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
134
+
135
+ <span class="token keyword">const</span> svg <span class="token operator">=</span> <span class="token function">highlightCountries</span><span class="token punctuation">(</span>
136
+ <span class="token punctuation">[</span>
137
+ <span class="token punctuation">{</span> code<span class="token operator">:</span> <span class="token string">"US"</span><span class="token punctuation">,</span> fill<span class="token operator">:</span> <span class="token string">"#4a90e2"</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">"United States"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
138
+ <span class="token punctuation">{</span> code<span class="token operator">:</span> <span class="token string">"GB"</span><span class="token punctuation">,</span> fill<span class="token operator">:</span> <span class="token string">"#e24a4a"</span><span class="token punctuation">,</span> label<span class="token operator">:</span> <span class="token string">"United Kingdom"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
139
+ <span class="token punctuation">{</span> code<span class="token operator">:</span> <span class="token string">"DE"</span><span class="token punctuation">,</span> fill<span class="token operator">:</span> <span class="token string">"#4ae24a"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
140
+ <span class="token punctuation">]</span><span class="token punctuation">,</span>
141
+ <span class="token punctuation">{</span> fill<span class="token operator">:</span> <span class="token string">"#eeeeee"</span><span class="token punctuation">,</span> hoverFill<span class="token operator">:</span> <span class="token string">"#cccccc"</span> <span class="token punctuation">}</span>
142
+ <span class="token punctuation">)</span><span class="token punctuation">;</span>
143
+
144
+ document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token operator">!</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> svg<span class="token punctuation">;</span>
145
+ </code></pre>
146
+ <hr>
147
+ <h3 id="colorizeworldmap(groups%2C-options%3F)" tabindex="-1"><code>colorizeWorldMap(groups, options?)</code></h3>
148
+ <p>Choropleth helper — assign one fill colour to a group of countries.</p>
149
+ <p><strong>Signature:</strong></p>
150
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">colorizeWorldMap</span><span class="token punctuation">(</span>
151
+ groups<span class="token operator">:</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">></span><span class="token punctuation">,</span>
152
+ options<span class="token operator">?</span><span class="token operator">:</span> WorldMapOptions<span class="token punctuation">,</span>
153
+ <span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
154
+ </code></pre>
155
+ <p><strong>Example – colour by continent:</strong></p>
156
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> colorizeWorldMap <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
157
+
158
+ <span class="token keyword">const</span> svg <span class="token operator">=</span> <span class="token function">colorizeWorldMap</span><span class="token punctuation">(</span>
159
+ <span class="token punctuation">{</span>
160
+ <span class="token string-property property">"#f4a261"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"US"</span><span class="token punctuation">,</span> <span class="token string">"CA"</span><span class="token punctuation">,</span> <span class="token string">"MX"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// North America</span>
161
+ <span class="token string-property property">"#2a9d8f"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"BR"</span><span class="token punctuation">,</span> <span class="token string">"AR"</span><span class="token punctuation">,</span> <span class="token string">"CO"</span><span class="token punctuation">,</span> <span class="token string">"CL"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// South America</span>
162
+ <span class="token string-property property">"#e9c46a"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"DE"</span><span class="token punctuation">,</span> <span class="token string">"FR"</span><span class="token punctuation">,</span> <span class="token string">"GB"</span><span class="token punctuation">,</span> <span class="token string">"IT"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Europe</span>
163
+ <span class="token string-property property">"#e76f51"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"CN"</span><span class="token punctuation">,</span> <span class="token string">"IN"</span><span class="token punctuation">,</span> <span class="token string">"JP"</span><span class="token punctuation">,</span> <span class="token string">"KR"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Asia</span>
164
+ <span class="token string-property property">"#264653"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"NG"</span><span class="token punctuation">,</span> <span class="token string">"ZA"</span><span class="token punctuation">,</span> <span class="token string">"EG"</span><span class="token punctuation">,</span> <span class="token string">"KE"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Africa</span>
165
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
166
+ <span class="token punctuation">{</span> fill<span class="token operator">:</span> <span class="token string">"#dddddd"</span> <span class="token punctuation">}</span>
167
+ <span class="token punctuation">)</span><span class="token punctuation">;</span>
168
+
169
+ document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token operator">!</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> svg<span class="token punctuation">;</span>
170
+ </code></pre>
171
+ <hr>
172
+ <h3 id="getcountrymapdata(code)" tabindex="-1"><code>getCountryMapData(code)</code></h3>
173
+ <p>Look up the path data for a single country by its ISO alpha-2 code.<br>
174
+ The look-up is <strong>case-insensitive</strong>.</p>
175
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">getCountryMapData</span><span class="token punctuation">(</span>code<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> WorldMapCountry <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token punctuation">;</span>
176
+ </code></pre>
177
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountryMapData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
178
+
179
+ <span class="token keyword">const</span> japan <span class="token operator">=</span> <span class="token function">getCountryMapData</span><span class="token punctuation">(</span><span class="token string">"JP"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
180
+ <span class="token comment">// { code: "JP", name: "Japan", paths: ["M...", "M..."] }</span>
181
+ </code></pre>
182
+ <hr>
183
+ <h3 id="searchworldmapcountries(name)" tabindex="-1"><code>searchWorldMapCountries(name)</code></h3>
184
+ <p>Find countries whose names include a given substring (case-insensitive).</p>
185
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">searchWorldMapCountries</span><span class="token punctuation">(</span>name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> WorldMapCountry<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
186
+ </code></pre>
187
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> searchWorldMapCountries <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
188
+
189
+ <span class="token function">searchWorldMapCountries</span><span class="token punctuation">(</span><span class="token string">"land"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
190
+ <span class="token comment">// → [Greenland, Iceland, Finland, New Zealand, …]</span>
191
+ </code></pre>
192
+ <hr>
193
+ <h2 id="styling-tips" tabindex="-1">Styling tips</h2>
194
+ <p>Because each country path has a predictable <code>id</code> attribute, you can style countries entirely in CSS without JavaScript:</p>
195
+ <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
196
+ <span class="token comment">/* base style */</span>
197
+ <span class="token selector">#map path</span> <span class="token punctuation">{</span> <span class="token property">fill</span><span class="token punctuation">:</span> #e0e0e0<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> fill 0.2s<span class="token punctuation">;</span> <span class="token punctuation">}</span>
198
+
199
+ <span class="token comment">/* highlight a region */</span>
200
+ <span class="token selector">#US, #CA, #MX</span> <span class="token punctuation">{</span> <span class="token property">fill</span><span class="token punctuation">:</span> #4a90e2<span class="token punctuation">;</span> <span class="token punctuation">}</span>
201
+
202
+ <span class="token comment">/* interactive hover */</span>
203
+ <span class="token selector">#map path:hover</span> <span class="token punctuation">{</span> <span class="token property">fill</span><span class="token punctuation">:</span> #ff9800<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span>
204
+ </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
205
+
206
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>map<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
207
+ <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
208
+ <span class="token keyword">import</span> <span class="token punctuation">{</span> getWorldMapSvg <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
209
+ document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">getWorldMapSvg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
210
+ </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
211
+ </code></pre>
212
+ <p>You can also listen for click events on individual countries:</p>
213
+ <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> getWorldMapSvg <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
214
+
215
+ document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">getWorldMapSvg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
216
+
217
+ document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"#map path[data-code]"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">path</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
218
+ path<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
219
+ <span class="token keyword">const</span> code <span class="token operator">=</span> path<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>code<span class="token punctuation">;</span>
220
+ <span class="token keyword">const</span> name <span class="token operator">=</span> path<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
221
+ console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Clicked: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> (</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>code<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
222
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
223
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
224
+ </code></pre>
225
+
226
+ </div>
227
+ </div>
228
+ </section>
229
+ </main>
230
+ </div>
231
+ <footer class="footer">
232
+ <div class="footer__container">
233
+ <div class="footer__controls">
234
+ <div class="footer__control"><span class="footer__label">Theme</span>
235
+ <button class="color-mode-toggle" type="button" data-color-mode-toggle aria-label="Toggle color mode"><span class="color-mode-toggle__value"></span></button>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </footer>
240
+ </body>
241
+ <script>const isDarkMode = window.matchMedia("prefers-color-scheme: dark").matches;
242
+ let localMode = isDarkMode ? "dark" : "light";
243
+
244
+ const updateColorModeToggle = () => {
245
+ const toggle = document.querySelector("[data-color-mode-toggle]");
246
+ if (!toggle) return;
247
+
248
+ const value = toggle.querySelector(".color-mode-toggle__value");
249
+ if (!value) return;
250
+
251
+ value.textContent = localMode === "dark" ? "Dark" : "Light";
252
+ };
253
+
254
+ const initColorMode = () => {
255
+ localMode = localStorage.getItem("colorMode");
256
+ setCurrentMode(localMode ? localMode : isDarkMode ? "dark" : "light");
257
+ };
258
+
259
+ const setCurrentMode = (mode) => {
260
+ localMode = mode;
261
+ localStorage.setItem("colorMode", localMode);
262
+ document.body.setAttribute("color-mode", mode);
263
+ updateColorModeToggle();
264
+ };
265
+
266
+ const switchMode = () => {
267
+ if (localMode == "dark") setCurrentMode("light");
268
+ else setCurrentMode("dark");
269
+ };
270
+
271
+ const bindColorModeToggle = () => {
272
+ const toggle = document.querySelector("[data-color-mode-toggle]");
273
+ if (!toggle) return;
274
+
275
+ toggle.addEventListener("click", () => {
276
+ switchMode();
277
+ });
278
+ };
279
+
280
+ initColorMode();
281
+ bindColorModeToggle();
282
+ const container = document.querySelector(".container").querySelectorAll("*");
283
+
284
+ container.forEach((el) => {
285
+ const text = el.innerText;
286
+ if (el.innerHTML == el.textContent)
287
+ if (text) {
288
+ const matches = text.match(/#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3}/i);
289
+ if (matches) {
290
+ el.innerHTML = el.innerHTML.replace(
291
+ matches[0],
292
+ `<span class="color-preview" style="--color-preview:${matches[0]}">${matches[0]}</span>`
293
+ );
294
+ }
295
+ }
296
+ });
297
+ const tables = document.querySelectorAll("table");
298
+ let initTableWrap = false;
299
+
300
+ const wrapTables = (tables) => {
301
+ tables &&
302
+ tables.forEach((table) => {
303
+ if (table.getBoundingClientRect().width > window.screen.width) {
304
+ table.classList.add("wrap");
305
+ initTableWrap = true;
306
+ }
307
+ });
308
+ };
309
+
310
+ const labelTables = (tables) => {
311
+ tables &&
312
+ tables.forEach((table) => {
313
+ // Set all headers as attributes to td's
314
+ const headerElements = table.querySelectorAll("thead th");
315
+ const bodyElementRows = table.querySelectorAll("tbody tr");
316
+ const heads = [];
317
+
318
+ if (headerElements && bodyElementRows) {
319
+ // Get TH heads
320
+ headerElements.forEach((th) => {
321
+ heads.push(th.textContent);
322
+ });
323
+ }
324
+
325
+ if (heads.length) {
326
+ bodyElementRows.forEach((tr) => {
327
+ const tds = tr.querySelectorAll("td");
328
+
329
+ tds.forEach((td, i) => {
330
+ td.setAttribute("data-label", heads[i]);
331
+ });
332
+ });
333
+ }
334
+ });
335
+ };
336
+
337
+ wrapTables(tables);
338
+ labelTables(tables);
339
+
340
+ window.addEventListener("resize", () => {
341
+ if (!initTableWrap) wrapTables(tables);
342
+ });
343
+
344
+ </script>
345
+ </html>
package/dist/examples/vue-app/index.html ADDED
@@ -0,0 +1,208 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1">
5
+ <meta name="type" content="content">
6
+ <title>arev Vue Demo App</title>
7
+ <link href="/style/app.css" rel="stylesheet" type="text/css">
8
+ </head>
9
+ <body class="page--vue-app">
10
+ <div class="page-container">
11
+ <header class="header">
12
+ <div class="header__container">
13
+ </div>
14
+ </header>
15
+ <main class="main">
16
+ <section class="section">
17
+ <div class="container">
18
+ <div class="content"><h1 id="arev-vue-demo-app" tabindex="-1">arev Vue Demo App</h1>
19
+ <p>A small, deployable Vue 3 application that documents and demonstrates every<br>
20
+ function exported by the <strong><a href="https://github.com/silvandiepen/arev">arev</a></strong> package.</p>
21
+ <p>Public docs will live at <strong><a href="https://arevdata.com">arevdata.com</a></strong> and the API at <strong><a href="https://api.arevdata.com">api.arevdata.com</a></strong>.</p>
22
+ <h2 id="features" tabindex="-1">Features</h2>
23
+ <table>
24
+ <thead>
25
+ <tr>
26
+ <th>Tab</th>
27
+ <th>Functions demonstrated</th>
28
+ </tr>
29
+ </thead>
30
+ <tbody>
31
+ <tr>
32
+ <td><strong>Countries</strong></td>
33
+ <td><code>countries</code>, <code>getCountryByCode</code>, <code>getCountriesByContinent</code>, <code>getCountryFlag</code>, <code>getRecognizedCountries</code>, <code>phoneCountryCodes</code>, <code>getPhoneCodeByCountry</code>, <code>getCountriesByPhoneCode</code>, <code>continents</code>, <code>getContinentByCode</code></td>
34
+ </tr>
35
+ <tr>
36
+ <td><strong>Cities</strong></td>
37
+ <td><code>cities</code>, <code>searchCities</code>, <code>getCitiesByCountry</code>, <code>getCapitalCity</code>, <code>getCitiesByPopulation</code></td>
38
+ </tr>
39
+ <tr>
40
+ <td><strong>States</strong></td>
41
+ <td><code>states</code>, <code>getStatesByCountry</code>, <code>getStateByCode</code>, <code>getStatesByType</code></td>
42
+ </tr>
43
+ <tr>
44
+ <td><strong>Geography</strong></td>
45
+ <td><code>countryGeography</code>, <code>getCountryGeography</code>, <code>getLandlockedCountries</code>, <code>getCountriesByClimate</code>, <code>getNeighbors</code>, <code>doCountriesBorder</code>, <code>getDistanceBetweenCountries</code>, <code>getDirectionBetweenCountries</code>, <code>haversineDistance</code>, <code>bearing</code>, <code>bearingToCardinal</code>, <code>compareTemperature</code>, <code>compareSize</code>, <code>getHemisphere</code></td>
46
+ </tr>
47
+ <tr>
48
+ <td><strong>Flags</strong></td>
49
+ <td><code>flagData</code>, <code>getFlagSvgUrl</code>, <code>getFlagPngUrl</code>, <code>getFlagData</code>, <code>getFlagsByColor</code>, <code>getSimilarFlags</code></td>
50
+ </tr>
51
+ <tr>
52
+ <td><strong>Maps</strong></td>
53
+ <td><code>getWorldMapSvg</code>, <code>highlightCountries</code>, <code>colorizeWorldMap</code>, <code>getCountrySvg</code>, <code>WORLD_MAP_VIEWBOX</code>, <code>WORLD_MAP_DEFAULTS</code>, <code>worldMapCountries</code>, <code>getCountryMapData</code>, <code>searchWorldMapCountries</code>, <code>getCountryMapSvgUrl</code>, <code>getCountrySubdivisionMapUrl</code>, <code>latLonToMapPoint</code>, <code>COUNTRY_MAP_DEFAULTS</code></td>
54
+ </tr>
55
+ <tr>
56
+ <td><strong>Currencies</strong></td>
57
+ <td><code>currencies</code>, <code>getCurrencyByCode</code>, <code>getCurrencyByCountry</code></td>
58
+ </tr>
59
+ <tr>
60
+ <td><strong>Geo Game</strong></td>
61
+ <td><code>getGeoHints</code> — Wordle-style geography guessing game</td>
62
+ </tr>
63
+ </tbody>
64
+ </table>
65
+ <h2 id="getting-started" tabindex="-1">Getting started</h2>
66
+ <pre class="language-bash"><code class="language-bash"><span class="token comment"># install dependencies (the local arev library is referenced via a file: path)</span>
67
+ <span class="token function">npm</span> <span class="token function">install</span>
68
+
69
+ <span class="token comment"># start development server</span>
70
+ <span class="token function">npm</span> run dev
71
+
72
+ <span class="token comment"># build for production</span>
73
+ <span class="token function">npm</span> run build
74
+
75
+ <span class="token comment"># preview production build</span>
76
+ <span class="token function">npm</span> run preview
77
+ </code></pre>
78
+ <h2 id="deployment" tabindex="-1">Deployment</h2>
79
+ <p>The <code>npm run build</code> command outputs a fully static site to <code>dist/</code>.<br>
80
+ You can deploy it to any static hosting platform, for example:</p>
81
+ <h3 id="github-pages-(via-gh-pages)" tabindex="-1">GitHub Pages (via <code>gh-pages</code>)</h3>
82
+ <pre class="language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> gh-pages
83
+ npx gh-pages <span class="token parameter variable">-d</span> dist
84
+ </code></pre>
85
+ <h3 id="vercel-%2F-netlify-%2F-cloudflare-pages" tabindex="-1">Vercel / Netlify / Cloudflare Pages</h3>
86
+ <p>Set the <strong>build command</strong> to <code>npm run build</code> and the <strong>publish directory</strong> to <code>dist</code>.</p>
87
+ <h3 id="docker-%2F-nginx" tabindex="-1">Docker / NGINX</h3>
88
+ <pre class="language-dockerfile"><code class="language-dockerfile"><span class="token instruction"><span class="token keyword">FROM</span> node:20-alpine <span class="token keyword">AS</span> build</span>
89
+ <span class="token instruction"><span class="token keyword">WORKDIR</span> /app</span>
90
+ <span class="token instruction"><span class="token keyword">COPY</span> . .</span>
91
+ <span class="token instruction"><span class="token keyword">RUN</span> npm install &amp;&amp; npm run build</span>
92
+
93
+ <span class="token instruction"><span class="token keyword">FROM</span> nginx:alpine</span>
94
+ <span class="token instruction"><span class="token keyword">COPY</span> <span class="token options"><span class="token property">--from</span><span class="token punctuation">=</span><span class="token string">build</span></span> /app/dist /usr/share/nginx/html</span>
95
+ </code></pre>
96
+ <h2 id="tech-stack" tabindex="-1">Tech stack</h2>
97
+ <ul>
98
+ <li><a href="https://vuejs.org/">Vue 3</a> (Composition API + <code>&lt;script setup&gt;</code>)</li>
99
+ <li><a href="https://vitejs.dev/">Vite</a> (build &amp; dev server)</li>
100
+ <li>TypeScript</li>
101
+ <li>Zero additional CSS frameworks</li>
102
+ </ul>
103
+
104
+ </div>
105
+ </div>
106
+ </section>
107
+ </main>
108
+ </div>
109
+ <footer class="footer">
110
+ <div class="footer__container">
111
+ <div class="footer__controls">
112
+ <div class="footer__control"><span class="footer__label">Theme</span>
113
+ <button class="color-mode-toggle" type="button" data-color-mode-toggle aria-label="Toggle color mode"><span class="color-mode-toggle__value"></span></button>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </footer>
118
+ </body>
119
+ <script>const isDarkMode = window.matchMedia("prefers-color-scheme: dark").matches;
120
+ let localMode = isDarkMode ? "dark" : "light";
121
+
122
+ const updateColorModeToggle = () => {
123
+ const toggle = document.querySelector("[data-color-mode-toggle]");
124
+ if (!toggle) return;
125
+
126
+ const value = toggle.querySelector(".color-mode-toggle__value");
127
+ if (!value) return;
128
+
129
+ value.textContent = localMode === "dark" ? "Dark" : "Light";
130
+ };
131
+
132
+ const initColorMode = () => {
133
+ localMode = localStorage.getItem("colorMode");
134
+ setCurrentMode(localMode ? localMode : isDarkMode ? "dark" : "light");
135
+ };
136
+
137
+ const setCurrentMode = (mode) => {
138
+ localMode = mode;
139
+ localStorage.setItem("colorMode", localMode);
140
+ document.body.setAttribute("color-mode", mode);
141
+ updateColorModeToggle();
142
+ };
143
+
144
+ const switchMode = () => {
145
+ if (localMode == "dark") setCurrentMode("light");
146
+ else setCurrentMode("dark");
147
+ };
148
+
149
+ const bindColorModeToggle = () => {
150
+ const toggle = document.querySelector("[data-color-mode-toggle]");
151
+ if (!toggle) return;
152
+
153
+ toggle.addEventListener("click", () => {
154
+ switchMode();
155
+ });
156
+ };
157
+
158
+ initColorMode();
159
+ bindColorModeToggle();
160
+ const tables = document.querySelectorAll("table");
161
+ let initTableWrap = false;
162
+
163
+ const wrapTables = (tables) => {
164
+ tables &&
165
+ tables.forEach((table) => {
166
+ if (table.getBoundingClientRect().width > window.screen.width) {
167
+ table.classList.add("wrap");
168
+ initTableWrap = true;
169
+ }
170
+ });
171
+ };
172
+
173
+ const labelTables = (tables) => {
174
+ tables &&
175
+ tables.forEach((table) => {
176
+ // Set all headers as attributes to td's
177
+ const headerElements = table.querySelectorAll("thead th");
178
+ const bodyElementRows = table.querySelectorAll("tbody tr");
179
+ const heads = [];
180
+
181
+ if (headerElements && bodyElementRows) {
182
+ // Get TH heads
183
+ headerElements.forEach((th) => {
184
+ heads.push(th.textContent);
185
+ });
186
+ }
187
+
188
+ if (heads.length) {
189
+ bodyElementRows.forEach((tr) => {
190
+ const tds = tr.querySelectorAll("td");
191
+
192
+ tds.forEach((td, i) => {
193
+ td.setAttribute("data-label", heads[i]);
194
+ });
195
+ });
196
+ }
197
+ });
198
+ };
199
+
200
+ wrapTables(tables);
201
+ labelTables(tables);
202
+
203
+ window.addEventListener("resize", () => {
204
+ if (!initTableWrap) wrapTables(tables);
205
+ });
206
+
207
+ </script>
208
+ </html>