As a content author and/or developer, I want a straightforward way to manage text strings throughout the experience.

[theecrit]

Description

As we build out the user interface, we'll be managing an increasingly large set of interface copy strings. I'd like a systematic way to manage these strings both in the codebase and externally during the authoring process.

Potential solution

We probably don't have enough quantity to justify a full-blown (headless) CMS-type solution for managing interface copy, but we should identify what that threshold might be. In the meantime:

• Text strings should not generally be hard-coded but should be called using key-value pairs (with key syntax being semantic to ensure clarity and consistency, as well as integration with the authoring process).
• Preference is to manage all text strings in a single xml, json or similar format that can be easily externalized and edited via PR.
• Other developers should weigh in here with thoughts/recommendations

Considerations

• How to handle/format dynamic copy/variable copy (e.g. sequential/ordinal numbering, dates, etc)
• How unique do keys need to be from each other?
• This issue covers the development side of string management. We need to acknowledge that there's a broader authoring discussion to be had in terms of managing, authoring, and reviewing/approving externalized strings that this issue won't cover.

Acceptance criteria

• [ ] String management flow is sufficiently documented so the team understands how content updates are made, validated, and pulled into the code.
• [ ] Clear rules/guidelines for naming key-value pairs are documented.
• [ ] Existing strings have been converted to key-value pairs using these guidelines.
• [ ] Strings are able to be pulled from the code in a fairly automated, batch process into a single file.
• [ ] Updated string file can be easily merged into master branch via PR.
• [ ] Bonus (not required for issue to be closed): A log file or similar tracks changes made to strings as a form of version control (maybe recording contributor name, date & time, original string and new string).

Reference material and other documentation

• Description of an Automated Strings Management from GitHub approach
• Good basic article on How to Display Key and Value Pairs from JSON in ReactJS

[turnerhayes]

I've had some success with https://formatjs.io/ and its project React-intl. It still requires some sort of CMS-ish system; I implemented a very basic site for managing strings in an ugly but simple frontend in https://github.com/codeforsanjose/census2020/tree/master/translate-site. It ain't pretty, but it works!

[theecrit]

Sanity.io is another option worth looking at once this issue is prioritized.