Merge 4bffc26 into 246aa2f

assets/scss/components/_banner.scss

@@ -25,6 +25,7 @@
   }
 
   p {
+    margin: 0 0 15px;
     max-width: 700px;
   }
 

assets/scss/components/_breadcrumb.scss

@@ -0,0 +1,24 @@
+@use '../abstracts' as *;
+
+.breadcrumb {
+  margin: 50px 0 30px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.breadcrumb__item {
+  &:before {
+    display: none;
+  }
+
+  &:after {
+    top: 50%;
+    transform: translateY(-50%);
+    content: '\e90b';
+    font-size: toRem(16px);
+  }
+
+  a {
+    text-decoration: none;
+  }
+}

assets/scss/components/_glossary-list.scss

@@ -0,0 +1,118 @@
+@use 'sass:math';
+@use '../abstracts' as *;
+
+.glossary-list {
+  margin: 0;
+  padding: 0;
+  width: math.div(100%, 3);
+  min-width: math.div(100%, 3);
+}
+
+.glossary-list__item {
+  margin-bottom: 15px;
+  padding-right: 30px;
+  padding-left: 100px;
+  display: flex;
+
+  &:before,
+  &:after {
+    display: none;
+  }
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+
+  a {
+    font-size: toRem(20px);
+    line-height: 1.3;
+  }
+}
+
+[class*="glossary-list__item--"] {
+  margin-top: 50px;
+  position: relative;
+
+  &:before {
+    height: unset;
+    width: unset;
+    position: absolute;
+    top: -8px;
+    left: 0;
+    display: flex;
+    font-family: $tertiary-font;
+    font-size: toRem(72px);
+    line-height: 1;
+    text-transform: uppercase;
+    border: none;
+    background: none;
+  }
+}
+
+$characters: (
+  0: '#',
+  a: 'a',
+  b: 'b',
+  c: 'c',
+  d: 'd',
+  e: 'e',
+  f: 'f',
+  g: 'g',
+  h: 'h',
+  i: 'i',
+  j: 'j',
+  k: 'k',
+  l: 'l',
+  m: 'm',
+  n: 'n',
+  o: 'o',
+  p: 'p',
+  q: 'q',
+  r: 'r',
+  s: 's',
+  t: 't',
+  u: 'u',
+  v: 'v',
+  w: 'w',
+  x: 'x',
+  y: 'y',
+  z: 'z'
+);
+
+@each $character, $character-icon in $characters {
+  .glossary-list__item--#{$character} {
+    &:before {
+      content: $character-icon;
+    }
+  }
+}
+
+@media(max-width: $screen-md) {
+  .glossary-list__item {
+    padding-left: 60px;
+
+    a {
+      font-size: toRem(18px);
+    }
+  }
+
+  [class*="glossary-list__item--"] {
+    &:before {
+      top: -1px;
+      font-size: toRem(40px);
+    }
+  }
+}
+
+@media(max-width: $screen-xs) {
+  .glossary-list {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  [class*="glossary-list__item--"] {
+    &:first-of-type {
+      margin-top: 50px;
+    }
+  }
+}

assets/scss/components/_glossary.scss

@@ -0,0 +1,13 @@
+@use '../abstracts' as *;
+
+.glossary {
+  margin: 0 0 100px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media (max-width: $screen-xs) {
+  .glossary {
+    margin: 0 0 50px;
+  }
+}

assets/scss/layout/_footer.scss

@@ -140,6 +140,7 @@
   }
 
   .pages {
+    margin-top: 100px;
     width: 300px;
     display: flex;
   }

assets/scss/pages/_page-glossary.scss

@@ -0,0 +1,28 @@
+@use '../abstracts' as *;
+
+.page-glossary {
+  .banner {
+    height: 1550px;
+  }
+
+  main {
+    background-image: none; // remove background-image to prevent ugliness when not much content on page
+  }
+
+  .glossary-logo {
+    margin: 0 auto 50px;
+    max-width: 400px;
+  }
+
+  .content-links {
+    margin-top: 300px;
+  }
+}
+
+@media (max-width: $screen-md) {
+  .page-glossary {
+    .content-links {
+      margin-top: 100px;
+    }
+  }
+}

assets/scss/style.scss

@@ -1,13 +1,3 @@
-// @use "~prismjs/themes/prism-tomorrow.css";
-// @use '~aos/dist/aos';
-
-// Prevents hiding elements for animations if js is not enabled:
-// html.no-js [data-aos] {
-//   opacity: 1;
-//   transform: none;
-//   pointer-events: unset;
-// }
-
 @use "base/_reset";
 @use "base/_font-face";
 
@@ -29,6 +19,7 @@
 @use "components/_banner";
 @use "components/_button";
 @use "components/_comment";
+@use "components/_breadcrumb";
 @use "components/_blockquote";
 @use "components/_miniature";
 @use "components/_miniature-inline";
@@ -53,6 +44,8 @@
 @use "components/_preview";
 @use "components/_miniature-highlight";
 @use "components/_side-image";
+@use "components/_glossary";
+@use "components/_glossary-list";
 
 @use "generic/_a";
 @use "generic/_code";
@@ -61,8 +54,6 @@
 @use "generic/_p";
 @use "generic/_titles";
 @use "generic/_ul";
-// // @use "generic/_iframe";
-// // @use "generic/_kbd";
 
 @use "utilities/_screen-reader";
 
@@ -76,3 +67,4 @@
 @use "pages/_page-legals";
 @use "pages/_page-error";
 @use "pages/_page-signature";
+@use "pages/_page-glossary";

config/packages/twig.yaml

@@ -24,7 +24,7 @@ twig:
 
             trackers:
                 matomo: "%env(MATOMO_ID)%"
-            
+
             caseStudies:
                 enabled: true
 
@@ -45,6 +45,7 @@ twig:
             footer:
                 - { path: "case_studies", label: "Cas clients" }
                 - { path: "about", label: "À propos" }
+                - { path: "glossary", label: "Glossaire" }
                 - { path: "contact", label: "Contact" }
 
             footerServices:

content/member/_sample.yaml

@@ -20,10 +20,6 @@ linkedIn: ~
 email: ~
 avatar: content/images/member/avatars/path-to-avatar.jpg
 
-certifications:
-    - symfony
-    - opquast
-
 emojis:
     - 🎲
     - 🎮

content/member/frey.yaml

@@ -17,8 +17,6 @@ linkedIn: ~
 email: florian.rey@elao.com
 avatar: content/images/member/avatars/ffrey.jpg
 
-certifications: [ ]
-
 emojis:
     - 🌰
     - 👾

content/member/gfaivre.yaml

@@ -14,8 +14,6 @@ avatar: content/images/member/avatars/gfaivre.jpg
 
 phone: '007'
 
-certifications: [ ]
-
 emojis:
     - 🤾🏻‍♂️
     - 🎮

content/member/yheitz.yaml

@@ -13,6 +13,4 @@ linkedIn: ~
 email: yves.heitz@elao.com
 avatar: content/images/member/avatars/yheizt.png
 
-certifications: [ ]
-
 emojis: [ ]

content/term/ansible.md

@@ -0,0 +1,34 @@
+---
+name: "Ansible"
+logo: "build/images/services/ansible.svg"
+externalLink: https://www.ansible.com/
+metaDescription: Adeptes de la première heure d'Ansible, nous continuons 10 ans plus tard à l'utiliser de manière intensive pour la construction de nos infrastructures et de nos environnement de développement.
+---
+
+## C'est quoi Ansible ?
+Ansible est une plateforme open-source de gestion de configuration et d'automatisation des tâches. 
+Elle permet aux administrateurs système mais aussi aux développeurs de définir des configurations, des déploiements et des actions à effectuer sur des serveurs et des infrastructures de manière reproductible. 
+
+Ansible se distingue par sa simplicité d'utilisation grâce à sa syntaxe déclarative en **YAML**, qui **décrit l'état souhaité du système**. Il n'exige **aucune installation d'agent** sur les machines cibles, fonctionne via SSH ou d'autres protocoles, et offre une grande flexibilité pour automatiser des opérations complexes, la gestion de configurations, et le déploiement d'applications.
+
+Nous l'utilisons maintenant depuis 10 ans afin de piloter la configuration de nos environnements applicatifs et mettons à disposition de la communauté de nombreux rôles éprouvés en production sur des infrastructures conséquentes à travers notre projet Open Source [Manala](https://github.com/manala/ansible-roles).
+
+Nous sommes également à l'origine de la création des **« meetups » Lyonnais Ansible**, que nous avons organisés et pilotés pendant plusieurs années.
+
+## Pourquoi Ansible ?
+
+Questions souvent posée, nous avons travaillons par le passé avec Chief et Puppet en passant par Salt mais quand Ansible est apparu il s'est rapidement imposé chez nous notamment en raison de sa rapidité d'apprentissage et de sa popularité au sein des équipes de développeurs.
+
+En apportant notre expertise Ops nous devons également réfléchir à la facilité de prise en main des solutions que nous proposons aux équipes applicatives.
+
+## Son utilisation chez Rix
+
+Il est utilisé sur l'ensemble des tâches de configuration des environnements, entre autres: 
+
+- Gestion des configurations
+- Installation des services
+- Gestion des accès
+
+Nous le couplons à Terraform qui porte lui la responsabilité de constructions des éléments d'infrastructure.
+
+Il est également prépondérant pour la construction des environnements de développement à destination des équipes applicatives.

content/term/aws.md

@@ -0,0 +1,8 @@
+---
+name: "AWS"
+logo: "build/images/services/aws.svg"
+externalLink: https://aws.amazon.com/fr/
+#metaDescription: TODO
+---
+
+Some **markdown** content

content/term/example.md

@@ -0,0 +1,17 @@
+---
+name: "Exemple"
+logo: "build/images/technos/exemple.svg"
+externalLink: http://example.org
+
+# False to prevent listing it on the glossary page.
+# Cans till be externalLinked from articles or case studies.
+listInGlossary: false
+
+# Array of slugs of related articles to show on the glossary term page.
+# If not provided (null), will search for related articles by their tags.
+articles: []
+
+metaDescription: Une description courte à utiliser dans les meta de la page
+---
+
+Some **markdown** content

content/term/ovh-cloud.md

@@ -0,0 +1,8 @@
+---
+name: "OVH Cloud"
+logo: "build/images/services/ovh-cloud.svg"
+externalLink: https://www.ovhcloud.com/fr/
+#metaDescription: TODO
+---
+
+Some **markdown** content