From ccd70d0eb957acbe91770dee6514dc3d2767ddfe Mon Sep 17 00:00:00 2001 From: nico Date: Tue, 17 Dec 2024 12:59:36 +0100 Subject: [PATCH] feat(theme): shiki styles + layouts --- example.md | 337 ++++-------------------------------------- layouts/auto-grid.vue | 19 ++- setup/shiki.ts | 9 +- styles/base.css | 20 +-- styles/index.ts | 1 + styles/shiki.css | 58 ++++++++ styles/variables.css | 3 + 7 files changed, 121 insertions(+), 326 deletions(-) create mode 100644 styles/shiki.css diff --git a/example.md b/example.md index 9ec11fc..5c1e148 100644 --- a/example.md +++ b/example.md @@ -101,6 +101,7 @@ hide: true --- layout: auto-grid columns: 2 +rows: 250px --- # Exemples de technologies d'assistance @@ -129,6 +130,8 @@ layout: bullets - écrire simplement et clairement ([FALC](https://www.culture.gouv.fr/Thematiques/developpement-culturel/Culture-et-handicap/Facile-a-lire-et-a-comprendre-FALC-une-methode-utile)) - simplifier l'interface utilisateur +--- +layout: content --- # Éléments HTML sémantiques @@ -191,7 +194,7 @@ columns: 2 ```md {all|2|3|4|none}{lines: false} Erroné └── h1 Titre principal -├── h2 Titre secondaire // [!code --] +├── h2 Titre secondaire ├── h4 Titre niveau 4 // [!code error] │ └── h5 Titre niveau 5 ├── h2 Titre secondaire @@ -218,330 +221,50 @@ Correct └── h2 Titre secondaire ``` - +::after:: +Add-on HeadingsMap : [firefox](https://addons.mozilla.org/fr/firefox/addon/headingsmap/), [chrome](https://chromewebstore.google.com/detail/headingsmap/gdaioanblnkeegccagdlnolobgjhfhhm) --- -layout: center -hideInToc: true +layout: content --- -# les Formulaires +# Formulaires -C'est si simple de faire n'importe quoi 🤪 +**Toujours** associer un `label` aux champs `input`, `select`, `textarea`, `meter`, `progress`. ---- - -## layout: two-cols - -
-

Mauvais exemple :

-
- - - -
-
- -::right:: - -
-

Bon exemple :

-
-
-

- Il y a 2 erreurs de saisie dans le formulaire. -

-
    -
  1. - Veuillez renseigner un nom. -
    2. -
  2. - L'email renseigné n'est pas valide. -
    3. -
-
- - - - -

Format attendu: nom@email.fr

- -
-
- -
- Qu'est-il arrivé au champ texte ? Vidéo en anglais. -
- ---- -layout: image-right -image: https://cover.sli.dev ---- - -# Code - -Use code snippets and get the highlighting directly, and even types hover! - -```ts {all|5|7|7-8|10|all} twoslash -// TwoSlash enables TypeScript hover information -// and errors in markdown code blocks -// More at https://shiki.style/packages/twoslash - -import { computed, ref } from 'vue' - -const count = ref(0) -const doubled = computed(() => count.value * 2) - -doubled.value = 2 +```html{2,3} +// [!code word:name] +
+ + +
``` - - - - - - -[Learn more](https://sli.dev/features/line-highlighting) - - - - - - ---- -level: 2 ---- - -# Shiki Magic Move - -Powered by [shiki-magic-move](https://shiki-magic-move.netlify.app/), Slidev supports animations across multiple code snippets. - -Add multiple code blocks and wrap them with ````md magic-move (four backticks) to enable the magic move. For example: - -````md magic-move {lines: true} -```ts {*|2|*} -// step 1 -const author = reactive({ - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] -}) -``` - -```ts {*|1-2|3-4|3-4,8} -// step 2 -export default { - data() { - return { - author: { - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] - } - } - } -} -``` - -```ts -// step 3 -export default { - data: () => ({ - author: { - name: 'John Doe', - books: [ - 'Vue 2 - Advanced Guide', - 'Vue 3 - Basic Guide', - 'Vue 4 - The Mystery' - ] - } - }) -} -``` - -Non-code blocks are ignored. - -```vue - - -``` -```` - ---- - -# Components - -
-
- -You can use Vue components directly inside your slides. - -We have provided a few built-in components like `` and `` that you can use directly. And adding your custom components is also super easy. - -```html - -``` - - - - -Check out [the guides](https://sli.dev/builtin/components.html) for more. - -
-
- -```html - -``` - - - -
-
- - - ---- -class: px-20 ---- - -# Themes - -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: - -
- -```yaml ---- -theme: default ---- -``` - -```yaml ---- -theme: seriph ---- -``` - - - - - -
- -Read more about [How to use a theme](https://sli.dev/guide/theme-addon#use-theme) and -check out the [Awesome Themes Gallery](https://sli.dev/resources/theme-gallery). - ---- - -# Clicks Animations - -You can add `v-click` to elements to add a click animation. -
-This shows up when you click the slide: +Si le `label` doit être masqué, utiliser une classe CSS `visually-hidden` (ou `sr-only`). -```html -
This shows up when you click the slide.
+```css +.visually-hidden { + position: absolute; + overflow: hidden; + block-size: 1px; + inline-size: 1px; + clip: rect(0 0 0 0); + clip-path: inset(100%); + white-space: nowrap; +} ```
-
- - - -The v-mark directive -also allows you to add -inline marks -, powered by [Rough Notation](https://roughnotation.com/): - -```html -inline markers -``` - - - -
- -[Learn more](https://sli.dev/guide/animations#click-animation) - -
+Qu'est-il arrivé au champ texte ? Vidéo en anglais. +--- +layout: content --- -# Monaco Editor - -Slidev provides built-in Monaco Editor support. - -Add `{monaco}` to the code block to turn it into an editor: - -```ts {monaco} -import { ref } from 'vue' -import { emptyArray } from './external' - -const arr = ref(emptyArray(10)) -``` - -Use `{monaco-run}` to create an editor that can execute the code directly in the slide: - -```ts {monaco-run} -import { version } from 'vue' -import { emptyArray, sayHello } from './external' - -sayHello() -console.log(`vue ${version}`) -console.log( - emptyArray(10).reduce( - (fib) => [...fib, fib.at(-1)! + fib.at(-2)!], - [1, 1] - ) -) -``` +Faciliter le remplissage des champs avec des instructions claires des exemples et des messages d'erreur. --- layout: center diff --git a/layouts/auto-grid.vue b/layouts/auto-grid.vue index d3032f5..d4d23b5 100644 --- a/layouts/auto-grid.vue +++ b/layouts/auto-grid.vue @@ -1,24 +1,29 @@