feat: new text-window layout with console

.gitignore

@@ -6,3 +6,4 @@ index.html
 .remote-assets
 .idea/
 components.d.ts
+example-export

.npmignore

@@ -1,3 +1,4 @@
 screenshots
 .github
-dist
+dist
+example-export

README.md

@@ -130,20 +130,80 @@ Dark                       | Light
 
 Usage:
 
-- Add `text-image` in the layout field.
+- Add `text-image` in the layout field and add the image url on the `media` field.
 
 ```
 ---
 layout: text-image
+media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif'
 ---
 ```
 
 Dark                       | Light
 :-------------------------:|:-------------------------:
 ![textImageDark](./screenshots/dark/text-image.png) | ![textImageLight](./screenshots/light/text-image.png)
 
+- Add `reverse:true` to reverse the order of the layout
+
+
+```
+---
+layout: text-image
+media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif'
+reverse: true
+---
+```
+Dark                       | Light
+:-------------------------:|:-------------------------:
+![textImageDark](./screenshots/dark/text-image-reverse.png) | ![textImageLight](./screenshots/light/text-image-reverse.png)
+---
+
+### Text Window `text-window`
+
+Usage:
+
+- Add `text-window` in the layout field.
+
+```
+---
+layout: text-window
+---
+```
+
+Dark                       | Light
+:-------------------------:|:-------------------------:
+![textWindowDark](./screenshots/dark/text-window.png) | ![textWindowLight](./screenshots/light/text-window.png)
+
+- Add `reverse:true` to reverse the order of the layout
+
+
+```
+---
+layout: text-window
+reverse: true
+---
+```
+Dark                       | Light
+:-------------------------:|:-------------------------:
+![textWindowDark](./screenshots/dark/text-window-reverse.png) | ![textWindowLight](./screenshots/light/text-window-reverse.png)
+
+To set the content inside the window console, just use the syntax sugar `::window::` for slot name:
+
+```
+---
+layout: text-window
 ---
 
+# Consoles
+
+Use code snippets and get the highlighting directly into a nice looking window!
+
+::window::
+
+I go inside the window
+
+```
+
 ## Components
 
 This theme provides the following components:
@@ -160,6 +220,20 @@ To use it you just need to add it to your `examples.md` like this:
 Say hi at <fancy-link href="https://twitter.com/alvaro_code">@alvaro_code</fancy-link>
 ```
 
+### Console window `the-console`
+
+
+```ts
+<the-console>
+  <iframe height="300" style="width: 100%;" scrolling="no" title="Text Clock" src="https://codepen.io/searleb/embed/pvQaJB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+    See the Pen <a href="https://codepen.io/searleb/pen/pvQaJB">
+    Text Clock</a> by Bill Searle (<a href="https://codepen.io/searleb">@searleb</a>)
+    on <a href="https://codepen.io">CodePen</a>.
+  </iframe>
+</the-console>s
+```
+
+
 > TODO:
 
 ## Contributing

components/TheConsole.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+</script>
+<template>
+  <div class="console bg-primary text-white text-xs pt-6 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"></li>
+      <li class="!m-0 rounded w-2 h-2 bg-yellow-300 inline-block"></li>
+      <li class="!m-0 rounded w-2 h-2 bg-green-500 inline-block"></li>
+    </ul>
+    <slot />
+  </div>
+</template>

example.md

@@ -1,6 +1,6 @@
 ---
 theme: none
-colorSchema: 'dark'
+colorSchema: 'auto'
 layout: intro
 logoHeader: '/logo.svg'
 eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png'
@@ -51,6 +51,21 @@ media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif'
 
 # This is a peguin
 
+Arepa ipsum dolor amet jalabola! aenean sit tequeños se prendio esta mierdaa menool ladilla chamito;? Nisl nojoda eu amet in? Nisl cuál es la guachafita ni lava ni presta la batea háblame cloro gravida sifrino macundal panita; Sed háblame cloro nunc empanada ac coroto Na webona vladimil parchita? Cacique ladilla sit Se prendio el peo labia gravida Praesent tequeño. Qué paso mi pana?! elit parchita molleja aguacate vergación, háblame mollejúo chamito est burda mauris morbi;
+
+---
+layout: text-image
+reverse: true
+eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png'
+eventUrl: 'https://vuejs.amsterdam/'
+twitter: '@alvaro_code'
+
+twitterUrl: 'https://twitter.com/alvaro_code'
+media: 'https://media.giphy.com/media/VkMV9TldsPd28/giphy.gif'
+---
+
+# This is a reverse peguin
+
 Arepa ipsum dolor amet jalabola! aenean sit tequeños se prendio esta mierdaa menool ladilla chamito;? Nisl nojoda eu amet in? Nisl cuál es la guachafita ni lava ni presta la batea háblame cloro gravida sifrino macundal panita; Sed háblame cloro nunc empanada ac coroto Na webona vladimil parchita? Cacique ladilla sit Se prendio el peo labia gravida Praesent tequeño. Qué paso mi pana?! elit parchita molleja aguacate vergación, háblame mollejúo chamito est burda mauris morbi;
 ---
 
@@ -126,6 +141,58 @@ export const app = createApp(App);
 app.use(VueDynamicForms);
 ```
 
+---
+layout: text-window
+logoHeader: '/logo.svg'
+eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png'
+eventUrl: 'https://vuejs.amsterdam/'
+twitter: '@alvaro_code'
+twitterUrl: 'https://twitter.com/alvaro_code'
+---
+
+# Consoles
+
+Use code snippets and get the highlighting directly into a nice looking window!
+
+::window::
+
+```ts
+// main.ts
+
+import { createApp } from 'vue';
+import { createDynamicForms } from '@asigloo/vue-dynamic-forms';
+
+const VueDynamicForms = createDynamicForms({
+  // Global Options go here
+});
+
+export const app = createApp(App);
+
+app.use(VueDynamicForms);
+```
+---
+layout: text-window
+reverse: true
+logoHeader: '/logo.svg'
+eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png'
+eventUrl: 'https://vuejs.amsterdam/'
+twitter: '@alvaro_code'
+twitterUrl: 'https://twitter.com/alvaro_code'
+---
+
+# Embedded stuff
+
+Use window to show a live demo of any page, or even a sub component!
+
+::window::
+
+<div class="overflow-hidden relative w-full aspect-16-9">
+<iframe height="300" style="width: 100%;" scrolling="no" title="Text Clock" src="https://codepen.io/searleb/embed/pvQaJB?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href="https://codepen.io/searleb/pen/pvQaJB">
+  Text Clock</a> by Bill Searle (<a href="https://codepen.io/searleb">@searleb</a>)
+  on <a href="https://codepen.io">CodePen</a>.
+</iframe>
+</div>
 ---
 logoHeader: '/logo.svg'
 eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png'

layouts/text-image.vue

@@ -20,6 +20,9 @@ const props = defineProps({
   media: {
     type: String,
   },
+  reverse: {
+    type: Boolean
+  }
 })
 
 
@@ -34,16 +37,16 @@ const props = defineProps({
     :twitter="twitter"
     :twitter-url="twitterUrl"
   >
-    <div class="flex items-center">
+    <div class="grid grid-cols-2 gap-8" :class="{ 'gap-16': reverse}">
 
-      <div class="w-1/2 prose pr-16">
+      <div class="prose pr-16 " :class="{ 'order-1 text-right': reverse}">
         <slot />
       </div>
-       <figure class="w-1/2 relative pl-16">
-        <Zigzags class="absolute transform scale-75 -bottom-20 -right-16" />
+       <figure class="relative flex flex-col justify-center">
+        <Zigzags class="absolute transform scale-75 -bottom-20 -right-16" :class="{'left-0 bottom-4' :reverse}"/>
         <img
           :src="media"
-          class="rounded-lg shadow-lg object-cover"
+          class="rounded-lg shadow-lg object-cover z-10"
         />
       </figure>
     </div>

layouts/text-window.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { defineProps, defineComponent } from 'vue'
+
+import Default from './default.vue'
+
+const components = defineComponent({ Default })
+const props = defineProps({
+  eventLogo: {
+    type: String,
+  },
+  eventUrl: {
+    type: String,
+  },
+  twitter: {
+    type: String,
+  },
+  twitterUrl: {
+    type: String,
+  },
+  media: {
+    type: String,
+  },
+  reverse: {
+    type: Boolean
+  }
+})
+
+
+</script>
+
+<template>
+  <default
+    class="presenter"
+    :logo-header="logoHeader"
+    :event-logo="eventLogo"
+    :event-url="eventUrl"
+    :twitter="twitter"
+    :twitter-url="twitterUrl"
+  >
+    <div class="grid grid-cols-2 gap-8" :class="{ 'gap-16': reverse}">
+
+      <div class="prose pr-16 " :class="{ 'order-1 text-right': reverse}">
+        <slot name="default" />
+      </div>
+       <div class="relative" >
+        <Zigzags class="absolute transform scale-75 -bottom-20 -right-16" :class="{'left-0' :reverse}" />
+        <TheConsole
+          class="rounded-lg shadow-lg object-cover z-10"
+        >
+        <slot name="window"></slot>
+        </TheConsole>
+      </div>
+    </div>
+  </default>
+</template>

setup/windicss.ts

@@ -3,6 +3,24 @@ import { defineWindiSetup } from '@slidev/types'
 const colors = require('windicss/colors')
 const plugin = require('windicss/plugin')
 
+const aspectRatioPlugin = plugin(({ addUtilities }) => {
+  const newUtilities = {
+    '.aspect-none': {
+      aspectRatio: 'none',
+    },
+    '.aspect-16-9': {
+      aspectRatio: '16/9',
+    },
+    '.aspect-4-3': {
+      aspectRatio: '4/3',
+    },
+    '.aspect-1-1': {
+      aspectRatio: '1/1',
+    },
+  }
+  addUtilities(newUtilities, ['responsive', 'hover'])
+})
+
 export default defineWindiSetup(() => ({
   darkMode: 'class',
   extract: {
@@ -22,6 +40,8 @@ export default defineWindiSetup(() => ({
       white: colors.white,
       gray: colors.trueGray,
       red: colors.red,
+      yellow: colors.yellow,
+      green: colors.green,
       primary: {
         // oxford
         DEFAULT: '#3E5166',
@@ -74,6 +94,7 @@ export default defineWindiSetup(() => ({
     }
   },
   plugins: [
+    aspectRatioPlugin,
     plugin(function ({ addUtilities, theme, variants }) {
       const newUtilities = {
         '.flip-y': {