feat(conf): shiki config + layouts

.prettierrc.json

@@ -17,5 +17,14 @@
   "tabWidth": 2,
   "trailingComma": "none",
   "useTabs": false,
-  "vueIndentScriptAndStyle": false
+  "vueIndentScriptAndStyle": false,
+  "overrides": [
+    {
+      "files": ["slides.md", "example.md", "pages/*.md"],
+      "options": {
+        "parser": "slidev",
+        "plugins": ["prettier-plugin-slidev"]
+      }
+    }
+  ]
 }

.vscode/settings.json

@@ -4,8 +4,5 @@
   "editor.formatOnSave": true,
   "slidev.force-enabled": true,
   "slidev.include": ["**/slides.md", "example.md"],
-  "[markdown]": {
-    "editor.defaultFormatter": "antfu.slidev"
-	},
-	"prettier.configPath": ".prettierrc.json"
+  "prettier.configPath": ".prettierrc.json"
 }

example.md

@@ -30,7 +30,7 @@ hideInToc: true
 layout: intro
 ---
 
-# Introduction à <span class="highlight">l'accessibilité numérique</span>
+# <span class="highlight">L'accessibilité numérique</span> en 10 étapes
 
 <div class="abs-br m-6">
     <a href="https://www.nardu.in" rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence&nbsp;: <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferer noopener">CC BY-NC</a>
@@ -41,10 +41,8 @@ The last comment block of each slide will be treated as slide notes. It will be
 -->
 
 ---
-
 hideInToc: true
 layout: bullets
-
 ---
 
 # Sommaire
@@ -52,57 +50,43 @@ layout: bullets
 <Toc maxDepth="1"></Toc>
 
 ---
-
-layout: title-image
-image: https://cover.sli.dev
-
+layout: content
 ---
 
-# l'Accessibilité Numérique
+# Contexte
 
-Pourquoi, pour qui, comment ?
+> “&nbsp;La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel.&nbsp;”
 
----
+Tim Berners-Lee, Directeur du <abbr title="World Wide Web Consortium">W3C</abbr> et inventeur du World Wide Web
 
-layout: quote
-level: 2
-hideInToc: true
-
----
-
-> ## “&nbsp;La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel.&nbsp;”
-
-Tim Berners-Lee, Directeur du W3C et inventeur du World Wide Web
-
-<!-- Accès universel (accessible) dès la création de l'outil -->
-
----
-
-layout: fact
-hideInToc: true
-
----
-
-# 1 personne sur 5 est handicapée
-
-La majorité des handicaps sont invisibles.
-
-<!-- certains sont temporaires, certains arrivent avec l'âge -->
-
----
-
-layout: quote
-hideInToc: true
-
----
-
-# “&nbsp;L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.&nbsp;”
+> “&nbsp;L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y accéder.&nbsp;”
 
 Access 42
 
+> The W3C vision is that the Web and related technologies are accessible so that all people with disabilities around the globe can participate equally in the digital world.
+
+<abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Web Accessibility Initiative">WAI</abbr>
+
+---
+layout: fact
+hideInToc: true
 ---
 
-## hideInToc: true
+# 30 % de la population française
+
+Connaît une difficulté (limitation ou restriction) au quotidien. La majorité sont invisibles.
+
+<cite>[Rapport 2024 de la DREES.](https://drees.solidarites-sante.gouv.fr/sites/default/files/2024-12/HANDICAP24MAJ061224-2.pdf)</cite>
+
+<!--
+certains sont temporaires, certains arrivent avec l'âge
+-->
+
+---
+layout: bullets
+hideInToc: true
+hide: true
+---
 
 ## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;:
 
@@ -115,23 +99,25 @@ Access 42
 - visuels
 
 ---
-
-## layout: center
+layout: auto-grid
+columns: 2
+---
 
 # Exemples de technologies d'assistance
 
-<div grid="~ cols-2 gap-4">
-  <Youtube id="nw6-eDJXWzY" />
-  <Youtube id="N9Q8oF0Lx2M" />
-  <Youtube id="SlxIEPEC_Qc" />
-  <Youtube id="LHUyDhutx80" />
-</div>
+::content::
 
+<Youtube id="nw6-eDJXWzY" />
+<Youtube id="N9Q8oF0Lx2M" />
+<Youtube id="SlxIEPEC_Qc" />
+<Youtube id="LHUyDhutx80" />
+
+---
+layout: bullets
 ---
 
 # Bonnes pratiques en bref
 
-- [HTML sémantique](https://developer.mozilla.org/fr/docs/Glossary/Semantics)
 - structure du contenu ([titres](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements))
 - contrastes des couleurs ([outil](https://coolors.co/contrast-checker))
 - taille et unités des polices
@@ -145,9 +131,9 @@ Access 42
 
 ---
 
-# Éléments sémantiques
+# Éléments HTML sémantiques
 
-````md magic-move {lines: true}
+````md magic-move {lines: false}
 ```html
 <body>
   <div class="header">
@@ -193,19 +179,20 @@ Access 42
 ```
 ````
 
+---
+layout: auto-grid
+columns: 2
 ---
 
-## layout: two-cols-header
+# Structure des titres
 
-## Structure du contenu
-
-::left::
+::content::
 
 ```md {all|2|3|4|none}{lines: false}
 Erroné
 └── h1 Titre principal
-├── h2 Titre secondaire
-├── h4 Titre niveau 4
+├── h2 Titre secondaire // [!code --]
+├── h4 Titre niveau 4 // [!code error]
 │ └── h5 Titre niveau 5
 ├── h2 Titre secondaire
 │ ├── h2 Titre secondaire
@@ -216,8 +203,6 @@ Erroné
 └── h1 Titre principal
 ```
 
-::right::
-
 ```md {none|all}{lines: false}
 Correct
 └── h1 Titre principal
@@ -233,13 +218,13 @@ Correct
 └── h2 Titre secondaire
 ```
 
-<!-- [HeadingsMap](https://addons.mozilla.org/fr/firefox/addon/headingsmap/) -->
+<!--
+[HeadingsMap](https://addons.mozilla.org/fr/firefox/addon/headingsmap/)
+-->
 
 ---
-
 layout: center
 hideInToc: true
-
 ---
 
 # les Formulaires
@@ -291,10 +276,8 @@ C'est si simple de faire n'importe quoi 🤪
 </div>
 
 ---
-
 layout: image-right
 image: https://cover.sli.dev
-
 ---
 
 # Code
@@ -346,8 +329,8 @@ Notes can also sync with clicks
 -->
 
 ---
-
-## level: 2
+level: 2
+---
 
 # Shiki Magic Move
 
@@ -462,8 +445,8 @@ Also, HTML elements are valid:
 -->
 
 ---
-
-## class: px-20
+class: px-20
+---
 
 # Themes
 
@@ -561,10 +544,8 @@ console.log(
 ```
 
 ---
-
 layout: center
 class: text-center
-
 ---
 
 # Learn More

layouts/auto-grid.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+  columns?: number
+}>()
+</script>
+
+<template>
+  <div class="slidev-layout">
+    <slot />
+    <div class="auto-grid">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.auto-grid {
+  --_columns: v-bind(columns);
+  display: grid;
+  grid-template-columns: repeat(var(--_columns, 2), 1fr);
+  grid-auto-rows: 250px;
+  gap: var(--space-xs);
+}
+.auto-grid > * {
+  inline-size: 100%;
+  block-size: 100%;
+}
+</style>

layouts/content.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout content">
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>

layouts/fact.vue

@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="slidev-layout place-content-center place-items-center text-center fact"
+  >
+    <slot />
+  </div>
+</template>

layouts/quote.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="slidev-layout h-full place-content-center">
+  <div class="slidev-layout place-content-center">
     <slot />
   </div>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-narduin",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "keywords": [
     "slidev-theme",
@@ -20,8 +20,10 @@
     "@unocss/reset": "^0.65.1"
   },
   "devDependencies": {
+    "@shikijs/transformers": "^1.24.2",
     "@slidev/cli": "^0.50.0-beta.10",
-    "prettier": "3.4.2"
+    "prettier": "3.4.2",
+    "prettier-plugin-slidev": "^1.0.5"
   },
   "slidev": {
     "colorSchema": "light",

setup/shiki.ts

@@ -1,11 +1,14 @@
 import type { ShikiSetupReturn } from '@slidev/types'
 import { defineShikiSetup } from '@slidev/types'
 
+import {
+  transformerNotationDiff,
+  transformerNotationErrorLevel
+} from '@shikijs/transformers'
+
 export default defineShikiSetup((): ShikiSetupReturn => {
   return {
-    themes: {
-      dark: 'vitesse-dark',
-      light: 'vitesse-light'
-    }
+    theme: 'one-dark-pro',
+    transformers: [transformerNotationDiff(), transformerNotationErrorLevel()]
   }
 })

styles/base.css

@@ -26,6 +26,7 @@ body {
 
 :is(h1, h2, h3, h4, .h2, .h3, .h4) {
   font-weight: bold;
+  text-wrap: balance;
 }
 :where(h1, h2, h3, h4, .h2, .h3, .h4) + * {
   margin-block-start: var(--space-s);
@@ -224,3 +225,15 @@ blockquote cite {
   );
   grid-column: full;
 }
+
+ul:not([role='list']),
+ol:not([role='list']) {
+  padding-inline-start: 1em;
+}
+
+.slidev-layout > * + * {
+  margin-block-start: var(--space-xs);
+}
+.slidev-layout.place-content-center {
+  block-size: 100%;
+}