Translating the Flexsearch modal

[Backspaze]

I'm trying to translate the text in the Flexsearch modal shown in the screenshot below.

According to https://getdoks.org/docs/guides/i18n/#flexsearch, one should just copy node_modules/@thulite/doks-core/assets/js/flexsearch.js to assets/js/flexsearch.<ISO country code lowercase>.js. I've done that, and hence have assets/js/flexsearch.sv.js for Swedish, but the text is not translated.

I have translation to Swedish working on the rest of the site, with strings stored in i18n/sv.toml.

Since the docs only mention that one should copy the flexsearch.js file, I'm wondering if that should be enough for the translation to work? Or do I also have to set translation strings in i18n/sv.toml, and copy node_modules/@thulite/doks-core/layouts/_partials/header/search-modal.html to layouts/_partials/head/search-modal.html, and modify it to use the translation strings?

[Backspaze]

I just tried copying and modifying search-modal.html as described in the original post. I made a test by replacing the text to select with the string {{ i18n "to_select" }} from sv.toml, but that didn't work. Instead, the modal now looks like in the screenshot below.

When adding the translation string, I noticed that there were some strings already for the search modal, but those do no work for me either. Looking at the search modal on https://doks.netlify.app/, I can see that my search modal lacks a few features, as you can see in the screenshots below. I don't have a placeholder, and I don't see recent searches.

From https://doks.netlify.app/

My search modal

Any help with this is much appreciated.

[h-enk]

Your repo?

[Backspaze]

@h-enk sorry, I forgot to mention that I don’t have a public repo for this. I’ll see if I can replicate the issue in a new project.

in the meantime, if you have the time, could you try and see if you can replicate the issue?

[h-enk]

I freshly installed Doks, then updated hugo.toml:

# Multilingual
defaultContentLanguage = "nl"
disableLanguages = ["de", "en"]
defaultContentLanguageInSubdir = false

Copied node_modules/@thulite/doks-core/assets/js/flexsearch.js file and pasted it as assets/js/flexsearch.nl.js

This is what my search modal then looks like:

Then copied node_modules/@thulite/doks-core/layouts/_partials/header/search-modal.html and pasted it as layouts/_partials/header/search-modal.html

Ouch, it looks like the button labels are indeed hardcoded:

        <ul class="list-inline me-auto d-none d-md-block">
          <li class="list-inline-item"><kbd class="me-2"><svg width="15" height="15" aria-label="Enter key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path></g></svg></kbd><span class="DocSearch-Label">to select</span></li>
          <li class="list-inline-item"><kbd class="me-2"><svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path></g></svg></kbd><kbd class="me-2"><svg width="15" height="15" aria-label="Arrow up" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path></g></svg></kbd><span class="DocSearch-Label">to navigate</span></li>
          <li class="list-inline-item"><kbd class="me-2"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg></kbd><span class="DocSearch-Label">to close</span></li>
        </ul>

You're right, needs to be fixed in Doks core!

[h-enk]

thuliteio/doks-core#135

[Backspaze]

Thanks for confirming the issue with the hardcoded button labels @h-enk.

I'm still not sure what's wrong with my config, that causes the other text in the search modal to not appear. I noticed that you only edited hugo.toml and made a language specific copy of flexsearch.js, which was enough for the other text in the search modal to be translated, no such luck for me.

I went through the instructions at https://getdoks.org/docs/guides/i18n/ again an have noted my config below.

params.toml

config/_default/params.toml. I had multilingualMode set to false, but changing that to true, only seems to enable the language switcher in the top right corner.

  # Multilingual
  multilingualMode = true # false (default) or true
  showMissingLanguages = true # whether or not to show untranslated languages in the language menu; true (default) or false

hugo.toml

./config/_default/hugo.toml. I noticed that you had en in disableLanguages, which I didn't. I added it, but it made no difference.

# Multilingual
defaultContentLanguage = "sv"
disableLanguages = ["de", "nl", "en"]
defaultContentLanguageInSubdir = false

languages.toml

./config/_default/languages.toml. All other languages in this file are commented out with #.

[sv]
  languageName = "Swedish"
  contentDir = "content"
  weight = 10
  [sv.params]
    languageISO = "SV"
    languageTag = "sv-SE"
    footer = 'REMOVED FROM THIS POST ON GITHUB'
    alertText = '<a class="alert-link stretched-link fw-normal" href="/blog/example-post/">Version 1.0 av Doks släpptes precis!</a>'

module.toml

config/_default/module.toml.

## content
[[mounts]]
  source = "content"
  target = "content"
  lang = "sv"

Menus

config/_default/menus/menus. I've not done anything with this yet.

Translation strings

i18n/sv.toml. This one I'm a bit unsure about. If I look at node_modules/@thulite/doks-core/i18n/en.toml, the strings are listed as shown in the first code block below. When I tried entering the strings the same way in sv.toml, I got errors. So, I instead entered the strings as shown in the second code block below. This works for other translations on the site, such as the publish and edit dates mentioned here.

[search_placeholder]
other = "Search"

search_placeholder = "Sök"

Flexsearch

node_modules/@thulite/doks-core/assets/js/flexsearch.js is copied to assets/js/flexsearch.sv.js.

Content

I don't have any language specific folders or content in content yet.

[Backspaze]

Testing in a new project

I tried replicating the issue in a new project, figuring that I would only make the few changes that you did. When I changed hugo.toml as below, I got the error in the second code block below.

# Multilingual
defaultContentLanguage = "sv"
disableLanguages = ["de", "en"]
defaultContentLanguageInSubdir = false

ERROR Failed to reload config: failed to create config from result: failed to decode "languages": config value "sv" for defaultContentLanguage does not match any language definition

I added Swedish as shown below to languages.toml, but this just caused even more errors, as shown in the detail tag below.

[sv]
  languageName = "Swedish"
  contentDir = "content/sv"
  weight = 10
  [sv.params]
    languageISO = "SV"
    languageTag = "sv-SE"
    footer = 'Svenska'
    alertText = '<a class="alert-link stretched-link fw-normal" href="/blog/example-post/">Doks version 1.0 just shipped!</a>'

Details

ERROR No js resource found at /assets/js/flexsearch.nl.js
ERROR render of "/" failed: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\baseof.html:17:7": execute of template failed: template: home.html:17:7: executing "home.html" at <partial "footer/script-footer" .>: error calling partial: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\_partials\footer\script-footer.html:23:5": execute of template failed: template: _partials/footer/script-footer.html:23:5: executing "_partials/footer/script-footer.html" at <partial "footer/esbuild-template" (dict "src" $flexsearchLangConfigPath "load" "async" "transpile" false "isMultilingual" hugo.IsMultilingual "searchLimit" $searchLimit)>: error calling partial: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\_partials\footer\esbuild-template.html:76:37": execute of template failed: template: _partials/footer/esbuild-template.html:76:37: executing "_partials/footer/esbuild-template.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations
ERROR render of "/contributors" failed: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\baseof.html:17:7": execute of template failed: template: taxonomy.html:17:7: executing "taxonomy.html" at <partial "footer/script-footer" .>: error calling partial: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\_partials\footer\script-footer.html:23:5": execute of template failed: template: _partials/footer/script-footer.html:23:5: executing "_partials/footer/script-footer.html" at <partial "footer/esbuild-template" (dict "src" $flexsearchLangConfigPath "load" "async" "transpile" false "isMultilingual" hugo.IsMultilingual "searchLimit" $searchLimit)>: error calling partial: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\_partials\footer\esbuild-template.html:76:37": execute of template failed: template: _partials/footer/esbuild-template.html:76:37: executing "_partials/footer/esbuild-template.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations
ERROR render of "/tags" failed: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\baseof.html:17:7": execute of template failed: template: taxonomy.html:17:7: executing "taxonomy.html" at <partial "footer/script-footer" .>: error calling partial: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\_partials\footer\script-footer.html:23:5": execute of template failed: template: _partials/footer/script-footer.html:23:5: executing "_partials/footer/script-footer.html" at <partial "footer/esbuild-template" (dict "src" $flexsearchLangConfigPath "load" "async" "transpile" false "isMultilingual" hugo.IsMultilingual "searchLimit" $searchLimit)>: error calling partial: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\_partials\footer\esbuild-template.html:76:37": execute of template failed: template: _partials/footer/esbuild-template.html:76:37: executing "_partials/footer/esbuild-template.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations
ERROR render of "/categories" failed: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\baseof.html:17:7": execute of template failed: template: taxonomy.html:17:7: executing "taxonomy.html" at <partial "footer/script-footer" .>: error calling partial: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\_partials\footer\script-footer.html:23:5": execute of template failed: template: _partials/footer/script-footer.html:23:5: executing "_partials/footer/script-footer.html" at <partial "footer/esbuild-template" (dict "src" $flexsearchLangConfigPath "load" "async" "transpile" false "isMultilingual" hugo.IsMultilingual "searchLimit" $searchLimit)>: error calling partial: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\_partials\footer\esbuild-template.html:76:37": execute of template failed: template: _partials/footer/esbuild-template.html:76:37: executing "_partials/footer/esbuild-template.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations
Built in 1711 ms
Error: error building site: render: failed to render pages: render of "/404" failed: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\baseof.html:17:7": execute of template failed: template: 404.html:17:7: executing "404.html" at <partial "footer/script-footer" .>: error calling partial: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\_partials\footer\script-footer.html:23:5": execute of template failed: template: _partials/footer/script-footer.html:23:5: executing "_partials/footer/script-footer.html" at <partial "footer/esbuild-template" (dict "src" $flexsearchLangConfigPath "load" "async" "transpile" false "isMultilingual" hugo.IsMultilingual "searchLimit" $searchLimit)>: error calling partial: "C:\Thulite-labb\test-sv\node_modules\@thulite\doks-core\layouts\_partials\footer\esbuild-template.html:76:37": execute of template failed: template: _partials/footer/esbuild-template.html:76:37: executing "_partials/footer/esbuild-template.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations

I figured that this was because there was no i18n folder, and no sv.toml, so I created the folder and the file, and translated the strings, but still got errors. I copied flexsearch.js to assets/js/ with both a sv and an en version and was finally free from errors. Sure, the home page looks very empty after these changes (see screenshots below) but the search modal has the text in Swedish that I'm missing on my production site.

With all this in mind, I assumed that the issue with my production site was the formatting of the sv.toml file. I changed all the strings from this format:

search_placeholder = "Sök"

...to this format:

[search_placeholder]
other = "Search"

...and now the search modal is translated on my production site as well. Except for the button labels as mentioned in thuliteio/doks-core#135, and I also noticed that the word for is hardcoded in {{ i18n "search_no_results" }} for in search-modal.html. I'll add a comment about that in that other issue.

Search modal in Swedish

How the home page should look like

How the home page looks after the language related changes I made above

I have no clue why the home page would turn into this bare bones page because of my language related changes. It's not important for this issue, but I'm just curious.

[h-enk]

In layouts/home.html, notice the content part wrapped in {{ if eq $.Site.Language.LanguageName "English" }}{{ end }} (lines 22..45)

[Backspaze]

Thanks for all the help @h-enk. I'll close this discussion now, as the main point has been answered, and the remaining translation issues will be handled in thuliteio/doks-core#135.