From 3aae42024b0a2287319f83426406ebb0b126095e Mon Sep 17 00:00:00 2001 From: Sky Lundy Date: Tue, 19 Dec 2023 12:20:10 -0800 Subject: [PATCH] Update documentation in README, improved FluencyMarkup rendering --- CHANGELOG.md | 18 ++ Fluency.module.php | 33 ++-- README.md | 419 ++++++++++++++++++++++++++---------------- app/FluencyMarkup.php | 16 +- 4 files changed, 302 insertions(+), 184 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 34339d9..819ad70 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,23 @@ # Fluency for ProcessWire Changelog +## 1.0.4 2023-12-19 + +### Enhancement, Documentation + +- Added TOC to README +- Reorganized/clarified text of README for easier reading +- Fixed speling mistakes in README +- Expanded README to include Contributing section +- Expanded README to include documentation for translating multiple strings in one call +- Expanded README to include documentation for DTO methods and helpers +- FluencyMarkup now accepts `null` for `$classes` parameter +- FluencyMarkup now removes empty HTML attributes on render +- The module method `renderLanguageLinks` now adds active class to `
  • ` element containing the + current page language rather than the `` element contained within it. +- When when a divider value is passed to `renderLanguageLinks`, the `
  • ` element is given a + `divider` class +- Added missing parameter description to docblock for `renderLanguageLink` + ## 1.0.3 2023-12-18 ### Enhancement, Documentation diff --git a/Fluency.module.php b/Fluency.module.php index abd5df8..4d9206a 100644 --- a/Fluency.module.php +++ b/Fluency.module.php @@ -569,14 +569,15 @@ classes: $classes, * * #pw-group-Page-And-Markup-Utilities * - * @param string|array|null $classes Classes to add to
      element - * @param string $id ID to add to
        element - * @param string $divider String wrapped in
      • added between link
      • elements - * @param string $languageSource 'fluency' to render using Fluency configured languages or - * 'processwire' to render using all languages in processwire - * Default: 'fluency' + * @param string|array|null $classes Classes to add to
          element + * @param string $id ID to add to
            element + * @param string $activeClass Class added to the
          • element containing the link for the + * current page. + * @param string $divider String wrapped in
          • added between link
          • elements + * @param string $languageSource 'fluency' to render using Fluency configured languages or + * 'processwire' to render using all languages in processwire + * Default: 'fluency' * @return string - * @throws InvalidArgumentException */ public function renderLanguageLinks( string|array|null $classes = null, @@ -588,24 +589,22 @@ public function renderLanguageLinks( $languages = $this->getLanguagesForMarkup($languageSource); $items = array_reduce($languages, function($tags, $language) use ($activeClass, $divider) { - $tags[] = Markup::a( - href: $this->page->localUrl($language->id), - content: $language->title, - classes: $language->isCurrentLanguage ? $activeClass : null + $tags[] = Markup::li( + classes: $language->isCurrentLanguage ? $activeClass : null, + content: Markup::a( + href: $this->page->localUrl($language->id), + content: $language->title, + ) ); - $divider && $tags[] = $divider; + $divider && $tags[] = Markup::li(content: $divider, classes: 'divider'); return $tags; }, []); end($items) === $divider && array_pop($items); - return Markup::ul( - items: Markup::li($items), - classes: $classes ?? '', - id: $id - ); + return Markup::ul(items: $items, classes: $classes ?? '', id: $id); } /** diff --git a/README.md b/README.md index f777f70..e3e1e52 100644 --- a/README.md +++ b/README.md @@ -1,135 +1,176 @@ # Fluency - The complete translation enhancement suite for ProcessWire -Fluency is a module that brings third party translation services to the ProcessWire CMF/CMS with a user friendly interface for translating content in any multi-language field on any page. It also provides powerful tools to help developers create multilanguage sites and apps faster. +Fluency is a feature-rich module for the [ProcessWire CMS/CMF](https://processwire.com/) that integrates third party translation services with a user-friendly interface for translating content in any multi-language field on any page. It also provides powerful tools to help developers create multi-language sites and apps faster. -Fluency can be added to new websites in development, existing websites adding multi-language abilities, or to websites that already have multi-language capabilities where it is desireable to have high quality translation built in. +Fluency can be used: + +- While developing a new ProcessWire application +- When adding multi-language abilities to an existing ProcessWire application +- To add translation abilities to an existing multi-language ProcessWire application You can help out by filing Github issues when bugs are found, or submit a pull request with fixes. +## Contents + +- [Requirements](#requirements) +- [Installing](#installing) + - [Translation Engines](#translation-engines) + - [Localizing Fluency](#localizing-fluency) + - [Upgrading or Removing](#upgrading-or-removing) +- [Features and Usage](#features-and-usage) + - [Translating Inputfields](#translating-inputfields) + - [Translating Templates and Modules](#translating-templates-and-modules) + - [Standalone Translator](#standalone-translator) + - [Modified Content Indication](#modified-content-indication) + - [Caching](#caching) + - [Rendering Language Markup](#rendering-language-markup) + - [Language ISO Codes](#language-iso-codes) + - [Meta Link Tags](#meta-link-tags) + - [Switch Page Language Select Element](#switch-page-language-select-element) + - [Switch Page Language Links](#switch-page-language-links) +- [Using Fluency Programatically](#using-fluency-programatically) + - [Translating Content](#translating-content) + - [Get All Translation Service Languages](#get-all-translation-service-languages) + - [Get All Configured Languages](#get-all-configured-languages) + - [Translation Service API Usage](#translation-service-api-usage) + - [Translation Engine Information](#translation-engine-information) + - [Managing Cache](#managing-cache) + - [Admin REST API Endpoints](#admin-rest-api-endpoints) +- [Known Issues](#known-issues) +- [Contributing](#contributing) +- [Cost](#cost) +- [Supporting Module Development](#supporting-module-development) + ## Requirements - ProcessWire >= 3.0.2 - PHP >= 8.1 -- Module dependencies: ProcessLanguage, LanguageSupport, LanguageTabs +- Module dependencies + - LanguageSupport + - LanguageTabs + - ProcessLanguage - UIKit admin theme -- At least 2 languages configured in ProcessWire (the default, and at least one other, no limit on how many are added) to add translation to fields -- An API key for the Translation Engine selected on the module config page +- At least 2 languages configured in ProcessWire to add translation to fields +- API key for the chosen third party translation service, free tiers are available -## Features & Module Details +## Installing -Fluency can translate content in any type of field on any page. These include: +1. Download and unzip the contents into /site/modules and install, or install from the [ProcessWire Modules directory](https://processwire.com/modules/fluency/). +2. Open the module configuration page, choose a Translation Engine, save +3. Complete the Translation Engine setup, save +4. Create language associations, save +5. Assign the `fluency-translate` permission where appropriate -- Plain textarea or text -- CKEditor content (Regular, Inline) -- TinyMCE content (Regular, Inline) -- Image/file descriptions -- Page names/URLs -- Tables -- Repeater/repeater matrix +That's it. All multi-language fields will now feature click to translate buttons and a translator tool available in the Admin menu bar. There is no limit on how many languages may be configured, and new languages can be added at any time. -Fluency also provides a standalone translation tool located as an item in the admin menu bar that can be accessed from any page, or by clicking the translation icon next to the translate buttons located under fields. This tool will translate from/to any language that the translation service offers, regardless of whether the languages have been configured in ProcessWire or Fluency. This is also accessible by clicking the language icon next to any field translate button; +If no langauges are present in ProcessWire or if languages are present and not configured with Fluency, it is still possible to use the translator tool in the Admin menu as long as a valid API key is present and the current user has the `fluency-translate` permission. Inputfield translation buttons will not render until languages have been configured in Fluency. -Methods to render HTML markup for your front end are also provided to help make converting a website to a multi-language site faster and easier. -etc. can all be translated into the language the website is built in. +### Translation Engines -Translation service usage can be controlled by enabling the user permission requirement on the module config page and assigning the `fluency-translate` permission. +Fluency integrates third party translation services as "Translation Engines". When you configure Fluency, you'll choose which service to use. Currently the following translation services are availale: -### Modified Content Indication +- [DeepL](https://www.deepl.com/) +- [Google Cloud Translation](https://cloud.google.com/translate?hl=en) -When content in a ProcessWire field changes, Fluency adds a green line will the top of the language tab for that field. If the content is reverted to it's original value, the indicating line is removed. This lets users who are editing and translating content know which fields have been changed without clicking to another language tab to see that it has changed to help prevent content deviation between langauges. +Each translation service has their strengths, however not all features exist for all engines as Fluency relies on what abilities are available via each translation service, so review each and choose the one that is right for your project. -### Site & Core Translation Files +If you're interested in contributing to Fluency by building a Translation Engine, see [Contributing](#Contributing) below. -Translating your files, such as templates using the `__()` function, site modules, and core modules is very easy with Fluency. In your ProcessWire admin, navigate to a langauge page, use the "Find Files To Translate Button", select your files, and edit the translations. The field for each value will have a button which translates the string above the field to the language you are currently editing. +### Localizing Fluency -For extra speed, use the "Click To Translate All" button at the top. This will translate all values on the page simultaneously in seconds. +All text for the Fluency UI elements can be translated including messages, errors, and elements users use to interact with Fluency. This is done through ProcessWire's language setup. In the Admin visit Setup->Languages, and the "Find Files To Translate" feature within the language management page. -Using these methods, it is possible for you to translate the ProcessWire admin, as well as your template language strings, in minutes rather than hours. +All translatable texts are located in `Fluency/app/FluencyLocalization.php` -Please keep in mind that translating site and core modules _may_ be relatively expensive operations with respect to your API usage. It is recommended that you identify the module files that are in use and that the end user will interact with then prioritize those first. +### Upgrading Or Removing -### Caching +Adding, upgrading, or removing Fluency from your ProcessWire application will not affect content. At most, you _may_ (but not always) need to update or reconfigure your Fluency module config. Settings are saved individually for each translation engine, so it is possible to switch between engines without losing your configurations for each. -#### Caching - Translations +When upgrading Fluency, check the Fluency config page to ensure that your settings are correct and to review any new features that may have been added. -All translations are cached by default for a period of one month. This helps reduce API account usage where the same content is translated more than once and significantly increases translation speed. Caching can be toggled on/off on the Fluency module config page. The translation cache can also be manually cleared either on the module config page, via the Fluency API using `$fluency` in your code, or via an AJAX request to the Fluency admin REST API- usage is documented below. +Review the `CHANGELOG.md` file for an always up-to-date list of changes. -Translation caching relies on _exact_ value matching including punctuation, spelling, and capitalization. This ensures that an exact translation is always returned accurately. +## Features and Usage -#### Caching - Translatable Languages +### Translating Inputfields -Fluency uses lists of recognized languages from the selected third party translation service to determine what languages to make available when configuring and using Fluency. +Fluency can translate content in any type of field on any page. These include: -PLEASE NOTE: **This is cached forever until manually cleared** the first time that a translation engine is selected/configured to increase the speed of Fluency's operations. +- Plain textarea or text +- CKEditor content (Regular, Inline) +- TinyMCE content (Regular, Inline) +- Image/file descriptions +- Page names/URLs +- Tables +- Repeater/repeater matrix -Available languages are cached on a per-engine basis. This means that if a translation service adds additional translatable languages, this cache must be cleared on the module config page, via the Fluency API using `$fluency` in your code, or via an AJAX request to the Fluency admin REST API- usage is documented below. +Fluency is designed so that any multi-language field in any location or combination/nesting with other fields will be translatable. -### Changes and Upgrades +### Translating Templates and Modules -Adding, upgrading, or removing Fluency from your ProcessWire application will not affect or remove content. At most, you _may_ (but not always) need to reconfigure your translation settings. Settings are saved individually for each translation engine, so it is possible to switch between engines without losing your configurations for each. Be sure to review the Fluency module config page after upgrading to configure new features and ensure that your existing settings were not affected. +Fluency integrates with ProcessWire's native translator pages where you can select files to translate. These include: -Review the `CHANGELOG.md` file for an always up-to-date list of features and changes. +- Templates that contain strings are wrapped in the `__()` function +- Core modules +- Site modules that contain strings wrapped in the `__()` function -## Translation Engines +In your ProcessWire admin, navigate to a langauge page, use the "Find Files To Translate Button", select your files, and edit the translations. The field for each value will have a button which translates the string above the field to the language you are currently editing. For extra speed, use the "Click To Translate All" button at the top. This will translate all values on the page simultaneously in seconds. -Fluency is modular in that it contains a framework for adding additional third party services as "Translation Engines". You can choose which Translation Engine you prefer and provide the credentials to connect via their API. Currently Fluency has the ability to use [DeepL](https://www.deepl.com) and [Google Cloud](https://cloud.google.com/translate). Each have their strengths, however not all features exist for all engines as Fluency relies on what abilities are available via each translation service, so review each and choose the one that is right for your project. +**Note:** Please keep in mind that translating site and core modules _may_ be relatively expensive operations with respect to your API usage. It is recommended that you identify and prioritize the files/modules that are used in your ProcessWire site/app. -As this project is open source, contributions for new third party services as Translation Engines are welcome! +### Standalone Translator -Developer documentation for integrating third party translation services as Translation Engines is located in `Fluency/app/Engines/DEVDOC.md`. Documentation is a WIP. If you are interested in developing a Translation Engine for Fluency and want more info, feel free to send me a PM on the ProcessWire forum. +Fluency also provides a standalone translation located as an item in the admin menu bar that can be accessed from any page, or by clicking the translation icon next to the translate buttons located under fields. This does not require that ProcessWire languages are configured in Fluency, only that the Translation Engine is configured to use a third party service. -### Third Party Translation Services +To use Fluency, users must be assigned the `fluency-translate` permission. -Fluency may require credentials, such as an API key, for the third party service associated with a Translation Engine. When a Translation Engine is selected, service-specific information, settings, and necessary authentication details will be shown on the Fluency module config page. +### Modified Content Indication -## Instructions +When content in a ProcessWire field changes, Fluency adds a green line at the top of the language tab for that field. If the content is reverted to it's original value, the green line is removed. This lets users who are editing and translating content know which fields have been changed without clicking to another language tab. This assists content input and helps prevent content deviation between languages. -1. Download and unzip the contents into /site/modules, or install from the [ProcessWire Modules directory](https://processwire.com/modules/fluency/). -2. Install the module in the developer admin -3. Open the module configuration page, choose a Translation Engine and save -4. Complete the Translation Engine setup -5. Create language associations and save +### Caching -All multi-language fields will now have click to translate buttons and a translator tool is available in the Admin menu bar. +**Translations** -If no langauges are present in ProcessWire or if languages are present and not configured with Fluency, it is still possible to use the translator tool in the Admin menu as long as a valid API key is present and the current user has the Fluency permission. +All translations are cached by default for a period of one month. This helps reduce API account usage where the same content is translated more than once and significantly increases translation speed. Caching can be toggled on/off on the Fluency module config page. The translation cache can also be manually cleared either on the module config page, via the [Fluency module API](#managing-cache), or via an AJAX request using the [Fluency admin REST API](#admin-rest-api-endpoints). -### Localizing the Fluency UI +Translation caching relies on _exact_ value matching including punctuation, spelling, and capitalization. This ensures that an exact translation is always returned accurately. Translations that contain multiple strings are cached together. -All text for the Fluency UI elements can be translated including messages, errors, and elements users use to interact with Fluency. This is done through ProcessWire's language setup. In the Admin visit Setup->Languages, and the "Find Files To Translate" feature within the language management page. +**Translatable Languages** -All translatable texts are located in `Fluency/app/FluencyLocalization.php` +Fluency uses lists of recognized languages from the selected third party translation service to determine what languages to make available when configuring and using Fluency. -## Multi-Language Markup Rendering +**Note: This is cached forever until manually cleared** the first time that a translation engine is selected/configured to increase the speed of Fluency's operations. -Fluency provides tools to help make building websites with multi-language capabilities faster and easier. There are HTML best practices that help users with accessibility and improve SEO performance, many of these are available out of the box with Fluency. +Available languages are cached on a per-engine basis. This means that if a translation service adds additional translatable languages, this cache must be cleared on the module config page, via the [Fluency module API](#managing-cache), or via an AJAX request using the [Fluency admin REST API](#admin-rest-api-endpoints). -### Current Language Code +### Rendering Language Markup -An HTML best practice is to indicate the current language of the page including the `lang` attribute on the `` tag. Fluency can output the code for the current language as provided by the Translation Engine. +Fluency provides tools to help make building websites with multi-language capabilities faster and easier. There are HTML best practices that help users with accessibility and improve SEO performance, many of these are available out of the box with Fluency. Language names and ARIA attributes are automatically localized when you configure Fluency and use the ProcessWire core translation pages to translate the module. -To get the code for the language the page is currently being viewed in: +#### Language ISO Codes -```html - - - - - - <?php $page->title; ?> - - -``` - -You can also get the language code for another language that is configured in Fluency by passing it's ProcessWire ID: +Returns the target language ISO code provided by the third party service. ```php +// Get the current language's ISO code +$fluency->getLanguageCode(); // => en-us + +// Get the ISO code for another language using it's ProcessWire ID $fluency->getLanguageCode(1034); // 'de' ``` -### Language Meta Tags +_Tip:_ Use this to indicate the current language of the page including the `lang` attribute on the `` tag. + +```html + + + +``` + +#### Meta Link Tags Fluency van render a list of languages `` tags that you can use in the `` of your HTML document. This helps users and search engines find the content for your page in all languages. The URLs will render as configured in ProcessWire. @@ -166,7 +207,7 @@ Output: ``` -### Language Select Element +#### Switch Page Language Select Element You can easily render a `