Merge pull request #284 from kravetsone/fixes-and-improves

fix light theme bug and improves

Author: SaltyAom

components/midori/community.vue

@@ -1,17 +1,19 @@
+<script setup lang="ts">
+import useDark from './use-dark'
+
+const isDark = useDark()
+</script>
+
 <template>
     <article
-        class="flex justify-between flex-col lg:flex-row-reverse items-center w-full max-w-6xl mx-auto my-8 gap-12"
-    >
+        class="flex justify-between flex-col lg:flex-row-reverse items-center w-full max-w-6xl mx-auto my-8 gap-12">
         <section class="flex flex-col w-full max-w-lg">
             <header class="flex flex-col justify-center items-start">
-                <h2
-                    class="text-2xl md:text-3xl leading-tight font-medium text-gray-400 mb-2"
-                >
+                <h2 class="text-2xl md:text-3xl leading-tight font-medium text-gray-400 mb-2">
                     Can't find what you're looking for?
                 </h2>
                 <h2
-                    class="text-5xl leading-tight font-semibold text-gray-400 mb-4 bg-clip-text text-transparent bg-gradient-to-tl from-fuchsia-500 to-blue-500"
-                >
+                    class="text-5xl leading-tight font-semibold text-gray-400 mb-4 bg-clip-text text-transparent bg-gradient-to-tl from-fuchsia-500 to-blue-500">
                     Join the community
                 </h2>
             </header>
@@ -23,14 +25,12 @@
             </p>
         </section>
         <section class="flex flex-col w-full max-w-xl rounded-lg overflow-hidden">
-            <iframe
-                class="w-full h-64"
-                src="https://discord.com/widget?id=1044804142461362206&theme=dark"
-                allowtransparency="true"
-                frameborder="0"
-                sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
-                loading="lazy"
-            />
+        <iframe class="w-full h-64"
+            :src="'https://discord.com/widget?id=1044804142461362206&theme=' + (isDark ? 'dark' : 'light')"
+            allowtransparency="true"
+            frameborder="0"
+            loading="lazy"
+            sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" />
         </section>
     </article>
 </template>

components/midori/editor.vue

@@ -42,21 +42,21 @@ function saveCaretPosition(context) {
     }
 }
 
-function nextCaretPosition(context) {
-    const selection = window.getSelection()
-    const range = selection.getRangeAt(0)
-    range.setStart(context, 0)
-    const len = range.toString().length
-
-    return function restore() {
-        const pos = getTextNodeAtPosition(context, len)
-        selection.removeAllRanges()
-
-        const range = new Range()
-        range.setStart(pos.node, pos.position)
-        selection.addRange(range)
-    }
-}
+// function nextCaretPosition(context) {
+//     const selection = window.getSelection()
+//     const range = selection.getRangeAt(0)
+//     range.setStart(context, 0)
+//     const len = range.toString().length
+
+//     return function restore() {
+//         const pos = getTextNodeAtPosition(context, len)
+//         selection.removeAllRanges()
+
+//         const range = new Range()
+//         range.setStart(pos.node, pos.position)
+//         selection.addRange(range)
+//     }
+// }
 
 function getTextNodeAtPosition(root, index) {
     const NODE_TYPE = NodeFilter.SHOW_TEXT
@@ -113,12 +113,12 @@ const execute = async () => {
         })
 }
 
-watch(isDark, (isDark) => {
+watch(isDark, (value) => {
     const editor = document.querySelector<HTMLElement>('pre.elysia-editor');
 
     editor.innerHTML = highlighter.codeToHtml(
         editor.innerText, {
-        theme: isDark ? 'github-dark' : 'github-light',
+        theme: value ? 'github-dark' : 'github-light',
         lang: 'javascript',
     })
 })
@@ -127,7 +127,7 @@ onMounted(() => {
     const editor = document.querySelector<HTMLElement>('pre.elysia-editor')
 
     editor.innerHTML = highlighter.codeToHtml(code, {
-        theme: isDark ? 'github-dark' : 'github-light',
+        theme: isDark.value ? 'github-dark' : 'github-light',
         lang: 'javascript',
     })
 
@@ -136,7 +136,7 @@ onMounted(() => {
 
         editor.innerHTML = highlighter.codeToHtml(
             event.currentTarget.innerText, {
-            theme: isDark ? 'github-dark' : 'github-light',
+            theme: isDark.value ? 'github-dark' : 'github-light',
             lang: 'javascript',
         })
 
@@ -194,7 +194,8 @@ onMounted(() => {
         </p>
 
         <aside class="flex flex-col md:flex-row justify-center items-center w-full max-w-6xl gap-8 my-8">
-            <section class="flex flex-col w-full h-96 border dark:border-slate-700 bg-white dark:bg-slate-800 rounded-2xl">
+            <section
+                class="flex flex-col w-full h-96 border dark:border-slate-700 bg-white dark:bg-slate-800 rounded-2xl">
                 <div class="mockup-window flex relative w-full h-full shadow-xl">
                     <pre class="elysia-editor block !bg-transparent !text-base !font-mono rounded-xl w-full max-w-xl h-full !pt-0 !px-2 outline-none"
                         contenteditable="true">

components/midori/index.vue

@@ -17,10 +17,6 @@ import '../tailwind.css'
 import './midori.css'
 
 import BuiltWithLove from './built-with-love.vue'
-
-import useDark from './use-dark'
-
-const isDark = useDark()
 </script>
 
 <template>
@@ -53,13 +49,15 @@ const isDark = useDark()
                 <template v-slot:server>
                     <slot name="server"></slot>
                 </template>
+
                 <template v-slot:client>
                     <slot name="client"></slot>
                 </template>
             </E2ETypeSafety>
             <Plugins />
             <!-- <Suspense>
                 <Editor />
+
                 <template #fallback>
                     <video muted autoplay loop>
                         <source src="/assets/elysia.mp4" />