@hovrcat/translator v0.0.5

Translator

Admin interface for managing i18n json files

Description

The frontend component of the translator admin application.

Features

1. Render JSON hierarchy in a nice, easy to navigate UI
2. Users can define templates for their projects, as the reference points for all language files
3. The templates can be edited fully: key names, add/remove nodes, convert nodes between simple key-value pairs and key-nested pairs
4. Import JSON - users can import a json payload to use a starter for the template
5. Translation view that inherits the template structure and allows editing the key-value labels
6. Download JSON - users can download the changes they made to a local json file
7. Save Translation - users can save the translation files + template to their designated GCP bucket
8. Search by key chain ("one.two.three") - users can search inside the translation file/template for a specific key
9. Easy navigation: keyboard shortcuts for all features, such that mouse use is not needed

Roadmap

1. Translation file validation - compare the translation file with the template (point of reference) and highlight any inconsistencies - missing labels/keys
2. Choice of sync strategy - users can choose how they want to approach updating the translations:

• when creating a new template node, request values for all translation files as well
  • when deleting a template node, notify the user that the node will be removed from the translation files also
• after saving the template, on navigation to a translation file, notify the user that the translation is out of sync with the template and request updates

3. Standalone FE admin platform - Isolate the core FE implementation to be run directly into any project and write the translation files in the current working project
4. Google translate API integration for translation assistance

Setup

Make sure to install the dependencies:

# pnpm
pnpm install

Development

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Usage

Keyboard Shortcuts

Ctrl+F = Default browser search
Ctrl+Shift+F = Focus on top search bar
Tab/Sift+Tab = Navigate through keys and values
Ctrl+Enter = Create new sibling record
Shift+Enter = Convert value to nested structure
Ctrl+I = Open import JSON modal
Ctrl+D = Download JSON
Ctrl+S = Save translation file to bucket
Ctrl+Shift+L = Toggle shortcuts description