diff --git a/slides.md b/slides.md index c57f77ae7cc54dabc80d308784e88a43498f7a70..461ca43965664fdbb87203f6d3d35df780792ef8 100644 --- a/slides.md +++ b/slides.md @@ -1,6 +1,7 @@ --- # try also 'default' to start simple -theme: seriph +# https://sli.dev/themes/gallery.html +theme: default # random image from a curated Unsplash collection by Anthony # like them? see https://unsplash.com/collections/94734566/slidev background: https://source.unsplash.com/collection/94734566/1920x1080 @@ -21,25 +22,18 @@ drawings: persist: false # use UnoCSS css: unocss +layout: image +image: img/Cover_Live_Bilan.png +title: Bilan 2022 --- -# Welcome to Slidev - -Presentation slides for developers - -<div class="pt-12"> - <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10"> - Press Space for next page <carbon:arrow-right class="inline"/> - </span> -</div> - <div class="abs-br m-6 flex gap-2"> <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl icon-btn opacity-50 !border-none !hover:text-white"> <carbon:edit /> </button> - <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" + <a href="https://lab.frogg.it/compagnons-devops/prez/bilan-2022" target="_blank" alt="GitLab" class="text-xl icon-btn opacity-50 !border-none !hover:text-white"> - <carbon-logo-github /> + <fa-brands:gitlab /> </a> </div> @@ -47,357 +41,247 @@ Presentation slides for developers The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes) --> +--- +layout: image-right +image: https://source.unsplash.com/AT77Q0Njnt0 --- -# What is Slidev? - -Slidev is a slides maker and presenter designed for developers, consist of the following features - -- 📠**Text-based** - focus on the content with Markdown, and then style them later -- 🎨 **Themable** - theme can be shared and used with npm packages -- 🧑â€ðŸ’» **Developer Friendly** - code highlighting, live coding with autocompletion -- 🤹 **Interactive** - embedding Vue components to enhance your expressions -- 🎥 **Recording** - built-in recording and camera view -- 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA -- 🛠**Hackable** - anything possible on a webpage +# Sommaire -<br> -<br> +<br/> -Read more about [Why Slidev?](https://sli.dev/guide/why) +- 👋 **Introduction** +- â²ï¸ **Bilan 2021** + - 📊 Les stats + - 🤑 Le Budjet + - 🤔 Mon retour +- 🔮 **La suite pour 2023** -<!-- -You can have `style` tag in markdown to override the style for the current page. -Learn more: https://sli.dev/guide/syntax#embedded-styles ---> +🙠Tu connais la chanson : **abonne-toi, active la cloche et met des pouces** 👠-<style> -h1 { - background-color: #2B90B6; - background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%); - background-size: 100%; - -webkit-background-clip: text; - -moz-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-text-fill-color: transparent; -} -</style> +💖 **Soutiens mon travail** et la communauté avec les SuperChats, SuperStickers ou les SuperThanks pendant mes lives. -<!-- -Here is another comment. ---> +Mais aussi sur : <br/> +https://soutenir.compagnons-devops.fr/ --- +layout: cover +--- +# Bilan 2021 â²ï¸ +Retour sur une année pleine de nouveautés -# Navigation - -Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/navigation.html) - -### Keyboard Shortcuts +--- -| | | -| --- | --- | -| <kbd>right</kbd> / <kbd>space</kbd>| next animation or slide | -| <kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide | -| <kbd>up</kbd> | previous slide | -| <kbd>down</kbd> | next slide | +# Le podcast -<!-- https://sli.dev/guide/animations.html#click-animations --> -<img - v-click - class="absolute -bottom-9 -left-7 w-80 opacity-50" - src="https://sli.dev/assets/arrow-bottom-left.svg" -/> -<p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p> +- Un seul épisode Solo +- Aide d'une monteuse en cours d'année +- Arrivé de 2 nouveaux pocasteurs +- Nous sommes 7 +- Arrivée de la monétisation --- -layout: image-right -image: https://source.unsplash.com/collection/94734566/1920x1080 ---- - -# Code - -Use code snippets and get the highlighting directly![^1] - -```ts {all|2|1-6|9|all} -interface User { - id: number - firstName: string - lastName: string - role: string -} - -function updateUser(id: number, update: User) { - const user = getUser(id) - const newUser = { ...user, ...update } - saveUser(id, newUser) -} -``` - -<arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1" /> - -[^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting) - -<style> -.footnotes-sep { - @apply mt-20 opacity-10; -} -.footnotes { - @apply text-sm opacity-75; -} -.footnote-backref { - display: none; -} -</style> ---- +## 📊 Les stats -# Components +[](https://insights.acast.com/shows/5df7c112b9e5bf6d176cbfcb?from=2020-12-31T23%3A00%3A00.000Z&interval=month&to=2021-12-31T22%3A59%3A59.999Z) -<div grid="~ cols-2 gap-4"> -<div> +--- -You can use Vue components directly inside your slides. +## Comparaison avec 2020 -We have provided a few built-in components like `<Tweet/>` and `<Youtube/>` that you can use directly. And adding your custom components is also super easy. +| | 2020 | 2021 | Tendance | +| --- | ---- | ---- | ---- | +| Téléchargements | 23,8k | 23,5k | âž¡ï¸ | +| Épisodes | 41 | 21 | â†˜ï¸ | -```html -<Counter :count="10" /> -``` +<br/> +<br/> -<!-- ./components/Counter.vue --> -<Counter :count="10" m="t-4" /> +> 48k téléchargements au total -Check out [the guides](https://sli.dev/builtin/components.html) for more. +<br/> -</div> -<div> +| Nom | Téléchargements | +| --- | ---- | +| 🥇 RDO #1 - L’ingénieur DevOps mythe ou réalité ? | 1 588 | +| 🥈 En Solo #11 - Qu'est-ce qu'un Ingénieur DevOps, un SysOps ou AdminSys ? | 1 234 | +| 🥉 RDO #3 - Comment bien débuter l'infrastructure as code ? | 1 095 | -```html -<Tweet id="1390115482657726468" /> -``` +--- -<Tweet id="1390115482657726468" scale="0.65" /> +# YouTube -</div> -</div> +- Arrivée des lives + - Lives trimestriels + - Libres Antennes + - Rencontre virtuelles des Compagnons + - Lives coding +- Un seul tuto +- Arrivée de la monétisation -<!-- -Presenter note with **bold**, *italic*, and ~~striked~~ text. +--- -Also, HTML elements are valid: -<div class="flex w-full"> - <span style="flex-grow: 1;">Left content</span> - <span>Right content</span> -</div> ---> +## 📊 Les stats +[](https://studio.youtube.com/channel/UCauIDghddUNu6Fto1nR9Bmg/analytics/tab-overview/period-minus_1_year) ---- -class: px-20 --- -# Themes +## Comparaison avec 2020 -Slidev comes with powerful theming support. Themes can provide styles, layouts, components, or even configurations for tools. Switching between themes by just **one edit** in your frontmatter: +| | 2020 | 2021 | Tendance | +| --- | ---- | ---- | ---- | +| Vues | 24,5k | 36,8k | â†—ï¸ | +| Abonnés | 2,1k | 1,2k | â†˜ï¸ | +| Lives | 0 | 19 | â†—ï¸ | +| Vidéo | 81 | 68 | â†˜ï¸ | -<div grid="~ cols-2 gap-2" m="-t-2"> +<br/> +<br/> -```yaml ---- -theme: default ---- -``` +> 62k vues au total -```yaml ---- -theme: seriph ---- -``` +<br/> -<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true"> +| Nom | Téléchargements | +| --- | ---- | +| 🥇 Comment faire une revue de code ? - TUTO - GitLab | 2 223 | +| 🥈 Comment configurer et sécuriser son dépôt GitLab ? - TUTO - GitLab | 2 071 | +| 🥉 Comment migrer de Github à GitLab ? - TUTO - GitLab | 1 926 | -<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true"> +--- -</div> +# Les compagnons +## 📊 Les stats -Read more about [How to use a theme](https://sli.dev/themes/use.html) and -check out the [Awesome Themes Gallery](https://sli.dev/themes/gallery.html). +[](https://forum.compagnons-devops.fr/admin?period=yearly) ---- -preload: false --- -# Animations +## Comparaison avec 2020 -Animations are powered by [@vueuse/motion](https://motion.vueuse.org/). +| | 2020 | 2021 | Tendance | +| --- | ---- | ---- | ---- | +| Connections | 79,4k | 97,7k | â†—ï¸ | +| Posts | 2,6 k | 2,7k | âž¡ï¸ | +| Inscrits | 403 | 281 | â†˜ï¸ | -```html -<div - v-motion - :initial="{ x: -80 }" - :enter="{ x: 0 }"> - Slidev -</div> -``` - -<div class="w-60 relative mt-6"> - <div class="relative w-40 h-40"> - <img - v-motion - :initial="{ x: 800, y: -100, scale: 1.5, rotate: -50 }" - :enter="final" - class="absolute top-0 left-0 right-0 bottom-0" - src="https://sli.dev/logo-square.png" - /> - <img - v-motion - :initial="{ y: 500, x: -100, scale: 2 }" - :enter="final" - class="absolute top-0 left-0 right-0 bottom-0" - src="https://sli.dev/logo-circle.png" - /> - <img - v-motion - :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }" - :enter="final" - class="absolute top-0 left-0 right-0 bottom-0" - src="https://sli.dev/logo-triangle.png" - /> - </div> - - <div - class="text-5xl absolute top-14 left-40 text-[#2B90B6] -z-1" - v-motion - :initial="{ x: -80, opacity: 0}" - :enter="{ x: 0, opacity: 1, transition: { delay: 2000, duration: 1000 } }"> - Slidev - </div> -</div> +<br/> +<br/> -<!-- vue script setup scripts can be directly used in markdown, and will only affects current page --> -<script setup lang="ts"> -const final = { - x: 0, - y: 0, - rotate: 0, - scale: 1, - transition: { - type: 'spring', - damping: 10, - stiffness: 20, - mass: 2 - } -} -</script> - -<div - v-motion - :initial="{ x:35, y: 40, opacity: 0}" - :enter="{ y: 0, opacity: 1, transition: { delay: 3500 } }"> - -[Learn More](https://sli.dev/guide/animations.html#motion) +> 937/1207 inscrits au total -</div> --- -# LaTeX +# 🤑 Le Budjet -LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/). +## Dépences -<br> +| Quoi ? | Combien ? | +| --- | ---- | +| Hébergement Podcast (Acast) | 141€ | +| Enregistrement (Riverside) | 171€ | +| Montage | 510€ | +| Infrastructure | 215€ | +| Matériel | 460€ | +| **TOTAL** | **1 497€** | -Inline $\sqrt{3x-1}+(1+x)^2$ +--- -Block -$$ -\begin{array}{c} +# 🤑 Le Budjet -\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & -= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ +## Recettes -\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ +| Quoi ? | Combien ? | +| --- | ---- | +| Partenaria | 0€ | +| Affiliation | 0€ | +| Publicité | 0€ | +| Dons | 150€ | +| Vente formation (5) | 171€ | +| **TOTAL** | **725€** | -\nabla \cdot \vec{\mathbf{B}} & = 0 +## Résultat −772€ 😅 -\end{array} -$$ +--- -<br> +# â±ï¸ Le temps -[Learn more](https://sli.dev/guide/syntax#latex) +| Qui | Temps (h) | +| --- | ---- | +| Christophe | 403 | +| Assistante | 64 | +| Thomas | 1 | +| **TOTAL** | 468 | --- -# Diagrams +# 🤔 Mon retour -You can create diagrams / graphs from textual descriptions, directly in your Markdown. +## Flops â¬‡ï¸ +- Année en retrait +- Formation ⌠+- Pas de suivis des stats -<div class="grid grid-cols-3 gap-10 pt-4 -mb-6"> +## Top â¬†ï¸ +- Renforcement de la communauté +- Gain d'experience +- Image de marque -```mermaid {scale: 0.5} -sequenceDiagram - Alice->John: Hello John, how are you? - Note over Alice,John: A typical interaction -``` +--- +layout: cover +--- +# La suite pour 2022 🔮 +Qu'est-ce que je vous reserve ? -```mermaid {theme: 'neutral', scale: 0.8} -graph TD -B[Text] --> C{Decision} -C -->|One| D[Result 1] -C -->|Two| E[Result 2] -``` +--- -```plantuml {scale: 0.7} -@startuml +# YouTube -package "Some Group" { - HTTP - [First Component] - [Another Component] -} +## La chaîne +- Retour des TUTO +- Activation de l'espace membre et des superchats -node "Other Groups" { - FTP - [Second Component] - [First Component] --> FTP -} +## Lives +- Live mensuel tous les 1er vendredis à 17h +- Plus de Libre Antenne (1 par trimestre) -cloud { - [Example 1] -} +--- +# Les Compagnons du DevOps -database "MySql" { - folder "This is my folder" { - [Folder 3] - } - frame "Foo" { - [Frame 4] - } -} +- Arrivé des modérateurs +- Changement de serveurs +- Arrivé du wiki -[Another Component] --> [Example 1] -[Example 1] --> [Folder 3] -[Folder 3] --> [Frame 4] +--- -@enduml -``` +# Les services -</div> +- Une formation par trimestre +- Lancement des mentorats d'équipes +- Lancement des mentorats de Groupe GitLab +- Lancement de l'offre [Mentor DevOps as a service](https://forum.compagnons-devops.fr/t/je-me-questionne-sur-une-offre-mentor-devops-as-a-service/1235) -[Learn More](https://sli.dev/guide/syntax.html#diagrams) ---- -src: ./pages/multiple-entries.md -hide: false ---- --- layout: center class: text-center --- -# Learn More +# â” Vos Questions â” + +<br/> +<br/> + +## Crédits + +[**Sli**dev](https://sli.dev) · [Unslpash](https://unsplash.com/) · [CC-BY-SA](https://creativecommons.org/licenses/by-sa/4.0/deed.fr) + +## Pour me soutenir -[Documentations](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/showcases.html) +[💖 Soutiens mon travail et la communauté](https://soutenir.compagnons-devops.fr/)