Packages/DigiComp.FlowTranslationEndpoint
5
0
Fork 0
Code Pull requests Releases Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Classes/Http/TranslationRequestMiddleware.php
View file

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

22
Classes/ViewHelpers/ParameterNameViewHelper.php Normal file
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;
}
}

22
Classes/ViewHelpers/UriViewHelper.php Normal file
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;
}
}

12
README.md
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"). 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: For example:
```` ````
GET /xliff-units?idPatterns=Neos.Flow:Main|authentication.* 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. 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: Your JavaScript could look like that:
```javascript ```javascript
async function translate(idPatterns) { async function translate(idPatterns) {
const uri = new URL('/xliff-units', document.location); const uri = new URL(document.documentElement.dataset.xliffUri, document.location);
uri.searchParams.set('idPatterns', idPatterns); uri.searchParams.set(document.documentElement.dataset.xliffParameter, idPatterns);
const response = await fetch(uri, {headers: { const response = await fetch(uri, {headers: {
'Accept': 'application/json', 'Accept': 'application/json',
'Accept-Language': document.documentElement.lang, 'Accept-Language': document.documentElement.lang,