Merge pull request #416 from adobe/lang-support

feat: lang support

src/extension/background.js

@@ -33,6 +33,24 @@ import {
   updateProjectConfigs,
 } from './utils.js';
 
+/**
+ * Supported sidekick help languages.
+ * @private
+ * @type {string[]}
+ */
+const LANGS = [
+  'en', // default language, do not reorder
+  'de',
+  'es',
+  'fr',
+  'it',
+  'ja',
+  'ko-kr',
+  'pt-br',
+  'zh-cn',
+  'zh-tw',
+];
+
 /**
  * Tries to retrieve a project config from a tab.
  * @param string} tabUrl The URL of the tab
@@ -272,15 +290,27 @@ function toggle(id) {
   });
 }
 
+/**
+ * Retrieves the sidekick language preferred by the user.
+ * The default language is <code>en</code>.
+ * @private
+ * @return {string} The language
+ */
+function getLanguage() {
+  return navigator.languages
+    .map((prefLang) => LANGS.find((lang) => prefLang.toLowerCase().startsWith(lang)))
+    .filter((lang) => !!lang)[0] || LANGS[0];
+}
+
 /**
  * Updates the help content according to the browser language
  * while respecting previous user acknowledgements.
  */
 async function updateHelpContent() {
   const hlxSidekickHelpContent = await getConfig('sync', 'hlxSidekickHelpContent') || [];
   log.debug('existing help content', hlxSidekickHelpContent);
-  const lang = navigator.language.startsWith('en') ? '' : `/${navigator.language.split('-')[0]}`;
-  const resp = await fetch(`https://www.hlx.live${lang}/tools/sidekick/help.json`);
+  const lang = getLanguage();
+  const resp = await fetch(`https://www.hlx.live/tools/sidekick/${lang}/help.json`);
   if (resp.ok) {
     try {
       const [major, minor, patch] = MANIFEST.version.split('.');

src/extension/module.js

@@ -239,6 +239,24 @@
    * @description This event is fired when a user decides to opt out of help content.
    */
 
+  /**
+   * Supported sidekick languages.
+   * @private
+   * @type {string[]}
+   */
+  const LANGS = [
+    'en', // default language, do not reorder
+    'de',
+    'es',
+    'fr',
+    'it',
+    'ja',
+    'ko-kr',
+    'pt-br',
+    'zh-cn',
+    'zh-tw',
+  ];
+
   /**
    * Mapping between the plugin IDs that will be treated as environments
    * and their corresponding host properties in the config.
@@ -396,6 +414,18 @@
     return new RegExp(`^${reString}$`);
   }
 
+  /**
+   * Retrieves the sidekick language preferred by the user.
+   * The default language is <code>en</code>.
+   * @private
+   * @return {string} The language
+   */
+  function getLanguage() {
+    return navigator.languages
+      .map((prefLang) => LANGS.find((lang) => prefLang.toLowerCase().startsWith(lang)))
+      .filter((lang) => !!lang)[0] || LANGS[0];
+  }
+
   /**
    * Creates an Admin URL for an API and path.
    * @private
@@ -482,11 +512,12 @@
     }
 
     const {
+      lang,
       previewHost,
       liveHost,
       outerHost: legacyLiveHost,
       host,
-      project,
+      project = '',
       pushDown,
       pushDownSelector,
       specialViews,
@@ -531,10 +562,11 @@
       stdOuterHost,
       scriptRoot,
       host: publicHost,
-      project: project || '',
+      project,
       pushDownElements,
       specialView,
       devUrl,
+      lang: lang || getLanguage(),
     };
   }
 
@@ -1654,8 +1686,7 @@
    * @param {Sidekick} sk The sidekick
    */
   function addCustomPlugins(sk) {
-    const { location, config: { plugins, innerHost } = {} } = sk;
-    const language = navigator.language.split('-')[0];
+    const { location, config: { lang, plugins, innerHost } = {} } = sk;
     if (plugins && Array.isArray(plugins)) {
       plugins.forEach((cfg, i) => {
         if (typeof (cfg.button && cfg.button.action) === 'function'
@@ -1712,7 +1743,7 @@
             id: id || `custom-plugin-${i}`,
             condition,
             button: {
-              text: (titleI18n && titleI18n[language]) || title || '',
+              text: (titleI18n && titleI18n[lang]) || title || '',
               action: () => {
                 if (url) {
                   const target = url.startsWith('/') ? new URL(url, `https://${innerHost}/`) : new URL(url);
@@ -1755,7 +1786,7 @@
                       });
                       const titleBar = appendTag(palette, {
                         tag: 'div',
-                        text: (titleI18n && titleI18n[language]) || title,
+                        text: (titleI18n && titleI18n[lang]) || title,
                         attrs: {
                           class: 'palette-title',
                         },
@@ -2453,7 +2484,7 @@
    */
   async function fetchDict(sk, lang) {
     const dict = {};
-    const dictPath = `${sk.config.scriptRoot}/_locales/${lang}/messages.json`;
+    const dictPath = `${sk.config.scriptRoot}/_locales/${lang || sk.config.lang}/messages.json`;
     try {
       const res = await fetch(dictPath);
       const messages = await res.json();
@@ -2706,7 +2737,10 @@
             window.hlx.sidekick.setAttribute('status', JSON.stringify(this.status));
           }
           const modal = {
-            message: message.startsWith('error_') ? i18n(this, message) : message,
+            message: message.startsWith('error_') ? i18n(this, message) : [
+              i18n(this, 'error_status_fatal'),
+              'https://status.hlx.live/',
+            ],
             sticky: true,
             level: 0,
             callback: () => {
@@ -2735,8 +2769,7 @@
       this.config = await initConfig(cfg, this.location);
 
       // load dictionary based on user language
-      const lang = this.config.lang || navigator.language.split('-')[0];
-      this.dict = await fetchDict(this, lang);
+      this.dict = await fetchDict(this);
       if (!this.dict.title) {
         // unsupported language, default to english
         this.dict = await fetchDict(this, 'en');

src/extension/options.html

@@ -14,6 +14,7 @@
 <head>
   <meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-inline' blob: data: filesystem:">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>AEM Sidekick</title>
 	<link rel="stylesheet" type="text/css" href="./options.css" />
   <script src="./options.js" type="module"></script>

src/safari/ci_scripts/AppIcon-Test.appiconset/Contents.json

@@ -0,0 +1,26 @@
+{
+  "images" : [
+    {
+      "size" : "1024x1024",
+      "idiom" : "universal",
+      "filename" : "[email protected]",
+      "platform" : "ios"
+  },
+  {
+    "size" : "512x512",
+    "idiom" : "mac",
+    "filename" : "[email protected]",
+    "scale" : "1x"
+},
+{
+  "size" : "512x512",
+  "idiom" : "mac",
+  "filename" : "[email protected]",
+  "scale" : "2x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

src/safari/ci_scripts/ci_pre_xcodebuild.sh

@@ -8,3 +8,21 @@ cd ../../..
 brew install node
 npm install
 npm run build:safari
+
+if [ $CI_BRANCH != "main" ]; then
+  echo "Building from branch $CI_BRANCH"
+
+  # use test version
+  PBX_FILE="$CI_PROJECT_FILE_PATH/project.pbxproj"
+  VERSION=`cat "$CI_WORKSPACE/src/extension/manifest.json" | grep -e "\"version\"" | sed -n "s/[^0-9.]//gp"`
+  TEST_VERSION=`$CI_WORKSPACE/src/safari/ci_scripts/increment_version.sh -p $VERSION`
+  sed -i "" "s/$VERSION/$TEST_VERSION/g" "$PBX_FILE"
+  echo "using test version $TEST_VERSION"
+
+  # use test icon
+  DEFAULT_ICON="$CI_WORKSPACE/src/safari/Shared (App)/Assets.xcassets/AppIcon.appiconset"
+  TEST_ICON="$CI_WORKSPACE/src/safari/ci_scripts/AppIcon-Test.appiconset"
+  rm -rf "$DEFAULT_ICON"
+  mv "$TEST_ICON" "$DEFAULT_ICON"
+  echo "using test icon"
+fi

src/safari/ci_scripts/increment_version.sh

@@ -0,0 +1,77 @@
+#!/bin/bash
+
+# increment_version.sh
+# https://github.com/fmahnke/shell-semver
+
+# The MIT License (MIT)
+#
+# Copyright (c) 2014 Fritz Mahnke
+#
+# Permission is hereby granted, free of charge, to any person obtaining a copy
+# of this software and associated documentation files (the "Software"), to deal
+# in the Software without restriction, including without limitation the rights
+# to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+# copies of the Software, and to permit persons to whom the Software is
+# furnished to do so, subject to the following conditions:
+#
+# The above copyright notice and this permission notice shall be included in all
+# copies or substantial portions of the Software.
+#
+# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+# IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+# FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+# AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+# SOFTWARE.
+
+# Increment a version string using Semantic Versioning (SemVer) terminology.
+
+# Parse command line options.
+
+while getopts ":Mmp" Option
+do
+  case $Option in
+    M ) major=true;;
+    m ) minor=true;;
+    p ) patch=true;;
+  esac
+done
+
+shift $(($OPTIND - 1))
+
+version=$1
+
+# Build array from version string.
+
+a=( ${version//./ } )
+
+# If version string is missing or has the wrong number of members, show usage message.
+
+if [ ${#a[@]} -ne 3 ]
+then
+  echo "usage: $(basename $0) [-Mmp] major.minor.patch"
+  exit 1
+fi
+
+# Increment version numbers as requested.
+
+if [ ! -z $major ]
+then
+  ((a[0]++))
+  a[1]=0
+  a[2]=0
+fi
+
+if [ ! -z $minor ]
+then
+  ((a[1]++))
+  a[2]=0
+fi
+
+if [ ! -z $patch ]
+then
+  ((a[2]++))
+fi
+
+echo "${a[0]}.${a[1]}.${a[2]}"