Merge pull request #14 from alvarosaburido/feature/new-layouts

Feature/new layouts

.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

@@ -63,7 +63,7 @@ twitterUrl: 'https://twitter.com/alvaro_code'
 ```
 With properties            | Without properties 
 :-------------------------:|:-------------------------:
-![introDark](./screenshots/dark/01.png) | ![introLight](./screenshots/dark/03.png)
+![introDark](./screenshots/dark/intro.png) | ![introLight](./screenshots/dark/04.png)
 
 ---
 
@@ -83,7 +83,7 @@ layout: intro
 
 Dark                       | Light
 :-------------------------:|:-------------------------:
-![introDark](./screenshots/dark/01.png) | ![introLight](./screenshots/light/01.png)
+![introDark](./screenshots/dark/intro.png) | ![introLight](./screenshots/light/intro.png)
 
 ---
 
@@ -103,7 +103,7 @@ presenterImage: 'https://res.cloudinary.com/alvarosaburido/image/upload/v1622370
 
 Dark                       | Light
 :-------------------------:|:-------------------------:
-![presenterDark](./screenshots/dark/02.png) | ![presenterLight](./screenshots/light/02.png)
+![presenterDark](./screenshots/dark/presenter.png) | ![presenterLight](./screenshots/light/presenter.png)
 
 ---
 
@@ -121,10 +121,89 @@ layout: new-section
 
 Dark                       | Light
 :-------------------------:|:-------------------------:
-![newSectionDark](./screenshots/dark/05.png) | ![newSectionLight](./screenshots/light/05.png)
+![newSectionDark](./screenshots/dark/new-section.png) | ![newSectionLight](./screenshots/light/new-section.png)
 
 ---
 
+
+### Text Image `text-image`
+
+Usage:
+
+- 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:
@@ -141,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

@@ -7,6 +7,7 @@ eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-ams
 eventUrl: 'https://vuejs.amsterdam/'
 twitter: '@alvaro_code'
 twitterUrl: 'https://twitter.com/alvaro_code'
+
 ---
 
 # A penguin Slidev Theme
@@ -37,6 +38,35 @@ Senior Front-end Engineer at <fancy-link  href="https://bcn.porsche.digital/en/"
 - I often write at <fancy-link href="https://dev.to/alvarosaburido">@alvarosaburido</fancy-link>
 - Portfolio <fancy-link href="https://alvarosaburido.dev">alvarosaburido.dev</fancy-link>
 - Say hi at <fancy-link href="https://twitter.com/alvaro_code">@alvaro_code</fancy-link>
+
+---
+layout: text-image
+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 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;
 ---
 
 # What is Slidev?
@@ -111,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

@@ -0,0 +1,54 @@
+<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 />
+      </div>
+       <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 z-10"
+        />
+      </figure>
+    </div>
+  </default>
+</template>

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>