Merge pull request #33 from desentio/globalseo

globalseo
desentio · Jun 21, 2024 · ebe4e5a · ebe4e5a
2 parents a0b03cd + 1e04c87
commit ebe4e5a
Show file tree

Hide file tree

Showing 28 changed files with 1,464 additions and 769 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
-Enhance your website with GPT-4 powered translations. For more details, visit our integration guides: [weploy.ai/integration](https://www.weploy.ai/integration).
+Enhance your website with GPT-4 powered translations. For more details, visit our integration guides: [globalseo.ai/integration](https://www.globalseo.ai/integration).
 
 ## About the Integration
-To set up Weploy, all you need to do is add a custom code to the start of the body tag and embed a code for the language switcher. Additionally, ensure you have completed the following steps:
+To set up Globalseo, all you need to do is add a custom code to the start of the body tag and embed a code for the language switcher. Additionally, ensure you have completed the following steps:
 
-- Sign up at https://app.weploy.ai.
+- Sign up at https://app.globalseo.ai.
 - Create a project and select the languages into which you want to translate your website.
 - Copy the generated HTML code.
 - Save the project.
@@ -13,10 +13,10 @@ To set up Weploy, all you need to do is add a custom code to the start of the bo
 #### 1. Insert the Script
 Place the following script inside your <head> tag
 ```html
-<link href="https://unpkg.com/weploy-translate/dist/weploy-translate.css" rel="stylesheet">
+<link href="https://unpkg.com/weploy-translate/dist/translate.css" rel="stylesheet">
 <script
-  src="https://unpkg.com/weploy-translate/dist/weploy-translate.js"
-  data-weploy-key="YOUR_API_KEY"
+  src="https://unpkg.com/weploy-translate/dist/translate.js"
+  data-globalseo-key="YOUR_API_KEY"
   data-use-browser-language="true"
   data-original-language="en"
   data-allowed-languages="de, es, ru, id, hi, zh, ja"
@@ -28,7 +28,7 @@ API Key Configuration:
 
 1. **Important:** Replace YOUR_API_KEY with the actual API key obtained from your project. This is crucial for enabling the translation services.
 2. Language Settings: data-original-language: Set this attribute to your website's primary language code (e.g., en for English, fr for French).
-3. data-allowed-languages: Configure this according to your Weploy project's requirements. List the language codes (e.g., en, fr, de) that you wish to support on your site.
+3. data-allowed-languages: Configure this according to your Globalseo project's requirements. List the language codes (e.g., en, fr, de) that you wish to support on your site.
 
 Common Optional Configuration:
 - data-use-browser-language: By default, this is set to automatically translate the website based on the user's browser language. If you prefer to disable this feature, set it to false.
@@ -48,13 +48,13 @@ Advanced Optional Configuration:
 #### 2. Add the language selector
 Enable users to select a language by adding:
 ```html
-<div class="weploy-select weploy-lang-selector-wrapper weploy-exclude">
+<div class="globalseo-select globalseo-lang-selector-wrapper globalseo-exclude">
   <details role="group">
-     <summary role="button" class="weploy-lang-selector-loading">
-        <svg class="weploy-lang-selector-loading-icon" width="20" height="20" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+     <summary role="button" class="globalseo-lang-selector-loading">
+        <svg class="globalseo-lang-selector-loading-icon" width="20" height="20" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M16.7906 28.9982C14.131 28.9516 11.5622 28.0231 9.48748 26.3584C7.4128 24.6937 5.94973 22.3871 5.328 19.8007M16.7906 28.9982C13.4777 28.9404 10.8853 23.521 11.0009 16.8953C11.1166 10.2697 13.8966 4.94402 17.2094 5.00185M16.7906 28.9982C17.4055 29.0089 18.0021 28.8342 18.5667 28.5M16.7906 28.9982C17.4353 29.0094 17.904 28.9456 18.4338 28.8411M5.328 19.8007C8.73815 21.7699 12.6799 22.9255 16.8953 22.9991C17.5541 23.0116 18.2116 22.9969 18.8663 22.9553M5.328 19.8007C5.09283 18.8151 4.98323 17.8037 5.00182 16.7906C5.03917 14.6509 5.63417 12.6503 6.64706 10.9277M17.2094 5.00185C20.5222 5.05968 23.1147 10.4791 22.9991 17.1047C22.9878 17.7501 22.9513 18.3831 22.8914 19M17.2094 5.00185C19.3374 5.03811 21.4175 5.63986 23.2362 6.74538C25.0548 7.8509 26.5467 9.42037 27.5585 11.2928M17.2094 5.00185C15.0814 4.96382 12.9816 5.49262 11.1255 6.53399C9.26935 7.57536 7.72367 9.09181 6.64706 10.9277M27.5585 11.2928C24.612 13.7563 20.8749 15.0729 17.0349 15.0003C13.0382 14.9306 9.40832 13.4003 6.64706 10.9277M27.5585 11.2928C28.5415 13.1075 29.0375 15.146 28.9982 17.2095C28.9905 17.6459 28.9597 18.0764 28.9068 18.5" 
            stroke="#000000" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-           <g style="animation: weployspin 2s linear infinite; transform-origin: 26px 26px;">
+           <g style="animation: globalseospin 2s linear infinite; transform-origin: 26px 26px;">
              <circle cx="26" cy="26" r="7.125" stroke="#000000" stroke-width="1.75" stroke-dasharray="31.42" stroke-dashoffset="10.47"></circle>
            </g>
        </svg>
@@ -64,7 +64,7 @@ Enable users to select a language by adding:
 ```
 
 ## Excluding Text from Translation
-⚠️ **Developer Notice:** Use the class "weploy-exclude" to prevent translation of specific content, like chat pop-ups or user-generated text.
+⚠️ **Developer Notice:** Use the class "globalseo-exclude" to prevent translation of specific content, like chat pop-ups or user-generated text.
 
 Note: Input fields and iframes are ignored by default. 
 

diff --git a/browser.js b/browser.js
@@ -1,7 +1,31 @@
 const { getTranslations, isBrowser } = require("./index.js");
+const { BRAND } = require("./utils/configs.js");
 // const { checkPage } = require("./utils/translation/checkPage.js");
 
 if (isBrowser()) {
+  window.translationScriptTag = document.currentScript;
+
+  // REQUIRED ATTRIBUTES
+  const DATA_API_KEY = `data-${BRAND}-key`
+  const DATA_ORIGINAL_LANG = "data-original-language";
+  const DATA_ALLOWED_LANGUAGES = "data-allowed-languages";
+  const apiKey = window.translationScriptTag.getAttribute(DATA_API_KEY);
+
+  // COMMON OPTIONAL ATTRIBUTES
+  const DATA_USE_BROWSER_LANG = "data-use-browser-language"; // default: true
+  const DATA_EXCLUDE_CLASSES = "data-exclude-classes";
+  const DATA_REPLACE_LINKS = "data-replace-links"; // default: true
+  const DATA_AUTO_CREATE_SELECTOR = "data-auto-create-selector"; // default: true
+  const DATA_DELAY = "data-timeout"; // default: 0
+  const DATA_DYNAMIC_TRANSLATION = "data-dynamic-translation"; // default: true
+  const DATA_TRANSLATE_ATTR = "data-translate-attributes"; // default: false
+
+  // ADVANCED OPTIONAL ATTRIBUTES
+  const DATA_LANG_PARAMETER = "data-lang-parameter"; // default: "lang"
+  const DATA_CUSTOM_LANG_CODE = "data-custom-language-code"; // format: "kk=kz, en=us, ru=rs"
+  const DATA_MERGE_INLINE = "data-translate-splitted-text"; // default: false
+  const DATA_EXCLUDE_CONTENTS = "data-exclude-contents"; // format: "{{content1}}, {{content2}}"
+
   // FEATURE: Prevent Google Translate from translating the page
   // Set the 'translate' attribute of the HTML tag to 'no'
   document.documentElement.setAttribute('translate', 'no');
@@ -31,44 +55,22 @@ if (isBrowser()) {
     return matches;
   }
 
-  window.weployScriptTag = document.currentScript;
 
-  // REQUIRED ATTRIBUTES
-  const DATA_WEPLOY_KEY = "data-weploy-key";
-  const DATA_ORIGINAL_LANG = "data-original-language";
-  const DATA_ALLOWED_LANGUAGES = "data-allowed-languages";
-
-  // COMMON OPTIONAL ATTRIBUTES
-  const DATA_USE_BROWSER_LANG = "data-use-browser-language"; // default: true
-  const DATA_EXCLUDE_CLASSES = "data-exclude-classes";
-  const DATA_REPLACE_LINKS = "data-replace-links"; // default: true
-  const DATA_AUTO_CREATE_SELECTOR = "data-auto-create-selector"; // default: true
-  const DATA_DELAY = "data-timeout"; // default: 0
-  const DATA_DYNAMIC_TRANSLATION = "data-dynamic-translation"; // default: true
-  const DATA_TRANSLATE_ATTR = "data-translate-attributes"; // default: false
-
-  // ADVANCED OPTIONAL ATTRIBUTES
-  const DATA_LANG_PARAMETER = "data-lang-parameter"; // default: "lang"
-  const DATA_CUSTOM_LANG_CODE = "data-custom-language-code"; // format: "kk=kz, en=us, ru=rs"
-  const DATA_MERGE_INLINE = "data-translate-splitted-text"; // default: false
-  const DATA_EXCLUDE_CONTENTS = "data-exclude-contents"; // format: "{{content1}}, {{content2}}"
-
-  const langParam = window.weployScriptTag.getAttribute(DATA_LANG_PARAMETER) || "lang";
+  const langParam = window.translationScriptTag.getAttribute(DATA_LANG_PARAMETER) || "lang";
 
   const search = window.location.search;
   const params = new URLSearchParams(search);
   const paramsLang = params.get(langParam);
   const paramsUpdateTranslation = params.get('weploy_update_translation');
-  window.shouldConsoleWeployError = paramsUpdateTranslation == "true";
 
   // defined languages so dont need extra fetch
-  const originalLangAttr = window.weployScriptTag.getAttribute(DATA_ORIGINAL_LANG) || window.weployScriptTag.getAttribute("data-original-lanugage");
+  const originalLangAttr = window.translationScriptTag.getAttribute(DATA_ORIGINAL_LANG) || window.translationScriptTag.getAttribute("data-original-lanugage");
   const originalLang = (originalLangAttr || "").trim().toLowerCase();
 
-  const allowedLangAttr = window.weployScriptTag.getAttribute(DATA_ALLOWED_LANGUAGES);
+  const allowedLangAttr = window.translationScriptTag.getAttribute(DATA_ALLOWED_LANGUAGES);
   const allowedLangs = (allowedLangAttr || "").trim().toLowerCase().split(",").filter(lang => lang && lang.trim() != originalLang).map(lang => lang.trim());
 
-  const activeLang = window.weployActiveLang || paramsLang || originalLang;
+  const activeLang = window.globalseoActiveLang || paramsLang || originalLang;
   if (document.documentElement.lang != activeLang) {
     document.documentElement.lang = activeLang;
   }
@@ -148,11 +150,11 @@ if (isBrowser()) {
     const nowTimestamp = now.getTime();
 
     // get existing expiration timestamp
-    const weployExpirationTimestamp = window.localStorage.getItem("weployExpirationTimestamp");
-    const expiration = Number(weployExpirationTimestamp);
+    const globalseoExpirationTimestamp = window.localStorage.getItem("globalseoExpirationTimestamp");
+    const expiration = Number(globalseoExpirationTimestamp);
 
     if (!isNaN(expiration) && expiration < nowTimestamp) {
-      window.localStorage.removeItem("weployExpirationTimestamp");
+      window.localStorage.removeItem("globalseoExpirationTimestamp");
       window.localStorage.removeItem("translationCachePerPage");
     }
   } catch (e) {
@@ -169,7 +171,7 @@ if (isBrowser()) {
     console.log("Error parsing translation cache", e)
   }
 
-  const customLanguageCodeAttr = window.weployScriptTag.getAttribute(DATA_CUSTOM_LANG_CODE); // format is "kk=kz, en=us, ru=rs"
+  const customLanguageCodeAttr = window.translationScriptTag.getAttribute(DATA_CUSTOM_LANG_CODE); // format is "kk=kz, en=us, ru=rs"
   const customLanguageCode = customLanguageCodeAttr ? customLanguageCodeAttr.split(",").reduce((acc, lang) => {
     const [key, value] = lang.trim().split("=");
     if (!key || !value) return acc;
@@ -178,41 +180,37 @@ if (isBrowser()) {
     return acc;
   }, {}) : {};
 
-  // get options
-  const apiKey = window.weployScriptTag.getAttribute(DATA_WEPLOY_KEY);
-
-
   // this is backward compatibility for use browser language
-  const disableAutoTranslateAttr = window.weployScriptTag.getAttribute("data-disable-auto-translate");
+  const disableAutoTranslateAttr = window.translationScriptTag.getAttribute("data-disable-auto-translate");
   const disableAutoTranslate = disableAutoTranslateAttr == "true";
-  const useBrowserLanguageAttr = window.weployScriptTag.getAttribute(DATA_USE_BROWSER_LANG);
+  const useBrowserLanguageAttr = window.translationScriptTag.getAttribute(DATA_USE_BROWSER_LANG);
   const useBrowserLanguage = useBrowserLanguageAttr != "false" && useBrowserLanguageAttr != false;
 
   // exclude classes
-  const excludeClassesAttr = (window.weployScriptTag.getAttribute(DATA_EXCLUDE_CLASSES) || "").trim()
+  const excludeClassesAttr = (window.translationScriptTag.getAttribute(DATA_EXCLUDE_CLASSES) || "").trim()
   const excludeClassesByComma = excludeClassesAttr.split(",").filter(className => !!className).map(className => className.trim());
   const excludeClassesBySpace = excludeClassesAttr.split(" ").filter(className => !!className).map(className => className.trim().replaceAll(",", ""));
   const mergedExcludeClasses = [...excludeClassesByComma, ...excludeClassesBySpace];
   const excludeClasses = [...new Set(mergedExcludeClasses)]; // get unique values
 
   // exclude contents
-  const excludeContentsAttr = (window.weployScriptTag.getAttribute(DATA_EXCLUDE_CONTENTS) || "").trim()
+  const excludeContentsAttr = (window.translationScriptTag.getAttribute(DATA_EXCLUDE_CONTENTS) || "").trim()
   const splittedContents = getTextInsideBrackets(excludeContentsAttr);
   const excludeContents = [...new Set(splittedContents)]; // get unique values
 
   // timeout
-  const timeoutAttr = window.weployScriptTag.getAttribute(DATA_DELAY);
+  const timeoutAttr = window.translationScriptTag.getAttribute(DATA_DELAY);
   const timeout = isNaN(Number(timeoutAttr)) ? 0 : Number(timeoutAttr);
 
-  const createSelector = window.weployScriptTag.getAttribute(DATA_AUTO_CREATE_SELECTOR) != "false";
+  const createSelector = window.translationScriptTag.getAttribute(DATA_AUTO_CREATE_SELECTOR) != "false";
 
-  const translateAttributes = window.weployScriptTag.getAttribute(DATA_TRANSLATE_ATTR) == "true";
+  const translateAttributes = window.translationScriptTag.getAttribute(DATA_TRANSLATE_ATTR) == "true";
 
-  const dynamicTranslation = paramsUpdateTranslation == "true" || (window.weployScriptTag.getAttribute(DATA_DYNAMIC_TRANSLATION) != "false");
+  const dynamicTranslation = paramsUpdateTranslation == "true" || (window.translationScriptTag.getAttribute(DATA_DYNAMIC_TRANSLATION) != "false");
 
-  const translateSplittedText = window.weployScriptTag.getAttribute(DATA_MERGE_INLINE) == "true";
+  const translateSplittedText = window.translationScriptTag.getAttribute(DATA_MERGE_INLINE) == "true";
 
-  const shouldReplaceLinks = window.weployScriptTag.getAttribute(DATA_REPLACE_LINKS) != "false";
+  const shouldReplaceLinks = window.translationScriptTag.getAttribute(DATA_REPLACE_LINKS) != "false";
 
   const options = {
     useBrowserLanguage: !disableAutoTranslate && useBrowserLanguage,
@@ -229,7 +227,7 @@ if (isBrowser()) {
     langParam
   }
 
-  function initWeploy() {
+  function initTranslation() {
     // replace links with lang (for SEO purposes)
     if (shouldReplaceLinks && paramsLang && (paramsLang != originalLang)) {
       replaceLinks(paramsLang);
@@ -240,11 +238,11 @@ if (isBrowser()) {
   // console.log("document.readyState", document.readyState)
   if (document.readyState == 'complete') {
     // DOM is already loaded, run the code
-    initWeploy();
+    initTranslation();
   } else {
     // DOM is not loaded yet, wait for it
     document.addEventListener("DOMContentLoaded", function() {
-      initWeploy();
+      initTranslation();
     });
   }
 }
diff --git a/dev.md b/dev.md
@@ -2,13 +2,13 @@
 1. install live server vs code extension
 2. press SHIFT+CTRL+P
 3. Search fro "Live server: open with live server"
-4. Now the unpackage file should be available here: http://127.0.0.1:5500/dist/weploy-translate.js
+4. Now the unpackage file should be available here: http://127.0.0.1:5500/dist/translate.js
 5. run "npm ci" and then "npm run build" in the terminal
 
 ⚠️ Do not forget to build every time you want to see the changes in the browser
 
 # Second option
 1. run npm run dev
-2. import this file: http://localhost:8080/weploy-translate.js
+2. import this file: http://localhost:8080/translate.js
 3. import this in the test.html and done