nicolas/slidev-theme-narduin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(theme): shiki styles + layouts

Browse Source
This commit is contained in:
nicolas arduin 2024-12-17 12:59:36 +01:00
parent a486d6982f
commit ccd70d0eb9
Signed by: nicolas
SSH Key Fingerprint: SHA256:ELi8eDeNLl5PTn64G+o2Kx5+XVDfHF5um2tZigfwWkM
7 changed files with 121 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

337
example.md
View File

@ -101,6 +101,7 @@ hide: true
--- ---
layout: auto-grid layout: auto-grid
columns: 2 columns: 2
rows: 250px
--- ---
# Exemples de technologies d'assistance # 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)) - é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 - simplifier l'interface utilisateur
---
layout: content
--- ---
# Éléments HTML sémantiques # Éléments HTML sémantiques
@ -191,7 +194,7 @@ columns: 2
```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 // [!code --] ├── h2 Titre secondaire
├── h4 Titre niveau 4 // [!code error] ├── h4 Titre niveau 4 // [!code error]
│ └── h5 Titre niveau 5 │ └── h5 Titre niveau 5
├── h2 Titre secondaire ├── h2 Titre secondaire
@ -218,330 +221,50 @@ Correct
└── h2 Titre secondaire └── h2 Titre secondaire
``` ```
<!-- ::after::
[HeadingsMap](https://addons.mozilla.org/fr/firefox/addon/headingsmap/) Add-on HeadingsMap : [firefox](https://addons.mozilla.org/fr/firefox/addon/headingsmap/), [chrome](https://chromewebstore.google.com/detail/headingsmap/gdaioanblnkeegccagdlnolobgjhfhhm)
-->
--- ---
layout: center layout: content
hideInToc: true
--- ---
# les Formulaires # Formulaires
C'est si simple de faire n'importe quoi 🤪 **Toujours** associer un `label` aux champs `input`, `select`, `textarea`, `meter`, `progress`.
--- ```html{2,3}
// [!code word:name]
## layout: two-cols <form>
<label for="name">Nom</label>
<div class="form"> <input id="name" type="text" />
<h2>Mauvais exemple&nbsp;:</h2> </form>
<form class="nul">
<input type="text" placeholder="nom*">
<input type="text" placeholder="email*">
<button>Envoyer</button>
</form>
</div>
::right::
<div class="form">
<h2>Bon exemple&nbsp;:</h2>
<form class="cool">
<div v-click role="group" aria-labelledby="error-summary-title">
<h3 id="error-summary-title" tabindex="-1">
Il y a 2 erreurs de saisie dans le formulaire.
</h3>
<ol>
<li class="error">
<a href="#input-name">Veuillez renseigner un nom.</a>
</li>
<li class="error">
<a href="#input-email">L'email renseigné n'est pas valide.</a>
</li>
</ol>
</div>
<label for="name">Nom (obligatorie)</label>
<input id="name" type="text" required>
<label for="email">Email (obligatoire)</label>
<input id="email" type="email" aria-describedby="email-description" required>
<p id="email-description">Format attendu: nom@email.fr</p>
<button>Envoyer</button>
</form>
</div>
<div class="absolute bottom-10">
<a href="https://briefs.video/videos/what-happened-to-text-inputs/" rel="noreferer noopener">Qu'est-il arrivé au champ texte&nbsp;? <small>Vidéo en anglais.</small></a>
</div>
---
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
``` ```
<arrow v-click="[4, 5]" x1="350" y1="310" x2="195" y2="334" color="#953" width="2" arrowSize="1" />
<!-- This allow you to embed external code blocks -->
<!-- Footer -->
[Learn more](https://sli.dev/features/line-highlighting)
<!-- Inline style -->
<style>
.footnotes-sep {
@apply mt-5 opacity-10;
}
.footnotes {
@apply text-sm opacity-75;
}
.footnote-backref {
display: none;
}
</style>
<!--
Notes can also sync with clicks
[click] This will be highlighted after the first click
[click] Highlighted with `count = ref(0)`
[click:3] Last click (skip two clicks)
-->
---
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 <code>````md magic-move</code> (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
<!-- step 4 -->
<script setup>
const author = {
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
}
</script>
```
````
---
# Components
<div grid="~ cols-2 gap-4">
<div>
You can use Vue components directly inside your slides.
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.
```html
<Counter :count="10" />
```
<!-- ./components/Counter.vue -->
<Counter :count="10" m="t-4" />
Check out [the guides](https://sli.dev/builtin/components.html) for more.
</div>
<div>
```html
<Tweet id="1390115482657726468" />
```
<Tweet id="1390115482657726468" scale="0.65" />
</div>
</div>
<!--
Presenter note with **bold**, *italic*, and ~~striked~~ text.
Also, HTML elements are valid:
<div class="flex w-full">
<span style="flex-grow: 1;">Left content</span>
<span>Right content</span>
</div>
-->
---
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:
<div grid="~ cols-2 gap-2" m="t-2">
```yaml
---
theme: default
---
```
```yaml
---
theme: seriph
---
```
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true" alt="">
<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
</div>
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.
<div v-click> <div v-click>
This shows up when you click the slide: Si le `label` doit être masqué, utiliser une classe CSS `visually-hidden` (ou `sr-only`).
```html ```css
<div v-click>This shows up when you click the slide.</div> .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;
}
``` ```
</div> </div>
<br> <a class="abs-br m-6" href="https://briefs.video/videos/what-happened-to-text-inputs/" rel="noreferer noopener">Qu'est-il arrivé au champ texte&nbsp;? <small>Vidéo en anglais.</small></a>
<v-click>
The <span v-mark.red="3"><code>v-mark</code> directive</span>
also allows you to add
<span v-mark.circle.orange="4">inline marks</span>
, powered by [Rough Notation](https://roughnotation.com/):
```html
<span v-mark.underline.orange>inline markers</span>
```
</v-click>
<div mt-20 v-click>
[Learn more](https://sli.dev/guide/animations#click-animation)
</div>
---
layout: content
--- ---
# Monaco Editor Faciliter le remplissage des champs avec des instructions claires des exemples et des messages d'erreur.
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<number>(10).reduce(
(fib) => [...fib, fib.at(-1)! + fib.at(-2)!],
[1, 1]
)
)
```
--- ---
layout: center layout: center

13
layouts/auto-grid.vue
View File

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

9
setup/shiki.ts
View File

@ -3,12 +3,17 @@ import { defineShikiSetup } from '@slidev/types'
import { import {
transformerNotationDiff, transformerNotationDiff,
transformerNotationErrorLevel transformerNotationErrorLevel,
transformerNotationWordHighlight
} from '@shikijs/transformers' } from '@shikijs/transformers'
export default defineShikiSetup((): ShikiSetupReturn => { export default defineShikiSetup((): ShikiSetupReturn => {
return { return {
theme: 'one-dark-pro', theme: 'one-dark-pro',
transformers: [transformerNotationDiff(), transformerNotationErrorLevel()] transformers: [
transformerNotationDiff(),
transformerNotationErrorLevel(),
transformerNotationWordHighlight()
]
} }
}) })

20
styles/base.css
View File

@ -28,7 +28,7 @@ body {
font-weight: bold; font-weight: bold;
text-wrap: balance; text-wrap: balance;
} }
:where(h1, h2, h3, h4, .h2, .h3, .h4) + * { :is(h1, h2, h3, h4, .h2, .h3, .h4) + * {
margin-block-start: var(--space-s); margin-block-start: var(--space-s);
} }
:is(h1) { :is(h1) {
@ -95,14 +95,14 @@ ol:not([role='list']) > li + li {
margin-block-start: var(--space-xs); margin-block-start: var(--space-xs);
} }
.sr-only { .visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
block-size: 1px;
overflow: hidden;
position: absolute; position: absolute;
white-space: nowrap; overflow: hidden;
block-size: 1px;
inline-size: 1px; inline-size: 1px;
clip: rect(0 0 0 0);
clip-path: inset(100%);
white-space: nowrap;
} }
.clean-button { .clean-button {
@ -212,12 +212,12 @@ blockquote cite {
column-gap: var(--_content-padding); column-gap: var(--_content-padding);
} }
/* set content inside wrapper column */ /* set content inside wrapper column */
:where(.wrapper, .slidev-layout) > * { :is(.wrapper, .slidev-layout) > * {
grid-column: wrapper; grid-column: wrapper;
} }
/* set full width content to full grid */ /* set full width content to full grid */
:where(.wrapper, .slidev-layout) > .full-width { :is(.wrapper, .slidev-layout) > .full-width {
/* calculate inline padding based on available space minus content space to align full-width content with wrapper content */ /* calculate inline padding based on available space minus content space to align full-width content with wrapper content */
padding-inline: max( padding-inline: max(
calc((100vw - var(--content-width)) / 2), calc((100vw - var(--content-width)) / 2),
@ -231,7 +231,7 @@ ol:not([role='list']) {
padding-inline-start: 1em; padding-inline-start: 1em;
} }
.slidev-layout > * + * { :where(.slidev-layout > * + *) {
margin-block-start: var(--space-xs); margin-block-start: var(--space-xs);
} }
.slidev-layout.place-content-center { .slidev-layout.place-content-center {

1
styles/index.ts
View File

@ -3,3 +3,4 @@ import './reset.css'
import './variables.css' import './variables.css'
import './base.css' import './base.css'
import './layouts.css' import './layouts.css'
import './shiki.css'

58
styles/shiki.css Normal file
View File

@ -0,0 +1,58 @@
.shiki .line {
--_bg-opacity: var(--bg-opacity, 1);
--c-red-soft: rgba(244, 63, 94, var(--_bg-opacity));
--c-orange-soft: rgba(255, 217, 112, var(--_bg-opacity));
--c-green-soft: rgba(16, 185, 129, var(--_bg-opacity));
&:where(.error, .warning, .diff) {
--bg-opacity: 0.2;
--_bg-color: var(--bg-color, orangered);
position: relative;
display: inline-block;
inline-size: 100%;
background-color: var(--_bg-color);
}
&::after {
position: absolute;
inset-inline-end: 4px;
inset-block-start: 50%;
translate: 0 -50%;
}
&.error {
--bg-color: var(--c-red-soft);
&::after {
content: '🔴';
}
}
&.warning {
--bg-color: var(--c-orange-soft);
&::after {
content: '🟠';
}
}
&.diff {
&.remove {
--bg-color: var(--c-red-soft);
opacity: 0.7;
&::after {
content: '-';
color: red;
font-size: var(--size-0);
}
}
&.add {
--bg-color: var(--c-green-soft);
&::after {
content: '+';
font-size: var(--size-0);
color: greenyellow;
}
}
}
.highlighted-word {
margin-inline: 1px;
padding: 1px;
outline: 1px solid grey;
border-radius: 2px;
}
}

3
styles/variables.css
View File

@ -92,4 +92,7 @@
--grid-wrapper: [full-start] 1fr [wrapper-start] --grid-wrapper: [full-start] 1fr [wrapper-start]
minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end]; minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end];
--_content-padding: var(--content-padding, var(--space-s)); --_content-padding: var(--content-padding, var(--space-s));
/* overrides */
--slidev-code-margin: var(--space-s) 0;
} }