arevdata 0.1.17 → 0.1.19

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 (218) hide show
  1. package/package.json +1 -1
  2. package/dist/assets/flags/LICENSE.flag-icons.txt +0 -21
  3. package/dist/assets/flags/README.md +0 -11
  4. package/dist/assets/flags/index.html +0 -88
  5. package/dist/assets/flags/overrides/xn.svg +0 -6
  6. package/dist/assets/flags/svg/ad.svg +0 -150
  7. package/dist/assets/flags/svg/ae.svg +0 -6
  8. package/dist/assets/flags/svg/af.svg +0 -81
  9. package/dist/assets/flags/svg/ag.svg +0 -14
  10. package/dist/assets/flags/svg/al.svg +0 -5
  11. package/dist/assets/flags/svg/am.svg +0 -5
  12. package/dist/assets/flags/svg/ao.svg +0 -13
  13. package/dist/assets/flags/svg/ar.svg +0 -32
  14. package/dist/assets/flags/svg/at.svg +0 -4
  15. package/dist/assets/flags/svg/au.svg +0 -8
  16. package/dist/assets/flags/svg/az.svg +0 -8
  17. package/dist/assets/flags/svg/ba.svg +0 -12
  18. package/dist/assets/flags/svg/bb.svg +0 -6
  19. package/dist/assets/flags/svg/bd.svg +0 -4
  20. package/dist/assets/flags/svg/be.svg +0 -7
  21. package/dist/assets/flags/svg/bf.svg +0 -7
  22. package/dist/assets/flags/svg/bg.svg +0 -5
  23. package/dist/assets/flags/svg/bh.svg +0 -4
  24. package/dist/assets/flags/svg/bi.svg +0 -15
  25. package/dist/assets/flags/svg/bj.svg +0 -14
  26. package/dist/assets/flags/svg/bn.svg +0 -36
  27. package/dist/assets/flags/svg/bo.svg +0 -673
  28. package/dist/assets/flags/svg/br.svg +0 -45
  29. package/dist/assets/flags/svg/bs.svg +0 -13
  30. package/dist/assets/flags/svg/bt.svg +0 -89
  31. package/dist/assets/flags/svg/bw.svg +0 -7
  32. package/dist/assets/flags/svg/by.svg +0 -18
  33. package/dist/assets/flags/svg/bz.svg +0 -145
  34. package/dist/assets/flags/svg/ca.svg +0 -4
  35. package/dist/assets/flags/svg/cd.svg +0 -5
  36. package/dist/assets/flags/svg/cf.svg +0 -15
  37. package/dist/assets/flags/svg/cg.svg +0 -12
  38. package/dist/assets/flags/svg/ch.svg +0 -9
  39. package/dist/assets/flags/svg/cl.svg +0 -13
  40. package/dist/assets/flags/svg/cm.svg +0 -15
  41. package/dist/assets/flags/svg/cn.svg +0 -11
  42. package/dist/assets/flags/svg/co.svg +0 -7
  43. package/dist/assets/flags/svg/cr.svg +0 -7
  44. package/dist/assets/flags/svg/cu.svg +0 -13
  45. package/dist/assets/flags/svg/cv.svg +0 -13
  46. package/dist/assets/flags/svg/cy.svg +0 -6
  47. package/dist/assets/flags/svg/cz.svg +0 -5
  48. package/dist/assets/flags/svg/de.svg +0 -5
  49. package/dist/assets/flags/svg/dj.svg +0 -13
  50. package/dist/assets/flags/svg/dk.svg +0 -5
  51. package/dist/assets/flags/svg/dm.svg +0 -152
  52. package/dist/assets/flags/svg/do.svg +0 -121
  53. package/dist/assets/flags/svg/dz.svg +0 -5
  54. package/dist/assets/flags/svg/ec.svg +0 -138
  55. package/dist/assets/flags/svg/ee.svg +0 -5
  56. package/dist/assets/flags/svg/eg.svg +0 -38
  57. package/dist/assets/flags/svg/er.svg +0 -8
  58. package/dist/assets/flags/svg/es.svg +0 -544
  59. package/dist/assets/flags/svg/et.svg +0 -14
  60. package/dist/assets/flags/svg/fi.svg +0 -5
  61. package/dist/assets/flags/svg/fj.svg +0 -120
  62. package/dist/assets/flags/svg/fm.svg +0 -11
  63. package/dist/assets/flags/svg/fr.svg +0 -5
  64. package/dist/assets/flags/svg/ga.svg +0 -7
  65. package/dist/assets/flags/svg/gb.svg +0 -7
  66. package/dist/assets/flags/svg/gd.svg +0 -27
  67. package/dist/assets/flags/svg/ge.svg +0 -6
  68. package/dist/assets/flags/svg/gh.svg +0 -6
  69. package/dist/assets/flags/svg/gm.svg +0 -14
  70. package/dist/assets/flags/svg/gn.svg +0 -7
  71. package/dist/assets/flags/svg/gq.svg +0 -23
  72. package/dist/assets/flags/svg/gr.svg +0 -16
  73. package/dist/assets/flags/svg/gt.svg +0 -204
  74. package/dist/assets/flags/svg/gw.svg +0 -13
  75. package/dist/assets/flags/svg/gy.svg +0 -9
  76. package/dist/assets/flags/svg/hn.svg +0 -18
  77. package/dist/assets/flags/svg/hr.svg +0 -58
  78. package/dist/assets/flags/svg/ht.svg +0 -116
  79. package/dist/assets/flags/svg/hu.svg +0 -7
  80. package/dist/assets/flags/svg/id.svg +0 -4
  81. package/dist/assets/flags/svg/ie.svg +0 -7
  82. package/dist/assets/flags/svg/il.svg +0 -14
  83. package/dist/assets/flags/svg/in.svg +0 -25
  84. package/dist/assets/flags/svg/iq.svg +0 -10
  85. package/dist/assets/flags/svg/ir.svg +0 -219
  86. package/dist/assets/flags/svg/is.svg +0 -12
  87. package/dist/assets/flags/svg/it.svg +0 -7
  88. package/dist/assets/flags/svg/jm.svg +0 -8
  89. package/dist/assets/flags/svg/jo.svg +0 -16
  90. package/dist/assets/flags/svg/jp.svg +0 -11
  91. package/dist/assets/flags/svg/ke.svg +0 -23
  92. package/dist/assets/flags/svg/kg.svg +0 -4
  93. package/dist/assets/flags/svg/kh.svg +0 -61
  94. package/dist/assets/flags/svg/ki.svg +0 -36
  95. package/dist/assets/flags/svg/km.svg +0 -16
  96. package/dist/assets/flags/svg/kn.svg +0 -14
  97. package/dist/assets/flags/svg/kp.svg +0 -15
  98. package/dist/assets/flags/svg/kr.svg +0 -24
  99. package/dist/assets/flags/svg/kw.svg +0 -13
  100. package/dist/assets/flags/svg/kz.svg +0 -36
  101. package/dist/assets/flags/svg/la.svg +0 -12
  102. package/dist/assets/flags/svg/lb.svg +0 -15
  103. package/dist/assets/flags/svg/lc.svg +0 -8
  104. package/dist/assets/flags/svg/li.svg +0 -43
  105. package/dist/assets/flags/svg/lk.svg +0 -22
  106. package/dist/assets/flags/svg/lr.svg +0 -14
  107. package/dist/assets/flags/svg/ls.svg +0 -8
  108. package/dist/assets/flags/svg/lt.svg +0 -7
  109. package/dist/assets/flags/svg/lu.svg +0 -5
  110. package/dist/assets/flags/svg/lv.svg +0 -6
  111. package/dist/assets/flags/svg/ly.svg +0 -13
  112. package/dist/assets/flags/svg/ma.svg +0 -4
  113. package/dist/assets/flags/svg/mc.svg +0 -6
  114. package/dist/assets/flags/svg/md.svg +0 -70
  115. package/dist/assets/flags/svg/me.svg +0 -116
  116. package/dist/assets/flags/svg/mg.svg +0 -7
  117. package/dist/assets/flags/svg/mh.svg +0 -7
  118. package/dist/assets/flags/svg/mk.svg +0 -5
  119. package/dist/assets/flags/svg/ml.svg +0 -7
  120. package/dist/assets/flags/svg/mm.svg +0 -12
  121. package/dist/assets/flags/svg/mn.svg +0 -14
  122. package/dist/assets/flags/svg/mr.svg +0 -6
  123. package/dist/assets/flags/svg/mt.svg +0 -58
  124. package/dist/assets/flags/svg/mu.svg +0 -8
  125. package/dist/assets/flags/svg/mv.svg +0 -6
  126. package/dist/assets/flags/svg/mw.svg +0 -10
  127. package/dist/assets/flags/svg/mx.svg +0 -382
  128. package/dist/assets/flags/svg/my.svg +0 -26
  129. package/dist/assets/flags/svg/mz.svg +0 -21
  130. package/dist/assets/flags/svg/na.svg +0 -16
  131. package/dist/assets/flags/svg/ne.svg +0 -6
  132. package/dist/assets/flags/svg/ng.svg +0 -6
  133. package/dist/assets/flags/svg/ni.svg +0 -129
  134. package/dist/assets/flags/svg/nl.svg +0 -5
  135. package/dist/assets/flags/svg/no.svg +0 -7
  136. package/dist/assets/flags/svg/np.svg +0 -13
  137. package/dist/assets/flags/svg/nr.svg +0 -12
  138. package/dist/assets/flags/svg/nz.svg +0 -36
  139. package/dist/assets/flags/svg/om.svg +0 -115
  140. package/dist/assets/flags/svg/pa.svg +0 -14
  141. package/dist/assets/flags/svg/pe.svg +0 -4
  142. package/dist/assets/flags/svg/pg.svg +0 -9
  143. package/dist/assets/flags/svg/ph.svg +0 -6
  144. package/dist/assets/flags/svg/pk.svg +0 -15
  145. package/dist/assets/flags/svg/pl.svg +0 -6
  146. package/dist/assets/flags/svg/ps.svg +0 -6
  147. package/dist/assets/flags/svg/pt.svg +0 -57
  148. package/dist/assets/flags/svg/pw.svg +0 -11
  149. package/dist/assets/flags/svg/py.svg +0 -157
  150. package/dist/assets/flags/svg/qa.svg +0 -4
  151. package/dist/assets/flags/svg/ro.svg +0 -7
  152. package/dist/assets/flags/svg/rs.svg +0 -292
  153. package/dist/assets/flags/svg/ru.svg +0 -5
  154. package/dist/assets/flags/svg/rw.svg +0 -13
  155. package/dist/assets/flags/svg/sa.svg +0 -25
  156. package/dist/assets/flags/svg/sb.svg +0 -13
  157. package/dist/assets/flags/svg/sc.svg +0 -7
  158. package/dist/assets/flags/svg/sd.svg +0 -13
  159. package/dist/assets/flags/svg/se.svg +0 -4
  160. package/dist/assets/flags/svg/sg.svg +0 -13
  161. package/dist/assets/flags/svg/si.svg +0 -18
  162. package/dist/assets/flags/svg/sk.svg +0 -9
  163. package/dist/assets/flags/svg/sl.svg +0 -7
  164. package/dist/assets/flags/svg/sm.svg +0 -75
  165. package/dist/assets/flags/svg/sn.svg +0 -8
  166. package/dist/assets/flags/svg/so.svg +0 -11
  167. package/dist/assets/flags/svg/sr.svg +0 -6
  168. package/dist/assets/flags/svg/ss.svg +0 -8
  169. package/dist/assets/flags/svg/st.svg +0 -16
  170. package/dist/assets/flags/svg/sv.svg +0 -593
  171. package/dist/assets/flags/svg/sy.svg +0 -6
  172. package/dist/assets/flags/svg/sz.svg +0 -34
  173. package/dist/assets/flags/svg/td.svg +0 -7
  174. package/dist/assets/flags/svg/tg.svg +0 -14
  175. package/dist/assets/flags/svg/th.svg +0 -7
  176. package/dist/assets/flags/svg/tj.svg +0 -22
  177. package/dist/assets/flags/svg/tl.svg +0 -13
  178. package/dist/assets/flags/svg/tm.svg +0 -204
  179. package/dist/assets/flags/svg/tn.svg +0 -4
  180. package/dist/assets/flags/svg/to.svg +0 -10
  181. package/dist/assets/flags/svg/tr.svg +0 -8
  182. package/dist/assets/flags/svg/tt.svg +0 -5
  183. package/dist/assets/flags/svg/tv.svg +0 -9
  184. package/dist/assets/flags/svg/tw.svg +0 -34
  185. package/dist/assets/flags/svg/tz.svg +0 -13
  186. package/dist/assets/flags/svg/ua.svg +0 -6
  187. package/dist/assets/flags/svg/ug.svg +0 -30
  188. package/dist/assets/flags/svg/us.svg +0 -9
  189. package/dist/assets/flags/svg/uy.svg +0 -28
  190. package/dist/assets/flags/svg/uz.svg +0 -30
  191. package/dist/assets/flags/svg/va.svg +0 -190
  192. package/dist/assets/flags/svg/vc.svg +0 -8
  193. package/dist/assets/flags/svg/ve.svg +0 -26
  194. package/dist/assets/flags/svg/vn.svg +0 -11
  195. package/dist/assets/flags/svg/vu.svg +0 -21
  196. package/dist/assets/flags/svg/ws.svg +0 -7
  197. package/dist/assets/flags/svg/xk.svg +0 -5
  198. package/dist/assets/flags/svg/xn.svg +0 -6
  199. package/dist/assets/flags/svg/ye.svg +0 -7
  200. package/dist/assets/flags/svg/za.svg +0 -17
  201. package/dist/assets/flags/svg/zm.svg +0 -27
  202. package/dist/assets/flags/svg/zw.svg +0 -21
  203. package/dist/data/languages/index.html +0 -86
  204. package/dist/docs/api-worker-plan/index.html +0 -439
  205. package/dist/docs/cities/index.html +0 -193
  206. package/dist/docs/continents-currencies/index.html +0 -306
  207. package/dist/docs/countries/index.html +0 -274
  208. package/dist/docs/country-maps/index.html +0 -262
  209. package/dist/docs/flags/index.html +0 -300
  210. package/dist/docs/geography/index.html +0 -454
  211. package/dist/docs/languages/index.html +0 -304
  212. package/dist/docs/phone-codes/index.html +0 -152
  213. package/dist/docs/states/index.html +0 -334
  214. package/dist/docs/world-map/index.html +0 -345
  215. package/dist/examples/vue-app/index.html +0 -208
  216. package/dist/index.html +0 -784
  217. package/dist/robots.txt +0 -2
  218. package/dist/style/app.css +0 -1
package/dist/docs/flags/index.html DELETED
@@ -1,300 +0,0 @@
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>Flags</title>
7
- <link href="/style/app.css" rel="stylesheet" type="text/css">
8
- </head>
9
- <body class="page--flags">
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="flags" tabindex="-1">Flags</h1>
19
- <p><a href="../README.md">← Back to README</a></p>
20
- <p><code>arev</code> provides complete flag metadata for ~195 countries:</p>
21
- <ul>
22
- <li><strong>Self-hosted SVG and PNG image URLs</strong> served from <code>arevdata.com</code></li>
23
- <li><strong>Dominant colours</strong> on each flag (up to 4, most prominent first)</li>
24
- <li><strong>Visually similar flags</strong> — groups of flags that look alike and would be confused by players in a “guess the flag” game</li>
25
- </ul>
26
- <h2 id="import" tabindex="-1">Import</h2>
27
- <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span>
28
- flagData<span class="token punctuation">,</span>
29
- getFlagData<span class="token punctuation">,</span>
30
- getFlagsByColor<span class="token punctuation">,</span>
31
- getSimilarFlags<span class="token punctuation">,</span>
32
- getFlagSvgUrl<span class="token punctuation">,</span>
33
- getFlagPngUrl<span class="token punctuation">,</span>
34
- getCountryMapSvgUrl<span class="token punctuation">,</span>
35
- getCountryFlag<span class="token punctuation">,</span> <span class="token comment">// emoji flag — from countries module</span>
36
- <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
37
- <span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> FlagInfo<span class="token punctuation">,</span> FlagColor <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
38
- </code></pre>
39
- <h2 id="data-shape" tabindex="-1">Data shape</h2>
40
- <pre class="language-ts"><code class="language-ts"><span class="token keyword">interface</span> <span class="token class-name">FlagInfo</span> <span class="token punctuation">{</span>
41
- alpha2<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// "NL"</span>
42
- svgUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/svg/nl.svg"</span>
43
- pngUrl<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/png/w320/nl.png"</span>
44
- colors<span class="token operator">:</span> FlagColor<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// ["red", "white", "blue"] — most dominant first</span>
45
- similar<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">// ["LU", "FR", "RU"] — alpha-2 codes of similar-looking flags</span>
46
- <span class="token punctuation">}</span>
47
-
48
- <span class="token keyword">type</span> <span class="token class-name">FlagColor</span> <span class="token operator">=</span>
49
- <span class="token operator">|</span> <span class="token string">"red"</span> <span class="token operator">|</span> <span class="token string">"dark-red"</span> <span class="token operator">|</span> <span class="token string">"white"</span> <span class="token operator">|</span> <span class="token string">"blue"</span> <span class="token operator">|</span> <span class="token string">"green"</span> <span class="token operator">|</span> <span class="token string">"yellow"</span>
50
- <span class="token operator">|</span> <span class="token string">"orange"</span> <span class="token operator">|</span> <span class="token string">"black"</span> <span class="token operator">|</span> <span class="token string">"gold"</span> <span class="token operator">|</span> <span class="token string">"light-blue"</span> <span class="token operator">|</span> <span class="token string">"dark-blue"</span>
51
- <span class="token operator">|</span> <span class="token string">"dark-green"</span> <span class="token operator">|</span> <span class="token string">"purple"</span> <span class="token operator">|</span> <span class="token string">"brown"</span><span class="token punctuation">;</span>
52
- </code></pre>
53
- <h2 id="flag-image-urls" tabindex="-1">Flag image URLs</h2>
54
- <p>Flag images are served from <code>arevdata.com</code>. SVG files are the source of truth in the repo, and the PNG sizes are generated from those SVGs during the asset build pipeline.</p>
55
- <h3 id="svg-flags" tabindex="-1">SVG flags</h3>
56
- <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getFlagSvgUrl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
57
-
58
- <span class="token function">getFlagSvgUrl</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/svg/nl.svg"</span>
59
- <span class="token function">getFlagSvgUrl</span><span class="token punctuation">(</span><span class="token string">"US"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/svg/us.svg"</span>
60
- </code></pre>
61
- <p>Use in HTML:</p>
62
- <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://arevdata.com/flags/svg/nl.svg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>40<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Netherlands flag<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
63
- </code></pre>
64
- <p>Use in React:</p>
65
- <pre class="language-tsx"><code class="language-tsx"><span class="token keyword">import</span> <span class="token punctuation">{</span> getFlagSvgUrl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
66
-
67
- <span class="token keyword">function</span> <span class="token function">Flag</span><span class="token punctuation">(</span><span class="token punctuation">{</span> countryCode <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> countryCode<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>
68
- <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">getFlagSvgUrl</span><span class="token punctuation">(</span>countryCode<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">width</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">40</span><span class="token punctuation">}</span></span> <span class="token attr-name">alt</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>countryCode<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> flag</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
69
- <span class="token punctuation">}</span>
70
- </code></pre>
71
- <h3 id="png-flags-(multiple-sizes)" tabindex="-1">PNG flags (multiple sizes)</h3>
72
- <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getFlagPngUrl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
73
-
74
- <span class="token function">getFlagPngUrl</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/png/w320/nl.png" (default 320px wide)</span>
75
- <span class="token function">getFlagPngUrl</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">,</span> <span class="token number">40</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/png/w40/nl.png"</span>
76
- <span class="token function">getFlagPngUrl</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">,</span> <span class="token number">160</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/png/w160/nl.png"</span>
77
- <span class="token function">getFlagPngUrl</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">,</span> <span class="token number">640</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "https://arevdata.com/flags/png/w640/nl.png"</span>
78
- </code></pre>
79
- <p>Available widths: <code>40 | 80 | 160 | 320 | 640 | 1280 | 2560</code></p>
80
- <h3 id="country-outline-svg-(map-shape)" tabindex="-1">Country outline SVG (map shape)</h3>
81
- <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountryMapSvgUrl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
82
-
83
- <span class="token function">getCountryMapSvgUrl</span><span class="token punctuation">(</span><span class="token string">"NLD"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Wikimedia Commons outline map URL</span>
84
- </code></pre>
85
- <blockquote>
86
- <p><strong>Note:</strong> Country outline SVGs are not bundled. This returns an external Wikimedia Commons URL. For embedded maps, consider <a href="https://www.naturalearthdata.com/">natural earth data</a> or GeoJSON libraries.</p>
87
- </blockquote>
88
- <h2 id="similar-flags" tabindex="-1">Similar flags</h2>
89
- <p>The <code>similar</code> field on each <code>FlagInfo</code> entry lists alpha-2 codes of countries whose flags would be visually confusing. This is designed for <strong>“guess the flag” games</strong> where you need to generate plausible wrong answers.</p>
90
- <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getSimilarFlags<span class="token punctuation">,</span> getFlagData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
91
-
92
- <span class="token comment">// Get similar flags for the Netherlands</span>
93
- <span class="token keyword">const</span> similar <span class="token operator">=</span> <span class="token function">getSimilarFlags</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
94
- similar<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>f <span class="token operator">=></span> f<span class="token punctuation">.</span>alpha2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["LU", "FR", "RU", "YU", "HR"]</span>
95
-
96
- <span class="token comment">// Or access directly from the entry</span>
97
- <span class="token keyword">const</span> nl <span class="token operator">=</span> <span class="token function">getFlagData</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
98
- nl<span class="token operator">?.</span>similar<span class="token punctuation">;</span> <span class="token comment">// ["LU", "FR", "RU", ...]</span>
99
- </code></pre>
100
- <h3 id="notable-similar-flag-groups" tabindex="-1">Notable similar-flag groups</h3>
101
- <table>
102
- <thead>
103
- <tr>
104
- <th>Country</th>
105
- <th>Similar flags</th>
106
- <th>Reason</th>
107
- </tr>
108
- </thead>
109
- <tbody>
110
- <tr>
111
- <td>🇳🇱 Netherlands</td>
112
- <td>🇱🇺 Luxembourg, 🇷🇺 Russia, 🇫🇷 France, 🇭🇷 Croatia</td>
113
- <td>Red/white/blue horizontal or vertical tricolour</td>
114
- </tr>
115
- <tr>
116
- <td>🇩🇰 Denmark</td>
117
- <td>🇳🇴 Norway, 🇸🇪 Sweden, 🇫🇮 Finland, 🇮🇸 Iceland</td>
118
- <td>Nordic cross design</td>
119
- </tr>
120
- <tr>
121
- <td>🇦🇺 Australia</td>
122
- <td>🇳🇿 New Zealand, 🇬🇧 United Kingdom, 🇫🇯 Fiji</td>
123
- <td>Union Jack in canton</td>
124
- </tr>
125
- <tr>
126
- <td>🇩🇪 Germany</td>
127
- <td>🇧🇪 Belgium, 🇧🇴 Bolivia</td>
128
- <td>Black/red/gold horizontal tricolour</td>
129
- </tr>
130
- <tr>
131
- <td>🇮🇹 Italy</td>
132
- <td>🇮🇪 Ireland, 🇨🇮 Ivory Coast, 🇲🇽 Mexico</td>
133
- <td>Green/white/red vertical tricolour</td>
134
- </tr>
135
- <tr>
136
- <td>🇹🇷 Turkey</td>
137
- <td>🇹🇳 Tunisia, 🇵🇰 Pakistan, 🇦🇿 Azerbaijan, 🇲🇾 Malaysia, 🇩🇿 Algeria</td>
138
- <td>Crescent and star</td>
139
- </tr>
140
- <tr>
141
- <td>🇪🇹 Ethiopia</td>
142
- <td>🇬🇳 Guinea, 🇲🇱 Mali, 🇨🇲 Cameroon, 🇸🇳 Senegal</td>
143
- <td>Pan-African colours</td>
144
- </tr>
145
- <tr>
146
- <td>🇮🇩 Indonesia</td>
147
- <td>🇲🇨 Monaco, 🇵🇱 Poland, 🇸🇬 Singapore</td>
148
- <td>Red and white</td>
149
- </tr>
150
- </tbody>
151
- </table>
152
- <h2 id="flag-colours" tabindex="-1">Flag colours</h2>
153
- <p>Use flag colours to group or filter countries:</p>
154
- <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getFlagsByColor<span class="token punctuation">,</span> flagData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
155
-
156
- <span class="token comment">// All flags with green</span>
157
- <span class="token keyword">const</span> greenFlags <span class="token operator">=</span> <span class="token function">getFlagsByColor</span><span class="token punctuation">(</span><span class="token string">"green"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
158
-
159
- <span class="token comment">// All flags with red or orange</span>
160
- <span class="token keyword">const</span> redOrOrangeFlags <span class="token operator">=</span> <span class="token function">getFlagsByColor</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"red"</span><span class="token punctuation">,</span> <span class="token string">"orange"</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
161
-
162
- <span class="token comment">// Flags that are only red and white</span>
163
- <span class="token keyword">const</span> redWhiteOnly <span class="token operator">=</span> flagData<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>
164
- <span class="token punctuation">(</span>f<span class="token punctuation">)</span> <span class="token operator">=></span> f<span class="token punctuation">.</span>colors<span class="token punctuation">.</span><span class="token function">every</span><span class="token punctuation">(</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token operator">=></span> c <span class="token operator">===</span> <span class="token string">"red"</span> <span class="token operator">||</span> c <span class="token operator">===</span> <span class="token string">"white"</span><span class="token punctuation">)</span>
165
- <span class="token punctuation">)</span><span class="token punctuation">;</span>
166
- </code></pre>
167
- <h2 id="building-a-%E2%80%9Cguess-the-flag%E2%80%9D-game" tabindex="-1">Building a “Guess the Flag” game</h2>
168
- <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> flagData<span class="token punctuation">,</span> getSimilarFlags<span class="token punctuation">,</span> getFlagSvgUrl<span class="token punctuation">,</span> getCountryByCode <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
169
-
170
- <span class="token keyword">function</span> <span class="token function">getQuizQuestion</span><span class="token punctuation">(</span>targetAlpha2<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
171
- <span class="token keyword">const</span> target <span class="token operator">=</span> <span class="token function">getCountryByCode</span><span class="token punctuation">(</span>targetAlpha2<span class="token punctuation">)</span><span class="token punctuation">;</span>
172
- <span class="token keyword">const</span> wrongOptions <span class="token operator">=</span> <span class="token function">getSimilarFlags</span><span class="token punctuation">(</span>targetAlpha2<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
173
-
174
- <span class="token keyword">return</span> <span class="token punctuation">{</span>
175
- question<span class="token operator">:</span> <span class="token string">"Which country does this flag belong to?"</span><span class="token punctuation">,</span>
176
- flagUrl<span class="token operator">:</span> <span class="token function">getFlagSvgUrl</span><span class="token punctuation">(</span>targetAlpha2<span class="token punctuation">)</span><span class="token punctuation">,</span>
177
- correctAnswer<span class="token operator">:</span> target<span class="token operator">?.</span>name<span class="token punctuation">,</span>
178
- wrongAnswers<span class="token operator">:</span> wrongOptions<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>f<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">getCountryByCode</span><span class="token punctuation">(</span>f<span class="token punctuation">.</span>alpha2<span class="token punctuation">)</span><span class="token operator">?.</span>name<span class="token punctuation">)</span><span class="token punctuation">,</span>
179
- <span class="token punctuation">}</span><span class="token punctuation">;</span>
180
- <span class="token punctuation">}</span>
181
- </code></pre>
182
- <h2 id="full-flag-data-array" tabindex="-1">Full flag data array</h2>
183
- <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> flagData <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
184
-
185
- <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>flagData<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ~195</span>
186
-
187
- <span class="token comment">// Find all flags with a gold/yellow star-associated colour</span>
188
- <span class="token keyword">const</span> goldFlags <span class="token operator">=</span> flagData<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>f <span class="token operator">=></span> f<span class="token punctuation">.</span>colors<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">"gold"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
189
- </code></pre>
190
- <h2 id="related" tabindex="-1">Related</h2>
191
- <ul>
192
- <li><a href="countries.md">Countries</a> — <code>getCountryFlag()</code> returns the emoji flag</li>
193
- <li><a href="geography.md">Geography</a> — combine with country geography for location-aware flag games</li>
194
- </ul>
195
-
196
- </div>
197
- </div>
198
- </section>
199
- </main>
200
- </div>
201
- <footer class="footer">
202
- <div class="footer__container">
203
- <div class="footer__controls">
204
- <div class="footer__control"><span class="footer__label">Theme</span>
205
- <button class="color-mode-toggle" type="button" data-color-mode-toggle aria-label="Toggle color mode"><span class="color-mode-toggle__value"></span></button>
206
- </div>
207
- </div>
208
- </div>
209
- </footer>
210
- </body>
211
- <script>const isDarkMode = window.matchMedia("prefers-color-scheme: dark").matches;
212
- let localMode = isDarkMode ? "dark" : "light";
213
-
214
- const updateColorModeToggle = () => {
215
- const toggle = document.querySelector("[data-color-mode-toggle]");
216
- if (!toggle) return;
217
-
218
- const value = toggle.querySelector(".color-mode-toggle__value");
219
- if (!value) return;
220
-
221
- value.textContent = localMode === "dark" ? "Dark" : "Light";
222
- };
223
-
224
- const initColorMode = () => {
225
- localMode = localStorage.getItem("colorMode");
226
- setCurrentMode(localMode ? localMode : isDarkMode ? "dark" : "light");
227
- };
228
-
229
- const setCurrentMode = (mode) => {
230
- localMode = mode;
231
- localStorage.setItem("colorMode", localMode);
232
- document.body.setAttribute("color-mode", mode);
233
- updateColorModeToggle();
234
- };
235
-
236
- const switchMode = () => {
237
- if (localMode == "dark") setCurrentMode("light");
238
- else setCurrentMode("dark");
239
- };
240
-
241
- const bindColorModeToggle = () => {
242
- const toggle = document.querySelector("[data-color-mode-toggle]");
243
- if (!toggle) return;
244
-
245
- toggle.addEventListener("click", () => {
246
- switchMode();
247
- });
248
- };
249
-
250
- initColorMode();
251
- bindColorModeToggle();
252
- const tables = document.querySelectorAll("table");
253
- let initTableWrap = false;
254
-
255
- const wrapTables = (tables) => {
256
- tables &&
257
- tables.forEach((table) => {
258
- if (table.getBoundingClientRect().width > window.screen.width) {
259
- table.classList.add("wrap");
260
- initTableWrap = true;
261
- }
262
- });
263
- };
264
-
265
- const labelTables = (tables) => {
266
- tables &&
267
- tables.forEach((table) => {
268
- // Set all headers as attributes to td's
269
- const headerElements = table.querySelectorAll("thead th");
270
- const bodyElementRows = table.querySelectorAll("tbody tr");
271
- const heads = [];
272
-
273
- if (headerElements && bodyElementRows) {
274
- // Get TH heads
275
- headerElements.forEach((th) => {
276
- heads.push(th.textContent);
277
- });
278
- }
279
-
280
- if (heads.length) {
281
- bodyElementRows.forEach((tr) => {
282
- const tds = tr.querySelectorAll("td");
283
-
284
- tds.forEach((td, i) => {
285
- td.setAttribute("data-label", heads[i]);
286
- });
287
- });
288
- }
289
- });
290
- };
291
-
292
- wrapTables(tables);
293
- labelTables(tables);
294
-
295
- window.addEventListener("resize", () => {
296
- if (!initTableWrap) wrapTables(tables);
297
- });
298
-
299
- </script>
300
- </html>