💻 Use subdomains to navigate through languages

config.py

@@ -2,11 +2,16 @@
 import socket
 
 app_name = os.getenv('HEROKU_APP_NAME', socket.gethostname())
-dyno = os.getenv('DYNO')
+dyno = os.getenv('DYNO')  # if this env variable is set, it means we are in a Heroku
 athena_query = os.getenv('AWS_ATHENA_PREPARE_STATEMENT')
 
 config = {
-    'port': os.getenv('PORT') or 8080,
+    'port': os.getenv('PORT', 8080),
+    # I can't reference a previous field, so copying and pasting here
+    'domain_name': (
+        f"{os.getenv('DOMAIN_NAME')}" if dyno  # if we are in localhost no need to add port
+        else f"{os.getenv('DOMAIN_NAME', 'localhost')}:{os.getenv('PORT', 8080)}"
+    ),
     'session': {
         'cookie_name': 'hedy',
         # in minutes

dodo.py

@@ -25,7 +25,7 @@
 from glob import glob
 import sys
 import platform
-
+from config import config as CONFIG
 from doit.tools import LongRunning
 
 if os.getenv('GITHUB_ACTION') and platform.system() == 'Windows':
@@ -354,7 +354,7 @@ def task_devserver():
             LongRunning([python3, 'app.py'], shell=False, env=dict(
                 os.environ,
                 # These are required to make some local features work.
-                BASE_URL="http://localhost:8080/",
+                BASE_URL=f"http://{CONFIG['domain_name']}",
                 ADMIN_USER="admin",))
         ],
         verbosity=2,  # show everything live

static/js/app.ts

@@ -49,6 +49,7 @@ let theAdventures: Record<string, Adventure> = {};
 export let theLevel: number = 0;
 export let theLanguage: string = '';
 export let theKeywordLanguage: string = 'en';
+export let theDomainName: string = '';
 let theStaticRoot: string = '';
 let currentTab: string;
 let theUserIsLoggedIn: boolean;
@@ -123,10 +124,11 @@ const slides_template = `
 export interface InitializeAppOptions {
   readonly level: number;
   readonly keywordLanguage: string;
+  readonly domainName: string
   /**
    * The URL root where static content is hosted
    */
-  readonly staticRoot?: string;
+  readonly staticRoot?: string;  
 }
 
 /**
@@ -138,6 +140,7 @@ export function initializeApp(options: InitializeAppOptions) {
   theStaticRoot = options.staticRoot ?? '';
   // When we are in Alpha or in dev the static root already points to an internal directory
   theStaticRoot = theStaticRoot === '/' ? '' : theStaticRoot;
+  theDomainName = options.domainName;
   initializeCopyToClipboard();
 
   // Close the dropdown menu if the user clicks outside of it
@@ -668,7 +671,7 @@ export function tryPaletteCode(exampleCode: string) {
 }
 
 export function viewProgramLink(programId: string) {
-  return window.location.origin + '/hedy/' + programId + '/view';
+  return `${location.protocol}//${theDomainName}/hedy/${programId}/view`;
 }
 
 function updateProgramCount() {
@@ -1557,22 +1560,29 @@ export function toggle_blur_code() {
   }
 }
 
-export async function change_language(lang: string) {
-  await tryCatchPopup(async () => {
-    const response = await postJson('/change_language', { lang });
-    if (response) {
-      const queryString = window.location.search;
-      const urlParams = new URLSearchParams(queryString);
-
-      if (lang === 'en' || urlParams.get("language") !== null) {
-        urlParams.set("language", lang)
-        urlParams.set('keyword_language', lang);
-        window.location.search = urlParams.toString();
-      } else {
-        location.reload();
+export async function change_language(lang: string) { 
+  if (theDomainName.includes('localhost')) {
+    await tryCatchPopup(async () => {
+      const response = await postJson('/change_language', { lang });
+      if (response) {
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+
+        if (lang === 'en' || urlParams.get("language") !== null) {
+          urlParams.set("language", lang)
+          urlParams.set('keyword_language', lang);
+          window.location.search = urlParams.toString();
+        } else {
+          location.reload();
+        }
       }
-    }
-  });
+    });
+  } else {
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    urlParams.set('keyword_language', lang);
+    location.href = `${location.protocol}//${lang}.${theDomainName}${location.pathname}?${urlParams.toString()}`
+  }
 }
 
 function update_view(selector_container: string, new_lang: string) {

static/js/appbundle.js

@@ -60665,6 +60665,7 @@ ${o3}` : i3;
     store_parsons_attempt: () => store_parsons_attempt,
     submit_program: () => submit_program,
     success: () => success,
+    theDomainName: () => theDomainName,
     theGlobalDebugger: () => theGlobalDebugger,
     theGlobalEditor: () => theGlobalEditor,
     theGlobalSourcemap: () => theGlobalSourcemap,
@@ -120017,9 +120018,19 @@ def note_with_error(value, err):
     });
     return result;
   }
-  function redirect(where) {
-    where = "/" + where;
-    window.location.pathname = where;
+  function redirect(where, lang) {
+    if (lang === void 0) {
+      location.pathname = "/" + where;
+      return;
+    }
+    if (/^localhost:\d\d\d\d|(\d+\.\d+\.\d+\.\d+:\d\d\d\d)$/.test(theDomainName)) {
+      window.location.href = `http://${theDomainName}/${where}?lang=${lang}`;
+      return;
+    } else {
+      const protocol = location.protocol;
+      window.location.href = `${protocol}//${lang}.${theDomainName}/${where}`;
+      return;
+    }
   }
   async function logout() {
     await postNoResponse("/auth/logout");
@@ -120052,17 +120063,21 @@ def note_with_error(value, err):
       tryCatchPopup(async () => {
         const body = convertFormJSON($(this));
         await postNoResponse("/auth/signup", body);
-        afterLogin({ "first_time": true, "is_teacher": "is_teacher" in body });
+        afterLogin({ "first_time": true, "teacher": "is_teacher" in body, "lang": body["language"] || "en" });
       });
     });
     $("form#login").on("submit", function(e) {
       e.preventDefault();
       tryCatchPopup(async () => {
         const response = await postJson("/auth/login", convertFormJSON($(this)));
         if (response["first_time"]) {
-          return afterLogin({ "first_time": true });
+          return afterLogin({ "first_time": true, "lang": response["lang"] });
         }
-        return afterLogin({ "admin": response["admin"] || false, "teacher": response["teacher"] });
+        return afterLogin({
+          "admin": response["admin"] || false,
+          "teacher": response["teacher"] || false,
+          "lang": response["lang"]
+        });
       });
     });
     $("form#profile").on("submit", function(e) {
@@ -120072,7 +120087,12 @@ def note_with_error(value, err):
         if (response.reload) {
           modal.notifySuccess(response.message, 2e3);
           setTimeout(function() {
-            location.reload();
+            if (response["new_lang"]) {
+              const new_lang = response["new_lang"];
+              location.href = `${location.protocol}//${new_lang}.${theDomainName}/my-profile`;
+            } else {
+              location.reload();
+            }
           }, 2e3);
         } else {
           modal.notifySuccess(response.message);
@@ -120187,8 +120207,10 @@ def note_with_error(value, err):
   async function afterLogin(loginData) {
     var _a3;
     const { url } = (_a3 = localLoadOnce(REDIRECT_AFTER_LOGIN_KEY)) != null ? _a3 : {};
+    const userLang = loginData["lang"];
     if (url && !loginData["first_time"]) {
-      window.location = url;
+      const urlObject = new URL(url);
+      window.location.href = `${urlObject.protocol}//${userLang}.${theDomainName}${urlObject.pathname}${urlObject.search !== "" ? "?" + urlObject.search : ""}`;
       return;
     }
     const joinClassString = localStorage.getItem("hedy-join");
@@ -120197,18 +120219,18 @@ def note_with_error(value, err):
       localStorage.removeItem("hedy-join");
       return join_class(joinClass.id, joinClass.name);
     }
-    if (loginData["first_time"] && loginData["is_teacher"]) {
-      return redirect("for-teachers");
-    } else if (loginData["first_time"] && !loginData["is_teacher"]) {
-      return redirect("hedy/1");
+    if (loginData["teacher"]) {
+      redirect("for-teachers", userLang);
+      return;
+    } else if (loginData["first_time"] && !loginData["teacher"]) {
+      redirect("hedy/1", userLang);
+      return;
     }
     if (loginData["admin"]) {
-      return redirect("admin");
-    }
-    if (loginData["teacher"]) {
-      return redirect("for-teachers");
+      redirect("admin", userLang);
+      return;
     }
-    redirect("");
+    redirect("", userLang);
   }
 
   // static/js/local-save-warning.ts
@@ -120578,6 +120600,7 @@ def note_with_error(value, err):
   var theLevel = 0;
   var theLanguage2 = "";
   var theKeywordLanguage = "en";
+  var theDomainName = "";
   var theStaticRoot = "";
   var currentTab;
   var theUserIsLoggedIn;
@@ -120649,6 +120672,7 @@ def note_with_error(value, err):
     theKeywordLanguage = options.keywordLanguage;
     theStaticRoot = (_a3 = options.staticRoot) != null ? _a3 : "";
     theStaticRoot = theStaticRoot === "/" ? "" : theStaticRoot;
+    theDomainName = options.domainName;
     initializeCopyToClipboard();
     $(document).on("click", function(event2) {
       if (!$(event2.target).closest(".dropdown").length) {
@@ -121041,7 +121065,7 @@ def note_with_error(value, err):
     }
   }
   function viewProgramLink(programId) {
-    return window.location.origin + "/hedy/" + programId + "/view";
+    return `${location.protocol}//${theDomainName}/hedy/${programId}/view`;
   }
   function updateProgramCount() {
     const programCountDiv = $("#program_count");
@@ -121723,20 +121747,27 @@ def note_with_error(value, err):
     }
   }
   async function change_language(lang) {
-    await tryCatchPopup(async () => {
-      const response = await postJson("/change_language", { lang });
-      if (response) {
-        const queryString = window.location.search;
-        const urlParams = new URLSearchParams(queryString);
-        if (lang === "en" || urlParams.get("language") !== null) {
-          urlParams.set("language", lang);
-          urlParams.set("keyword_language", lang);
-          window.location.search = urlParams.toString();
-        } else {
-          location.reload();
+    if (theDomainName.includes("localhost")) {
+      await tryCatchPopup(async () => {
+        const response = await postJson("/change_language", { lang });
+        if (response) {
+          const queryString = window.location.search;
+          const urlParams = new URLSearchParams(queryString);
+          if (lang === "en" || urlParams.get("language") !== null) {
+            urlParams.set("language", lang);
+            urlParams.set("keyword_language", lang);
+            window.location.search = urlParams.toString();
+          } else {
+            location.reload();
+          }
         }
-      }
-    });
+      });
+    } else {
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      urlParams.set("keyword_language", lang);
+      location.href = `${location.protocol}//${lang}.${theDomainName}${location.pathname}?${urlParams.toString()}`;
+    }
   }
   function update_view(selector_container, new_lang) {
     $("#" + selector_container + " > div").map(function() {
@@ -122326,7 +122357,8 @@ def note_with_error(value, err):
     initializeApp({
       level: level3,
       keywordLanguage: options.keyword_language,
-      staticRoot: options.staticRoot
+      staticRoot: options.staticRoot,
+      domainName: options.domainName
     });
     initializeFormSubmits();
     initializeTutorial();
@@ -127507,6 +127539,7 @@ def note_with_error(value, err):
         lang: js.lang,
         level: parseInt(js.level),
         keyword_language: js.lang,
+        domainName: js.domainName,
         javascriptPageOptions: js
       });
     }, 1e3);