Random accent font on load : Add span with class to hero

Fix bug with simple-icons svg size
Change card icons size
2025-05-01 21:24:36 +02:00 · 2025-05-01 21:21:38 +02:00 · 2025-05-01 19:27:21 +02:00 · 2025-05-01 19:24:18 +02:00 · 2025-05-01 17:15:49 +02:00 · 2025-05-01 17:11:26 +02:00
16 changed files with 140 additions and 112 deletions
--- a/eleventy.config.js
+++ b/eleventy.config.js
@ -5,8 +5,6 @@ import eleventyPDF from "./_config/eleventy-plugin-pdf.js";
 export default async function (eleventyConfig) {
  eleventyConfig.setUseGitIgnore(false);

-  eleventyConfig.addPassthroughCopy({"./src/_includes/js/" : "/js"});
-
  eleventyConfig.addLayoutAlias('base', 'layouts/base.html');
  eleventyConfig.addLayoutAlias('pdf', 'layouts/pdf.html');

@ -28,15 +26,18 @@ export default async function (eleventyConfig) {
      .sort((a, b) => a.data.startDate - b.data.startDate).reverse();
  });
  
-  eleventyConfig.addPlugin(eleventyPDF);
-
  eleventyConfig.addPassthroughCopy('src/favicon.ico')
  
+  eleventyConfig.addPlugin(eleventyPDF);
  eleventyConfig.addPlugin(pluginIcons, {
-    sources: [{ name: 'lucide', path: 'node_modules/lucide-static/icons', default: true }]
+    sources: [
+      { name: 'lucide', path: 'node_modules/lucide-static/icons', default: true },
+      { name: 'simple-icons', path: 'node_modules/simple-icons/icons', default: false }
+    ]
  });

  eleventyConfig.addBundle("css");
+  eleventyConfig.addBundle("js");

  return {
    markdownTemplateEngine: 'liquid',
--- a/package-lock.json
+++ b/package-lock.json
@ -13,7 +13,8 @@
        "eleventy-plugin-icons": "^4.5.3",
        "lucide-static": "^0.503.0",
        "nanoid": "^5.1.5",
-        "puppeteer-html-pdf": "^4.0.8"
+        "puppeteer-html-pdf": "^4.0.8",
+        "simple-icons": "^14.12.3"
      }
    },
    "node_modules/@11ty/dependency-tree": {
@ -2996,6 +2997,19 @@
        "node": ">=8"
      }
    },
+    "node_modules/simple-icons": {
+      "version": "14.12.3",
+      "resolved": "https://registry.npmjs.org/simple-icons/-/simple-icons-14.12.3.tgz",
+      "integrity": "sha512-P85Pqak4picfTzdujmGL7+pFfsd32K/tDjHPQ8vvJcr2Xk380A9kBVIW5QH86qWqa+YJgFa5huLcUuwmW+YBPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/simple-icons"
+      }
+    },
    "node_modules/slash": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "eleventy-plugin-icons": "^4.5.3",
    "lucide-static": "^0.503.0",
    "nanoid": "^5.1.5",
-    "puppeteer-html-pdf": "^4.0.8"
+    "puppeteer-html-pdf": "^4.0.8",
+    "simple-icons": "^14.12.3"
  }
 }
--- a/src/_data/author.json
+++ b/src/_data/author.json
@ -22,7 +22,7 @@
  "socials": [
    {
      "title": "Mon Github", 
-      "icon": "github", 
+      "icon": "simple-icons:github", 
      "link": "https://github.com/TheThomaas"
    }
  ]
--- a/src/_includes/layouts/base.html
+++ b/src/_includes/layouts/base.html
@ -29,6 +29,9 @@
    
    {% include "partials/footer.liquid" %}

-    <script src="/js/main.js"></script>
+    {% js %}
+      {% include "js/main.js" %}
+    {% endjs %}
+    <script src="{% getBundleFileUrl "js" %}"></script>
  </body>
 </html>
--- a/src/_includes/layouts/pdf.html
+++ b/src/_includes/layouts/pdf.html
@ -4,106 +4,16 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
-
-    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
    {% block content %}
        {{ content }}
    {% endblock %}

-    <style>
-:root {
-  --accent-color: blue;
-  --font-body: Arial, sans-serif;
-  --font-display: 'Times New Roman', Times, serif;
-}
+    {% css "pdf" %}
+      {% include "css/pdf.css" %}
+    {% endcss %}
    
-html {
-  font-family: var(--font-body, Arial, sans-serif);
-  margin: 0;
-}
-body {
-  margin: 0;
-}
-
-*, ::before, ::after {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-h1 {
-  text-align:center;
-  font-family: var(--font-display, 'Times New Roman', Times, serif);
-  font-size: 2rem;
-  margin: 0;
-  line-height: 1.6;
-}
-h2 {
-  color : var(--accent-color, blue);
-}
-p {
-  margin: 0;
-}
-ul {
-  margin: 0;
-}
-li::marker {
-  color: var(--accent-color, blue);
-}
-section {margin-bottom: 1.2rem;}
-
-.justify-center {
-  justify-content: center;
-}
-.underline {
-  text-decoration: underline;
-}
-.list-inline {
-  display: flex;
-  align-items: center;
-  padding: 0;
-  margin: 0;
-  gap: .8rem;
-}
-.list-inline li {
-  display: contents;
-}
-.list-inline li + li::before {
-  content: '|';
-}
-
-.title {
-  display: flex;
-  gap: .8rem;
-  margin-bottom: .6rem;
-}
-.title h2 {
-  margin: 0;
-}
-.title hr {
-  align-self: center;
-  flex: 1 0 auto;
-}
-
-section ul {padding: 0;margin-left: 1.2rem;}
-.subtitle {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  justify-content: space-between;
-  align-items: center;
-  justify-items: center;
-  margin-inline: 1rem;
-  margin-bottom: .4rem;
-}
-.subtitle .timeSection { font-size: .9rem; }
-.subtitle h3,
-.subtitle p { margin: 0; }
-.subtitle > :first-child {justify-self: start;}
-.subtitle > :last-child {justify-self: end;}
-.subtitle + ul {font-size: .9rem;}
-.subtitle ~ .subtitle {margin-top: 1rem;}
-    </style>
+    <style>{% getBundle "css" "pdf" %}</style>
 </body>
 </html>
--- a/src/css/components/projects.css
+++ b/src/css/components/projects.css
@ -39,6 +39,10 @@
  gap: 0.35rem;
  display: flex;
 }
+.card .links svg {
+  height: var(--card-icon-size, 1.2cap);
+  width: auto;
+}
 .card .content {
  padding: 1rem 0.4rem 0;
 }
--- a/src/css/main.css
+++ b/src/css/main.css
@ -8,6 +8,10 @@
  scroll-behavior: smooth;
 }

+:where(svg.icon:not([fill])) {
+  fill: currentColor;
+}
+
 /* Utilities */
 .wrapper,
 .wrapper-full {
--- a/src/css/pdf.css
+++ b/src/css/pdf.css
@ -0,0 +1,91 @@
+:root {
+  --accent-color: blue;
+  --font-body: Arial, sans-serif;
+  --font-display: 'Times New Roman', Times, serif;
+}
+
+html {
+  font-family: var(--font-body, Arial, sans-serif);
+  margin: 0;
+}
+body {
+  margin: 0;
+}
+
+*, ::before, ::after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+h1 {
+  text-align:center;
+  font-family: var(--font-display, 'Times New Roman', Times, serif);
+  font-size: 2rem;
+  margin: 0;
+  line-height: 1.6;
+}
+h2 {
+  color : var(--accent-color, blue);
+}
+p {
+  margin: 0;
+}
+ul {
+  margin: 0;
+}
+li::marker {
+  color: var(--accent-color, blue);
+}
+section {margin-bottom: 1.2rem;}
+
+.justify-center {
+  justify-content: center;
+}
+.underline {
+  text-decoration: underline;
+}
+.list-inline {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  gap: .8rem;
+}
+.list-inline li {
+  display: contents;
+}
+.list-inline li + li::before {
+  content: '|';
+}
+
+.title {
+  display: flex;
+  gap: .8rem;
+  margin-bottom: .6rem;
+}
+.title h2 {
+  margin: 0;
+}
+.title hr {
+  align-self: center;
+  flex: 1 0 auto;
+}
+
+section ul {padding: 0;margin-left: 1.2rem;}
+.subtitle {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  justify-content: space-between;
+  align-items: center;
+  justify-items: center;
+  margin-inline: 1rem;
+  margin-bottom: .4rem;
+}
+.subtitle .timeSection { font-size: .9rem; }
+.subtitle h3,
+.subtitle p { margin: 0; }
+.subtitle > :first-child {justify-self: start;}
+.subtitle > :last-child {justify-self: end;}
+.subtitle + ul {font-size: .9rem;}
+.subtitle ~ .subtitle {margin-top: 1rem;}
--- a/src/_includes/js/main.js
+++ b/src/_includes/js/main.js
--- a/src/pages/sections/hero.liquid
+++ b/src/pages/sections/hero.liquid
@ -5,5 +5,5 @@ template: 'hero'
 excludeFromPdf: true
 eleventyComputed:
    description: "{{ author.about }}"
-    displayedTitle: "Moi c'est {{ author.firstName }}<br>Et je suis {{ author.occupation }}"
+    displayedTitle: "Moi c'est <span class='accent-font'>{{ author.firstName }}</span><br>Et je suis {{ author.occupation }}"
 ---
--- a/src/projects/cancre-simulator.md
+++ b/src/projects/cancre-simulator.md
@ -4,5 +4,5 @@ description: Un jeu fait pour les Portes Ouvertes 2020
 links:
  - title: Voir sur Github
    link: https://github.com
-    icon: github
+    icon: simple-icons:github
 ---
--- a/src/projects/guess-who.md
+++ b/src/projects/guess-who.md
@ -4,5 +4,5 @@ description: Un "Qui est-ce ?" fait en Python et avec des LEGO Mindstorms
 links:
  - title: Voir sur Github
    link: https://github.com
-    icon: github
+    icon: simple-icons:github
 ---
--- a/src/projects/ldap.md
+++ b/src/projects/ldap.md
@ -7,5 +7,5 @@ links:
    icon: link
  - title: Voir sur Github
    link: https://github.com
-    icon: github
+    icon: simple-icons:github
 ---
--- a/src/projects/sigfox.md
+++ b/src/projects/sigfox.md
@ -7,5 +7,5 @@ links:
    icon: link
  - title: Voir sur Github
    link: https://github.com
-    icon: github
+    icon: simple-icons:github
 ---
--- a/src/projects/snake.md
+++ b/src/projects/snake.md
@ -5,5 +5,5 @@ background: rgb(255, 143, 143)
 links:
  - title: Voir sur Github
    link: https://github.com
-    icon: github
+    icon: simple-icons:github
 ---
Author	SHA1	Message	Date
TheThomaas	acc355fd09	Random accent font on load : Add span with class to hero	2025-05-01 21:24:36 +02:00
TheThomaas	1bb632834a	Fix bug with simple-icons svg size	2025-05-01 21:21:38 +02:00
TheThomaas	3695c6039c	Change card icons size	2025-05-01 19:27:21 +02:00
TheThomaas	0532d57efb	Add simple-icons to handle brand logos	2025-05-01 19:24:18 +02:00
TheThomaas	92bc04f148	Move pdf styles to it's own file	2025-05-01 17:15:49 +02:00
TheThomaas	779f447c13	Create javascript bundle	2025-05-01 17:11:26 +02:00