update styling

content/posts/complex.md

@@ -1,8 +1,6 @@
 ---
-title: Complex Example
+title: Handle Extensions
 slug: complex
 ---
 
-Complex example
-
 <demo name="Time" />

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() {

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;
+    }
   }
 }

src/demos/Time/index.vue

@@ -1,17 +1,49 @@
 <template>
   <div>
-    Time: {{ time }}
+    <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,
     }
   },
+
+  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>
-
-<style src="./style.css" scoped />

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>

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'
 

src/variables.scss

@@ -1,2 +1,3 @@
 $colorWhite: #FFF;
+$colorLightGrey: #F8F8F8;
 $colorBlack: #000;