search

HatScripts / circle-flags

A collection of 400+ minimal circular SVG country, state and language flags
https://hatscripts.github.io/circle-flags
MIT License
928 stars 248 forks source link

Add a gallery page to visualize all available flags #5

Closed waldyrious closed 4 years ago

waldyrious commented 4 years ago

I've tested this using my fork, and it seems to work well. Here's how the page looks when rendered by Jekyll: https://waldyrious.github.io/circle-flags/all-flags.html

and here's how the markdown file is shown on GitHub: https://github.com/waldyrious/circle-flags/blob/gallery-page/all-flags.md

Happy to make any adjustments you deem necessary.

HatScripts commented 4 years ago

I love this. As you can see I mentioned this over on #4 (now below) where I was mainly rambling about my own take at a gallery page.

I like that it's built with Jekyll, and I like that all that's needed is a simple ctrl/cmd+f to find what you're looking for. I think we should link to the gallery from the README.md as well.

HatScripts commented 4 years ago

Comment moved from #4:

On the topic of unpushed local changes, I had also been working on a gallery-type page like your #5. Mine currently has an "ugly but functional" aesthetic about it, clearly needing more CSS. 2020-06-11 01 09 21 Also, at the time I wrote it I decided to build/generate parts of the html with python. Which included iterating the flags directory and appending the SVGs to the html (). The reason I used python is so that I could programmatically set the id of the each <a><svg>...</svg></a> to the flag file's base name, (the flag's alpha-2 code), and also parse each SVG to check which colors it uses, then add the corresponding color classes, e.g. <a id="pt"><svg></a> becomes <a id="pt" class="red yellow green white"><svg></a>. But I now realise I should probably separate these processes. Use Python to generate a flag_colors.json file and read that file in with JavaScript. Because I already have a country_codes.json that I'm using in my JS code to set the <a>'s title, e.g. <a id="pt"> becomes <a id="pt" title="Portugal"> and to search through when you type in the search bar.

waldyrious commented 4 years ago

Glad to hear you've been working on this! It shows that I'm aiming in the right direction :)

The reason I used python is so that I could programmatically set the id of the each <a><svg>...</svg></a> to the flag file's base name, (the flag's alpha-2 code), and also parse each SVG to check which colors it uses, then add the corresponding color classes, e.g. <a id="pt"><svg></a> becomes <a id="pt" class="red yellow green white"><svg></a>.

That's pretty ingenious! I do wonder, though, how useful that would be for country flags (as opposed to generic icons). I mean, when one needs to use the flag of a country, there usually isn't much of a choice about the colors you can pick. The approach does sound amazingly helpful for a more generic set of svg icons, though! I hope you're able to set it up in such a project :)

I think we should link to the gallery from the README.md as well.

Isn't that what I did already? Maybe I should make the link more prominent?

I like that it's built with Jekyll, and I like that all that's needed is a simple ctrl/cmd+f to find what you're looking for. I think we should link to the gallery from the README.md as well.

Yeah, often the simpler solutions tend to be more resilient and maintainable in the long run. 🙂 I particularly like that it degrades well to markdown rendering right on GitHub, without sacrificing the nicer layout in the website (I actually went through a few iterations until I found such a polyglot implementation for the gallery page).

I don't think it's an issue that the page isn't generated automatically, since this collection is already pretty comprehensive, so it won't be much trouble to update the gallery page manually when new flags are added. IMO it's worth the extended compatibility and simplicity.

waldyrious commented 4 years ago

One thing I wanted to ask is whether you'd want to split the list into national vs. subnational flags, languages, fictional entities, etc. I can see from the screenshot in your comment in #4 that you have something along these lines in mind already. I just started with a flat list because it was easier.

That said, it could make more sense to add the flat gallery as a start, matching the current flat structure of the flags/ diretory, and split it in a later PR, once you've integrated your local changes.

HatScripts commented 4 years ago

You're right, it was more of a proof of concept type thing. And there's a lot of flags. I wasn't just thinking of country flags. The repo is mischievously titled circle-flags, ultimately allowing for expansion to include virtually any type of flag, so long as it follows the correct design scheme and has the right color palette. This would include flags for states, provinces, territories, cities, towns, historical, fictional, and so on. So that's a lot of flags ultimately. Another idea was being able to filter flags by vexillological elements, or how many stripes they have and in what directions. A geeky homage to graphic/web design and vexillology. But with the added benefit of it being functional and practical.

I think we should link to the gallery from the README.md as well.

Isn't that what I did already? Maybe I should make the link more prominent?

Yeah sorry I missed it in the commits; I don't use GitHub that often.

HatScripts commented 4 years ago

But I love this PR, @waldyrious. Thank you again for your help revitalising the repo. 😄

waldyrious commented 4 years ago

The repo is mischievously titled circle-flags, ultimately allowing for expansion to include virtually any type of flag, so long as it follows the correct design scheme and has the right color palette.

Interesting... do you have these guidelines written down somewhere? It would be nice for potential contributors.

This would include flags for states, provinces, territories, cities, towns, historical, fictional, and so on. So that's a lot of flags ultimately. Another idea was being able to filter flags by vexillological elements, or how many stripes they have and in what directions. A geeky homage to graphic/web design and vexillology. But with the added benefit of it being functional and practical.

That sounds great! I know that some similar efforts have been put in place in FOTW (e.g. star: 5 points (yellow), lion (red)...) and in Wikimedia Commons (e.g. the hundreds of subcategories of Category:Flags by content and Category:Flags by color, including highly specific ones like this one).

But all of these are maintained manually; the automated approach for the colors that you describe above would be a much more scalable approach; and for shapes, we could leverage the proposal of keeping unoptimized versions of the files in the repo, ensuring that they use SVG shapes like <circle>, <rect>, and named <use> elements for more complex shapes. Of course, at some point a flag-specific DSL would probably be the only way to ensure automated extraction of all (or most) of this information, so a hybrid (manual+automatic) approach would be needed in practice. Anyway, I'm just daydreaming... I don't have the bandwidth to embark in such a complex endeavor, so please take my words just as encouragement for your vision! 😅

But I love this PR, @waldyrious. Thank you again for your help revitalising the repo. 😄

I was actually quite pleased that you engaged with my contributions so promptly, since the repo had been dormant for a while — at times I've had PRs wait years until they got a response, so this was a welcome change of pace :)

HatScripts commented 4 years ago

Interesting... do you have these guidelines written down somewhere? It would be nice for potential contributors.

As of right now I do not, but you are right.

That sounds great! I know that some similar efforts have been put in place in FOTW (e.g. star: 5 points (yellow), lion (red)...) and in Wikimedia Commons (e.g. the hundreds of subcategories of Category:Flags by content and Category:Flags by color, including highly specific ones like this one).

Indeed, FOTW is a great resource and my endeavours are largely inspired by their flag identification tool. And I knew Wikimedia was an invaluable resource but I didn't realise just how specific some of their categories for flags got.

But all of these are maintained manually; the automated approach for the colors that you describe above would be a much more scalable approach; and for shapes, we could leverage the proposal of keeping unoptimized versions of the files in the repo, ensuring that they use SVG shapes like <circle>, <rect>, and named <use> elements for more complex shapes. Of course, at some point a flag-specific DSL would probably be the only way to ensure automated extraction of all (or most) of this information, so a hybrid (manual+automatic) approach would be needed in practice. Anyway, I'm just daydreaming... I don't have the bandwidth to embark in such a complex endeavor, so please take my words just as encouragement for your vision! 😅

The .flag file format of FlagMaker actually appear to come pretty close to what you're describing. They also appear to use their own equivalent of <use> to include other .flag files. For instance, australia.flag includes a reference to uk.flag:

overlay
type=flag
path=uk.flag
x=0
y=0
width=10
height=5

Flags from Wikimedia for illustrative purposes: ->

And the .flag files refer to custom shape presets such as stars.

I was actually quite pleased that you engaged with my contributions so promptly, since the repo had been dormant for a while — at times I've had PRs wait years until they got a response, so this was a welcome change of pace :)

Ah, no problem! I was surprised but glad to see somebody taking an interest in this repo.

waldyrious commented 4 years ago

Wow... that flag search feature is really something! I can see how that would inspire you to make an interactive one :)

And thanks for introducing me to the .flag file format, and to FlagMaker. I found it somewhat difficult to locate aggregated information on the software, so I created a Wikidata entry for it :)

Anyway, I wonder if it would be possible to transform (essentially, transpile) .flag files directly to SVG. I noticed that FlagMaker can export to SVG, but the code to do so is spread across the app's codebase, and quite entangled with it — it starts in FileHandler.ExportFlagToSvg(), which then calls the abstract methods Division.ExportSvg() (with concrete implementations in DivisionPales, DivisionFesses, etc.) and Overlay.ExportSvg() (with concrete implementations in OverlayBox, OverlayEllipse, etc.).

It would be nice to have a stand-alone converter from .flag to .svg that wouldn't require the entire FlagMaker program; that way we could include .flag files as the canonical source of flag geometry, which would be automatically compiled to svg files by this tool, which in turn would be optimized by svgo. That would certainly allow such an automated categorization of flags!

Of course, the easier approach would be to simply store a map of this repo's svg filenames to FlagMaker's .flag filenames; that would only require a parser for the .flag format to extract the relevant properties, which would be simpler than a full-on converter to SVG. But again — all of this is just me daydreaming... 😄 Thanks for the stimulating exchanges though!

HatScripts commented 4 years ago

And thanks for introducing me to the .flag file format, and to FlagMaker. I found it somewhat difficult to locate aggregated information on the software, so I created a Wikidata entry for it :)

Nice! I am only familiar with FlagMaker through the /r/vexillology subreddit. I believe it's been greatly popularised by that sub. It looks like we can find more info by trawling that sub.

FlagMaker is made by Andrew Arnold (u/5thEye on Reddit).

Useful links:

Edit: I've never used Wikidata before so I didn't see at first that you already included the version update Reddit threads.

It also looks like someone also posts most (if not all - haven't done an exhaustive search) FlagMaker version updates to /r/vexillology, which many contain information additional to FlagMaker's version history:

In my searching I also found this website with many links to vexillological resources including flag identifiers and designers.

Should I move this comment all about FlagMaker into its own issue?

HatScripts commented 4 years ago

Wow... that flag search feature is really something! I can see how that would inspire you to make an interactive one :)

Thank you for your encouragement. Yet I still agree with your original objection that perhaps it is not appropriate if this repo is to be a simple SVG flag library. Though there are elements to the whole circle-flags "webapp" idea that could be very useful to maintaining this flag library, and indeed, with a scaleable/extensible enough approach, the webapp could ultimately be used for maintaining any kind of SVG icon library. Perhaps I too am daydreaming. I also have no idea whether such an application already exists.

waldyrious commented 4 years ago

FlagMaker is made by Andrew Arnold (u/5thEye on Reddit).

Yeah, I had figured as much — I also created a Wikidata entry for him :) (and a Wikimedia Commons category for the program, and Wikidata items for FlagMaker2 and FlagMaker Jr and the .flag file format! :smile:)

It also looks like someone also posts most (if not all - haven't done an exhaustive search) FlagMaker version updates to /r/vexillology, which many contain information additional to FlagMaker's version history:

Those were actually all posted by the author himself! Except of course the FlagMaker Jr. Plus announcement — thanks for pointing me to it :) And to the other resources — it's really a deep rabbit hole to go into, there's so much stuff around! :)

Should I move this comment all about FlagMaker into its own issue?

Not sure I see the benefit — what would be the end goal of such an issue? Maybe a wiki page would work better if what you're aiming for is a reference information about flag design.