Add HoC markdown files to the translation pipeline

[hacodeorg]

FND-1329: Make code.org/hourofcode/* pages translatable.

Before adding HoC markdown files to the translation pipeline, we have to remove all Ruby code and iframe from them. This means:

1. For md.erb file, remove its Ruby code and change the file extension to just md.
2. For all md files that use iframe to display Youtube videos, convert them to md.partial and use the display_video_thumbnail partial instead. (Additionally, always center the videos and remove the black bars above and below them.)

Then we can finally add a list of safe markdown files to sync-in.rb.

Screenshots

Before	After

Links

• Slack thread on making a markdown file safe vs. translator_friendly.

Testing story

Steps to verify that pegasus/sites.v3/code.org/public/hourofcode/starwars.md is translatable:

1. Run the localize_markdown_content function in bin/i18n/sync-in.rb. Verify that the starwars.md.partial file is copied to i18n/locales/source/markdown/public/hourofcode/starwars.md.
2. Simulate the result of sync-down.rb step by copying a translated version of starwars.md to i18n/locales/<locale>/codeorg-markdown/hourofcode/starwars.md. An example locale is vi-VN.
3. Run bin/i18n/sync-out.rb, specifically the distribute_translations method, and verify that the translated file is copied to pegasus/sites.v3/code.org/i18n/public/hourofcode/starwars.vi-VN.md.partial.
4. Open http://localhost.code.org:3000/lang/vi/hourofcode/starwars. The page should be translated now and the Starwars intro video still shows up correctly.

[Hamms]

In addition to adding these files to the list of files to be synced, we also need to triage them to make sure that none of the files contain content we don't want to expose to translators; this usually means things like embedded ERB or HTML.

For example, this embedded iframe in starwars.md:

https://github.com/code-dot-org/code-dot-org/blame/staging/pegasus/sites.v3/code.org/public/hourofcode/starwars.md#L10

We'll want to go through each of these files and pull this content out into views, then include them using the markdown partials syntax (see https://code.org/editing/concepts)

[Hamms]

This is looking real good!

Have you checked with someone on marketing to confirm that the minor changes included here are acceptable?

[Hamms]

any reason not to put this HTML in the view as well?

[hacodeorg]

I thought a video partial view can be used in other contexts, so I separate it from its container div.

[Hamms]

I can see that, but I think in this context it makes sense to keep them together.

The specific motivation here is to keep complicated stuff like html out of the hands of translators, to minimize confusion (they tend to translate things like HTML tag names). In the case where we do want to reuse this in another context, it wouldn't be too much work to separate the template out at that point rather than doing it now

[hacodeorg]

I can do that to make the markdown files cleaner.

For my own education, does CrowdIn automatically display (and hide) simple HTML elements from translator? For example, this file is full of HTML tags https://github.com/code-dot-org/code-dot-org/blob/staging/pegasus/sites.v3/code.org/public/athome.md.partial. But in CrowdIn, the file is displayed quite nicely without exposing those tags to translator https://crowdin.com/translate/codeorg-markdown/177852/en-vi?filter=basic&value=0.

[Hamms]

Crowdin sometimes automatically hides HTML elements in that view, but doesn't always. If you look through the individual strings in that file, you will find several that turn the embedded tags into <0> and </0>, but it doesn't do so consistently even on the same string.

Note also that this display smoothing is a property of the Crowdin editing UI, and so in addition to being inconsistent it doesn't apply to our translators who work outside of Crowdin, like Translate By Humans.

[hacodeorg]

Got it! Thanks Elijah. I've pushed a new commit moving the HTML tags to ERB files; awaiting for the test run. Anything else you think I should change?

[Hamms]

Nothing else; this looks great! Thanks for accommodating all my feedback!