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
Source diff could not be displayed: it is too large. Options to address this: view the blob.
...@@ -10,5 +10,8 @@ ...@@ -10,5 +10,8 @@
"@slidev/cli": "^0.38.2", "@slidev/cli": "^0.38.2",
"@slidev/theme-default": "*", "@slidev/theme-default": "*",
"@slidev/theme-seriph": "*" "@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 # 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 # random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev # like them? see https://unsplash.com/collections/94734566/slidev
background: https://source.unsplash.com/collection/94734566/1920x1080 background: https://source.unsplash.com/collection/94734566/1920x1080
...@@ -21,25 +22,18 @@ drawings: ...@@ -21,25 +22,18 @@ drawings:
persist: false persist: false
# use UnoCSS # use UnoCSS
css: 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"> <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"> <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
<carbon:edit /> <carbon:edit />
</button> </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"> class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
<carbon-logo-github /> <fa-brands:gitlab />
</a> </a>
</div> </div>
...@@ -47,357 +41,246 @@ Presentation slides for developers ...@@ -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) 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? # Sommaire
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
<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**
<!-- 🙏 Tu connais la chanson : **abonne-toi, active la cloche et met des pouces** 👍
You can have `style` tag in markdown to override the style for the current page.
Learn more: https://sli.dev/guide/syntax#embedded-styles
-->
<style> 💖 **Soutiens mon travail** et la communauté avec les SuperChats, SuperStickers ou les SuperThanks pendant mes lives.
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>
<!-- Mais aussi sur : <br/>
Here is another comment. 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
| | | - ❌ Pas d'épisode **En Solo**
| --- | --- | - 3 épisodes **En Apparté**
| <kbd>right</kbd> / <kbd>space</kbd>| next animation or slide | - Arivée de Louna montage et marketing
| <kbd>left</kbd> / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide | - Arrivé d'un nouveau pocasteur
| <kbd>up</kbd> | previous slide | - Nous sommes 8
| <kbd>down</kbd> | next slide | - 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 ## 📊 Les stats
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>
--- [![](/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)
# Components
<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 <br/>
<Counter :count="10" /> <br/>
```
<!-- ./components/Counter.vue --> > 93k téléchargements au total
<Counter :count="10" m="t-4" />
Check out [the guides](https://sli.dev/builtin/components.html) for more. <br/>
</div> | Nom | Téléchargements |
<div> | --- | ---- |
| 🥇 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> - Nouvelle charte Graphique 🕺
</div> - 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: ## 📊 Les stats
<div class="flex w-full">
<span style="flex-grow: 1;">Left content</span>
<span>Right content</span>
</div>
-->
[![](/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 | Nom | Vues |
--- | --- | ---- |
theme: default | 🥇 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> [![](/img/stats_forum.png)](https://forum.compagnons-devops.fr/admin?period=yearly)
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).
---
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 <br/>
<div <br/>
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)
</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 # 🤑 Le Budjet
$$
\begin{array}{c}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & ## Recettes
= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\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 layout: cover
Alice->John: Hello John, how are you? ---
Note over Alice,John: A typical interaction # 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} # YouTube
@startuml
package "Some Group" { ## La chaîne
HTTP - [First Component] - Retour des TUTO
[Another Component] - Activation de l'espace membre et des superchats
}
node "Other Groups" { ## Lives
FTP - [Second Component] - Live mensuel tous les 1er vendredis à 17h
[First Component] --> FTP - Plus de Libre Antenne (1 par trimestre)
}
cloud { ---
[Example 1]
}
# Les Compagnons du DevOps
database "MySql" { - Arrivé des modérateurs
folder "This is my folder" { - Changement de serveurs
[Folder 3] - Arrivé du wiki
}
frame "Foo" {
[Frame 4]
}
}
[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 layout: center
class: text-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/)