feat(conf): shiki config + layouts
This commit is contained in:
parent
84e77c2b93
commit
a486d6982f
SSH Key Fingerprint:
SHA256:ELi8eDeNLl5PTn64G+o2Kx5+XVDfHF5um2tZigfwWkM
61
example.md
61
example.md
@ -30,7 +30,7 @@ hideInToc: true
|
|||||||
layout: intro
|
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">
|
<div class="abs-br m-6">
|
||||||
<a href="https://www.nardu.in" rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence : <a href="https://creativecommons.org/licenses/by-nc/4.0/" rel="noreferer noopener">CC BY-NC</a>
|
<a href="https://www.nardu.in" rel="noreferer noopener">Nico,</a> Décembre 2024.<br>licence : <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>
|
<Toc maxDepth="1"></Toc>
|
||||||
|
|
||||||
---
|
---
|
||||||
layout: section
|
layout: content
|
||||||
---
|
---
|
||||||
|
|
||||||
# l'Accessibilité Numérique
|
# Contexte
|
||||||
|
|
||||||
Pourquoi, pour qui, comment ?
|
> “ La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel. ”
|
||||||
|
|
||||||
---
|
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
|
|
||||||
---
|
|
||||||
|
|
||||||
> ## “ La force du Web réside dans son universalité. L'accès de tous, quel que soit le handicap, en est un aspect essentiel. ”
|
> “ 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. ”
|
||||||
|
|
||||||
Tim Berners-Lee, Directeur du W3C et inventeur du World Wide Web
|
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.
|
||||||
Accès universel (accessible) dès la création de l'outil
|
|
||||||
-->
|
<abbr title="World Wide Web Consortium">W3C</abbr> <abbr title="Web Accessibility Initiative">WAI</abbr>
|
||||||
|
|
||||||
---
|
---
|
||||||
layout: fact
|
layout: fact
|
||||||
hideInToc: true
|
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
|
certains sont temporaires, certains arrivent avec l'âge
|
||||||
-->
|
-->
|
||||||
|
|
||||||
---
|
|
||||||
layout: quote
|
|
||||||
hideInToc: true
|
|
||||||
---
|
|
||||||
|
|
||||||
> ## “ 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. ”
|
|
||||||
|
|
||||||
Access 42
|
|
||||||
|
|
||||||
---
|
---
|
||||||
layout: bullets
|
layout: bullets
|
||||||
hideInToc: true
|
hideInToc: true
|
||||||
|
hide: true
|
||||||
---
|
---
|
||||||
|
|
||||||
## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment :
|
## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment :
|
||||||
@ -110,6 +100,7 @@ hideInToc: true
|
|||||||
|
|
||||||
---
|
---
|
||||||
layout: auto-grid
|
layout: auto-grid
|
||||||
|
columns: 2
|
||||||
---
|
---
|
||||||
|
|
||||||
# Exemples de technologies d'assistance
|
# Exemples de technologies d'assistance
|
||||||
@ -121,11 +112,12 @@ layout: auto-grid
|
|||||||
<Youtube id="SlxIEPEC_Qc" />
|
<Youtube id="SlxIEPEC_Qc" />
|
||||||
<Youtube id="LHUyDhutx80" />
|
<Youtube id="LHUyDhutx80" />
|
||||||
|
|
||||||
|
---
|
||||||
|
layout: bullets
|
||||||
---
|
---
|
||||||
|
|
||||||
# Bonnes pratiques en bref
|
# 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))
|
- structure du contenu ([titres](https://developer.mozilla.org/fr/docs/Web/HTML/Element/Heading_Elements))
|
||||||
- contrastes des couleurs ([outil](https://coolors.co/contrast-checker))
|
- contrastes des couleurs ([outil](https://coolors.co/contrast-checker))
|
||||||
- taille et unités des polices
|
- 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
|
```html
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<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}
|
```md {all|2|3|4|none}{lines: false}
|
||||||
Erroné
|
Erroné
|
||||||
└── h1 Titre principal
|
└── h1 Titre principal
|
||||||
├── h2 Titre secondaire
|
├── h2 Titre secondaire // [!code --]
|
||||||
├── h4 Titre niveau 4
|
├── h4 Titre niveau 4 // [!code error]
|
||||||
│ └── h5 Titre niveau 5
|
│ └── h5 Titre niveau 5
|
||||||
├── h2 Titre secondaire
|
├── h2 Titre secondaire
|
||||||
│ ├── h2 Titre secondaire
|
│ ├── h2 Titre secondaire
|
||||||
@ -210,8 +203,6 @@ Erroné
|
|||||||
└── h1 Titre principal
|
└── h1 Titre principal
|
||||||
```
|
```
|
||||||
|
|
||||||
::right::
|
|
||||||
|
|
||||||
```md {none|all}{lines: false}
|
```md {none|all}{lines: false}
|
||||||
Correct
|
Correct
|
||||||
└── h1 Titre principal
|
└── h1 Titre principal
|
||||||
|
|||||||
@ -1,3 +1,9 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps<{
|
||||||
|
columns?: number
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="slidev-layout">
|
<div class="slidev-layout">
|
||||||
<slot />
|
<slot />
|
||||||
@ -9,8 +15,14 @@
|
|||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.auto-grid {
|
.auto-grid {
|
||||||
|
--_columns: v-bind(columns);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, 1fr);
|
grid-template-columns: repeat(var(--_columns, 2), 1fr);
|
||||||
|
grid-auto-rows: 250px;
|
||||||
gap: var(--space-xs);
|
gap: var(--space-xs);
|
||||||
}
|
}
|
||||||
|
.auto-grid > * {
|
||||||
|
inline-size: 100%;
|
||||||
|
block-size: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
7
layouts/content.vue
Normal file
7
layouts/content.vue
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<div class="slidev-layout content">
|
||||||
|
<div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -20,6 +20,7 @@
|
|||||||
"@unocss/reset": "^0.65.1"
|
"@unocss/reset": "^0.65.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@shikijs/transformers": "^1.24.2",
|
||||||
"@slidev/cli": "^0.50.0-beta.10",
|
"@slidev/cli": "^0.50.0-beta.10",
|
||||||
"prettier": "3.4.2",
|
"prettier": "3.4.2",
|
||||||
"prettier-plugin-slidev": "^1.0.5"
|
"prettier-plugin-slidev": "^1.0.5"
|
||||||
|
|||||||
@ -1,11 +1,14 @@
|
|||||||
import type { ShikiSetupReturn } from '@slidev/types'
|
import type { ShikiSetupReturn } from '@slidev/types'
|
||||||
import { defineShikiSetup } from '@slidev/types'
|
import { defineShikiSetup } from '@slidev/types'
|
||||||
|
|
||||||
|
import {
|
||||||
|
transformerNotationDiff,
|
||||||
|
transformerNotationErrorLevel
|
||||||
|
} from '@shikijs/transformers'
|
||||||
|
|
||||||
export default defineShikiSetup((): ShikiSetupReturn => {
|
export default defineShikiSetup((): ShikiSetupReturn => {
|
||||||
return {
|
return {
|
||||||
themes: {
|
theme: 'one-dark-pro',
|
||||||
dark: 'vitesse-dark',
|
transformers: [transformerNotationDiff(), transformerNotationErrorLevel()]
|
||||||
light: 'vitesse-light'
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@ -26,6 +26,7 @@ body {
|
|||||||
|
|
||||||
:is(h1, h2, h3, h4, .h2, .h3, .h4) {
|
:is(h1, h2, h3, h4, .h2, .h3, .h4) {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
:where(h1, h2, h3, h4, .h2, .h3, .h4) + * {
|
:where(h1, h2, h3, h4, .h2, .h3, .h4) + * {
|
||||||
margin-block-start: var(--space-s);
|
margin-block-start: var(--space-s);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user