Merge pull request #8 from kaakaa/devcontainer

dev: add devcontainer files for codespaces

.devcontainer/devcontainer.json

@@ -0,0 +1,16 @@
+{
+    "name": "Slidev Dev",
+    "image": "mcr.microsoft.com/vscode/devcontainers/universal:2-linux",
+    "customizations": {
+        "vscode": {
+            "settings": {},
+            "extensions": [
+                // Doesn't install slide vs code extention, because slidev extension doesn't support remote server setting yet.
+                // ref: https://github.com/slidevjs/slidev-vscode/issues/13
+                // "antfu.slidev"
+            ]
+        }
+    },
+    "remoteUser": "codespace",
+    "postCreateCommand": "npm i"
+}

.devcontainer/slidev-dev-ja/Dockerfile

@@ -0,0 +1,7 @@
+FROM mcr.microsoft.com/vscode/devcontainers/universal:2-linux
+
+USER root
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+    && apt-get -y install --no-install-recommends fonts-noto-cjk fonts-noto-color-emoji
+
+USER codespace

.devcontainer/slidev-dev-ja/devcontainer.json

@@ -0,0 +1,16 @@
+{
+    "name": "Slidev Dev (ja)",
+    "build": {"dockerfile": "Dockerfile"},
+    "customizations": {
+        "vscode": {
+            "settings": {},
+            "extensions": [
+                // Doesn't install slide vs code extention, because slidev extension doesn't support remote server setting yet.
+                // ref: https://github.com/slidevjs/slidev-vscode/issues/13
+                // "antfu.slidev"
+            ]
+        }
+    },
+    "remoteUser": "codespace",
+    "postCreateCommand": "npm i"
+}

example-slidev/slides.md

@@ -1,31 +1,19 @@
 ---
-# try also 'default' to start simple
 theme: seriph
-# random image from a curated Unsplash collection by Anthony
-# like them? see https://unsplash.com/collections/94734566/slidev
 background: https://source.unsplash.com/collection/94734566/1920x1080
-# apply any windi css classes to the current slide
-class: 'text-center'
-# https://sli.dev/custom/highlighters.html
+class: text-center
 highlighter: shiki
-# show line numbers in code blocks
 lineNumbers: false
-# some information about the slides, markdown enabled
 info: |
   ## Slidev Starter Template
   Presentation slides for developers.
 
   Learn more at [Sli.dev](https://sli.dev)
-# persist drawings in exports and build
 drawings:
   persist: false
-# page transition
 transition: slide-left
-# use UnoCSS
-css: unocss
-githubPages:
-  ogp: true
-
+title: Welcome to Slidev
+mdc: true
 ---
 
 # Welcome to Slidev
@@ -42,7 +30,7 @@ Presentation slides for developers
   <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
     <carbon:edit />
   </button>
-  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub"
+  <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" title="Open in GitHub"
     class="text-xl slidev-icon-btn opacity-50 !border-none !hover:text-white">
     <carbon-logo-github />
   </a>
@@ -100,23 +88,22 @@ layout: default
 
 # Table of contents
 
-```
-<Toc minDepth="1" maxDepth="5"></Toc>
+```html
+<Toc minDepth="1" maxDepth="1"></Toc>
 ```
 
-<Toc></Toc>
+<Toc maxDepth="1"></Toc>
 
 ---
 transition: slide-up
-
 level: 2
 ---
 
 # Navigation
 
 Hover on the bottom-left corner to see the navigation's controls panel, [learn more](https://sli.dev/guide/navigation.html)
 
-### Keyboard Shortcuts
+## Keyboard Shortcuts
 
 |     |     |
 | --- | --- |
@@ -130,6 +117,7 @@ Hover on the bottom-left corner to see the navigation's controls panel, [learn m
   v-click
   class="absolute -bottom-9 -left-7 w-80 opacity-50"
   src="https://sli.dev/assets/arrow-bottom-left.svg"
+  alt=""
 />
 <p v-after class="absolute bottom-23 left-45 opacity-30 transform -rotate-10">Here!</p>
 
@@ -157,7 +145,7 @@ function updateUser(id: number, update: User) {
 }
 ```
 
-<arrow v-click="3" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1" />
+<arrow v-click="[3, 4]" x1="400" y1="420" x2="230" y2="330" color="#564" width="3" arrowSize="1" />
 
 [^1]: [Learn More](https://sli.dev/guide/syntax.html#line-highlighting)
 
@@ -238,9 +226,9 @@ theme: seriph
 ---
 ```
 
-<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true">
+<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">
+<img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-seriph/01.png?raw=true" alt="">
 
 </div>
 
@@ -272,20 +260,23 @@ Animations are powered by [@vueuse/motion](https://motion.vueuse.org/).
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-square.png"
+      alt=""
     />
     <img
       v-motion
       :initial="{ y: 500, x: -100, scale: 2 }"
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-circle.png"
+      alt=""
     />
     <img
       v-motion
       :initial="{ x: 600, y: 400, scale: 2, rotate: 100 }"
       :enter="final"
       class="absolute top-0 left-0 right-0 bottom-0"
       src="https://sli.dev/logo-triangle.png"
+      alt=""
     />
   </div>
 
@@ -334,7 +325,7 @@ LaTeX is supported out-of-box powered by [KaTeX](https://katex.org/).
 Inline $\sqrt{3x-1}+(1+x)^2$
 
 Block
-$$
+$$ {1|3|all}
 \begin{array}{c}
 
 \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
@@ -357,9 +348,9 @@ $$
 
 You can create diagrams / graphs from textual descriptions, directly in your Markdown.
 
-<div class="grid grid-cols-3 gap-10 pt-4 -mb-6">
+<div class="grid grid-cols-4 gap-5 pt-4 -mb-6">
 
-```mermaid {scale: 0.5}
+```mermaid {scale: 0.5, alt: 'A simple sequence diagram'}
 sequenceDiagram
     Alice->John: Hello John, how are you?
     Note over Alice,John: A typical interaction
@@ -444,8 +435,3 @@ class: text-center
 # Learn More
 
 [Documentations](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/showcases.html)
-
----
-layout: end
----
-