feat(conf): shiki config + layouts

feat(theme): layouts and styles
2024-12-16 23:40:18 +01:00 · 2024-12-16 21:25:03 +01:00
7 changed files with 55 additions and 40 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/example.md
+++ b/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>
@ -50,52 +50,42 @@ layout: bullets
 <Toc maxDepth="1"></Toc>

 ---
-layout: section
+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;”

---
-layout: quote
-level: 2
-hideInToc: true
---
+Tim Berners-Lee, Directeur du <abbr title="World Wide Web Consortium">W3C</abbr> et inventeur du World Wide Web

-> ## “&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;”
+> “&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;”

-Tim Berners-Lee, Directeur du W3C et inventeur du World Wide Web
+Access 42

-<!--
-Accès universel (accessible) dès la création de l'outil
-->
+> 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
 ---

-# 1 personne sur 5 est handicapée
+# 30 % de la population française

-La majorité des handicaps sont invisibles.
+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: 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;”
-
-Access 42
-
 ---
 layout: bullets
 hideInToc: true
+hide: true
 ---

 ## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;:
@ -110,6 +100,7 @@ hideInToc: true

 ---
 layout: auto-grid
+columns: 2
 ---

 # Exemples de technologies d'assistance
@ -121,11 +112,12 @@ layout: auto-grid
 <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
@ -139,9 +131,9 @@ layout: auto-grid

 ---

-# Éléments sémantiques
+# Éléments HTML sémantiques

-````md magic-move {lines: true}
+````md magic-move {lines: false}
 ```html
 <body>
  <div class="header">
@ -188,18 +180,19 @@ layout: auto-grid
 ````

 ---
-layout: two-cols-header
+layout: auto-grid
+columns: 2
 ---

-## Structure du contenu
+# Structure des titres

-::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
@ -210,8 +203,6 @@ Erroné
 └── h1 Titre principal
 ```

-::right::
-
 ```md {none|all}{lines: false}
 Correct
 └── h1 Titre principal
--- a/layouts/auto-grid.vue
+++ b/layouts/auto-grid.vue
@ -1,3 +1,9 @@
+<script setup lang="ts">
+const props = defineProps<{
+  columns?: number
+}>()
+</script>
+
 <template>
  <div class="slidev-layout">
    <slot />
@ -9,8 +15,14 @@

 <style scoped>
 .auto-grid {
+  --_columns: v-bind(columns);
  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  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>
--- a/layouts/content.vue
+++ b/layouts/content.vue
@ -0,0 +1,7 @@
+<template>
+  <div class="slidev-layout content">
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
--- a/package.json
+++ b/package.json
@ -20,6 +20,7 @@
    "@unocss/reset": "^0.65.1"
  },
  "devDependencies": {
+    "@shikijs/transformers": "^1.24.2",
    "@slidev/cli": "^0.50.0-beta.10",
    "prettier": "3.4.2",
    "prettier-plugin-slidev": "^1.0.5"
--- a/setup/shiki.ts
+++ b/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()]
  }
 })
--- a/styles/base.css
+++ b/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);
Author	SHA1	Message	Date
nico	a486d6982f	feat(conf): shiki config + layouts	2024-12-16 23:40:18 +01:00
nico	84e77c2b93	feat(theme): layouts and styles	2024-12-16 21:25:03 +01:00