16.0 RC1: general changes, js & css opt, versioning

Author: miermontoto

.eleventy.js

@@ -11,7 +11,10 @@ module.exports = function (eleventyConfig) {
     });
 
     eleventyConfig.addShortcode("version", function() {
-        return require("./package.json").version || 'unknown';
+        let json = require('./package.json');
+        let version = json.version || 'unknown';
+        let release = json.release ? ` (${json.release})` : '';
+        return `${version}${release}`;
     });
 
     eleventyConfig.addShortcode("top", function() {

package.json

@@ -5,9 +5,9 @@ source: https://github.com/miermontoto/backup
 permalink: /backup/
 demo: /backup
 keywords: backup, backup carrera, epi, epi gijón, asignaturas, giitin, informática, ingeniería informática, ingeniería, engineering, computer engineering, gijón
-icons: [fa-brands fa-markdown, fa-brands fa-square-github]
+icons: [fa-brands fa-markdown, fa-brands fa-github]
 project_css: /static/css/backup.css
-star: yes
+star: star
 ---
 
 ## Resumen

src/content/collections/projects/backup.md

@@ -8,7 +8,7 @@ permalink: /epiCalendar/
 icons: [devicon-flask-original, devicon-python-plain, devicon-react-plain]
 date: 1800-01-01
 status: https://dashboard.mier.info/api/badge/2/status?style=flat-square
-star: yes
+star: star
 ---
 
 # [\[enlace\]](https://epicalendar.mier.info)

src/content/collections/projects/epicalendar.md

@@ -3,5 +3,4 @@ title: SumaTres
 desc: Threes! clone made in Java, product of several subjects' final projects.
 source: https://github.com/miermontoto/SumaTres
 icons: [devicon-java-plain]
-star: yes
 ---

src/content/collections/projects/sumatres.md

@@ -2,7 +2,7 @@
 title: mier.info
 desc: my personal portfolio, the very website you are looking at right now.
 source: https://github.com/miermontoto/miermontoto
-icons: [devicon-eleventy-plain, fa-brands fa-markdown, devicon-firebase-plain]
+icons: [devicon-eleventy-plain, fa-brands fa-markdown, devicon-firebase-plain, devicon-sass-original]
 status: https://dashboard.mier.info/api/badge/1/uptime/48?style=flat-square
-star: yes
+star: star
 ---

src/content/collections/projects/web.md

@@ -95,68 +95,70 @@ a:hover .dot, span:hover .dot
     100%
         transform: translateX(-100%)
 
-// Cards
+// cards
 .carded
     display: flex
     flex-wrap: wrap
     justify-content: center
 
-.card
-    width: max(20%, 300px)
-    display: grid
-    gap: 1em
-    align-items: center
+    .card
+        width: max(20%, 300px)
+        display: grid
+        gap: 1em
+        align-items: center
 
-    p
-        margin: 1em
+        p
+            margin: 1em
 
-.card-bottom
-    display: flex
-    align-items: center
-    justify-content: center
-    height: 100%
+        .card-bottom
+            display: flex
+            align-items: center
+            justify-content: center
+            height: 100%
+
+        .card-title
+            display: flex
+            align-items: center
+            justify-content: center
+
+        .card-icons
+            user-select: none
 
+// icons
 .icon
     margin: 0 2px
     font-size: 1.25em
 
-.card-title
-    display: flex
-    align-items: center
-    justify-content: center
-
 .experience-logo
     width: 1.5em
     margin-right: 0.5em
     border-radius: 5%
     user-select: none
 
-.card-icons
-    user-select: none
-
 // projects table
 table#projects
+    table-layout: auto
     margin: 1em 0
     border: 3px solid base.$light
     border-radius: $radius
     padding: 1em
 
-    .project-title
+    .project.star > .project-title
         font-size: 1.5em
-        margin-bottom: 0.5em
 
-    .project-links
-        padding: 0 0.75em
+    .project-title
+        font-size: 1.25em
 
+    .project-links
         a
             text-decoration: none
             font-size: 1.25em
 
         i
             font-size: 1.25em
 
-    td
-        padding: 1.5em 0
+    td:not(.project-icons)
+        padding: 1.5em 0.75em
 
     tr:not(:last-child)
         td

src/static/css/index.sass

@@ -1,14 +1,31 @@
-const projectSection = document.getElementById('project-section');
-const projectButton = document.getElementById('project-button');
-
 const sections = [
-    { button: projectButton, section: projectSection },
+    { button: document.getElementById('project-button'), section: document.getElementById('project-section') },
     { button: document.getElementById('about-button'), section: document.getElementById('about-section') }
 ];
 
+const projects = document.querySelector('table#projects');
+
+const strings = [
+    "still celebrating Homework 25th anniversary.",
+    "the prime time of your life. now, live it.",
+    "something's in the air.",
+    "we are human, after all.",
+    "WDPK 83.7, the sound of tomorrow the music of today, brings you exclusively the essential mix.",
+    "if love is the answer, you're home.",
+    "the perfect song is framed with silence.",
+    "make love.",
+    "and we will never be alone again.",
+    "many rooms to explore but the doors look the same.",
+    "ROCK. ROBOT ROCK.",
+    "touch it. bring it. pay it. watch it. turn it. leave it. stop. format it.",
+    "around the world.",
+    "music sounds better with you.",
+    "one more time."
+];
+
 sections.forEach(({ button, section }) => {
     button.addEventListener('click', () => {
-        toggleSection(section, button);
+        toggleSection(section);
     });
 });
 
@@ -18,22 +35,27 @@ document.getElementById('title').addEventListener('click', () => {
 
 marqueeString();
 
+// order projects by starred
+projects.querySelectorAll('.project').forEach((project) => {
+    if (project.classList.contains('star')) {
+        projects.append(project);
+
+        project.querySelector('.project-title').innerHTML += ' ⭐';
+    }
+});
+
+projects.querySelectorAll('.project').forEach((project) => {
+    if (!project.classList.contains('star')) {
+        projects.append(project);
+    }
+});
+
 // --------------------------------------------- //
 
-function toggleSection(section, button) {
+function toggleSection(section) {
     // if section is already active, save to constant
     const sectionIsActive = section.classList.contains('active');
 
-    // toggle active class on button
-    button.classList.toggle('active');
-
-    // remove active class from other buttons
-    sections.forEach(({ button: b }) => {
-        if (b !== button) {
-            b.classList.remove('active');
-        }
-    });
-
     // remove active class from all sections
     document.querySelectorAll('.section').forEach((s) => {
         s.classList.remove('active');
@@ -47,24 +69,6 @@ function toggleSection(section, button) {
 
 
 function marqueeString() {
-    let strings = [
-        "still celebrating Homework 25th anniversary.",
-        "the prime time of your life. now, live it.",
-        "something's in the air.",
-        "we are human, after all.",
-        "WDPK 83.7, the sound of tomorrow the music of today, brings you exclusively the essential mix.",
-        "if love is the answer, you're home.",
-        "the perfect song is framed with silence.",
-        "make love.",
-        "and we will never be alone again.",
-        "many rooms to explore but the doors look the same.",
-        "ROCK. ROBOT ROCK.",
-        "touch it. bring it. pay it. watch it. turn it. leave it. stop. format it.",
-        "around the world.",
-        "music sounds better with you.",
-        "one more time."
-    ];
-
     let randomString = strings[Math.floor(Math.random() * strings.length)];
     document.getElementById('marquee').innerHTML = randomString;
 }

src/static/js/index.js

@@ -11,45 +11,45 @@ permalink: false
 {% macro renderProjects(projects) %}
     <table id="projects">
         {% for project in projects %}
-            <tr> {{ renderProject(project) }} </tr>
+            {{ renderProject(project) }}
         {% endfor %}
     </table>
 {% endmacro %}
 
 {% macro renderProject(project) %}
-    <td class="project-title">
-        {% if project.data.demo %}
-            <a href="{{ project.data.demo }}" rel="noopener noreferrer">
+    <tr class="project {{ project.data.star }}" id="{{ project.data.title | slug }}">
+        <td class="project-title">
+            {% if project.data.demo %}
+                <a href="{{ project.data.demo }}" rel="noopener noreferrer">{{ project.data.title }}</a>
+            {% else %}
                 {{ project.data.title }}
-            </a>
-        {% else %}
-            {{ project.data.title }}
-        {% endif %}
-    </td>
+            {% endif %}
+        </td>
 
-    <td class="project-links">
-        {% if project.data.source %}
-            <a href="{{ project.data.source }}" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-square-github"></i></a>
-        {% endif %}
-        {% if project.data.info %}
-            <br>
-            <a href="{{ project.data.info }}" target="_blank" rel="noopener noreferrer">🛈</a>
-        {% endif %}
-    </td>
+        <td class="project-links">
+            {% if project.data.source %}
+                <a href="{{ project.data.source }}" target="_blank" rel="noopener noreferrer"><i class="fa-brands fa-square-github"></i></a>
+            {% endif %}
+            {% if project.data.info %}
+                <br>
+                <a href="{{ project.data.info }}" target="_blank" rel="noopener noreferrer">🛈</a>
+            {% endif %}
+        </td>
 
-    <td class="project-description">
-        {{ project.data.desc | safe }}
-    </td>
+        <td class="project-description">
+            {{ project.data.desc | safe }}
+        </td>
 
-    <td class="project-icons">
-        {{ renderIcons(project.data.icons) }}
-    </td>
+        <td class="project-icons">
+            {{ renderIcons(project.data.icons) }}
+        </td>
 
-    <td class="project-image">
-        {% if project.data.image %}
-            <img src="{{ project.data.image }}" alt="{{ project.data.title }} image">
-        {% endif %}
-    </td>
+        {# <td class="project-image">
+            {% if project.data.image %}
+                <img src="{{ project.data.image }}" alt="{{ project.data.title }} image">
+            {% endif %}
+        </td> #}
+    </tr>
 {% endmacro %}
 
 {% macro renderExperiences(experiences) %}