alm
Version:
The best IDE for TypeScript
119 lines (105 loc) • 3.45 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<!-- Apply the editor background to body as a style attribute for better initial load look -->
<body style="background-color: #272822">
<!-- socketio -->
<script src="/socket.io/socket.io.js"></script>
<!-- indicator if socket io connection is lost -->
<div class="alm-connection-status" style="display: none">
<div class="alm-connection-status-activity"></div>
</div>
<!-- Some root level styling -->
<style>
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* Setup a 100% layout *with no scroll bars* */
html, body, #app, #root {
height: 100%;
overflow: hidden;
}
/* Scroll bar for chrome */
::-webkit-scrollbar
{
width: 8px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: transparent;
}
::-webkit-scrollbar-thumb
{
box-shadow: inset 0 0 6px rgba(0,0,0,.7);
background-color: #555;
}
::-webkit-scrollbar-corner {
background: transparent;
}
/* Make react modal appear on top of Code mirror and goldenlayout */
.ReactModal__Overlay {
z-index: 100;
}
/* React modal color consistency */
.ReactModal__Content.ReactModal__Content--after-open
{
background-color: #333434 ;
color: white ;
display: flex ;
}
.ReactModal__Content.ReactModal__Content--after-open input
{
color: white ;
outline: none;
padding: 2px;
border: 2px solid #3C3C3C;
}
</style>
<!-- Our serverState -->
<script src="/serverState.js"></script>
<!-- Our main javascript -->
<script src="/build/bundle.js"></script>
<!-- Load Monaco -->
<script>
// The monaco loader will swap to a `node` loader (which tries to read files off disk) if this page is loaded in electron
// We don't want that as it breaks our `require` paths
// So throw off its *detect* logic
// The stuff we delete, we don't need it in our UI anyways 🌹
if (typeof 'process' !== 'undefined') {
delete process;
window.isElectron = true;
}
if (typeof module !== 'undefined') {
delete module;
}
</script>
<script src="vs/loader.js"></script>
<script>
// Calling it monaco require as we don't want webpack figuring it out! so in our code base we call it monaco require
// Still leaving the `require` function available as its probably used internally by monaco still!
var monacoRequire = require;
monacoRequire(['vs/editor/editor.main'], function() {
// At this point we've loaded the monaco-editor-core
// It has exposed itself as the `monaco` global
// Also load all the plugins
var monacoPlugins = [
'vs/language/css/monaco.contribution',
'vs/basic-languages/src/monaco.contribution',
]
monacoRequire(monacoPlugins,function(){
// Now run `main.tsx` :)
monacoReady();
});
});
</script>
<!-- The main app container -->
<div id="app"></div>
</body>
</html>