Skip to content

Commit b97fdac

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Adding playground configs
1 parent 1f14609 commit b97fdac

File tree

5 files changed

+322
-0
lines changed

5 files changed

+322
-0
lines changed

‎src/playground/configs/PlaygroundApp.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<NavBar is-playground :selected-library="selectedLibrary" />
3+
<PlaygroundDemoPage @changedLibrary="updateLibrary" />
4+
</template>
5+
6+
<script setup lang="ts">
7+
import { ref, provide } from 'vue';
8+
import { useCoreStore } from '@/stores/index';
9+
import PlaygroundDemoPage from './PlaygroundDemoPage.vue';
10+
import NavBar from '@/components/Layout/NavBar.vue';
11+
12+
13+
provide('styleData', {
14+
h2ColClass: 'col-12 mb-4',
15+
fieldWidth: {
16+
maxWidth: '100%',
17+
width: '300px',
18+
},
19+
});
20+
21+
const store = useCoreStore();
22+
const selectedLibrary = ref({});
23+
24+
provide('links', store.links);
25+
provide('highlightJsLinks', store.highlightJsLinks);
26+
provide('prismLinks', store.prismLinks);
27+
28+
const codeBlockOptions = ref({
29+
browserWindow: false,
30+
preHeight: '30em',
31+
});
32+
33+
provide('codeBlockOptions', codeBlockOptions);
34+
35+
function updateLibrary(library) {
36+
selectedLibrary.value = library.value;
37+
}
38+
</script>
39+
40+
41+
<style scoped>
42+
</style>

‎src/playground/configs/PlaygroundDemoPage.vue‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<template>
2+
<div class="container mb-5">
3+
<div class="row my-3">
4+
<div class="col-12 text-center">
5+
<h1>Vue 3 CodeBlock</h1>
6+
</div>
7+
<div class="col-12 text-center">
8+
<span class="badge bg-primary rounded-pill">Playground</span>
9+
</div>
10+
</div>
11+
</div>
12+
13+
<div class="container mb-5">
14+
<div class="row">
15+
<div class="col-12 col-md-3 mb-3">
16+
<label class="form-label" for="theme-selection-select"
17+
>Select Library:</label
18+
>
19+
<select
20+
aria-label="Library Selection"
21+
class="form-select"
22+
@change="changeLibrary($event.target.value)"
23+
>
24+
<option
25+
v-for="lib in libraries"
26+
:key="lib"
27+
:selected="library === lib.id"
28+
:value="lib.id"
29+
>
30+
{{ lib.label }}
31+
</option>
32+
</select>
33+
</div>
34+
<div class="col-12 col-md-3">
35+
<label class="form-label" for="theme-selection-select"
36+
>Select Theme:</label
37+
>
38+
39+
<select
40+
id="theme-selection-select"
41+
aria-label="Theme Selection"
42+
class="form-select"
43+
@change="changeTheme($event.target.value)"
44+
>
45+
<option
46+
v-for="theme in selectOptions"
47+
:key="theme"
48+
:selected="selectedTheme === theme.value"
49+
:value="theme.value"
50+
>
51+
{{ theme.label }}
52+
</option>
53+
</select>
54+
</div>
55+
</div>
56+
</div>
57+
58+
<div class="container">
59+
<PlaygroundPage />
60+
</div>
61+
</template>
62+
63+
<script setup lang='ts'>
64+
/* eslint-disable no-unused-vars */
65+
/* eslint-disable @typescript-eslint/no-unused-vars */
66+
import {
67+
inject,
68+
onMounted,
69+
provide,
70+
reactive,
71+
ref,
72+
} from 'vue';
73+
import { useCoreStore } from '@/stores/index';
74+
import { version } from '../../../package';
75+
import PlaygroundPage from '@/playground/PlaygroundPage.vue';
76+
77+
78+
const demoTestPage = ref(false);
79+
80+
const highlightJsLinks = inject('highlightJsLinks');
81+
const prismLinks = inject('prismLinks');
82+
83+
const store = useCoreStore();
84+
const library = ref('prism');
85+
const libraries = store.libraries;
86+
87+
const highlightThemes = store.highlightThemes;
88+
const neonBunnyThemes = store.neonBunnyThemes;
89+
const prismThemes = store.prismThemes;
90+
const selectOptions = ref(null);
91+
const selectedLibrary = ref(libraries.prism);
92+
const selectedTheme = ref('neon-bunny');
93+
94+
95+
onMounted(() => {
96+
library.value = store.getLocalStorage() ?? store.setLocalStorage();
97+
changeLibrary(library.value);
98+
});
99+
100+
const emit = defineEmits(['changedLibrary']);
101+
102+
selectOptions.value = [...neonBunnyThemes, ...prismThemes];
103+
104+
provide('selectedTheme', selectedTheme);
105+
provide('selectedLibrary', selectedLibrary);
106+
107+
if (library.value === 'highlightjs') {
108+
selectOptions.value = [...neonBunnyThemes, ...highlightThemes];
109+
selectedLibrary.value = libraries.highlightjs;
110+
}
111+
112+
function changeLibrary(val) {
113+
library.value = val;
114+
selectedLibrary.value = libraries[val];
115+
selectedTheme.value = 'neon-bunny';
116+
117+
store.setLocalStorage(library.value);
118+
emit('changedLibrary', selectedLibrary);
119+
120+
if (val === 'prism') {
121+
selectOptions.value = [...neonBunnyThemes, ...prismThemes];
122+
return;
123+
}
124+
125+
selectOptions.value = [...neonBunnyThemes, ...highlightThemes];
126+
}
127+
128+
function changeTheme(val) {
129+
selectedTheme.value = val;
130+
}
131+
</script>
132+
133+
134+
<style lang="scss">
135+
:root {
136+
--v-cb-label-font: 'Encode Sans Expanded', sans-serif !important;
137+
}
138+
139+
html {
140+
scroll-padding-top: 70px;
141+
}
142+
143+
body {
144+
font-family: 'Open Sans', sans-serif;
145+
}
146+
147+
h1,
148+
h2,
149+
h5 {
150+
font-family: var(--v-cb-label-font);
151+
}
152+
153+
h1 {
154+
font-size: 3rem;
155+
font-weight: 700;
156+
}
157+
158+
h2 {
159+
border-bottom: 1px solid #ccc;
160+
font-size: 2rem;
161+
font-weight: 400;
162+
padding-bottom: 0.5rem;
163+
}
164+
165+
h5 {
166+
font-weight: 600;
167+
}
168+
169+
.vue-logo {
170+
width: 80px;
171+
}
172+
173+
.table-responsive {
174+
box-shadow: 0 3px 1px -2px hsl(0 0% 0% / 20%), -0 2px 2px 0 hsl(0 0% 0% / 14%),
175+
0 1px 5px 0 hsl(0 0% 0% / 12%);
176+
177+
.table {
178+
margin-bottom: 0;
179+
}
180+
}
181+
182+
.boolean-style {
183+
color: hsl(240 100% 50%) !important;
184+
font-weight: 500;
185+
}
186+
187+
[data-bs-theme='dark'] {
188+
.boolean-style {
189+
color: var(--bs-primary) !important;
190+
font-weight: 500;
191+
}
192+
}
193+
</style>

‎src/playground/configs/PlaygroundPage.template.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!-- eslint-disable @typescript-eslint/no-unused-vars -->
2+
3+
<template>
4+
<div>
5+
<div class="row my-4">
6+
<div class="col-12">
7+
<CodeBlock
8+
:code="jsExample"
9+
copy-button
10+
:highlightjs="selectedLibrary.id === 'highlightjs'"
11+
label="Playground Example"
12+
lang="javascript"
13+
:prismjs="selectedLibrary.id === 'prism'"
14+
:tabs="true"
15+
:theme="selectedTheme"
16+
/>
17+
</div>
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script setup>
23+
/* eslint-disable no-unused-vars */
24+
/* eslint-disable @typescript-eslint/no-unused-vars */
25+
import { inject } from 'vue';
26+
27+
const selectedLibrary = inject('selectedLibrary');
28+
const selectedTheme = inject('selectedTheme');
29+
30+
const cssExample = ``;
31+
const htmlExample = ``;
32+
const jsExample = `const foo = 'bar';`;
33+
</script>
34+
35+
<style lang="scss">
36+
</style>

‎src/playground/configs/build.sh‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
#!/bin/bash
2+
3+
export WHITE="$(printf '\033[0;37m')"
4+
export BOLD_WHITE="$(printf '\033[1;37m')"
5+
export BOLD_GREEN="$(printf '\033[1;32m')"
6+
export CHECKMARK="$(printf '\e[1;32m\xE2\x9C\x94\e[0m')"
7+
8+
# Playground path and template #
9+
PLAYGROUND_VUE_DIR=src/playground
10+
PLAYGROUND_VUE_TEMPLATE=PlaygroundPage.template.vue
11+
PLAYGROUND_VUE_FILE=PlaygroundPage.vue
12+
13+
14+
# Check if Playground.vue file exists before trying to create it #
15+
if [ ! -f "$PLAYGROUND_VUE_DIR/$PLAYGROUND_VUE_FILE" ]; then
16+
cp "$PLAYGROUND_VUE_DIR/configs/$PLAYGROUND_VUE_TEMPLATE" "$PLAYGROUND_VUE_DIR/$PLAYGROUND_VUE_FILE"
17+
18+
echo ""
19+
echo " ${BOLD_GREEN}${CHECKMARK}${BOLD_WHITE} $PLAYGROUND_VUE_FILE file has been created.${WHITE}"
20+
echo ""
21+
fi

‎src/playground/configs/playground.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { createApp } from 'vue';
2+
import PlaygroundApp from './PlaygroundApp.vue';
3+
import CodeBlock from '../../index';
4+
import { createPinia } from "pinia";
5+
import { library } from '@fortawesome/fontawesome-svg-core';
6+
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
7+
import {
8+
faCircleInfo,
9+
faCopyright,
10+
faHouse,
11+
faMoon,
12+
faSun,
13+
} from '@fortawesome/free-solid-svg-icons';
14+
import { faGithub, faNpm } from '@fortawesome/free-brands-svg-icons';
15+
16+
library.add({
17+
faCircleInfo,
18+
faCopyright,
19+
faGithub,
20+
faHouse,
21+
faMoon,
22+
faNpm,
23+
faSun,
24+
});
25+
26+
createApp(PlaygroundApp)
27+
.use(CodeBlock, {})
28+
.use(createPinia())
29+
.component('fa-icon', FontAwesomeIcon)
30+
.mount('#app');

0 commit comments

Comments
 (0)