Skip to content

Commit b49e397

Browse files
vinicius73vinicius73
committed
⚡️ improve performance
1 parent ed8e5ab commit b49e397

File tree

3 files changed

+111
-13
lines changed

3 files changed

+111
-13
lines changed

‎public/index.html

+94-1
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,106 @@
99
<meta name=apple-mobile-web-app-status-bar-style content=#292d3e>
1010
<meta name=msapplication-navbutton-color content=#292d3e>
1111
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
12+
13+
<meta property="og:title" content="JsonLogic Playground">
14+
<meta property="og:description" content="A simple JsonLogic tester, by Vinicius Reis">
15+
1216
<title>JsonLogic Playground</title>
17+
<style>
18+
body, html {
19+
padding: 0;
20+
margin: 0;
21+
}
22+
.loader,
23+
.loader:before,
24+
.loader:after {
25+
border-radius: 50%;
26+
}
27+
.loader {
28+
color: #292d3e;
29+
font-size: 11px;
30+
text-indent: -99999em;
31+
margin: 55px auto;
32+
position: relative;
33+
width: 10em;
34+
height: 10em;
35+
box-shadow: inset 0 0 0 1em;
36+
-webkit-transform: translateZ(0);
37+
-ms-transform: translateZ(0);
38+
transform: translateZ(0);
39+
}
40+
.loader:before,
41+
.loader:after {
42+
position: absolute;
43+
content: '';
44+
}
45+
.loader:before {
46+
width: 5.2em;
47+
height: 10.2em;
48+
background: #ffffff;
49+
border-radius: 10.2em 0 0 10.2em;
50+
top: -0.1em;
51+
left: -0.1em;
52+
-webkit-transform-origin: 5.1em 5.1em;
53+
transform-origin: 5.1em 5.1em;
54+
-webkit-animation: load2 2s infinite ease 1.5s;
55+
animation: load2 2s infinite ease 1.5s;
56+
}
57+
.loader:after {
58+
width: 5.2em;
59+
height: 10.2em;
60+
background: #ffffff;
61+
border-radius: 0 10.2em 10.2em 0;
62+
top: -0.1em;
63+
left: 4.9em;
64+
-webkit-transform-origin: 0.1em 5.1em;
65+
transform-origin: 0.1em 5.1em;
66+
-webkit-animation: load2 2s infinite ease;
67+
animation: load2 2s infinite ease;
68+
}
69+
@-webkit-keyframes load2 {
70+
0% {
71+
-webkit-transform: rotate(0deg);
72+
transform: rotate(0deg);
73+
}
74+
100% {
75+
-webkit-transform: rotate(360deg);
76+
transform: rotate(360deg);
77+
}
78+
}
79+
@keyframes load2 {
80+
0% {
81+
-webkit-transform: rotate(0deg);
82+
transform: rotate(0deg);
83+
}
84+
100% {
85+
-webkit-transform: rotate(360deg);
86+
transform: rotate(360deg);
87+
}
88+
}
89+
.loader-title {
90+
text-align: center;
91+
font-weight: normal;
92+
margin: 0;
93+
font-size: 2em;
94+
color: #4a4a4a;
95+
line-height: 1.5;
96+
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
97+
}
98+
.loader-title a {
99+
text-decoration: none;
100+
}
101+
</style>
13102
</head>
14103
<body>
15104
<noscript>
16105
<strong>We're sorry but JsonLogic Playground doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17106
</noscript>
18-
<div id="app"></div>
107+
<div id="app">
108+
<div class="loader"></div>
109+
<h1 class="loader-title">A simple <a href="http://jsonlogic.com/" target="_blank">JsonLogic</a> tester,
110+
by <strong><a href="https://vinicius73.dev">Vinicius Reis</a></strong></h1>
111+
</div>
19112
<!-- built files will be auto injected -->
20113
</body>
21114
</html>

‎src/codemirror.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from 'vue'
2+
3+
import VueCodemirror from 'vue-codemirror'
4+
import 'codemirror/lib/codemirror.css'
5+
import 'codemirror/mode/javascript/javascript.js'
6+
import 'codemirror/theme/material-palenight.css'
7+
import 'codemirror/theme/nord.css'
8+
9+
Vue.use(VueCodemirror, {
10+
options: { theme: 'material-palenight' }
11+
})

‎src/main.js

+6-12
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
11
import Vue from 'vue'
22
import App from './App.vue'
3-
import VueCodemirror from 'vue-codemirror'
4-
import 'codemirror/lib/codemirror.css'
5-
import 'codemirror/mode/javascript/javascript.js'
6-
import 'codemirror/theme/material-palenight.css'
7-
import 'codemirror/theme/nord.css'
83
import './registerServiceWorker'
94
import './assets/scss/main.scss'
105

11-
Vue.use(VueCodemirror, {
12-
options: { theme: 'material-palenight' }
13-
})
14-
156
Vue.config.productionTip = process.env.NODE_MODULES !== 'production'
167

17-
new Vue({
18-
render: h => h(App)
19-
}).$mount('#app')
8+
import(/* webpackChunkName: "codemirror" */ './codemirror')
9+
.then(() => {
10+
new Vue({
11+
render: h => h(App)
12+
}).$mount('#app')
13+
})

0 commit comments

Comments
 (0)