feat: add new layout window

tboerger · Sep 19, 2022 · 1cab641 · 1cab641
1 parent f23a9fd
commit 1cab641
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -98,6 +98,16 @@ layout: cover
 
 ![cover slide](https://media.githubusercontent.com/media/tboerger/slidev-theme-meetup/master/example-export/005.png)
 
+### Window
+
+```md
+---
+layout: window
+---
+```
+
+![window slide](https://media.githubusercontent.com/media/tboerger/slidev-theme-meetup/master/example-export/006.png)
+
 ### Default
 
 ```md
@@ -106,7 +116,7 @@ layout: default
 ---
 ```
 
-![default slide](https://media.githubusercontent.com/media/tboerger/slidev-theme-meetup/master/example-export/006.png)
+![default slide](https://media.githubusercontent.com/media/tboerger/slidev-theme-meetup/master/example-export/007.png)
 
 ### Qrcode
 
@@ -117,7 +127,7 @@ url: https://example.com
 ---
 ```
 
-![qrcode slide](https://media.githubusercontent.com/media/tboerger/slidev-theme-meetup/master/example-export/007.png)
+![qrcode slide](https://media.githubusercontent.com/media/tboerger/slidev-theme-meetup/master/example-export/008.png)
 
 ## Components
 
@@ -129,6 +139,16 @@ Just curves shown within the slides.
 <CornerCurves class="absolute left-0 top-0 transform rotate-90" />
 ```
 
+### WindowConsole
+
+Display content in a terminal window.
+
+```vue
+<WindowConsole class="rounded-lg shadow-lg object-cover z-10">
+  Content
+</WindowConsole>
+```
+
 ### LayoutHeader
 
 General header part of every slide.

diff --git a/components/WindowConsole.vue b/components/WindowConsole.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="console bg-gray-500 text-white text-xs pt-4 rounded-md relative">
+    <ul class="absolute grid grid-cols-3 gap-3 top-2 left-4">
+      <li class="!m-0 rounded w-2 h-2 bg-red-400 inline-block">
+        &nbsp;
+      </li>
+      <li class="!m-0 rounded w-2 h-2 bg-yellow-300 inline-block">
+        &nbsp;
+      </li>
+      <li class="!m-0 rounded w-2 h-2 bg-green-500 inline-block">
+        &nbsp;
+      </li>
+    </ul>
+    <slot />
+  </div>
+</template>
diff --git a/layouts/window.vue b/layouts/window.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="slidev-layout">
+    <LayoutHeader class="absolute bottom-0 right-0 transform flip-x" />
+    <div
+      class="top"
+    >
+      <slot />
+    </div>
+    <WindowConsole class="rounded-lg shadow-lg object-cover z-10">
+      <slot name="window" />
+    </WindowConsole>
+    <div
+      class="bottom"
+    >
+      <slot name="bottom" />
+      <LayoutFooter />
+    </div>
+  </div>
+</template>