ci: modernizar libs

.gitignore

@@ -1,4 +1,5 @@
 build/
 dist/
 node_modules/
-.cache/
+.cache/
+.parcel-cache/

.nunjucksrc

@@ -0,0 +1,4 @@
+{
+  "root": "./public",
+  "data": {}
+}

.parcelrc

@@ -0,0 +1,11 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.njk": ["parcel-transformer-nunjucks"],
+    "*.css": ["@parcel/transformer-css-experimental"]
+  },
+  "optimizers": {
+    "*.css": ["@parcel/optimizer-css"]
+  },
+  "reporters": ["...", "@parcel/reporter-cli"]
+}

.readthedocs.yaml

@@ -4,7 +4,7 @@ build:
   os: ubuntu-22.04
   tools:
     python: "3.10"
-    nodejs: "16"
+    nodejs: "22"
   commands:
     - npm install -g yarn
     - yarn install

package.json

@@ -1,38 +1,47 @@
 {
-  "name": "pycamp.es",
-  "version": "0.1.0",
-  "description": "Official website of pycamp spain",
-  "main": "index.js",
-  "license": "MIT",
-  "scripts": {
-    "clean": "rm -rf dist/* .cache/",
-    "start": "parcel serve --no-hmr public/index.njk",
-    "build-prod": "parcel build public/index.njk --public-url ./",
-    "create-cname": "echo 'pycamp.es' > dist/CNAME",
-    "gh-deploy": "gh-pages -d dist",
-    "deploy": "yarn clean && yarn build-prod && yarn create-cname && yarn gh-deploy"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.6.2",
-    "@babel/preset-env": "^7.6.2",
-    "eslint": "^6.4.0",
-    "eslint-config-prettier": "^6.3.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "gh-pages": "^2.1.1",
-    "parcel-bundler": "^1.12.4",
-    "prettier": "^1.18.2",
-    "sass": "^1.22.12"
-  },
-  "dependencies": {
-    "@layflags/parcel-plugin-metaimage": "^1.2.5",
-    "bootstrap": "^4.3.1",
-    "g-sheets-api": "^2.1.2",
-    "nunjucks": "^3.2.0",
-    "parcel-plugin-nunjucks": "^2.2.0",
-    "parcel-plugin-static-files-copy": "^2.6.0",
-    "yarn": "^1.22.17"
-  },
-  "staticFiles": {
-    "staticPath": ["public/pycampes-2023.ics"]
-  }
+	"name": "pycamp.es",
+	"version": "0.1.0",
+	"description": "Official website of pycamp spain",
+	"license": "MIT",
+	"packageManager": "yarn@1.22.17",
+	"engines": {
+		"node": ">=22.0.0"
+	},
+	"scripts": {
+		"clean": "rm -rf dist/* .parcel-cache/",
+		"start": "parcel serve public/index.njk --dist-dir dist",
+		"build-prod": "parcel build public/*.njk --dist-dir dist --public-url .",
+		"create-cname": "echo 'pycamp.es' > dist/CNAME",
+		"gh-deploy": "gh-pages -d dist",
+		"deploy": "yarn clean && yarn build-prod && yarn create-cname && yarn gh-deploy"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.12.0",
+		"@babel/preset-env": "^7.12.0",
+		"@parcel/babel-preset-env": "^2.16.3",
+		"@parcel/packager-raw-url": "2.16.3",
+		"@parcel/transformer-css-experimental": "^2.3.2",
+		"@parcel/transformer-sass": "2.16.3",
+		"@parcel/transformer-webmanifest": "2.16.3",
+		"eslint": "^6.4.0",
+		"eslint-config-prettier": "^6.3.0",
+		"eslint-plugin-prettier": "^3.1.1",
+		"gh-pages": "^2.1.1",
+		"parcel": "^2.16.3",
+		"parcel-transformer-nunjucks": "^1.0.1",
+		"prettier": "^1.18.2",
+		"sass": "^1.22.12"
+	},
+	"dependencies": {
+		"@layflags/parcel-plugin-metaimage": "^1.2.5",
+		"bootstrap": "^4.3.1",
+		"g-sheets-api": "^2.1.2",
+		"nunjucks": "^3.2.0",
+		"parcel-plugin-static-files-copy": "^2.6.0"
+	},
+	"staticFiles": {
+		"staticPath": [
+			"public/pycampes-2023.ics"
+		]
+	}
 }

public/current_event.njk

@@ -1,4 +1,4 @@
-{% extends 'layout.njk' %}
+{% extends 'public/layout.njk' %}
 {% block content %}
     <section id="current_event">
         <h1 class="section-title">Edición actual</h1>
@@ -66,4 +66,4 @@
     </p>
 </section>
 {% endblock %}
-{% block extra_footer %}<script src="../src/currentEvent.js"></script>{% endblock %}
+{% block extra_footer %}<script type="module" src="../src/currentEvent.js"></script>{% endblock %}

public/diversity.njk

@@ -1,4 +1,4 @@
-{% extends 'layout.njk' %}
+{% extends 'public/layout.njk' %}
 {% block title %}PyCamp España: Diversidad{% endblock %}
 {% block content %}
     <section>
@@ -105,4 +105,4 @@
         </div>
     </section>
 {% endblock %}
-{% block extra_footer %}<script src="../src/diversity.js"></script>{% endblock %}
+{% block extra_footer %}<script type="module" src="../src/diversity.js"></script>{% endblock %}

public/extra_footer.html

@@ -1,10 +1,6 @@
-    <script
-      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
-      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
-      crossorigin="anonymous"
-    ></script>
-    <script
-      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
-      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
-      crossorigin="anonymous"
-    ></script>
+<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+    crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+    crossorigin="anonymous"></script>

public/faq.njk

@@ -1,4 +1,4 @@
-{% extends 'layout.njk' %}
+{% extends 'public/layout.njk' %}
 {% block content %}
     <!-- FAQ -->
     <section id="faq">
@@ -46,24 +46,24 @@
                              class="collapse"
                              aria-labelledby="headingTwo"
                              data-parent="#faq">
-                            <div class="card-body">{% include "what_to_bring_content.html" %}</div>
+                            <div class="card-body">{% include "public/what_to_bring_content.html" %}</div>
                         </div>
                     </div>
                     <div class="card">
-                        <div class="card-header" id="headingTwo">
+                        <div class="card-header" id="headingThree">
                             <h2 class="mb-0">
                                 <button class="btn btn-link faq-link"
                                         type="button"
-                                        data-target="collapseTwo"
+                                        data-target="collapseThree"
                                         aria-expanded="false"
-                                        aria-controls="collapseTwo">
+                                        aria-controls="collapseThree">
                                     ¿Hay ayuda económica para pagar la entrada?
                                 </button>
                             </h2>
                         </div>
-                        <div id="collapseTwo"
+                        <div id="collapseThree"
                              class="collapse"
-                             aria-labelledby="headingTwo"
+                             aria-labelledby="headingThree"
                              data-parent="#faq">
                             <div class="card-body">
                                 Somos conscientes de la importancia de equidad y diversidad en tecnología. Gracias al apoyo de nuestros patrocinadores
@@ -102,4 +102,4 @@
             </div>
         </section>
     {% endblock %}
-    {% block extra_footer %}<script src="../src/faq.js"></script>{% endblock %}
+    {% block extra_footer %}<script type="module" src="../src/faq.js"></script>{% endblock %}

public/index.njk

@@ -1,4 +1,4 @@
-{% extends 'layout.njk' %}
+{% extends 'public/layout.njk' %}
 {% block content %}
     <section id="frontpage" class="page">
         <div class="container">
@@ -117,4 +117,4 @@
         </div>
     </section>
 {% endblock %}
-{% block extra_footer %}<script src="../src/index.js"></script>{% endblock %}
+{% block extra_footer %}<script type="module" src="../src/index.js"></script>{% endblock %}

public/layout.njk

@@ -10,24 +10,24 @@
         <meta property="og:type" content="website" />
         <meta property="og:title" content="PyCamp España" />
         <meta property="og:url" content="https://pycamp.es/" />
-        <meta property="og:image" content="/images/logo-mini.png" />
+        <meta property="og:image" content="./images/logo-mini.png" />
         <meta property="og:description"
               content="¡Programar a tope en medio de la naturaleza rodeados de excelentes personas!" />
         <!-- <meta property="og:price:amount" content="250" /> -->
         <!-- <meta property="og:price:currency" content="EUR" /> -->
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:site" content="@pycampes" />
         <meta name="twitter:creator" content="@pycampes" />
-        <meta name="twitter:image" content="/images/logo-mini.png" />
-        <link rel="manifest" href="/manifest.json" />
-        <link rel="shortcut icon" href="/images/logo-mini.svg" />
+        <meta name="twitter:image" content="./images/logo-mini.png" />
+        <link rel="manifest" href="./manifest.json" />
+        <link rel="shortcut icon" href="./images/logo-mini.svg" />
         {% block extra_head %}{% endblock %}
         <script src="https://kit.fontawesome.com/738e427f6d.js"
                 crossorigin="anonymous"></script>
         <title>
             {% block title %}PyCamp España{% endblock %}
         </title>
-        {% include "mailerlite.njk" %}
+        {% include "public/mailerlite.njk" %}
     </head>
     <body>
         <!-- Navigation -->
@@ -61,10 +61,10 @@
                     <!--  <a class="nav-link" href="/what_to_bring.njk">¿Qué llevo?</a> -->
                     <!-- </li> -->
                     <li class="nav-item">
-                        <a class="nav-link" href="/previous_editions.njk">Ediciones anteriores</a>
+                        <a class="nav-link" href="./previous_editions.njk">Ediciones anteriores</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="/faq.njk">Preguntas frecuentes</a>
+                        <a class="nav-link" href="./faq.njk">Preguntas frecuentes</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="./diversity.njk" rel="noopener noreferrer">Código de conducta</a>
@@ -156,6 +156,6 @@
         </footer>
         {% block extra_footer %}{% endblock %}
         {# Bug in Parcel forces us to include the extra footer this way #}
-        {% include "extra_footer.html" %}
+        {% include "public/extra_footer.html" %}
     </body>
 </html>

public/previous_editions.njk

@@ -56,5 +56,5 @@
         ]
     }
 ] %}
-{% extends 'previous_editions_layout.njk' %}
+{% extends 'public/previous_editions_layout.njk' %}
 {% block content %}{{ super() }}{% endblock %}

public/previous_editions_layout.njk

@@ -1,4 +1,4 @@
-{% extends 'layout.njk' %}
+{% extends 'public/layout.njk' %}
 {% set githubProjects = [
     {
         "description": "What music is people listen to?",
@@ -308,6 +308,7 @@
 
           .tables-container {
             display: flex;
+
             flex-direction: column; /* Stack tables vertically on mobile */
             margin-top: 20px;
           }
@@ -380,7 +381,7 @@
         <!-- Overlay for popup -->
         <div class="overlay" id="overlay">
             <div class="popup">
-                <img id="popup-img" src="" alt="Amplified Thumbnail">
+                <img id="popup-img"  alt="Amplified Thumbnail">
             </div>
         </div>
         <!-- Tabs Section -->
@@ -486,7 +487,7 @@
     </section>
 {% endblock %}
 {% block extra_footer %}
-    <script src="../src/previousEditionsLayout.js"></script>
+    <script type="module" src="../src/previousEditionsLayout.js"></script>
     <script>
   document.querySelectorAll(".thumbnail img").forEach(img => {
     img.addEventListener("click", function() {

public/projects.njk

@@ -1,4 +1,4 @@
-{% extends 'layout.njk' %}
+{% extends 'public/layout.njk' %}
 {% block content %}
     <section id="projects">
         <h1 class="section-title">Proyectos</h1>
@@ -64,4 +64,4 @@
     </div>
 </section>
 {% endblock %}
-{% block extra_footer %}<script src="../src/projects.js"></script>{% endblock %}
+{% block extra_footer %}<script type="module" src="../src/projects.js"></script>{% endblock %}

public/venue.njk

@@ -1,4 +1,4 @@
-{% extends 'layout.njk' %}
+{% extends 'public/layout.njk' %}
 {% block content %}
     <section id="venue">
         <h1 class="section-title">Venue</h1>
@@ -274,4 +274,4 @@
     </div>
 </section>
 {% endblock %}
-{% block extra_footer %}<script src="../src/venue.js"></script>{% endblock %}
+{% block extra_footer %}<script type="module" src="../src/venue.js"></script>{% endblock %}

public/what_to_bring.njk

@@ -1,14 +1,14 @@
-{% extends 'layout.njk' %}
+{% extends 'public/layout.njk' %}
 {% block content %}
     <section id="what-to-bring">
         <h1 class="section-title">¿Qué llevo?</h1>
         <div class="container py-4">
             <div class="row justify-content-center ">
                 <div class="col-12 col-lg-7">
-                    <div>{% include "what_to_bring_content.html" %}</div>
+                    <div>{% include "public/what_to_bring_content.html" %}</div>
                 </div>
             </div>
         </div>
     </section>
 {% endblock %}
-{% block extra_footer %}<script src="../src/whatToBring.js"></script>{% endblock %}
+{% block extra_footer %}<script type="module" src="../src/whatToBring.js"></script>{% endblock %}

src/styles/_masthead.scss

@@ -1,3 +1,6 @@
+@use "variables" as *;
+@use "mixins" as *;
+
 section.masthead {
   position: relative;
   background-color: $gray-800;

src/styles/_variables.scss

@@ -8,3 +8,5 @@ $orange: #fd7e14;
 $primary: $green;
 $enable-gradients: true;
 $warning: $orange;
+$gray-800: #2d2d2d;
+$gray-900: #1a1a1a;