Fix images + use CI for validating PRs

.github/workflows/deploy.yaml

@@ -1,12 +1,6 @@
 name: Deploy to GitHub Pages
 
-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:
+on: [push, pull_request]
 
 # Allow this job to clone the repo and create a page deployment
 permissions:
@@ -19,21 +13,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout your repository using git
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Install, build, and upload your site
-        uses: withastro/action@v1
-        # with:
-          # path: . # The root location of your Astro project inside the repository. (optional)
-          # node-version: 18 # The specific version of Node that should be used to build your site. Defaults to 18. (optional)
-          # package-manager: pnpm@latest # The Node package manager that should be used to install dependencies and build your site. Automatically detected based on your lockfile. (optional)
+        uses: withastro/action@v3
 
   deploy:
     needs: build
     runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main'
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

src/content/components/landing-page/repl/ReplEvaluator.tsx

@@ -130,13 +130,13 @@ export const ReplEvaluator = () => {
       <div className="botoneraReplExpression">
         <button className="replEvaluate" onClick={() => evaluate()} title="Evaluar la expresión">
           {/* https://github.com/feathericons/feather/blob/main/icons */}
-          <img src="/src/assets/repl/evaluate.svg"/>
+          <img src="/public/repl/evaluate.svg"/>
         </button>
         <button className="replRefresh" onClick={() => reload()} title="Recarga el editor e inicia una nueva sesión del REPL">
-          <img src="/src/assets/repl/refresh.svg"/>
+          <img src="/public/repl/refresh.svg"/>
         </button>
         <button className="replReload" onClick={() => reloadAndRefresh()} title="Recarga el editor y ejecuta la última sesión activa">
-          <img src="/src/assets/repl/reload.svg"/>
+          <img src="/public/repl/reload.svg"/>
         </button>
         <button id="validateEditor" onClick={() => buildInterpreter()}/>
       </div>

src/content/components/landing-page/repl/dynamicDiagram.html

@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/src/assets/dynamicDiagram/styles/dynamicDiagram.css" />
+    <link rel="stylesheet" href="/public/dynamicDiagram/styles/dynamicDiagram.css" />
     <style>
       #cy {
         display: block;
@@ -218,11 +218,11 @@
         <button style="visibility: hidden;" id="reloadDiagram"></button>
         <button class="organize" onclick="updateLayout()" title="Relocate the objects and their relationships in the diagram">ORGANIZE</button>
         <div class="row">
-          <img src="/src/assets/dynamicDiagram/images/dark-mode.png" id="imgModeDynamicDiagram" title="Dark/Light mode"/>
+          <img src="/public/dynamicDiagram/images/dark-mode.png" id="imgModeDynamicDiagram" title="Dark/Light mode"/>
           <input type="checkbox" id="toggleModeDynamicDiagram" class="toggle" onchange="modeChanged()">
         </div>
         <div class="row">
-          <img src="/src/assets/dynamicDiagram/images/pin-objects.png" id="imgPinObjectsDynamicDiagram" title="Fix objects position"/>
+          <img src="/public/dynamicDiagram/images/pin-objects.png" id="imgPinObjectsDynamicDiagram" title="Fix objects position"/>
           <input type="checkbox" id="togglePinObjectsDynamicDiagram" class="toggle" onshow="objectsPositionChanged()" onchange="objectsPositionChanged()">
         </div>
       </div>

src/content/components/landing-page/repl/replEditor.html

@@ -47,8 +47,8 @@
 
   <div class="file">
     <div class="toolbar">
-      <img class="menu_option" src="/src/assets/repl/zoom-in.svg" title="Agrandar la letra" onclick="zoomInFont()" />
-      <img class="menu_option" src="/src/assets/repl/zoom-out.svg" title="Achicar la letra" onclick="zoomOutFont()" />
+      <img class="menu_option" src="/public/repl/zoom-in.svg" title="Agrandar la letra" onclick="zoomInFont()" />
+      <img class="menu_option" src="/public/repl/zoom-out.svg" title="Achicar la letra" onclick="zoomOutFont()" />
       <select id="theme" class="theme" onchange="changeTheme()" title="Cambiar tema del editor">
         <option value="ambiance">Ambiance</option>
         <option value="chaos">Chaos</option>