From 2a04b950352cf90f1273225574b8a856eaf38cb1 Mon Sep 17 00:00:00 2001 From: lyonsyonii Date: Sat, 18 Nov 2023 14:54:52 +0100 Subject: [PATCH] Added google lighthouse --- .github/workflows/ci.yml | 28 ++++++++ lighthouserc.js | 7 ++ src/components/CodeBlock.svelte | 65 +++++++++++++------ .../docs/ca/first-steps/1-introduction.mdx | 10 +-- .../first-steps/2-the-adventurers-guild.mdx | 18 +++-- .../docs/es/first-steps/1-introduction.mdx | 2 +- .../first-steps/2-the-adventurers-guild.mdx | 8 ++- src/utils/getLangFromUrl.ts | 13 ++++ tsconfig.json | 3 +- 9 files changed, 113 insertions(+), 41 deletions(-) create mode 100644 .github/workflows/ci.yml create mode 100644 lighthouserc.js create mode 100644 src/utils/getLangFromUrl.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..c9bdc20 --- /dev/null +++ b/.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/cli@0.12.x + lhci autorun \ No newline at end of file diff --git a/lighthouserc.js b/lighthouserc.js new file mode 100644 index 0000000..0191025 --- /dev/null +++ b/lighthouserc.js @@ -0,0 +1,7 @@ +module.exports = { + ci: { + upload: { + target: 'temporary-public-storage', + }, + }, + }; \ No newline at end of file diff --git a/src/components/CodeBlock.svelte b/src/components/CodeBlock.svelte index 6279b48..2f6f0c2 100644 --- a/src/components/CodeBlock.svelte +++ b/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)); + }; @@ -94,9 +117,9 @@ theme={$theme === "dark" ? githubDark : githubLight} basic={showLineNumbers} editable={!running} - placeholder="Enter your code here..." + placeholder={placeholder || langs[lang].placeholder} /> - +