Replace old link component with the new shortcode

_config/shortcodes/link.js

@@ -1,3 +1,3 @@
-export default (content, url, target = "_blank", attr = "", title = "") => {
-  return `<a href="${url}" target="${target}" ${attr} title="${title}" class="button">${content}</a>`
+export default (content, url, target = "_blank", attr = "") => {
+  return `<a href="${url}" target="${target}" ${attr} class="button">${content}</a>`
 }

src/_includes/partials/components/card.liquid

@@ -4,7 +4,7 @@
       <span></span>
       <div class="links">
         {%- for link in links -%}
-          {% render 'partials/components/link', icon: link.icon, showLabel: false, label: link.title, href: link.link, class: classes, target: "_blank" %}
+          {% link link.link, "_blank", "data-ghost-button" %}{% icon link.icon %} <span class="sr-only">{{ social.title }}</span>{% endlink %}
         {%- endfor -%}
       </div>
     </div>

src/_includes/partials/components/socials.liquid

@@ -2,13 +2,13 @@
   {% if socials %}
     {% for social in socials %}
       <li>
-        {% render 'partials/components/link', icon: social.icon, showLabel: showLabel, label: social.title, href: social.link, class: "button", attr: "data-ghost-button", target: "_blank" %}
+        {% link social.link, "_blank", "data-ghost-button" %}{% icon social.icon %} <span class="sr-only">{{social.title}}</span>{% endlink %}
       </li>
     {% endfor %}
     {% if mail %}
       <li>
         {% capture href %}mailto:{{ mail }}{% endcapture %}
-        {% render 'partials/components/link', icon: "mail", showLabel: showLabel, label: "Contactez moi", href: href, class: "button", attr: "data-ghost-button", target: "_blank" %}
+        {% link href, "_blank", "data-ghost-button" %}{% icon "mail" %} <span class="sr-only">Me contacter</span>{% endlink %}
       </li>
     {% endif %}
   {% endif %}

src/css/components/projects.css

@@ -7,6 +7,9 @@
   border-radius: var(--border-radius);
   overflow: hidden;
 }
+.project-grid .button {
+  --button-padding: .2em;
+}
 .card {
   --background: linear-gradient(45deg, var(--color-neutral-100) 30%, var(--color-neutral-300) 100%);
   z-index: 1;

src/css/footer.css

@@ -16,4 +16,7 @@ footer .socials-list {
   --item-gap: 0.2ch;
   --item-separator: "";
   margin: 0;
+}
+footer .button.button {
+  --button-padding: .2em;
 }