Added google lighthouse

.github/workflows/ci.yml

@@ -0,0 +1,28 @@
+name: CI
+
+on:
+    # Trigger the workflow every time you push to the `main` branch
+    # Using a different branch name? Replace `main` with your branch’s name
+    push:
+      branches: [main]
+    # Allows you to run this workflow manually from the Actions tab on GitHub.
+    workflow_dispatch:
+
+jobs:
+  lighthouse:
+    name: Lighthouse
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - name: npm install, build
+        run: |
+          npm install
+          npm run build
+      - name: run Lighthouse CI
+        run: |
+          npm install -g @lhci/[email protected]
+          lhci autorun

lighthouserc.js

@@ -0,0 +1,7 @@
+module.exports = {
+    ci: {
+      upload: {
+        target: 'temporary-public-storage',
+      },
+    },
+  };

src/components/CodeBlock.svelte

@@ -10,15 +10,37 @@
   import { writable } from "svelte/store";
   import { onThemeChange } from "src/utils/onThemeChange";
   import { onDestroy } from "svelte";
-
+  
   /** Code that will be sent to the playground, replaces __VALUE__ with the code in the editor */
   export let setup = "__VALUE__";
   /** Code visible in the editor */
   export let code = "";
   /** Error message in case the code doesn't compile */
-  export let errorMsg = 'Woops, something went wrong and the code does not compile!\nIf you\'ve mistakenly messed up the code, click the "Reset" button to return it back to its original state.\n\nRemember to replace ? with your answer.';
+  export let errorMsg = "";
+  /** Placeholder in the editor when the code is empty */
+  export let placeholder = "";
   /** Hide line numbers */
   export let showLineNumbers = true;
+  /** Language used by the editor */
+  export let lang: keyof typeof langs = "en";
+  
+  const langs = {
+    "en": {
+      placeholder: "Enter your code here...",
+      compiling: "Compiling...",
+      error: "Woops, something went wrong and the code does not compile!\nIf you\'ve mistakenly messed up the code, click the \"Reset\" button to return it back to its original state.\n\nRemember to replace ? with your answer.",
+    },
+    "ca": {
+      placeholder: "Escriu el teu codi aqui...",
+      compiling: "Compilant...",
+      error: "Ups, alguna cosa ha fallat i el codi no compila!\nSi t'has equivocat modificant el codi, fes clic al botó de \"Reset\" per tornar-lo al seu estat original.\n\nRecorda substituïr ? amb la teva resposta."
+    },
+    "es": {
+      placeholder: "Escribe tu código aquí...",
+      compiling: "Compilando...",
+      error: "Vaya, ¡algo ha ido mal y el código no compila!\nSi has estropeado el código por error, haz clic en el botón \"Reset\" para devolverlo a su estado original.\n\nRecuerda sustituir ? con tu respuesta.",
+    }
+  };
 
   const theme = writable(document.documentElement.dataset.theme);
   const observer = onThemeChange(t => theme.set(t));
@@ -33,14 +55,14 @@
     if (!f && !focused) {
       return;
     }
-
+    
     running = true;
     
-    playground_response = "Compiling...";
+    playground_response = langs[lang].compiling;
 
     // Wait for the editor to update `value`
     await new Promise((resolve) => setTimeout(resolve, 100));
-
+    
     const params = {
       version: "stable",
       optimize: "0",
@@ -56,20 +78,21 @@
       mode: "cors",
       body: JSON.stringify(params),
     })
-      .then((response) => response.json())
-      .then((response) => {
-        console.log({ params, response });
-        return response;
-      })
-      .then((response) => {
-        if (response.error === null) {
-          playground_response = response.result;
-        } else {
-          playground_response = errorMsg || response.error;
-        }
-      })
-      .catch((error) => (playground_response = errorMsg || error.message))
-      .finally(() => (running = false));
+    .then((response) => response.json())
+    .then((response) => {
+      console.log({ params, response });
+      return response;
+    })
+    .then((response) => {
+      if (response.error === null) {
+        playground_response = response.result;
+      } else {
+        playground_response = errorMsg || langs[lang].error || response.error;
+      }
+    })
+    .catch((error) => (playground_response = errorMsg || langs[lang].error || error.message))
+    .finally(() => (running = false));
+
   };
 </script>
 
@@ -94,9 +117,9 @@
     theme={$theme === "dark" ? githubDark : githubLight}
     basic={showLineNumbers}
     editable={!running}
-    placeholder="Enter your code here..."
+    placeholder={placeholder || langs[lang].placeholder}
   />
-
+  
   <button
     class="not-content"
     title="Run (Shift+Enter)"

src/content/docs/ca/first-steps/1-introduction.mdx

@@ -9,25 +9,25 @@ import QuestionCard from "@components/QuestionCard.astro";
 Gràcies per llegir Rust Quest!  
 Aquest llibre està pensat per gent amb zero experiència amb Rust o programació en general, no tinguis por, estic segur que aprendràs alguna cosa!
 
-Normalment, Rust es veu com un llenguatge difícil d'aprendre, i se sol recomanar com a primer llenguatge.
+Normalment, Rust es veu com un llenguatge difícil d'aprendre, i no se sol recomanar com a primer llenguatge.  
 Doncs bé, el meu objectiu és demostrar el contrari!
 
-Crec que Rust és un professor molt estricte però minuciós, que s'assegura que entens el teu codi abans de deixar que l'executis.  
+Crec que Rust és un professor molt estricte i minuciós, que s'assegura que entens el teu codi abans de deixar que l'executis.  
 Alguns poden trobar això poc atractiu al principi: "Deixa'm executar el meu programa!".  
 Però la veritat és que aquesta rigorositat et farà un millor programador, un que escriu codi que "funciona a la primera".
 
-El que fa únic a aquest llibre és que està organitzat en 'Missions'.
+El que fa únic a aquest llibre és que està organitzat en 'Missions'.  
 Cada missió et proporcionarà una lliçó de programació, i inclou un fragment de codi que hauràs de modificar per completar-la.
 
 Intenta executar el següent fragment de codi (fes clic al botó d'"Executar" de la dreta o `⇧ + ↵` al teclat mentre estiguis editant):
 
 <QuestionCard>
-  <CodeBlock client:only code={'println!("Hola, Món!")'} showLineNumbers={false} errorMsg={`Ups, alguna cosa ha fallat i el codi no compila!\nSi t'has equivocat modificant el codi, fes clic al botó de "Reset" per tornar-lo al seu estat original.`} />
+  <CodeBlock client:only code={'println!("Hola, Món!")'} showLineNumbers={false} lang="ca" errorMsg={`Ups, alguna cosa ha fallat i el codi no compila!\nSi t'has equivocat modificant el codi, fes clic al botó de "Reset" per tornar-lo al seu estat original.`} />
 </QuestionCard>
 
 :::tip[Exercici]
 Però... El teu nom no és _Món_, oi?  
-Intenta canviar la línia perquè digui `Hola, {ElTeuNom}!`.  
+Canvia la línia perquè digui `Hola, {ElTeuNom}!`.  
 Per exemple: `"Hola, Liam!"`.
 :::
 

src/content/docs/ca/first-steps/2-the-adventurers-guild.mdx

@@ -5,6 +5,7 @@ description: L'heroi es registra en el Gremi d'Aventurers.
 
 import QuestionCard from "@components/QuestionCard.astro";
 import CodeBlock from "@components/CodeBlock.svelte";
+import lang from "@i18n/ca.json";
 
 export function SimpleQuestion({
   question,
@@ -29,9 +30,10 @@ export function SimpleQuestion({
             _ => println!("${wrong}"),
         }
     `.replaceAll("\n", "");
+
   return (
     <QuestionCard question={question}>
-      <CodeBlock client:only code={code} setup={setup} showLineNumbers={false} />
+      <CodeBlock client:only code={code} setup={setup} showLineNumbers={false} lang="ca" />
     </QuestionCard>
   );
 }
@@ -45,7 +47,7 @@ export function FreeQuestion({ question, code = "", correct }) {
     `.replaceAll("\n", "");
   return (
     <QuestionCard question={question}>
-      <CodeBlock client:only code={code} setup={setup} showLineNumbers={false} />
+      <CodeBlock client:only code={code} setup={setup} showLineNumbers={false} lang="ca"/>
     </QuestionCard>
   );
 }
@@ -126,36 +128,31 @@ Veus el que estem fent?
 Intenta reescriure el codi dels exercicis que hem fet, exactament com es formula la pregunta.
 
 Per exemple, per la primera pregunta, en comptes de dir `200 és més petit que ?`, digues `? és més gran que 200`.  
-Recorda substituïr `?` en la solució final.
+
+**Recorda substituïr `?` en la solució final.**
 
 <FreeQuestion
   question="Escriu qualsevol nombre més gran que 200."
-  code="200 < ?"
   correct="Correcte!"
 />
 
 <FreeQuestion
   question="D'acord... Ara un nombre més petit que 200."
-  code="200 > ?"
   correct="Perfecte!"
 />
 
 <FreeQuestion
   question="Ara un que sigui més petit o igual que 0."
-  code="0 >= ?"
   correct="Bona resposta!"
 />
 
 <FreeQuestion
   question="I finalment un que sigui més gran o igual que 0."
-  code="0 <= ?"
   correct="Fantastic!"
 />
 :::
 
-Excel·lent!
-
-Excellent!  
+Excel·lent!  
 Ara si us plau signa aquí, i estaràs llest per fer la teva primera missió.
 
 <QuestionCard>
@@ -165,6 +162,7 @@ Ara si us plau signa aquí, i estaràs llest per fer la teva primera missió.
     setup={
       '__VALUE__; if name == "?" { println!("pista: simplement canvia ? pel teu nom!") } else { println!("{name}, benvingut al Gremi d\'Aventurers!") }'
     }
+    lang="ca"
   />
 </QuestionCard>
 

src/content/docs/es/first-steps/1-introduction.mdx

@@ -22,7 +22,7 @@ Cada misión te proporcionará una lección de programación, e incluye un fragm
 Prueba a ejecutar el siguiente fragmento de código (haz clic en el botón "Ejecutar" de la derecha o pulsa `⇧ + ↵` en el teclado mientras editas):
 
 <QuestionCard>
-  <CodeBlock client:only code={'println!("¡Hola, Mundo!")'} showLineNumbers={false} errorMsg={`Ups, ¡algo ha ido mal y el código no compila!\nSi has estropeado el código por error, haz clic en el botón "Reset" para devolverlo a su estado original.`} />
+  <CodeBlock client:only code={'println!("¡Hola, Mundo!")'} showLineNumbers={false} lang="es" errorMsg={`Ups, ¡algo ha ido mal y el código no compila!\nSi has estropeado el código por error, haz clic en el botón "Reset" para devolverlo a su estado original.`} />
 </QuestionCard>
 
 :::tip[Ejercicio]

src/content/docs/es/first-steps/2-the-adventurers-guild.mdx

@@ -31,7 +31,7 @@ export function SimpleQuestion({
     `.replaceAll("\n", "");
   return (
     <QuestionCard question={question}>
-      <CodeBlock client:only code={code} setup={setup} showLineNumbers={false} />
+      <CodeBlock client:only code={code} setup={setup} showLineNumbers={false} lang="es" />
     </QuestionCard>
   );
 }
@@ -45,7 +45,7 @@ export function FreeQuestion({ question, code = "", correct }) {
     `.replaceAll("\n", "");
   return (
     <QuestionCard question={question}>
-      <CodeBlock client:only code={code} setup={setup} showLineNumbers={false} />
+      <CodeBlock client:only code={code} setup={setup} showLineNumbers={false} lang="es" />
     </QuestionCard>
   );
 }
@@ -126,7 +126,8 @@ Ahora haremos algunas comparaciones, cosas sencillas.
 Intenta reescribir el código de los ejercicios anteriores, exactamente como está formulada la pregunta.
 
 Por ejemplo, para la primera pregunta, en lugar de decir `200 es menor que ?`, di `? es mayor que 200`.  
-Acuérdate de rellenar el `?` en tu respuesta final.
+
+**Acuérdate de rellenar el `?` en tu respuesta final.**
 
 <FreeQuestion
   question="Escribe cualquier número superior a 200."
@@ -159,6 +160,7 @@ Ahora por favor firma aquí, y estarás listo para tu primera misión.
     setup={
       '__VALUE__; if name == "?" { println!("pista: ¡simplemente sustituye ? con tu nombre!") } else { println!("{name}, ¡bienvenido al Gremio de Aventureros!") }'
     }
+    lang="es"
   />
 </QuestionCard>
 

src/utils/getLangFromUrl.ts

@@ -0,0 +1,13 @@
+export const langs = {
+    en: 0,
+    ca: 1,
+    es: 2
+};
+
+const defaultLang = "en";
+
+export function getLangFromUrl(url: string): keyof typeof langs {
+    const [, ,lang] = new URL(url).pathname.split('/');
+    if (lang && lang in Object.keys(langs)) return lang as keyof typeof langs;
+    return defaultLang;
+  }

tsconfig.json

@@ -6,7 +6,8 @@
     "baseUrl": ".",
     "paths": {
       "@components/*": ["src/components/*"],
-      "@assets/*": ["src/assets/*"]
+      "@assets/*": ["src/assets/*"],
+      "@i18n/*": ["src/content/i18n/*"], 
     }
   },
   "exclude": ["./node_modules", "./dist"]