New translate view, localization fixes, docs

[shawnbot]

This is a big update to the localization docs that adds a lot more detail describing the process for getting from form to Phrase and back again. The code changes support this process:

1. Panel (form page) titles are properly localized round-trip now, so you can translate their titles in the left-hand nav.
2. The form.backTitle string key is used to localize the "Back" text that shows up if you provide properties.backURL in your form.
3. The translate form option short-circuits checks for window.drupalSettings so that the in-context editor can be enabled on any page that loads a form with that option hard-coded.
4. The HTTP proxy used in the preview API endpoint has been ripped out so that we can reuse it in a new translation view.
5. The new /api/translate endpoint renders a proxied sf.gov page with the translate: true and unlockNavigation: true form options set, which enables the in-context editor and allows navigation between form pages without validation.
6. The vercel config now adds rewrites for /api/preview, /api/strings, and /api/translate to URLs without the /api prefix so that they're easier to remember.

New view for translators

The new translation view lives at /api/translate?url=<URL>, where <URL> is the URL of your published form on sf.gov (or test-sfgov). For instance, this is the translate view for the Cannabis social equity applicant questionnaire, once you've signed in with Phrase:

There are a couple of important things going on here:

1. The "wizard" view is disabled so that translators can see the whole form at once.
2. Form conditionals are disabled so that all fields are visible.

3. Some templates have additional output specific to the translation view:

   • Panel components (pages in a wizard form) display an additional "Link title" heading that allows you to translate the text of the link that shows up in the side navigation of the wizard view:

     

     These translations live in the {key}.displayTitle string in Phrase, and are only shown if the displayTitle custom property is set in the form.io editor.

   • All components except panel and content types display the text of custom validation and error messages in red if they're not empty in the form.io editor.

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sfds/formio-sfds/brqgriemt
✅ Preview: https://formio-sfds-git-translate-view.sfds.vercel.app

[github-actions[bot]]

Size Change: +271 B (0%)

Total Size: 92 kB

Filename	Size	Change
dist/formio-sfds.standalone.js	68 kB	+271 B (0%)

ℹ️ View Unchanged

| Filename | Size | Change | | |:--- |:---:|:---:|:---:| | `dist/common.css` | 484 B | 0 B | | | `dist/examples.js` | 3.51 kB | 0 B | | | `dist/examples/example.js` | 508 B | 0 B | | | `dist/formio-sfds.css` | 14.1 kB | 0 B | | | `dist/portal.js` | 5.36 kB | 0 B | |

_{compressed-size-action}