Skip to content

Commit 8f0c24e

Browse files
henryhalehenryhale
committed
feat: added theme setting for the app and code editor
1 parent 73fcc96 commit 8f0c24e

10 files changed

Lines changed: 566 additions & 350 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
"@codemirror/search": "^6.5.8",
3434
"@codemirror/state": "^6.5.0",
3535
"@codemirror/view": "^6.36.1",
36+
"@fsegurai/codemirror-theme-github-dark": "^6.2.3",
37+
"@fsegurai/codemirror-theme-github-light": "^6.2.3",
3638
"class-variance-authority": "^0.7.1",
3739
"clsx": "^2.1.1",
3840
"jszip": "^3.10.1",

‎pnpm-lock.yaml‎

Lines changed: 46 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎source/components/AppEditor.vue‎

Lines changed: 45 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,61 @@
11
<script setup>
2-
import { Button } from '@/components/ui/button';
2+
import { Button } from "@/components/ui/button";
33
import CodeMirror from "./CodeMirror.vue";
44
import { useAppStore } from "@/store";
5-
import { ref } from 'vue'
5+
import { ref } from "vue";
66
77
const store = useAppStore();
88
99
const update = (file, data) => {
10-
store.code[file] = data;
10+
store.code[file] = data;
1111
};
1212
13-
const currentTab = ref('html')
13+
const currentTab = ref("html");
1414
1515
const tabs = [
16-
["html", "index.html"],
17-
["css", "style.css"],
18-
["js", "main.js"],
16+
["html", "index.html"],
17+
["css", "style.css"],
18+
["js", "main.js"]
1919
];
2020
</script>
2121

2222
<template>
23-
<div class="flex flex-col h-full relative">
24-
<div
25-
class="flex items-center flex-none pl-5 sm:pl-6 pr-4 lg:pr-6 border-b overflow-x-auto">
26-
<div class="flex">
27-
<Button
28-
v-for="tab in tabs" :key="tab[0]"
29-
variant="ghost"
30-
@click="currentTab = tab[0]"
31-
:class="tab[0] === currentTab ? 'text-blue-500' : 'text-muted-foreground'"
32-
class="relative rounded-none text-sm leading-6 font-semibold">
33-
<span class="absolute bottom-0 inset-x-0 bg-blue-500 h-0.5 rounded-full transition-opacity duration-150" :class="{'opacity-0': tab[0] !== currentTab}"></span>
34-
<span class="uppercase sm:hidden">{{ tab[0] }}</span>
35-
<span class="hidden sm:inline">{{ tab[1] }}</span>
36-
</Button>
37-
</div>
38-
</div>
39-
<div class="flex-grow overflow-y-auto">
40-
<CodeMirror v-for="tab in tabs" :key="tab[0]" :class="currentTab !== tab[0] ? 'hidden' : ''" :file="tab[1]"
41-
:content="store.code[tab[0]]" :lang="tab[0]" @change="(d) => update(tab[0], d)" />
42-
</div>
43-
</div>
23+
<div class="flex flex-col h-full relative">
24+
<div
25+
class="flex items-center flex-none pl-5 sm:pl-6 pr-4 lg:pr-6 border-b overflow-x-auto"
26+
>
27+
<div class="flex">
28+
<Button
29+
v-for="tab in tabs"
30+
:key="tab[0]"
31+
variant="ghost"
32+
@click="currentTab = tab[0]"
33+
:class="
34+
tab[0] === currentTab
35+
? 'text-blue-500'
36+
: 'text-muted-foreground'
37+
"
38+
class="relative rounded-none text-sm leading-6 font-semibold"
39+
>
40+
<span
41+
class="absolute bottom-0 inset-x-0 bg-blue-500 h-0.5 rounded-full transition-opacity duration-150"
42+
:class="{ 'opacity-0': tab[0] !== currentTab }"
43+
></span>
44+
<span class="uppercase sm:hidden">{{ tab[0] }}</span>
45+
<span class="hidden sm:inline">{{ tab[1] }}</span>
46+
</Button>
47+
</div>
48+
</div>
49+
<div class="flex-grow overflow-y-auto">
50+
<CodeMirror
51+
v-for="tab in tabs"
52+
:key="tab[0]"
53+
:class="currentTab !== tab[0] ? 'hidden' : ''"
54+
:file="tab[1]"
55+
:content="store.code[tab[0]]"
56+
:lang="tab[0]"
57+
@change="(d) => update(tab[0], d)"
58+
/>
59+
</div>
60+
</div>
4461
</template>

‎source/components/AppPreview.vue‎

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,40 @@
11
<script setup>
2-
import { computed, ref, watchEffect } from 'vue'
3-
import { useAppStore } from '@/store'
4-
import { generatePageContent } from '@/helpers/code'
2+
import { computed, ref, watchEffect } from "vue";
3+
import { useAppStore } from "@/store";
4+
import { generatePageContent } from "@/helpers/code";
55
6-
const store = useAppStore()
6+
const store = useAppStore();
77
8-
const iframe = ref()
8+
const iframe = ref();
99
1010
const content = computed(() => {
11-
return generatePageContent(store.code)
12-
})
11+
return generatePageContent(store.code);
12+
});
1313
1414
let tid, objectURL;
1515
function refreshPreview(x) {
16-
if (!iframe.value) return
17-
if (tid) clearTimeout(tid);
18-
tid = setTimeout(() => {
19-
if (objectURL) URL.revokeObjectURL(objectURL)
20-
const blob = new Blob([content.value], { type: 'text/html' })
21-
objectURL = URL.createObjectURL(blob)
22-
iframe.value.src = objectURL
23-
}, 300);
16+
if (!iframe.value) return;
17+
if (tid) clearTimeout(tid);
18+
tid = setTimeout(() => {
19+
if (objectURL) URL.revokeObjectURL(objectURL);
20+
const blob = new Blob([content.value], { type: "text/html" });
21+
objectURL = URL.createObjectURL(blob);
22+
iframe.value.src = objectURL;
23+
}, 300);
2424
}
2525
2626
watchEffect(() => {
27-
if (content.value) refreshPreview()
28-
})
27+
if (content.value) refreshPreview();
28+
});
2929
</script>
3030

3131
<template>
32-
<iframe ref="iframe" src="about:blank" frameborder="0" title="preview" sandbox="allow-scripts" class="h-full w-full"></iframe>
33-
</template>
32+
<iframe
33+
ref="iframe"
34+
src="about:blank"
35+
frameborder="0"
36+
title="preview"
37+
sandbox="allow-scripts"
38+
class="h-full w-full bg-white"
39+
></iframe>
40+
</template>

0 commit comments

Comments
 (0)