Browse Source

Move to using pug templates to assemble both main view and embedded view. Means a reduction in code duplication between embedded and non-embedded; and saves a round-trip getting the options.

dev/git-series/gccdum
Matt Godbolt 6 years ago
parent
commit
ef975bdd2f
  1. 6
      .idea/codeStyleSettings.xml
  2. 7
      Makefile
  3. 86
      app.js
  4. 2
      etc/config/compiler-explorer.lud-mgodbolt01.properties
  5. 5
      package.json
  6. 36
      static/async-get.js
  7. 75
      static/embed.html
  8. 392
      static/index.html
  9. 18
      static/main.js
  10. 4
      static/options.js
  11. 12
      static/sharing.js
  12. 15
      views/embed.pug
  13. 4
      views/example.cpp
  14. 4
      views/example.d
  15. 9
      views/example.go
  16. 4
      views/example.rs
  17. 7
      views/font-size.pug
  18. 6
      views/head.pug
  19. 98
      views/index.pug
  20. 54
      views/popups.pug
  21. 53
      views/templates.pug

6
.idea/codeStyleSettings.xml

@ -6,6 +6,12 @@
<MarkdownNavigatorCodeStyleSettings>
<option name="RIGHT_MARGIN" value="72" />
</MarkdownNavigatorCodeStyleSettings>
<codeStyleSettings language="Jade">
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
</value>
</option>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />

7
Makefile

@ -79,13 +79,8 @@ dist: prereqs
$(NODE) ./node_modules/requirejs/bin/r.js -o app.build.js
# Move all assets to a versioned directory
mkdir -p out/dist/v/$(HASH)
# main.js
mv out/dist/main.js* out/dist/v/$(HASH)/
sed -i -e 's!data-main="main"!data-main="v/'"$(HASH)"'/main"'! out/dist/*.html
# explorer.css
mv out/dist/explorer.css out/dist/v/$(HASH)/
sed -i -e 's!href="explorer.css"!href="v/'"$(HASH)"'/explorer.css"'! out/dist/*.html
# any actual assets
mv out/dist/assets/ out/dist/v/$(HASH)/
# copy any external references into the directory too
cp -r $(shell pwd)/out/dist/ext out/dist/v/$(HASH)/ext
@ -97,8 +92,6 @@ dist: prereqs
--source-map-url require.js.map \
--source-map-root //v/$(HASH)/ext/requirejs \
--prefix 6
# rewrite any src refs
sed -i -e 's!src="!src="v/'"$(HASH)"'/'! out/dist/*.html
c-preload:
$(MAKE) -C c-preload

86
app.js

@ -52,7 +52,7 @@ var opts = nopt({
'propDebug': [Boolean],
'debug': [Boolean],
'static': [String],
'archivedVersions': [String]
'archivedVersions': [String],
});
if (opts.debug) logger.level = 'debug';
@ -66,6 +66,9 @@ var port = opts.port || 10240;
var staticDir = opts.static || 'static';
var archivedVersions = opts.archivedVersions;
var gitReleaseName = child_process.execSync('git rev-parse HEAD').toString().trim();
var versionedRootPrefix = "";
if (opts.static && fs.existsSync(opts.static + '/v/' + gitReleaseName))
versionedRootPrefix = "v/" + gitReleaseName + "/";
var propHierarchy = _.flatten([
'defaults',
@ -151,40 +154,43 @@ function ClientOptionsHandler(fileSources) {
});
// sort source file alphabetically
sources = sources.sort(compareOn("name"));
var text = "";
var languages = _.map(gccProps("languages", '').split(':'), function (thing) {
var languages = _.compact(_.map(gccProps("languages", '').split(':'), function (thing) {
if (!thing) return null;
var splat = thing.split("=");
return {language: splat[0], url: splat[1]};
});
}));
var options = {
googleAnalyticsAccount: gccProps('clientGoogleAnalyticsAccount', 'UA-55180-6'),
googleAnalyticsEnabled: gccProps('clientGoogleAnalyticsEnabled', false),
sharingEnabled: gccProps('clientSharingEnabled', true),
githubEnabled: gccProps('clientGitHubRibbonEnabled', true),
gapiKey: gccProps('googleApiKey', ''),
googleShortLinkRewrite: gccProps('googleShortLinkRewrite', '').split('|'),
defaultSource: gccProps('defaultSource', ''),
language: language,
compilers: [],
sourceExtension: compilerProps('compileFilename').split('.', 2)[1],
defaultCompiler: compilerProps('defaultCompiler', ''),
compileOptions: compilerProps("options"),
supportsBinary: !!compilerProps("supportsBinary"),
languages: languages,
sources: sources,
raven: gccProps('ravenUrl', ''),
release: gitReleaseName,
environment: env,
localStoragePrefix: gccProps('localStoragePrefix')
};
this.setCompilers = function (compilers) {
var options = {
googleAnalyticsAccount: gccProps('clientGoogleAnalyticsAccount', 'UA-55180-6'),
googleAnalyticsEnabled: gccProps('clientGoogleAnalyticsEnabled', false),
sharingEnabled: gccProps('clientSharingEnabled', true),
githubEnabled: gccProps('clientGitHubRibbonEnabled', true),
gapiKey: gccProps('googleApiKey', ''),
googleShortLinkRewrite: gccProps('googleShortLinkRewrite', '').split('|'),
defaultSource: gccProps('defaultSource', ''),
language: language,
compilers: compilers,
sourceExtension: compilerProps('compileFilename').split('.', 2)[1],
defaultCompiler: compilerProps('defaultCompiler', ''),
compileOptions: compilerProps("options"),
supportsBinary: !!compilerProps("supportsBinary"),
languages: languages,
sources: sources,
raven: gccProps('ravenUrl', ''),
release: gitReleaseName,
environment: env,
localStoragePrefix: gccProps('localStoragePrefix')
};
text = JSON.stringify(options);
options.compilers = compilers;
};
this.setCompilers([]);
this.handler = function getClientOptions(req, res) {
res.set('Content-Type', 'application/json');
res.set('Cache-Control', 'public, max-age=' + staticMaxAgeSecs);
res.end(text);
res.end(JSON.stringify(options));
};
this.get = function () {
return options;
};
}
@ -452,15 +458,6 @@ function shortUrlHandler(req, res, next) {
});
}
// TODO: write the info here directly instead of redirecting...
function embeddedHandler(req, res, next) {
res.writeHead(301, {
Location: 'embed.html',
'Cache-Control': 'public'
});
res.end();
}
findCompilers()
.then(function (compilers) {
var prevCompilers;
@ -500,10 +497,26 @@ findCompilers()
logger.info(" serving static files from '" + staticDir + "'");
logger.info(" git release " + gitReleaseName);
function renderConfig(extra) {
var options = _.extend(extra, clientOptionsHandler.get());
options.compilerExplorerOptions = JSON.stringify(options);
options.root = versionedRootPrefix;
return options;
}
var embeddedHandler = function (req, res) {
res.render('embed', renderConfig({embedded: true}));
};
webServer
.set('trust proxy', true)
.set('view engine', 'pug')
.use(morgan('combined', {stream: logger.stream}))
.use(compression())
.get('/', function (req, res) {
res.render('index', renderConfig({embedded: false}));
})
.get('/e', embeddedHandler)
.get('/embed.html', embeddedHandler) // legacy. not a 301 to prevent any redirect loops between old e links and embed.html
.use(sFavicon(staticDir + '/favicon.ico'))
.use('/v', express.static(staticDir + '/v', {maxAge: Infinity, index: false}))
.use(express.static(staticDir, {maxAge: staticMaxAgeSecs * 1000}));
@ -525,7 +538,6 @@ findCompilers()
.use('/source', getSource)
.use('/api', apiHandler.handler)
.use('/g', shortUrlHandler)
.use('/e', embeddedHandler)
.post('/compile', compileHandler.handler);
logger.info("=======================================");

2
etc/config/compiler-explorer.lud-mgodbolt01.properties

@ -2,4 +2,4 @@ language=C++
clientURLShortener=google
rescanCompilerSecs=360
ravenUrl=https://8e4614f649ad4e3faf3e7e8827b935f9@sentry.io/102028
languages=C++=gcc:D=d:Rust=rust:Go=go
#languages=C++=gcc:D=d:Rust=rust:Go=go

5
package.json

@ -25,14 +25,15 @@
"lru-cache": "2.7.x",
"monaco-editor": "0.8.x",
"morgan": "1.6.x",
"nopt": "3.0.x",
"promise": "7.0.x",
"promise-queue": "2.1.x",
"nopt": "3.0.x",
"pug": "^2.0.0-beta11",
"serve-favicon": "2.3.x",
"shell-quote": "1.6.x",
"temp": "0.8.x",
"tree-kill": "1.1.x",
"underscore-node": "*",
"shell-quote": "1.6.x",
"winston": "2.2.x"
},
"devDependencies": {

36
static/async-get.js

@ -1,36 +0,0 @@
// Copyright (c) 2012-2017, Matt Godbolt
//
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright
// notice, this list of conditions and the following disclaimer in the
// documentation and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
define({
load: function (name, req, onLoad, config) {
if (config.isBuild) return onLoad(null); // optimizer build
req(['jquery'], function ($) {
$.ajax({type: "GET", url: name}).done(function (response) {
onLoad(response);
});
});
}
});

75
static/embed.html

@ -1,75 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Compiler Explorer</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="explorer.css" rel="stylesheet">
<script data-main="main" src="ext/requirejs/require.js"></script>
</head>
<body class="embedded">
<a href="/" class="float-link link" target="_blank">
Edit on <span class="language-name"></span> Compiler Explorer
<span class="glyphicon glyphicon-new-window"></span><br/>
</a>
<div id="root"></div>
<div class="gl_keep template">
<div id="codeEditor">
<div class="monaco-placeholder"></div>
</div>
<div id="compiler">
<div class="top-bar">
<table>
<tr>
<td><select class="compiler-picker" placeholder="Select a compiler..."></select></td>
<td><input class="options form-control" type="text" placeholder="compiler options..."
size="256"></td>
</tr>
</table>
<div class="btn-group btn-group-sm filters hidden" data-toggle="buttons">
<button class="btn btn-sm" title="Compile to binary and disassemble the output"
data-bind="binary">
<span>11010</span>
</button>
<button class="btn btn-sm active nonbinary" title="Filter unused labels from the output"
data-bind="labels">
<span>.LX0:</span>
</button>
<button class="btn btn-sm active nonbinary" title="Filter all assembler directives from the output"
data-bind="directives">
<span>.text</span>
</button>
<button class="btn btn-sm active nonbinary"
title="Remove all lines which are only comments from the output"
data-bind="commentOnly">
<span>//</span>
</button>
<button class="btn btn-sm active" title="Output disassembly in Intel syntax"
data-bind="intel">
<span>Intel</span>
</button>
</div>
</div>
<div class="monaco-placeholder"></div>
<div class="bottom-bar">
<div class="btn-group btn-group-sm">
<button><span class="glyphicon glyphicon-alert status"></span></button>
</div>
<span class="full-compiler-name"></span>
<span class="compile-time"></span>
</div>
</div>
<div id="compiler-output">
<pre class="content"></pre>
</div>
</div>
</body>
</html>

392
static/index.html

@ -1,392 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Compiler Explorer</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="explorer.css" rel="stylesheet">
<script data-main="main" src="ext/requirejs/require.js"></script>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" title="Compiler Explorer">Compiler Explorer</a>
</div>
<li class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown" id="lang-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
<span class="language-name"></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-brand" id="languages-links">
<li class="template"><a href=""></a></li>
</ul>
</li>
<li><a href="#" id="add-editor" title="Click or drag to desired destination">Editor</a></li>
<li><a href="#" id="add-diff" title="Click or drag to desired destination">Diff View</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" data-target="#settings" data-toggle="modal">Settings</a></li>
<li class="divider"></li>
<li><a href="#" id="ui-reset">Reset UI layout</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" id="share">Share</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Help<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://www.patreon.com/bePatron?u=3691963"
title="Help Compiler Explorer - become a Patron">
<img height="20" width="20" src="assets/patreon_logo.png">&nbsp; Become a Patron</a></li>
<li class="if-github-enabled">
<a href="https://github.com/mattgodbolt/compiler-explorer">
<img height="20" width="20" src="assets/GitHub-Mark-20px.png">&nbsp;Source</a>
</li>
<li><a href="https://github.com/mattgodbolt/compiler-explorer/wiki">Wiki</a></li>
<li><a href="https://github.com/mattgodbolt/compiler-explorer/issues">Report an issue</a></li>
<li class="divider"></li>
<li class="social if-share-enabled">
<g:plusone annotation="inline" width="150"></g:plusone>
</li>
<li class="social if-share-enabled">
<a href="https://twitter.com/share" class="twitter-share-button"
data-via="mattgodbolt">Tweet about</a></li>
<li class="divider"></li>
<li><a href="#" id="thanks-to">Thanks to...</a></li>
<li><a href="http://xania.org/201609/how-compiler-explorer-runs-on-amazon">How it works</a></li>
<li><a href="mailto:matt@godbolt.org">Contact the author</a></li>
<li><a href="http://xania.org/MattGodbolt" rel="author">About the author</a></li>
</ul>
</li>
</ul>
</li>
</div>
</div>
<div id="root"></div>
<div class="gl_keep template">
<div id="codeEditor">
<div class="top-bar btn-toolbar" role="toolbar">
<div class="btn-group btn-group-sm">
<button title="Decrease font size"
class="btn btn-default btn-sm decrease-font-size">
<span class="glyphicon glyphicon-sm glyphicon-font"></span>
</button>
<button title="Reset font size"
class="btn btn-default btn-sm reset-font-size">
<span class="glyphicon glyphicon-sm glyphicon-font"></span>
</button>
<button title="Increase font size"
class="btn btn-default btn-sm increase-font-size">
<span class="glyphicon glyphicon-sm glyphicon-font"></span>
</button>
</div>
<div class="btn-group btn-group-sm">
<button title="Load or save text" class="btn btn-default btn-sm load-save">
<span class="glyphicon glyphicon-floppy-disk"></span>
</button>
<button title="Add a new compiler for this source (click or drag)"
class="btn btn-default btn-sm add-compiler">
<span class="glyphicon glyphicon-open"></span>
</button>
</div>
</div>
<div class="monaco-placeholder"></div>
</div>
<div id="compiler">
<div class="top-bar">
<table>
<tr>
<td><select class="compiler-picker" placeholder="Select a compiler..."></select></td>
<td><input class="options form-control" type="text" placeholder="compiler options..."
size="256"></td>
</tr>
</table>
<div class="btn-group btn-group-sm filters" data-toggle="buttons">
<button class="btn btn-sm" title="Compile to binary and disassemble the output"
data-bind="binary">
<span>11010</span>
</button>
<button class="btn btn-sm active nonbinary" title="Filter unused labels from the output"
data-bind="labels">
<span>.LX0:</span>
</button>
<button class="btn btn-sm active nonbinary" title="Filter all assembler directives from the output"
data-bind="directives">
<span>.text</span>
</button>
<button class="btn btn-sm active nonbinary"
title="Remove all lines which are only comments from the output"
data-bind="commentOnly">
<span>//</span>
</button>
<button class="btn btn-sm active" title="Output disassembly in Intel syntax"
data-bind="intel">
<span>Intel</span>
</button>
</div>
<div class="btn-group btn-group-sm">
<button title="Decrease font size"
class="btn btn-default btn-sm decrease-font-size">
<span class="glyphicon glyphicon-sm glyphicon-font"></span>
</button>
<button title="Reset font size"
class="btn btn-default btn-sm reset-font-size">
<span class="glyphicon glyphicon-sm glyphicon-font"></span>
</button>
<button title="Increase font size"
class="btn btn-default btn-sm increase-font-size">
<span class="glyphicon glyphicon-sm glyphicon-font"></span>
</button>
</div>
<div class="btn-group btn-group-sm">
<button title="Clone this compiler window (click or drag)"
class="btn btn-default btn-sm add-compiler">
<span class="glyphicon glyphicon-new-window"></span>
</button>
</div>
</div>
<div class="monaco-placeholder"></div>
<div class="bottom-bar">
<div class="btn-group btn-group-sm">
<button><span class="glyphicon glyphicon-alert status"></span></button>
</div>
<span class="full-compiler-name"></span>
<span class="compile-time"></span>
</div>
</div>
<div id="compiler-output">
<pre class="content"></pre>
</div>
<div id="diff">
<div class="top-bar">
<table>
<tr>
<td><select class="diff-picker lhs" placeholder="Select compiler output..."></select></td>
<td><select class="diff-picker rhs" placeholder="Select compiler output..."></select></td>
<td style="padding-left: 1em">
<div class="btn-group btn-group-sm">
<button title="Decrease font size"
class="btn btn-default btn-sm decrease-font-size">
<span class="glyphicon glyphicon-sm glyphicon-font"></span>
</button>
<button title="Reset font size"
class="btn btn-default btn-sm reset-font-size">
<span class="glyphicon glyphicon-sm glyphicon-font"></span>
</button>
<button title="Increase font size"
class="btn btn-default btn-sm increase-font-size">
<span class="glyphicon glyphicon-sm glyphicon-font"></span>
</button>
</div>
</td>
</tr>
</table>
</div>
<div class="monaco-placeholder"></div>
</div>
<div class="urls">
<div class="input-group urls-container">
<div class="input-group-btn">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="current">Short</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu sources">
<li><a href="#" class="get-short-link" data-bind="Short">Short</a></li>
<li><a href="#" data-bind="Full">Full</a></li>
<li><a href="#" data-bind="Embed">Embed</a></li>
</ul>
</div>
</div>
<input type="text"
class="form-control input-sm permalink"
placeholder="Loading"
readonly size="1024">
<span class="input-group-btn">
<button class="btn btn-sm clippy" type="button"
data-clipboard-target=".popover .permalink"
title="Copy to clipboard">
<img src="assets/clippy.svg" class="clippy" width="13px" alt="Copy to clipboard">
</button>
</span>
</div>
</div>
<pre class="template lang c">// Type your code here, or load an example.
int square(int num) {
return num * num;
}</pre>
<pre class="template lang rust">// Type your code here, or load an example.
pub fn square(num: i32) -&gt; i32 {
num * num
}</pre>
<pre class="template lang go">// Type your code here, or load an example.
// Your function name should start with a capital letter.
package main
func Square(x int) int {
return x * x
}
func main() {}</pre>
<pre class="template lang d">// Type your code here, or load an example.
int square(int num) {
return num * num;
}</pre>
</div>
<div class="modal fade gl_keep" tabindex="-1" role="dialog" id="load-save">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 class="modal-title">Load and save editor text</h3>
</div>
<div class="modal-body">
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#load-examples" aria-controls="home" role="tab"
data-toggle="tab">Examples</a></li>
<li role="presentation"><a href="#load-browser-local" aria-controls="profile" role="tab"
data-toggle="tab">Browser-local storage</a></li>
<li role="presentation"><a href="#load-file-system" aria-controls="messages" role="tab"
data-toggle="tab">File system</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="load-examples">
<h4>Load from examples:</h4>
<ul class="examples small-v-scrollable">
<li class="template"><a href="#"></a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="load-browser-local">
<h4>Load from browser-local storage:</h4>
<ul class="local-storage small-v-scrollable">
<li class="template"><a href="#"></a></li>
</ul>
<div class="form-group">
<input type="text" size="20" class="save-name">
<button type="button" class="btn save-button">Save to browser-local storage</button>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="load-file-system">
<label class="btn btn-default btn-file">Load from a local file
<input style="display:none" type="file" class="local-file"
accept=".cpp,.cxx,.c,.h,.hpp,.hxx"></label>
</div>
</div>
</div>
<!-- model-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade gl_keep" tabindex="-1" role="dialog" id="alert">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 class="modal-title">Something alert worthy</h3>
</div>
<div class="modal-body">
</div>
<!-- model-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade gl_keep" tabindex="-1" role="dialog" id="yes-no">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 class="modal-title">Well, do you or not?</h3>
</div>
<div class="modal-body">
</div>
<!-- model-body -->
<div class="modal-footer">
<button type="button" class="btn no" data-dismiss="modal">No</button>
<button type="button" class="btn yes" data-dismiss="modal">Yes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade gl_keep" tabindex="-1" role="dialog" id="settings">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 class="modal-title">Compiler Explorer Settings</h3>
</div>
<div class="modal-body">
<div>These settings control how Compiler Explorer acts for you. They are not preserved as part of
shared
URLs, and are persisted locally using browser local storage.
</div>
<h4>Editor</h4>
<div class="form-group" role="group">
<div class="form-control checkbox"><label><input type="checkbox" class="autoCloseBrackets">
Automatically insert matching brackets and parentheses</label></div>
<div class="form-control">Delay before compiling:&nbsp;<b>Disabled</b>
<div class="slider slider-horizontal delay"></div>
<b>3s</b></div>
</div>
<h4>Compilation</h4>
<div class="form-group" role="group">
<div class="form-control checkbox"><label><input type="checkbox" class="colourise">Colourise
lines
so one can see how the source maps to the output</label></div>
<div class="form-control"><label>Colour scheme: <select class="colourScheme"></select></label>
</div>
</div>
</div>
<!-- model-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</body>
</html>

18
static/main.js

@ -84,13 +84,10 @@ define(function (require) {
function start() {
analytics.initialise();
sharing.initialise();
var options = require('options');
$('.language-name').text(options.language);
var safeLang = options.language.toLowerCase().replace(/[^a-z_]+/g, '');
var defaultSrc = $('.template .lang.' + safeLang).text().trim();
var defaultSrc = $('.template .lang').text().trim();
var defaultConfig = {
settings: {showPopoutIcon: false},
content: [{type: 'row', content: [Components.getEditor(1), Components.getCompiler(1)]}]
@ -181,19 +178,6 @@ define(function (require) {
local.remove('gl');
window.location.reload();
});
if (options.languages) {
_.each(options.languages, function (lang) {
var links = $("#languages-links");
links.find(".template")
.clone()
.removeClass("template")
.appendTo(links)
.find('a').attr('href', lang.url).text(lang.language);
});
} else {
$("#languages-links").parent().hide();
}
}
$(start);

4
static/options.js

@ -25,8 +25,6 @@
define(function (require) {
"use strict";
var options = require('./async-get!client-options.json');
options.embedded = window.location.pathname === "/embed.html";
return options;
return window.compilerExplorerOptions;
});

12
static/sharing.js

@ -36,7 +36,7 @@ define(function (require) {
// Old-style link?
var params;
try {
var params = url.unrisonify(embeddedUrl);
params = url.unrisonify(embeddedUrl);
} catch (e) {
}
if (params && params.source && params.compiler) {
@ -146,17 +146,7 @@ define(function (require) {
}
}
function initialise() {
if (!options.sharingEnabled)
$('.if-share-enabled').remove();
if (!options.githubEnabled)
$('.if-github-enabled').remove();
if (!options.gapiKey)
$('.get-short-link').remove();
}
return {
initialise: initialise,
initShareButton: initShareButton,
contentFromEmbedded: contentFromEmbedded
};

15
views/embed.pug

@ -0,0 +1,15 @@
doctype html
html(lang="en")
head
include head.pug
body.embedded
a.float-link.link(href="/" target="_blank")
| Edit on
span.lanugage-name
| Compiler Explorer
span.glyphicon.glyphicon-new-window
br
#root
include templates.pug

4
views/example.cpp

@ -0,0 +1,4 @@
// Type your code here, or load an example.
int square(int num) {
return num * num;
}

4
views/example.d

@ -0,0 +1,4 @@
// Type your code here, or load an example.
int square(int num) {
return num * num;
}

9
views/example.go

@ -0,0 +1,9 @@
// Type your code here, or load an example.
// Your function name should start with a capital letter.
package main
func Square(x int) int {
return x * x
}
func main() {}

4
views/example.rs

@ -0,0 +1,4 @@
// Type your code here, or load an example.
pub fn square(num: i32) -&gt; i32 {
num * num
}

7
views/font-size.pug

@ -0,0 +1,7 @@
.btn-group.btn-group-sm
button.btn.btn-default.btn-sm.decrease-font-size(title="Decrease font size")
span.glyphicon.glyphicon-sm.glyphicon-font
button.btn.btn-default.btn-sm.reset-font-size(title="Reset font size")
span.glyphicon.glyphicon-sm.glyphicon-font
button.btn.btn-default.btn-sm.increase-font-size(title="Increase font size")
span.glyphicon.glyphicon-sm.glyphicon-font

6
views/head.pug

@ -0,0 +1,6 @@
title Compiler Explorer - #{language}
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
link(href=root + "explorer.css" rel="stylesheet")
script window.compilerExplorerOptions = !{compilerExplorerOptions}
script(data-main=root + "main" src=root + "ext/requirejs/require.js")

98
views/index.pug

@ -0,0 +1,98 @@
doctype html
html(lang="en")
head
include head.pug
body
.navbar.navbar-inverse
.container-fluid
.navbar-header
button(type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar-collapse" aria-expanded="false")
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href="#" title="Compiler Explorer") Compiler Explorer
li.navbar-collapse.collapse#navbar-collapse
ul.nav.navbar-nav.navbar-left
if languages.length
li.dropdown#lang-dropdown
a(href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false")
span= language
span.caret
ul.dropdown-menu.dropdown-brand
each language in languages
li: a(href=language.url)= language.language
else
li#lang-dropdown
a(href="#"): span= language
li: a#add-editor(href="#" title="Click or drag to desired destination") Editor
li: a#add-diff(href="#" title="Click or drag to desired destination") Diff View
li.dropdown
a.dropdown-toggle(href="#" data-toggle="dropdown") More#[b.caret]
ul.dropdown-menu
li: a(href="#" data-target="#settings" data-toggle="modal") Settings
li.divider
li: a#ui-reset(href="#") Reset UI layout
ul.nav.navbar-nav.navbar-right
li: a#share(href="#") Share
li.dropdown
a.dropdown-toggle(href="#" data-toggle="dropdown") Help#[b.caret]
ul.dropdown-menu
li
a(href="https://www.patreon.com/bePatron?u=3691963"
title="Help Compiler Explorer - become a Patron")
img(height="20" width="20" src=root + "assets/patreon_logo.png")
| &nbsp; Become a Patron
if githubEnabled
li
a(href="https://github.com/mattgodbolt/compiler-explorer")
img(height="20" width="20" src=root + "assets/GitHub-Mark-20px.png")
| &nbsp; Source on GitHub
li: a(href="https://github.com/mattgodbolt/compiler-explorer/wiki") Wiki
li: a(href="https://github.com/mattgodbolt/compiler-explorer/issues") Report an issue
li.divider
if sharingEnabled
li: g:plusone(annotation="inline" width="150")
li: a.twitter-share-button(href="https://twitter.com/share" data-via="mattgodbolt")
li.divider
li#thanks-to: a(href="#") Thanks to...
li: a(href="https://xania.org/201609/how-compiler-explorer-runs-on-amazon") How it works
li: a(href="mailto:matt@godbolt.org") Contact the author
li: a(href="https://xania.org/MattGodbolt" rel="author") About the author
#root
include templates.pug
.gl_keep.template
.urls
.input-group.urls-container
.input-group-btn
.btn-group.btn-group-sm
button.btn.btn-sm.dropdown-toggle(
data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false")
span.current Short
span.caret
ul.dropdown-menu.sources
if gapiKey
li: a(href="#" data-bind="Short") Short
li: a(href="#" data-bind="Full") Full
li: a(href="#" data-bind="Embed") Embed
input.form-control.input-sm.permalink(
type="text" placeholder="Loading" readonly size="1024")
span.input-group-btn
button.btn.btn-sm.clippy(
type="button" data-clipboard-target=".popover .permalink"
title="Copy to clipboard")
img.clippy(
src=root + "assets/clippy.svg" width="13px"
alt="Copy to clipboard")
.lang
case language
when "C++": include example.cpp
when "Rust": include example.rs
when "Go": include example.go
when "D": include example.d
include popups.pug

54
views/popups.pug

@ -0,0 +1,54 @@
#alert.modal.fade.gl_keep(tabindex="-1" role="dialog")
.modal-dialog
.modal-content
.modal-header
button.close(type="button" data-dismiss="modal" aria-hidden="true")
h3.modal-title Something alert worthy
.modal-body
.modal-footer
button.btn.btn-default(type="button" data-dismiss="modal") Close
#yes-no.modal.fade.gl_keep(tabindex="-1" role="dialog")
.modal-dialog
.modal-content
.modal-header
button.close(type="button" data-dismiss="modal" aria-hidden="true")
h3.modal-title Well, do you or not?
.modal-body
.modal-footer
button.btn.no(type="button" data-dismiss="modal") No
button.btn.yes(type="button" data-dismiss="modal") Yes
#settings.modal.fade.gl_keep(tabindex="-1" role="dialog")
.modal-dialog
.modal-content
.modal-header
button.close(type="button" data-dismiss="modal" aria-hidden="true")
h3.modal-title Compiler Explorer Settings
.modal-body
div
| These settings control how Compiler Explorer acts for you. They are not
| preserved as part of shared URLs, and are persisted locally using browser
| local storage.
h4 Editor
.form-group(role="group")
.form-control.checkbox
label
input.autoCloseBrackets(type="checkbox")
| Automatically insert matching brackets and parentheses
.form-control Delay before compiling:&nbsp;
b Disabled
.slider.slider-horizontal.delay
b 3s
h4 Compilation
.form-group(role="group")
.form-control.checkbox
label
input.colourise(type="checkbox")
| Colourise lines so one can see how the source maps to the output
.form-control
label
| Colour scheme:
select.colourScheme
.modal-footer
button.btn.btn-default(type="button" data-dismiss="modal") Close

53
views/templates.pug

@ -0,0 +1,53 @@
.gl_keep.template
#codeEditor
.top-bar.btn-toolbar(role="toolbar")
include font-size.pug
.btn-group.btn-group-sm
button.btn.btn-default.btn-sm.load-save(title="Load or save text")
span.glyphicon.glyphicon-floppy-disk
button.btn.btn-default.btn-sm.add-compiler(title="Add a new compiler for this source (click or drag)")
span.glyphicon.glyphicon-open
.monaco-placeholder
#compiler
.top-bar.btn-toolbar(role="toolbar")
table
tr
td: select.compiler-picker(placeholder="Select a compiler...")
td: input.options.form-control(type="text" placeholder="compiler options..." size="256")
div.btn-group.btn-group-sm.filters(data-toggle="buttons")
// TODO store these in the app and drive from there?
// Make a dropdown? With more options? e.g. demangling etc
button.btn.btn-sm(title="Compile to binary and disassemble the output" data-bind="binary")
span 11010
button.btn.btn-sm.active.nonbinary(title="Filter unused labels from the output" data-bind="labels")
span .LX0:
button.btn.btn-sm.active.nonbinary(title="Filter all assembler directives from the output" data-bind="directives")
span .text
button.btn.btn-sm.active.nonbinary(title="Remove all lines which are only comments from the output" data-bind="commentOnly")
span //
button.btn.btn-sm.active(title="Output disassembly in Intel syntax" data-bind="intel")
span Intel
include font-size.pug
.btn-group.btn-group-sm
button.btn.btn-default.btn-sm.add-compiler(title="Clone this compiler window (click or drag)")
span.glyphicon.glyphicon-new-window
.monaco-placeholder
.bottom-bar
.btn-group.btn-group-sm
button: span.glyphicon.glyphicon-alert.status
span.full-compiler-name
span.compile-time
#compiler-output
pre.content
#diff
.top-bar.tn-toolbar(role="toolbar")
table
tr
td: select.diff-picker.lhs(placeholder="Select compiler output...")
td: select.diff-picker.rhs(placeholder="Select compiler output...")
td(style="padding-left: 1em")
include font-size.pug
.monaco-placeholder
Loading…
Cancel
Save