Merge pull request #22 from alvarosabu/feature/update-theme-2022

Feature/update theme 2022

example.md

@@ -1,16 +1,19 @@
 ---
-theme: none
+theme: ./
 colorSchema: 'auto'
 layout: intro
+# https://sli.dev/custom/highlighters.html
+highlighter: shiki
 themeConfig:
   logoHeader: '/logo.svg'
   eventLogo: 'https://img2.storyblok.com/352x0/f/84560/2388x414/23d8eb4b8d/vue-amsterdam-with-name.png'
   eventUrl: 'https://vuejs.amsterdam/'
   twitter: '@alvarosabu'
   twitterUrl: 'https://twitter.com/alvarosabu'
-
+css: unocss
 ---
 
+
 # A penguin Slidev Theme
 
 🐧 slides for developers
@@ -28,17 +31,19 @@ eventUrl: 'https://vuejs.amsterdam/'
 twitter: '@alvarosabu'
 
 twitterUrl: 'https://twitter.com/alvarosabu'
-presenterImage: 'https://res.cloudinary.com/alvarosaburido/image/upload/v1622370075/as-portfolio/alvaro_saburido.jpg'
+presenterImage: 'https://res.cloudinary.com/alvarosaburido/image/upload/v1666351649/b_w_egfb4v.png'
 ---
 
-# Alvaro Saburido Rodriguez
+# Alvaro Saburido
 
-Senior Front-end Engineer at <fancy-link  href="https://bcn.porsche.digital/en/" favicon="https://www.google.com/s2/favicons?domain=porsche.com" >Porsche Digital</fancy-link>
+FE Tech Lead Engineer at <a  href="https://bcn.porsche.digital/en/" favicon="https://www.google.com/s2/favicons?domain=porsche.com" ><simple-icons-porsche mr-1/>Porsche Digital</a>
 
-- Dev Advocate
-- 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/alvarosabu">@alvarosabu</fancy-link>
+- Barcelona, Spain 🇪🇸
+- <a href="https://www.storyblok.com/"><logos-storyblok-icon /> Storyblok</a> Ambassador
+- I often write at <a href="https://dev.to/alvarosaburido"> dev.to/@alvarosabu</a>
+- Creating content on <a href="https://www.youtube.com/channel/AlvaroDevLabs" ><logos-youtube-icon mr-1 />AlvaroDevLabs</a>
+- Blog & Portfolio <a href="https://alvarosaburido.dev">alvarosaburido.dev</a>
+- Say hi at <a href="https://twitter.com/alvarosabu"><logos-twitter mr-1 />@alvarosabu</a>
 
 ---
 layout: text-image
@@ -48,9 +53,9 @@ caption: 'I am a penguin'
 
 # 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? 
+Arepa ipsum dolor amet jalabola! aenean sit tequeños se prendio esta 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 panita sit Se prendio el peo labia gravida Praesent tequeño. 
+- Cacique panita sit Se prendio la labia gravida Praesent tequeño. 
 - Qué paso mi pana?! elit parchita molleja aguacate vergación, háblame mollejúo chamito est burda mauris morbi;
 
 ---

global-top.vue

@@ -3,20 +3,14 @@
 <template>
   <footer
     v-if="$slidev.themeConfigs.eventLogo || $slidev.themeConfigs.twitter"
-    class="absolute bottom-0 p-4 mt-auto flex justify-between items-center w-full text-primary dark:text-white z-10"
+    class="absolute bottom-0 p-4 mt-auto flex items-center w-full text-primary dark:text-white z-10"
   >
     <div class="mb-0 flex items-center">
       <a :href="$slidev.themeConfigs.eventUrl" target="_blank"
-        ><img
-          :src="$slidev.themeConfigs.eventLogo"
-          class="h-8 mr-4"
-          alt="Event image"
+        ><img :src="$slidev.themeConfigs.eventLogo" class="h-8 mr-4" alt="Event image"
       /></a>
     </div>
-    <a
-      v-if="$slidev.themeConfigs.twitter"
-      :href="$slidev.themeConfigs.twitterUrl"
-      target="_blank"
+    <a v-if="$slidev.themeConfigs.twitter" :href="$slidev.themeConfigs.twitterUrl" target="_blank"
       ><logos-twitter />{{ $slidev.themeConfigs.twitter }}</a
     >
   </footer>

layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-main slidev-layout" :class="{ grid: $attrs.center }">
+  <div class="slidev-layout" :class="{ grid: $attrs.center }">
     <CornerCurves class="absolute transform bottom-0 right-0 flip-x" />
     <div class="my-auto z-10 relative">
       <slot />

layouts/intro.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-main slidev-layout intro grid">
+  <div class="slidev-layout intro grid">
     <LayoutHeader />
     <CornerCurves class="absolute left-0 top-0 transform rotate-90" />
     <div class="flex flex-col justify-center text-center">
@@ -12,7 +12,7 @@
 <style>
 .slidev-layout.intro {
   h1 {
-    @apply text-6xl leading-20 font-title font-extrabold;
+    @apply text-6xl leading-20 font-display font-extrabold text-primary;
   }
 
   h1 + p {

layouts/presenter.vue

@@ -1,16 +1,18 @@
 <template>
-  <div class="bg-main slidev-layout">
+  <div class="slidev-layout relative">
     <div class="flex items-center">
-      <figure class="w-1/2">
-        <TheDots />
-        <img
-          :src="$attrs.presenterImage"
-          class="relative rounded-full object-cover h-80 w-80 border border-8 border-secondary-400 z-10"
-        />
-      </figure>
       <div class="w-1/2">
         <slot />
       </div>
+      <figure class="w-1/2 relative">
+        <AsGraphic type="donut" absolute top-2 left-0 text-secondary-200 />
+        <AsGraphic type="zigzag" absolute bottom-2 right-0 />
+        <img
+          :src="$attrs.presenterImage || 'https://anonymous-animals.azurewebsites.net/animal/penguin'"
+          class="bg-gray-400 relative rounded-full object-cover h-80 w-80 border border-8 border-secondary-400 z-10"
+        />
+      </figure>
     </div>
+    <AsGraphic type="curve-small" absolute bottom-0 right-0 />
   </div>
 </template>

layouts/text-image.vue

@@ -1,21 +1,12 @@
 <template>
-  <div class="bg-main slidev-layout">
+  <div class="slidev-layout">
     <div class="grid grid-cols-2 gap-8" :class="{ 'gap-16': $attrs.reverse }">
-      <div
-        class="prose pr-16"
-        :class="{ 'order-1 text-right': $attrs.reverse }"
-      >
+      <div class="prose pr-16" :class="{ 'order-1 text-right': $attrs.reverse }">
         <slot name="default" />
       </div>
       <figure class="relative flex flex-col justify-center">
-        <Zigzags
-          class="absolute transform scale-75 -bottom-20 -right-16"
-          :class="{ 'left-0 bottom-4': $attrs.reverse }"
-        />
-        <img
-          :src="$attrs.media"
-          class="rounded-lg shadow-lg object-cover z-10"
-        />
+        <AsGraphic type="zigzag" absolute bottom-4 right-0 />
+        <img :src="$attrs.media" class="rounded-lg shadow-lg object-cover z-10" />
         <figcaption class="mt-2 text-xs w-full">
           {{ $attrs.caption }}
         </figcaption>

layouts/text-window.vue

@@ -1,17 +1,11 @@
 <template>
-  <div class="bg-main slidev-layout">
+  <div class="slidev-layout">
     <div class="grid grid-cols-2 gap-8" :class="{ 'gap-16': $attrs.reverse }">
-      <div
-        class="prose pr-16"
-        :class="{ 'order-1 text-right': $attrs.reverse }"
-      >
+      <div class="prose pr-16" :class="{ 'order-1 text-right': $attrs.reverse }">
         <slot name="default" />
       </div>
       <div class="relative">
-        <Zigzags
-          class="absolute transform scale-75 -bottom-20 -right-16"
-          :class="{ 'left-0': $attrs.reverse }"
-        />
+        <Zigzags class="absolute transform scale-75 -bottom-20 -right-16" :class="{ 'left-0': $attrs.reverse }" />
         <TheConsole class="rounded-lg shadow-lg object-cover z-10">
           <slot name="window"></slot>
         </TheConsole>

package.json

@@ -41,15 +41,18 @@
     "screenshot": "slidev export example.md --format png"
   },
   "dependencies": {
-    "@slidev/types": "^0.30.3",
-    "prism-theme-vars": "^0.2.2",
-    "vite-svg-loader": "^3.3.0"
+    "@slidev/types": "^0.36.7",
+    "prism-theme-vars": "^0.2.4",
+    "vite-svg-loader": "^3.6.0"
   },
   "devDependencies": {
-    "@alvarosabu/prettier-config": "^1.1.0",
-    "@iconify-json/logos": "^1.1.5",
-    "@slidev/cli": "0.30.3",
-    "playwright-chromium": "^1.17.1",
-    "semantic-release": "^19.0.2"
+    "@alvarosabu/prettier-config": "^1.2.0",
+    "@alvarosabu/ui": "^2.17.0",
+    "@iconify-json/logos": "^1.1.17",
+    "@iconify-json/simple-icons": "^1.1.31",
+    "@slidev/cli": "0.36.7",
+    "playwright-chromium": "^1.27.1",
+    "sass": "^1.55.0",
+    "semantic-release": "^19.0.5"
   }
 }