Skip to content

Commit

Permalink
Add inline country flags
Browse files Browse the repository at this point in the history
  • Loading branch information
David Reed committed Dec 27, 2023
1 parent 28b1f2b commit 7bffd22
Show file tree
Hide file tree
Showing 8 changed files with 125 additions and 118 deletions.
6 changes: 4 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ PayTransparency.work is built by <a href="https://ktema.org">David Reed</a> usin

</p>
<p>
State map icons are from
United States map icons are from
<a href="https://github.com/coryetzkorn/state-svg-defs">coryetzkorn</a> and originally derive from
<a href="https://github.com/propublica/stateface">ProPublica's StateFace</a>.
<a href="https://github.com/propublica/stateface">ProPublica's StateFace</a>. Canada map icons are
derived from <a href="https://commons.wikimedia.org/wiki/File:Canada_blank_map.svg">Wikimedia's Canada
map</a>.
</p>
<p>
This site is <a href="https://github.com/davidmreed/paytransparency.work">open source</a> and
Expand Down
220 changes: 112 additions & 108 deletions src/lib/StateIcon.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,112 +6,116 @@
const country = locale.country;
</script>

<!-- We use this repetitive logic because our SVG-inlining package will not process dynamic SVG paths -->
<!-- This ensures that paths are static at build time. -->
{#if country == 'United States'}
{#if stateCode == 'AK'}
<svg data-inline-src="AK.svg" />
{:else if stateCode == 'AL'}
<svg data-inline-src="AL.svg" />
{:else if stateCode == 'AR'}
<svg data-inline-src="AR.svg" />
{:else if stateCode == 'AZ'}
<svg data-inline-src="AZ.svg" />
{:else if stateCode == 'CA'}
<svg data-inline-src="CA.svg" />
{:else if stateCode == 'CO'}
<svg data-inline-src="CO.svg" />
{:else if stateCode == 'CT'}
<svg data-inline-src="CT.svg" />
{:else if stateCode == 'DC'}
<svg data-inline-src="DC.svg" />
{:else if stateCode == 'DE'}
<svg data-inline-src="DE.svg" />
{:else if stateCode == 'FL'}
<svg data-inline-src="FL.svg" />
{:else if stateCode == 'GA'}
<svg data-inline-src="GA.svg" />
{:else if stateCode == 'HI'}
<svg data-inline-src="HI.svg" />
{:else if stateCode == 'IA'}
<svg data-inline-src="IA.svg" />
{:else if stateCode == 'ID'}
<svg data-inline-src="ID.svg" />
{:else if stateCode == 'IL'}
<svg data-inline-src="IN.svg" />
{:else if stateCode == 'KS'}
<svg data-inline-src="KS.svg" />
{:else if stateCode == 'KY'}
<svg data-inline-src="KY.svg" />
{:else if stateCode == 'LA'}
<svg data-inline-src="LA.svg" />
{:else if stateCode == 'MA'}
<svg data-inline-src="MA.svg" />
{:else if stateCode == 'MD'}
<svg data-inline-src="MD.svg" />
{:else if stateCode == 'ME'}
<svg data-inline-src="ME.svg" />
{:else if stateCode == 'MI'}
<svg data-inline-src="MI.svg" />
{:else if stateCode == 'MN'}
<svg data-inline-src="MN.svg" />
{:else if stateCode == 'MO'}
<svg data-inline-src="MO.svg" />
{:else if stateCode == 'MS'}
<svg data-inline-src="MS.svg" />
{:else if stateCode == 'MT'}
<svg data-inline-src="MT.svg" />
{:else if stateCode == 'NC'}
<svg data-inline-src="NC.svg" />
{:else if stateCode == 'ND'}
<svg data-inline-src="ND.svg" />
{:else if stateCode == 'NE'}
<svg data-inline-src="NE.svg" />
{:else if stateCode == 'NH'}
<svg data-inline-src="NH.svg" />
{:else if stateCode == 'NJ'}
<svg data-inline-src="NJ.svg" />
{:else if stateCode == 'NM'}
<svg data-inline-src="NM.svg" />
{:else if stateCode == 'NV'}
<svg data-inline-src="NV.svg" />
{:else if stateCode == 'NY'}
<svg data-inline-src="NY.svg" />
{:else if stateCode == 'OH'}
<svg data-inline-src="OH.svg" />
{:else if stateCode == 'OK'}
<svg data-inline-src="OK.svg" />
{:else if stateCode == 'OR'}
<svg data-inline-src="OR.svg" />
{:else if stateCode == 'PA'}
<svg data-inline-src="PA.svg" />
{:else if stateCode == 'RI'}
<svg data-inline-src="RI.svg" />
{:else if stateCode == 'SC'}
<svg data-inline-src="SC.svg" />
{:else if stateCode == 'SD'}
<svg data-inline-src="SD.svg" />
{:else if stateCode == 'TN'}
<svg data-inline-src="TN.svg" />
{:else if stateCode == 'TX'}
<svg data-inline-src="TX.svg" />
{:else if stateCode == 'UT'}
<svg data-inline-src="UT.svg" />
{:else if stateCode == 'VA'}
<svg data-inline-src="VA.svg" />
{:else if stateCode == 'VT'}
<svg data-inline-src="VT.svg" />
{:else if stateCode == 'WA'}
<svg data-inline-src="WA.svg" />
{:else if stateCode == 'WI'}
<svg data-inline-src="WI.svg" />
{:else if stateCode == 'WV'}
<svg data-inline-src="WV.svg" />
{:else if stateCode == 'WY'}
<svg data-inline-src="WY.svg" />
<span style="text-decoration: none; display: inline-block;">
<!-- We use this repetitive logic because our SVG-inlining package will not process dynamic SVG paths -->
<!-- This ensures that paths are static at build time. -->
{#if country == 'United States'}
<span style="font-size: 28px; position:relative; left: 15px;">🇺🇸</span>
{#if stateCode == 'AK'}
<svg data-inline-src="AK.svg" />
{:else if stateCode == 'AL'}
<svg data-inline-src="AL.svg" />
{:else if stateCode == 'AR'}
<svg data-inline-src="AR.svg" />
{:else if stateCode == 'AZ'}
<svg data-inline-src="AZ.svg" />
{:else if stateCode == 'CA'}
<svg data-inline-src="CA.svg" />
{:else if stateCode == 'CO'}
<svg data-inline-src="CO.svg" />
{:else if stateCode == 'CT'}
<svg data-inline-src="CT.svg" />
{:else if stateCode == 'DC'}
<svg data-inline-src="DC.svg" />
{:else if stateCode == 'DE'}
<svg data-inline-src="DE.svg" />
{:else if stateCode == 'FL'}
<svg data-inline-src="FL.svg" />
{:else if stateCode == 'GA'}
<svg data-inline-src="GA.svg" />
{:else if stateCode == 'HI'}
<svg data-inline-src="HI.svg" />
{:else if stateCode == 'IA'}
<svg data-inline-src="IA.svg" />
{:else if stateCode == 'ID'}
<svg data-inline-src="ID.svg" />
{:else if stateCode == 'IL'}
<svg data-inline-src="IN.svg" />
{:else if stateCode == 'KS'}
<svg data-inline-src="KS.svg" />
{:else if stateCode == 'KY'}
<svg data-inline-src="KY.svg" />
{:else if stateCode == 'LA'}
<svg data-inline-src="LA.svg" />
{:else if stateCode == 'MA'}
<svg data-inline-src="MA.svg" />
{:else if stateCode == 'MD'}
<svg data-inline-src="MD.svg" />
{:else if stateCode == 'ME'}
<svg data-inline-src="ME.svg" />
{:else if stateCode == 'MI'}
<svg data-inline-src="MI.svg" />
{:else if stateCode == 'MN'}
<svg data-inline-src="MN.svg" />
{:else if stateCode == 'MO'}
<svg data-inline-src="MO.svg" />
{:else if stateCode == 'MS'}
<svg data-inline-src="MS.svg" />
{:else if stateCode == 'MT'}
<svg data-inline-src="MT.svg" />
{:else if stateCode == 'NC'}
<svg data-inline-src="NC.svg" />
{:else if stateCode == 'ND'}
<svg data-inline-src="ND.svg" />
{:else if stateCode == 'NE'}
<svg data-inline-src="NE.svg" />
{:else if stateCode == 'NH'}
<svg data-inline-src="NH.svg" />
{:else if stateCode == 'NJ'}
<svg data-inline-src="NJ.svg" />
{:else if stateCode == 'NM'}
<svg data-inline-src="NM.svg" />
{:else if stateCode == 'NV'}
<svg data-inline-src="NV.svg" />
{:else if stateCode == 'NY'}
<svg data-inline-src="NY.svg" />
{:else if stateCode == 'OH'}
<svg data-inline-src="OH.svg" />
{:else if stateCode == 'OK'}
<svg data-inline-src="OK.svg" />
{:else if stateCode == 'OR'}
<svg data-inline-src="OR.svg" />
{:else if stateCode == 'PA'}
<svg data-inline-src="PA.svg" />
{:else if stateCode == 'RI'}
<svg data-inline-src="RI.svg" />
{:else if stateCode == 'SC'}
<svg data-inline-src="SC.svg" />
{:else if stateCode == 'SD'}
<svg data-inline-src="SD.svg" />
{:else if stateCode == 'TN'}
<svg data-inline-src="TN.svg" />
{:else if stateCode == 'TX'}
<svg data-inline-src="TX.svg" />
{:else if stateCode == 'UT'}
<svg data-inline-src="UT.svg" />
{:else if stateCode == 'VA'}
<svg data-inline-src="VA.svg" />
{:else if stateCode == 'VT'}
<svg data-inline-src="VT.svg" />
{:else if stateCode == 'WA'}
<svg data-inline-src="WA.svg" />
{:else if stateCode == 'WI'}
<svg data-inline-src="WI.svg" />
{:else if stateCode == 'WV'}
<svg data-inline-src="WV.svg" />
{:else if stateCode == 'WY'}
<svg data-inline-src="WY.svg" />
{/if}
{:else if country == 'Canada'}
<span style="font-size: 28px; position:relative; left: 15px;">🇨🇦</span>
{#if stateCode == 'BC'}
<svg data-inline-src="CA-BC.svg" />
{/if}
{/if}
{:else if country == 'Canada'}
{#if stateCode == 'BC'}
<svg data-inline-src="CA-BC.svg" />
{/if}
{/if}
</span>
1 change: 1 addition & 0 deletions src/lib/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export class AllCanadaLocale implements AbstractLocale {
}

export class Locale implements AbstractLocale {
effectiveDate?: string;
country!: string;
state!: string;
stateCode!: string;
Expand Down
4 changes: 2 additions & 2 deletions src/routes/about/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
United States map icons are from
<a href="https://github.com/coryetzkorn/state-svg-defs">coryetzkorn</a> and originally derive from
<a href="https://github.com/propublica/stateface">ProPublica's StateFace</a>. Canada map icons are
derived from [Wikimedia's Canada
map](https://commons.wikimedia.org/wiki/File:Canada_blank_map.svg).
derived from
<a href="https://commons.wikimedia.org/wiki/File:Canada_blank_map.svg">Wikimedia's Canada map</a>.
</p>
<p>
<SiteName /> uses no cookies, tracking functionality, or ads. We don't have a privacy policy because
Expand Down
1 change: 0 additions & 1 deletion static/states/AK.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions static/states/CA-BC.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion static/states/CO.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 7bffd22

Please sign in to comment.