30:[] 2e:{"title":"CSS flags","cells":[{"id":0,"value":"# CSS flags\n\n[This technique](https://github.com/lafeber/world-flags-sprite) lets you display flags via css. \n\nI have found country codes for which we don't have a css entry. Consider including the *CodeToName* symbol (object) in your project. It contains only country codes for which we have css entries.\n\nThe way it works is by setting a [background image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) with all the flags in an html element and then using the [background-position](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) property to display only the flag we want. ","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"html`\n\n

\n ${[...chunks]}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"chunks = [...listCodeName].map(\n ([code, name]) =>\n html`

${code}

`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"gistCodesUrl = \"https://gist.githubusercontent.com/ssskip/5a94bfcd2835bf1dea52/raw/3b2e5355eb49336f0c6bc0060c05d927c2d1e004/ISO3166-1.alpha2.json\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"codeToName = {\n const payload = await d3.json(gistCodesUrl);\n const result = {};\n Object.keys(payload).forEach((code) => {\n const lc = code.toLowerCase();\n const inNoFlag = noFlag.includes(lc);\n if (!inNoFlag) result[code.toLowerCase()] = payload[code];\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"listCodeName = {\n const list = Object.keys(codeToName).map((code) => [code, codeToName[code]]);\n const fixed = [...list, [\"gb\", \"Great Britain\"], [\"ru\", \"Russia\"]];\n return fixed;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"// We don't have css entries for this codes\nnoFlag = \"ax bv io cx cc fk gf tf hm yt nu nf mp pn bl sh mf pm gs sj tk um wf\".split(\n \" \"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"function countryToHtmlFlag(c, returnHTML = true) {\n const found = listCodeName.filter(\n (e) => c.toLowerCase() === e[1].toLowerCase()\n );\n if (found.length === 0) return false;\n\n const r = `

`;\n const result = returnHTML ? html`${r}` : r;\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"countryToHtmlFlag(\"United States\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`We had issues with England. Some places use Great Britain other use United Kingdom. Let's test the fix.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"countryToHtmlFlag(\"Great Britain\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"countryToHtmlFlag(\"Russia\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"listCodeName.map((e) => e).filter(([code, name]) => name.match(/Russia/))","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"flagSize = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"cssUrl = `https://github.com/downloads/lafeber/world-flags-sprite/flags${flagSize}.css`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"stylesheet = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}