feat(theme): layouts and styles

.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"
 }

example.md

@@ -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,10 +50,7 @@ layout: bullets
 <Toc maxDepth="1"></Toc>
 
 ---
-
+layout: section
-layout: title-image
-image: https://cover.sli.dev
-
 ---
 
 # l'Accessibilité Numérique
@@ -63,46 +58,45 @@ image: https://cover.sli.dev
 Pourquoi, pour qui, comment ?
 
 ---
-
 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 -->
+<!--
+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 -->
+<!--
+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
 
 ---
-
+layout: bullets
-## hideInToc: true
+hideInToc: true
+---
 
 ## L'accessibilité du Web englobe tous les handicaps qui affectent l'accès au Web, notamment&nbsp;:
 
@@ -115,17 +109,17 @@ Access 42
 - visuels
 
 ---
-
+layout: auto-grid
-## layout: center
+---
 
 # Exemples de technologies d'assistance
 
-<div grid="~ cols-2 gap-4">
+::content::
-  <Youtube id="nw6-eDJXWzY" />
+
-  <Youtube id="N9Q8oF0Lx2M" />
+<Youtube id="nw6-eDJXWzY" />
-  <Youtube id="SlxIEPEC_Qc" />
+<Youtube id="N9Q8oF0Lx2M" />
-  <Youtube id="LHUyDhutx80" />
+<Youtube id="SlxIEPEC_Qc" />
-</div>
+<Youtube id="LHUyDhutx80" />
 
 ---
 
@@ -194,8 +188,8 @@ Access 42
 ````
 
 ---
-
+layout: two-cols-header
-## layout: two-cols-header
+---
 
 ## Structure du contenu
 
@@ -233,13 +227,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 +285,8 @@ C'est si simple de faire n'importe quoi 🤪
 </div>
 
 ---
-
 layout: image-right
 image: https://cover.sli.dev
-
 ---
 
 # Code
@@ -346,8 +338,8 @@ Notes can also sync with clicks
 -->
 
 ---
-
+level: 2
-## level: 2
+---
 
 # Shiki Magic Move
 
@@ -462,8 +454,8 @@ Also, HTML elements are valid:
 -->
 
 ---
-
+class: px-20
-## class: px-20
+---
 
 # Themes
 
@@ -561,10 +553,8 @@ console.log(
 ```
 
 ---
-
 layout: center
 class: text-center
-
 ---
 
 # Learn More

layouts/auto-grid.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="slidev-layout">
+    <slot />
+    <div class="auto-grid">
+      <slot name="content" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.auto-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-xs);
+}
+</style>

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",
@@ -21,7 +21,8 @@
   },
   "devDependencies": {
     "@slidev/cli": "^0.50.0-beta.10",
-    "prettier": "3.4.2"
+    "prettier": "3.4.2",
+    "prettier-plugin-slidev": "^1.0.5"
   },
   "slidev": {
     "colorSchema": "light",

styles/base.css

@@ -224,3 +224,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%;
+}