Better documentation for the lessons learned
All checks were successful
ci/woodpecker/push/code-style Pipeline was successful
ci/woodpecker/push/functional-tests Pipeline was successful

This commit is contained in:
Ferdinand Kuhl 2023-08-08 17:28:14 +02:00
parent ed40987fea
commit c1226604bf
4 changed files with 54 additions and 3 deletions

View file

@ -8,7 +8,6 @@ use GuzzleHttp\Psr7\Response;
use Neos\Cache\Exception as CacheException;
use Neos\Cache\Exception\InvalidDataException;
use Neos\Cache\Frontend\StringFrontend;
use Neos\Flow\Annotations as Flow;
use Neos\Flow\I18n\Detector;
use Neos\Flow\I18n\Service;
use Neos\Flow\I18n\Xliff\Service\XliffFileProvider;

View file

@ -0,0 +1,22 @@
<?php
declare(strict_types=1);
namespace DigiComp\FlowTranslationEndpoint\ViewHelpers;
use Neos\Flow\Annotations as Flow;
use Neos\FluidAdaptor\Core\ViewHelper\AbstractViewHelper;
class ParameterNameViewHelper extends AbstractViewHelper
{
/**
* @Flow\InjectConfiguration(package="DigiComp.FlowTranslationEndpoint", path="getParameterName")
* @var string
*/
protected $parameterName;
public function render()
{
return $this->parameterName;
}
}

View file

@ -0,0 +1,22 @@
<?php
declare(strict_types=1);
namespace DigiComp\FlowTranslationEndpoint\ViewHelpers;
use Neos\Flow\Annotations as Flow;
use Neos\FluidAdaptor\Core\ViewHelper\AbstractViewHelper;
class UriViewHelper extends AbstractViewHelper
{
/**
* @Flow\InjectConfiguration(package="DigiComp.FlowTranslationEndpoint", path="reactOnPath")
* @var string
*/
protected $reactOnPath;
public function render()
{
return $this->reactOnPath;
}
}

View file

@ -8,6 +8,9 @@ Other solutions, which would generate files available for usage in client scope,
The main components are a `CurrentHtmlLangViewHelper`, which is intended to be used to fill the `lang` attribute of the `html` tag, so the frontend knows, which language is currently active (and is good practice anyway) and a `TranslationRequestMiddleware`, which will respond to any request, where the request path equals `DigiComp.FlowTranslationEndpoint.reactOnPath` (Default: "/xliff-units"), and search for unit patterns in the `DigiComp.FlowTranslationEndpoint.getParameterName` (Default: "idPatterns").
"idPatterns" is built with following syntax:
`packageName:catalogName|SEARCH_REGEX, ANOTHER PATTERN...`
For example:
````
GET /xliff-units?idPatterns=Neos.Flow:Main|authentication.*
@ -30,12 +33,17 @@ would return all translation keys from the main unit of `Neos.Flow` starting wit
To let the middleware know, in which langauge the translated units should be, you should set the correct `Accept-Language`-Header with your request, which you obtained from the `lang` attribute of the `html` element.
Given your HTML head looks like that:
```html
<html lang="{translation:currentHtmlLang()}" data-xliff-uri="{translation:uri()}" data-xliff-parameter="{translation:parameterName()}">
```
Your JavaScript could look like that:
```javascript
async function translate(idPatterns) {
const uri = new URL('/xliff-units', document.location);
uri.searchParams.set('idPatterns', idPatterns);
const uri = new URL(document.documentElement.dataset.xliffUri, document.location);
uri.searchParams.set(document.documentElement.dataset.xliffParameter, idPatterns);
const response = await fetch(uri, {headers: {
'Accept': 'application/json',
'Accept-Language': document.documentElement.lang,