From 8b02b6c2c434631cca950ce563606e423d3f8df9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 27 Mar 2020 13:46:10 +0100
Subject: [PATCH] update styling

---
 content/posts/complex.md       |  4 +--
 src/components/Demo/index.vue  | 21 ++++++++++---
 src/components/Demo/style.scss | 57 ++++++++++++++++++++++++++++++----
 src/demos/Time/index.vue       | 44 ++++++++++++++++++++++----
 src/layouts/Default.vue        |  7 +++--
 src/main.js                    |  2 +-
 src/variables.scss             |  1 +
 7 files changed, 113 insertions(+), 23 deletions(-)

diff --git a/content/posts/complex.md b/content/posts/complex.md
index 5ec30457..34148d20 100644
--- a/content/posts/complex.md
+++ b/content/posts/complex.md
@@ -1,8 +1,6 @@
 ---
-title: Complex Example
+title: Handle Extensions
 slug: complex
 ---
 
-Complex example
-
 <demo name="Time" />
\ No newline at end of file
diff --git a/src/components/Demo/index.vue b/src/components/Demo/index.vue
index e1d5f929..0640095d 100644
--- a/src/components/Demo/index.vue
+++ b/src/components/Demo/index.vue
@@ -4,11 +4,19 @@
       <component :is="mainFile" />
     </div>
     <div class="demo__source">
-      <div v-for="(file, index) in files" :key="index">
-        <p v-if="showFileNames">
+      <div class="demo__tabs" v-if="showFileNames">
+        <button
+          class="demo__tab"
+          :class="{ 'is-active': currentIndex === index}"
+          v-for="(file, index) in files"
+          :key="index"
+          @click="currentIndex = index"
+        >
           {{ file.name }}
-        </p>
-        <pre :class="`language-${file.highlight}`"><code :class="`language-${file.highlight}`" v-html="$options.filters.highlight(file.content, file.highlight)"></code></pre>
+        </button>
+      </div>
+      <div class="demo__code" v-if="activeFile">
+        <pre :class="`language-${activeFile.highlight}`"><code :class="`language-${activeFile.highlight}`" v-html="$options.filters.highlight(activeFile.content, activeFile.highlight)"></code></pre>
       </div>
     </div>
   </div>
@@ -27,6 +35,7 @@ export default {
     return {
       content: null,
       files: [],
+      currentIndex: 0,
       syntax: {
         js: 'javascript',
         vue: 'markup',
@@ -49,6 +58,10 @@ export default {
     showFileNames() {
       return this.files.length > 1
     },
+
+    activeFile() {
+      return this.files[this.currentIndex]
+    },
   },
 
   mounted() {
diff --git a/src/components/Demo/style.scss b/src/components/Demo/style.scss
index 9c226ef3..98a54c21 100644
--- a/src/components/Demo/style.scss
+++ b/src/components/Demo/style.scss
@@ -1,19 +1,64 @@
 .demo {
   background-color: $colorWhite;
-  border-radius: 0.5rem;
-  border: 2px solid $colorBlack;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow:
+    0px 6.6501px 5.32008px rgba($colorBlack, 0.0161557),
+    0px 22.3363px 17.869px rgba($colorBlack, 0.0238443),
+    0px 100px 80px rgba($colorBlack, 0.04),
+    0 0 0 1px rgba($colorBlack, 0.05),
+  ;
   
   &__preview {
-    padding: 1rem;
+    padding: 1.5rem;
   }
   
   &__source {
-    padding: 1rem;
-    background-color: $colorBlack;
-    color: $colorWhite;
+    background-color: $colorLightGrey;
+  }
+
+  &__tabs {
+    padding: 0 1.5rem;
+    border-bottom: 1px solid rgba($colorBlack, 0.05);
+  }
+
+  &__tab {
+    position: relative;
+    color: rgba($colorBlack, 0.5);
+    font: inherit;
+    font-weight: 500;
+    padding: 0.75rem 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-right: 1rem;
+
+    &.is-active {
+      color: $colorBlack;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        background-color: $colorBlack;
+      }
+    } 
+  }
+  
+  &__code {
+    padding: 0.75rem 1.5rem;
 
     code, pre {
       padding: 0;
     }
+  
+    [class*="language-"] {
+      background: none;
+      border: none;
+      box-shadow: none;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/demos/Time/index.vue b/src/demos/Time/index.vue
index 0ba4da39..a6b10265 100644
--- a/src/demos/Time/index.vue
+++ b/src/demos/Time/index.vue
@@ -1,17 +1,49 @@
 <template>
   <div>
-    Time: {{ time }}
-  </div>  
+    <div v-if="editor">
+      <button @click="editor.undo().focus()">
+        undo
+      </button>
+      <button @click="editor.redo().focus()">
+        redo
+      </button>
+    </div>
+    <editor-content :editor="editor" />
+  </div>
 </template>
 
 <script>
+import { Editor, EditorContent } from '@tiptap/core'
+import Document from '@tiptap/document-extension'
+import Paragraph from '@tiptap/paragraph-extension'
+import Text from '@tiptap/text-extension'
+import History from '@tiptap/history-extension'
+
 export default {
+  components: {
+    EditorContent,
+  },
+
   data() {
     return {
-      time: new Date()
+      editor: null,
     }
   },
-}
-</script>
 
-<style src="./style.css" scoped />
\ No newline at end of file
+  mounted() {
+    this.editor = new Editor({
+      content: '<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>',
+      extensions: [
+        new Document(),
+        new Paragraph(),
+        new Text(),
+        new History(),
+      ],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
\ No newline at end of file
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index f4a00934..b3138402 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -23,6 +23,7 @@ body {
   margin:0;
   padding:0;
   line-height: 1.5;
+  background-color: $colorLightGrey;
 }
 
 .layout {
@@ -48,7 +49,7 @@ body {
   outline: none;
 }
 
-:not(pre) > code[class*="language-"], pre[class*="language-"] {
-  background-color: $colorBlack;
-}
+// :not(pre) > code[class*="language-"], pre[class*="language-"] {
+//   background-color: $colorBlack;
+// }
 </style>
diff --git a/src/main.js b/src/main.js
index 3a9939f3..044c5b29 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import Prism from 'prismjs'
-import 'prismjs/themes/prism-okaidia.css'
+import 'prismjs/themes/prism-coy.css'
 import DefaultLayout from '~/layouts/Default.vue'
 import Demo from '~/components/Demo'
 
diff --git a/src/variables.scss b/src/variables.scss
index f8341bd4..a43086cd 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -1,2 +1,3 @@
 $colorWhite: #FFF;
+$colorLightGrey: #F8F8F8;
 $colorBlack: #000;
\ No newline at end of file