Various changes:

* Turned off indexing for the /paddle-checkout page.
* Removed .env python env file from .gitignore. That way the ./run script will work to invoke the scripts inside mac-mouse-fix-scripts/ on a fresh clone
* Improved locale-switches:
    * Added app.vue file (instead of letting nuxt autogenerated it). Calling finalizePendingLocaleChange() in there which creates smoother locale changes together with other changes
    * Refactored router.options.ts to clean up and make the scroll position to be nicely preserved after switching locales with new mechanism. Also possibly made it more robust in the future by having it fall back to some default (browser?) scroll-pos-restoration as a fallback case (Before, the fallback case was scrolling to the top of the page). Also added logging to the scroll-pos-restoration, which would've spared me a lot of time figuring out where the scroll pos-changes come from while working on this commit.
    * Improved LocalePicker.vue. Now updates the selection when user navigates through browser history. Cleaned up code. Made it switch locales using a different techique. Together with the new `skipSettingLocaleOnNavigate: true` setting in nuxt.config, and the `finalizePendingLocaleChange()` call inside `app.vue`, this has the effect that the app will first navigate to a new route (e.g. from /de/404 to /vi/404, and then switch locales afterwards. Afaik this is the best experience. We're not fully reloading the page, which makes things faster. But we're also not first switching the locale, and then switching routes (which feels like a half-reload of the page - replays the intro animations, etc.))
    * Update the mechanism for loading uiStrings inside QuoteCard.vue to work with the new localeSwitch mechanisms.
    * Disabled the language-redirect-fix.js (which reloaded the page after a locale switch) since the underlying bug seems to have been fixed.

* Fixed/updated mechanism for disabling horizontal scrolling and disabling vertical scrolling while the page (mostly the intro section) is loading. This is implemented in tailwind.css and index.vue. Timing also had to be adjusted to new router.options.ts logic iirc.
    * Also fixed/updated related mechanism for hiding the `afterIntro` on Index.vue while the intro is loading. The BottomNav is now also hidden.

* Added new function "objectDescription()" for logging objects with circular refs (JSON.stringify crashes.)

* Made it so the user can scroll, and the intro animation starts loading before the intro 'transition' animation has played (the intro transition consists of the localizationProgress and the down-arrow-chevron fading in.) Also restructured the html/css of those to avoid interference between the scroll-linked intro animation and the intro-transition (The used to both want to control the same opacity values leading to animation breakage when scrolling during the intro transition.)

* Moved localization.ts and markdownTranslate.ts composables into the setup-cool-i18n.ts plugin. We did this to fix issues where we couldn't use $mt() in a non-<script setup> context or something. Not sure this was necessary.

* Cleaned up implementation for localizationProgressDisplay inside Intro.vue (Not sure if I improved the appearance / behaviour as well, but it works/looks nice now.)
* Removed storeToRefs() calls with using the `global.someGlobalVar` store directly, for clearer code.
* Added useLocalePath() import in BackButton.vue. Don't know why the code worked before this, since it seems we already were using `localePath()`, but it has red squiggles in vscode if you don't import it.
* Fixed some errors by replacing ! with ? in the vue templates and code (iirc). I remember specifically there were errors on the console, when resizing the window. Not sure if I introduced the errors while working on this commit or if they were present before.

* Comments and documentation added
* Moved de.js and en-US.js to and `old` folder since they are unused.
* Cleaned up lots of code. E.g.:
    * Index.vue template

* Further updated dependencies: (I think we did this to solve some bugs caused by the dependencies? I can't recall though)

   "devDependencies": {
-    "@nuxt/devtools": "latest",
+    "@nuxt/devtools": "^1.3.9",
     "@nuxtjs/i18n": "^8.3.3",
     "@nuxtjs/robots": "^4.0.2",
     "@nuxtjs/sitemap": "^5.0.0",
     "@nuxtjs/tailwindcss": "^6.12.1",
-    "@types/node": "^18.19.44",
+    "@types/node": "^22.3.0",
     "nuxt": "^3.12.4"
   },
   "dependencies": {
     "@nuxt/image": "^1.7.0",
-    "@pinia/nuxt": "^0.4.11",
-    "@types/markdown-it": "^13.0.9",
+    "@pinia/nuxt": "^0.5.3",
+    "@types/markdown-it": "^14.1.2",
     "assert": "^2.1.0",
     "gsap": "^3.12.5",
-    "markdown-it": "^13.0.2"
+    "markdown-it": "^14.1.0"
   }
 }

TODO:
- [ ] Test on mobile
- [ ] Bring enhancements from localizationProgress of website to the .md files. (Make the localizationProgress message itself localizable.)
- [ ] ? Fix jank when expanding quote cards and then scrolling up into the zoom animation
- [ ] ? Fix jank when expanding / unexpanding feature cards repeatedly.

.env

@@ -0,0 +1 @@
+PYTHONPATH=mac-mouse-fix-scripts/Shared/

.gitignore

@@ -18,7 +18,7 @@ logs
 .idea
 
 # Local env files
-.env
+# .env 		# Commenting out since python .env config file has this name
 .env.*
 !.env.example
 

.npmrc

@@ -1 +1,2 @@
+# What is shamefully-hoist? I can't remember. Seems to be some default setting for npm or pnpm.
 shamefully-hoist=true

.vscode/launch.json

@@ -4,6 +4,7 @@
   // Hover to view descriptions of existing attributes.
   "version": "0.2.0",
   "configurations": [
+
     {
       "type": "chrome",
       "request": "launch",

app.vue

@@ -0,0 +1,39 @@
+<!-- 
+ Root element of all pages and layouts. You can also delete this and nuxt will create a default afaik. 
+ We created this to make locale switches smoother (using `finalizePendingLocaleChange()` together with page transitions.)
+ (But we turned the page transition animations off at the time of writing for a snappier experience.)
+ -->
+
+<template>
+  <NuxtLayout>
+    <NuxtPage
+      :transition="{
+        name: 'my',
+        mode: 'out-in',
+        onBeforeEnter
+      }"
+    />
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+
+import { useGlobalStore } from '~/store/global';
+const { finalizePendingLocaleChange } = useI18n();
+const global = useGlobalStore()
+
+const onBeforeEnter = async () => {
+  await finalizePendingLocaleChange(); // Works in concert with `skipSettingLocaleOnNavigate: true`. and `navigateTo(switchLocalePath())` See docs: https://i18n.nuxtjs.org/docs/guide/lang-switcher#wait-for-page-transition 
+  global.localeSwitchIsPending = false;
+}
+
+</script>
+
+<style>
+.my-enter-active .my-leave-active {
+  transition: opacity 0.0s;
+}
+.my-enter, .my-leave-active {
+  opacity: 1; /* Turn off animations */
+}
+</style>

app/router.options.ts

@@ -17,7 +17,8 @@
 
 // Imports
 import { type RouterConfig } from "@nuxt/schema"
-import { storeToRefs } from "pinia"
+import { type RouteLocationNormalizedGeneric, type RouteLocationNormalizedLoadedGeneric } from 'vue-router'
+import { objectDescription } from "~/utils/util"
 
 // Constants
 const hashOffset = -70 // Chosen so that the headline is *centered* on the screen when we link to sections of the website with #. !REMEMBER: Update this when the layout of the section headers changes.
@@ -26,27 +27,75 @@ const scrollBehavior = 'instant' // Whether to animate the scroll
 // Main
 export default <RouterConfig> {
 
-  scrollBehavior: (to, from, savedPosition) => {
+  scrollBehavior: (to: RouteLocationNormalizedGeneric, from: RouteLocationNormalizedLoadedGeneric, savedPosition) => {
 
-    const { $store } = useNuxtApp()
-    const { introAnimationId } = storeToRefs($store)
+    /* Here, we customize scroll-position-restoration logic after page reloads or route-changes
+    
+        This is all very hacky. If we change the logic here, we need to change other parts of the page, which rely on the timing of this. For example:
+        - Unhiding the `afterIntro` content inside Index.vue.
+    */
+
+    console.log(`router.options: Adjusting scroll position with\nfrom: ${objectDescription(from)}\nto: ${objectDescription(to)}\nsaved: ${savedPosition}`); // If we use JSON.stringify() instead of objectDescription(), this will crash in (only in release builds) due to circular refs int the printed objects.
+
+    const { $store: global, $i18n } = useNuxtApp();
+
+    const scrollY1 = window.scrollY;
+    const scrollHeight1 = document.documentElement.scrollHeight;
 
     return new Promise((resolve) => {
+
+      const scrollY2 = window.scrollY;
+      const scrollHeight2 = document.documentElement.scrollHeight;
 
-      const unwatch = watch(introAnimationId, () => { // Wait for the intro scroll animation to load, because it shifts everything below it down.
+      const isLocaleSwitch = global.localeSwitchIsPending; // Why are we checking the localeSwitch flag here and not with scrollY4, scrollY5, whatever? Idk it works. 
+      if (isLocaleSwitch) {
+        console.assert(to.name !== from.name);
+      }
 
-        if (introAnimationId.value > 0) {
-
-          requestAnimationFrame(() => {
-            resolve(
-                to.hash       ? { el: to.hash, top: hashOffset, behavior: scrollBehavior } : // If the URL ends with `#someID`, scroll to the element with HTML id `someID`
-                savedPosition ? { top: savedPosition.top, behavior: scrollBehavior  } : 
-                                { top: 0 }
-            )
-          })
+      const unwatch = watch(() => global.introAnimationId, async (newIntroAnimationId) => { // Wait for the intro scroll animation to load, because it shifts everything below it down.
 
-          unwatch()
+        const scrollY3 = window.scrollY;
+        const scrollHeight3 = document.documentElement.scrollHeight;
+
+        if (isLocaleSwitch) {
+          // `$i18n` is injected in the `setup` of the nuxtjs/i18n module.
+          // `scrollBehavior` is guarded against being called even when it is not completed
+          await $i18n.waitForPendingLocaleChange();
         }
+
+        const scrollY4 = window.scrollY;
+        const scrollHeight4 = document.documentElement.scrollHeight;
+
+        requestAnimationFrame(() => {
+
+          const scrollY5 = window.scrollY;
+          const scrollHeight5 = document.documentElement.scrollHeight;
+
+          console.log(`router.options: scrollYAndHeightChanges: ${scrollY1}/${scrollHeight1} -> ${scrollY2}/${scrollHeight2} -> ${scrollY3}/${scrollHeight3} -> ${scrollY4}/${scrollHeight4} -> ${scrollY5}/${scrollHeight5}`);
+
+          if (newIntroAnimationId > 0) {
+            if (isLocaleSwitch) {
+              const oldScrollTopDist = (scrollY1 - 0); // This is all very hacky. We're using scrollY1 and scrollY5 here. I'm not sure why that works.
+              const oldScrollBottomDist = (scrollHeight1 - window.innerHeight - scrollY1);
+              const scrollPosWasCloserToTopThanBottom = oldScrollTopDist < oldScrollBottomDist;
+              const newScrollY = scrollPosWasCloserToTopThanBottom ? (oldScrollTopDist) : (scrollHeight5 - window.innerHeight - oldScrollBottomDist);
+              console.log(`router.options: Restoring scroll position after locale switch. Anchoring to ${ scrollPosWasCloserToTopThanBottom ? 'top' : 'bottom'}. Target y: ${newScrollY}`);
+              resolve({ top: newScrollY });
+            } else if 
+            (to.hash) {
+              console.log(`router.options: Restoring scroll position with hash ${to.hash}`)
+              resolve({ el: to.hash, top: hashOffset, behavior: scrollBehavior}) // If the URL ends with `#someID`, scroll to the element with HTML id `someID`)
+            } else if 
+            (savedPosition) {
+              console.log(`router.options: Restoring scroll position to saved position ${savedPosition.top}`)
+              resolve({ top: savedPosition.top, behavior: scrollBehavior})
+            } else {
+              console.log(`router.options: Falling back to using default scroll restoration`);
+              resolve({ top: scrollY1 }) 
+            }
+          }
+        })
+        unwatch()
       })
     })
   }

assets/css/tailwind.css

@@ -22,9 +22,14 @@ Notes:
 
     @apply sm:text-[12px] text-[12px];
 
+    /* Disable horizontal scroll */
+    @apply overflow-x-hidden;
+
     /* Disable vertical scroll - is re-enabled in js after hydration in index.html
-      Note: Tried to put this inside index.html where I think it belongs but dindn't work there for some reason. */
-    overflow-y: clip;
+        Notes: 
+        - Tried to put this inside index.html where I think it belongs but didn't work there for some reason. 
+        - `overflow-hidden` is better than `clip` I think. Clip also turns off programmatic scrolling apparently. */
+    @apply overflow-y-hidden;
 
     /* Set default font family (Defined in tailwind.config.js) */
     @apply font-body;
@@ -35,8 +40,16 @@ Notes:
   }
 
   body {
-    /* Disable horizontal scroll (setting this on the html element doesn't work on mobile) */
-    @apply overflow-x-clip;
+
+    /* Disable horizontal scroll 
+        Notes: 
+        - setting this on the html element doesn't work on mobile
+        - Doing this on `body` as well as `html` to be safe. */
+    @apply overflow-x-hidden;
+
+    /* Disable vertical scroll - re-enable in js after hydration 
+        Note: We're doing this on `body` as well as `html` to be safe */
+    @apply overflow-y-hidden;
 
     /* Set background */
     @apply bg-neutral-50;

components/BackButton.vue

@@ -11,6 +11,7 @@
 <script setup lang="ts">
 
 const $mt = useMT()
+const localePath = useLocalePath()
 
 const props = defineProps({
   path: String,