Merge branch 'master' into rust-workshops

mainmatter · Jun 21, 2024 · 2988123 · 2988123
2 parents f526c3c + ccb9116
commit 2988123
Show file tree

Hide file tree

Showing 36 changed files with 247 additions and 446 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -3,6 +3,7 @@ const util = require("util");
 const { optimize } = require("svgo");
 const path = require("path");
 const markdownIt = require("markdown-it");
+const markdownItFootnote = require("markdown-it-footnote");
 const dayjs = require("dayjs");
 const customParseFormat = require("dayjs/plugin/customParseFormat");
 
@@ -83,13 +84,18 @@ module.exports = function (eleventyConfig) {
     return value.replace(/(<([^>]+)>)/gi, "");
   });
 
-  const mdRender = new markdownIt({});
+  const mdRender = new markdownIt({
+    html: true,
+    breaks: false,
+    linkify: true,
+  }).use(markdownItFootnote);
   eleventyConfig.addFilter("markdown", function (value) {
     if (value) {
       return mdRender.render(value);
     }
     return "";
   });
+  eleventyConfig.setLibrary("md", mdRender);
 
   eleventyConfig.addFilter("filterByAttribute", (array, attribute, value) => {
     return array.filter(element => element.data[attribute] === value);

diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "express": "^4.18.1",
     "html-minifier": "4.0.0",
     "markdown-it": "14.1.0",
+    "markdown-it-footnote": "^4.0.0",
     "netlify-plugin-11ty": "^1.1.0",
     "npm-run-all2": "^6.0.0",
     "prettier": "3.2.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/css/app.scss b/src/assets/css/app.scss
@@ -9,6 +9,7 @@
 @import "base/forms";
 @import "base/prism-theme";
 
+@import "components/icon-arrow";
 @import "components/nav";
 @import "components/nav-submenu";
 @import "components/mobile-menu";

diff --git a/src/assets/css/base/_buttons-links.scss b/src/assets/css/base/_buttons-links.scss
@@ -16,22 +16,11 @@ p a {
   transition: color ease 0.5s;
   overflow: hidden;
   transform: translate3d(0, 0, 0);
+  --icon-arrow-margin: 0 0 0 0.5rem;
 
-  .icon-arrow {
-    flex-shrink: 0;
-    transform: translateX(0px) rotate(-90deg);
-    height: 1rem;
-    width: 1rem;
-    color: var(--color-white);
-    margin-left: 0.5rem;
-    transition: transform 0.5s ease;
-  }
 
   &:hover, &:focus {
-   .icon-arrow {
-      transform: translateX(0.5rem) rotate(-90deg);
-      transition: transform 0.5s ease;
-    }
+    --icon-arrow-transform: translate3d(0.5rem, 0, 0);
   }
 
   &--purple {
@@ -45,10 +34,6 @@ p a {
   &--white {
     background-color: var(--color-white);
     color: var(--color-link-primary);
-
-    .icon-arrow {
-      color: var(--color-link-primary);
-    }
   }
 }
 
@@ -60,85 +45,22 @@ p a {
   display: flex;
   align-items: center;
   text-decoration: none;
+  --icon-arrow-size: 1.5rem;
+  --icon-arrow-margin: 0 1.5rem 0 0;
+  --icon-arrow-color: var(--color-purple);
 
   &-text {
     text-decoration: none;
   }
 
-  .icon-arrow {
-    flex-shrink: 0;
-    transform: translateX(0px) rotate(-90deg);
-    height: 1.5rem;
-    width: 1.5rem;
-    color: var(--color-purple);
-    margin-right: 1.5rem;
-    transition: transform 0.5s ease;
-  }
-
-  &.previous {
-    .icon-arrow {
-      transform: translateX(0px) rotate(90deg);
-      margin-right: 1.5rem;
-      margin-left: 0;
-      transition: transform 0.5s ease;
-    }
-
-    &:hover .icon-arrow, &:focus .icon-arrow {
-      transform: translateX(-0.5rem) rotate(90deg);
-    }
-  }
-}
-
-.btn-secondary:hover, .btn-secondary:focus {
-  text-decoration: none;
-
-  .icon-arrow {
-    transform: translateX(0.5rem) rotate(-90deg);
-    transition: transform 0.5s ease;
-  }
-
-  .btn-secondary-text {
-    text-decoration: none;
-  }
-}
-
-.next {
-  .icon-arrow {
-    transform: rotate(-90deg);
-    margin-right: 0;
-    margin-left: 1.5rem;
-  }
-}
-
-.videos {
-  .icon-arrow {
-    transform: rotate(-90deg);
-    margin-right: 0;
-    margin-left: 1.5rem;
-  }
-}
-
-.message {
-  cursor: pointer;
-
-  .icon-arrow {
-    transform: rotate(-90deg);
-    margin-right: 0;
-    margin-left: 1.5rem;
-    color: var(--color-white);
-  }
-
   &:hover, &:focus {
-    color: var(--color-aqua);
+    --icon-arrow-transform: translate3d(0.5rem,0,0);
+    text-decoration: none;
+    color: var(--color-purple);
   }
-}
 
-a.btn-secondary {
-  &:hover,
-  &:focus {
-    .btn-secondary__text {
-      color: var(--color-purple);
-    }
+  &--reversed {
+    --icon-arrow-margin: 0 0 0 1.5rem;
   }
 }
 

diff --git a/src/assets/css/base/_prism-theme.scss b/src/assets/css/base/_prism-theme.scss
@@ -4,8 +4,8 @@
  * @author Katorly
  */
 /* General */
-pre[class*="language-"],
-code[class*="language-"] {
+pre,
+code {
   color: #c9d1d9;
   font-size: 1.5rem;
   text-shadow: none;
@@ -24,26 +24,26 @@ code[class*="language-"] {
   -ms-hyphens: none;
   hyphens: none;
 }
-pre[class*="language-"]::selection,
-code[class*="language-"]::selection,
-pre[class*="language-"]::mozselection,
-code[class*="language-"]::mozselection {
+pre::selection,
+code::selection,
+pre::mozselection,
+code::mozselection {
   text-shadow: none;
   background: #234879;
 }
 @media print {
-  pre[class*="language-"],
-  code[class*="language-"] {
+  pre,
+  code {
     text-shadow: none;
   }
 }
-pre[class*="language-"] {
+pre {
   padding: 1em;
   margin: 2em 0;
   overflow: auto;
   background: #161b22;
 }
-:not(pre) > code[class*="language-"] {
+:not(pre) > code {
   padding: .1em .3em;
   border-radius: .3em;
   color: #c9d1d9;
@@ -53,7 +53,7 @@ pre[class*="language-"] {
 pre[data-line] {
   position: relative;
 }
-pre[class*="language-"] > code[class*="language-"] {
+pre > code {
   position: relative;
   z-index: 1;
 }

diff --git a/src/assets/css/base/_variables.scss b/src/assets/css/base/_variables.scss
@@ -20,6 +20,12 @@
   --color-link-background: var(--color-yellow);
 
   --font-base: "Core Sans A", sans-serif;
+
+  // Arrow icons
+  --icon-arrow-rotate: -90deg;
+  --icon-arrow-transform: translate3d(0, 0, 0);
+  --icon-arrow-size: 1rem;
+  --icon-arrow-margin: 0 0 0 1rem;
 }
 
 $breakpoint-s: 48em;

diff --git a/src/assets/css/components/_case-cards.scss b/src/assets/css/components/_case-cards.scss
@@ -70,6 +70,7 @@
 @media (hover: hover) {
   .case-cards__grid-element:hover,
   .case-cards__grid-element:focus {
+    --icon-arrow-transform: translate3d(0.5rem, 0, 0);
     color: var(--color-white);
     cursor: pointer;
 
@@ -80,23 +81,9 @@
     .solution {
       transform: translate(0px);
     }
-
-    .icon-arrow {
-      transform: translateX(0.5rem) rotate(-90deg);
-      transition: transform 0.5s ease;
-    }
   }
 }
 
-.case-cards_link {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  text-decoration: none;
-}
-
 .case-cards__content {
   position: relative;
   width: 100%;
@@ -120,6 +107,7 @@
   text-decoration: none;
   background-repeat: no-repeat;
   z-index: 50;
+  outline-offset: -0.5rem;
 }
 
 .case-cards__link-wrapper {
@@ -144,37 +132,16 @@
 }
 
 .case-cards__link-arrow {
+  --icon-arrow-size: 1.5rem;
   position: relative;
   margin-left: 0.25rem;
   z-index: 1;
   display: flex;
   justify-content: center;
-
-  .icon-arrow {
-    transform: translateX(0px) rotate(-90deg);
-    transition: transform 0.5s ease;
-    width: 24px;
-    height: auto;
-  }
-
-  &--rotate {
-    margin-left: 0;
-    margin-right: 0.5rem;
-
-    .icon-arrow {
-      transform: rotate(90deg);
-    }
-  }
 }
 
 .case-cards__link-label a {
   text-decoration: none;
   position: relative;
   z-index: 100;
-
-  &:hover,
-  &:focus {
-    cursor: pointer;
-    color: var(--color-white);
-  }
 }
diff --git a/src/assets/css/components/_client-card.scss b/src/assets/css/components/_client-card.scss
@@ -18,32 +18,19 @@
 }
 
 .client-card__link {
+  --icon-arrow-size: 1.5rem;
+  --icon-arrow-margin: 0 0 0 0.75rem;
   display: flex;
   align-items: center;
-}
-
-.client-card__link {
   flex-shrink: 0;
 
-  .icon-arrow {
-    transform: translateX(0px) rotate(-90deg);
-    transition: transform 0.5s ease;
-    height: 1.5rem;
-    width: 1.5rem;
-    color: var(--color-purple);
-    margin-left: 0.75rem;
-  }
-
   &:hover,
   &:focus {
-    .icon-arrow {
-      transform: translateX(0.5rem) rotate(-90deg);
-      transition: transform 0.5s ease;
-    }
+    --icon-arrow-transform: translate3d(0.5rem, 0, 0);
   }
 }
 
-@media (min-width: $breakpoint-s) {
+@media (min-width: 48em) {
   .client-card {
     margin: 0;
   }