Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • compagnons-devops/prez/bilan-2022
1 result
Show changes
Commits on Source (4)
{}
\ No newline at end of file
v18.12.1
{
"$schema": "https://frontmatter.codes/frontmatter.schema.json"
}
\ No newline at end of file
This diff is collapsed.
......@@ -10,5 +10,8 @@
"@slidev/cli": "^0.38.2",
"@slidev/theme-default": "*",
"@slidev/theme-seriph": "*"
},
"devDependencies": {
"@iconify-json/fa-brands": "^1.0.2"
}
}
public/img/stats_forum.png

90.5 KiB

public/img/stats_podcast.png

62.5 KiB

public/img/stats_youtube.png

101 KiB

---
# 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,246 @@ 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 2022 ⏲️
Retour sur une année chargée
# Navigation
Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/navigation.html)
---
### Keyboard Shortcuts
# Le podcast
| | |
| --- | --- |
| <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 |
- ❌ Pas d'épisode **En Solo**
- 3 épisodes **En Apparté**
- Arivée de Louna montage et marketing
- Arrivé d'un nouveau pocasteur
- Nous sommes 8
- Premiers revenus publicitaire
<!-- 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>
---
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
[![](/img/stats_podcast.png)](https://insights.acast.com/shows/5df7c112b9e5bf6d176cbfcb?from=2021-12-31T23%3A00%3A00.000Z&interval=month&to=2022-12-31T22%3A59%3A59.999Z)
<div grid="~ cols-2 gap-4">
<div>
---
You can use Vue components directly inside your slides.
## Comparaison avec 2020/2021
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 | 2022 | Tendance |
| --- | ---- | ---- | ---- | ---- |
| Téléchargements | 23,8k | 23,5k | 45,7k | ↗️ |
| Épisodes | 41 | 21 | 26 | ↗️ |
```html
<Counter :count="10" />
```
<br/>
<br/>
<!-- ./components/Counter.vue -->
<Counter :count="10" m="t-4" />
> 93k téléchargements au total
Check out [the guides](https://sli.dev/builtin/components.html) for more.
<br/>
</div>
<div>
| Nom | Téléchargements |
| --- | ---- |
| 🥇 Kubernetes est-il obligatoire ? - Radio DevOps #20 | 1 715 |
| 🥈 Terraform enfin du vrai code d'infrastructure ! - Actus DevOps août 2022 | 1 621 |
| 🥉 Bonnes pratiques git | Radio DevOps #23 | 1 581 |
```html
<Tweet id="1390115482657726468" />
```
---
<Tweet id="1390115482657726468" scale="0.65" />
# YouTube
</div>
</div>
- Nouvelle charte Graphique 🕺
- Un seul tuto 🤪
- Arret de la trouvaille du vendredi 🤐
- Augmentation des lives
- Lives **mensuels** le premier vendredi de chaque mois
- 7 Libres Antennes
- 2 rencontre virtuelles des Compagnons
- 8 lives coding 🥳
- Premiers revenus publicitaire
- Premier partenariat 🤑
<!--
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
[![](/img/stats_youtube.png)](https://studio.youtube.com/channel/UCauIDghddUNu6Fto1nR9Bmg/analytics/tab-overview/period-minus_1_year)
---
class: px-20
---
# Themes
## Comparaison avec 2020/2021
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 | 2022 | Tendance |
| --- | ---- | ---- | ---- | ---- |
| Vues | 24,5k | 36,8k | 51,7k | ↗️ |
| Abonnés | 2,1k | 1,2k | 1,7k | ↗️ |
| Lives | 0 | 19 | 25 | ↗️ |
| Vidéo | 81 | 68 | 43 | ↘️ |
<div grid="~ cols-2 gap-2" m="-t-2">
> 62k vues au total
```yaml
---
theme: default
---
```
| Nom | Vues |
| --- | ---- |
| 🥇 Comment gérer les secrets avec l'Infrastructure as Code - Radio DevOps #24 | 2 819 |
| 🥈 C’est quoi la production, l’exploitation et les astreintes en informatique ? - Radio DevOps #26 | 2 804 |
| 🥉 C'est quoi un micro service ? - Radio DevOps #21 | 1 921 |
```yaml
---
theme: seriph
---
```
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true">
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true">
# Les compagnons
## 📊 Les stats
</div>
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).
[![](/img/stats_forum.png)](https://forum.compagnons-devops.fr/admin?period=yearly)
---
preload: false
---
# Animations
## Comparaison avec 2020/2021
Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
| | 2020 | 2021 | 2022 | Tendance |
| --- | ---- | ---- | ---- | ---- |
| Connexions | 79,4k | 97,7k | 91,0k | ↘️ |
| Posts | 2,6k | 2,7k | 1,8k | ↘️ |
| Inscrits | 403 | 281 | 354 | ↗️ |
```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>
<!-- 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)
<br/>
<br/>
</div>
> 1282/1640 inscrits au total
---
# LaTeX
# 🤑 Le Budjet
LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/).
## Dépences
<br>
| Quoi ? | Combien ? |
| --- | ---- |
| [Hébergement Podcast (Acast)](Connections) | 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/)