testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Website: speed up load time, enable service worker (#2172)

Browse Source 
* feat(website): speed up website load 💥

* chore(package): fix bad merge
This commit is contained in:
Lucas Azzola authored and GitHub committed 2017-06-18 20:25:27 +10:00
1 parent 4106a69b6d
commit eccb17495a
12 files changed
+261 -67
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/index.html
+71 -24
View File
@@ -2,21 +2,39 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Prettier</title>
<!-- CodeMirror -->
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="https://codemirror.net/theme/neat.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/addon/display/rulers.js"></script>
<script src="https://codemirror.net/addon/search/searchcursor.js"></script>
<script src="https://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="https://codemirror.net/addon/edit/closebrackets.js"></script>
<script src="https://codemirror.net/addon/comment/comment.js"></script>
<script src="https://codemirror.net/addon/wrap/hardwrap.js"></script>
<script src="https://codemirror.net/keymap/sublime.js"></script>
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Prettier">
<meta name="apple-mobile-web-app-title" content="Prettier">
<meta name="theme-color" content="#1A2B34">
<meta name="msapplication-navbutton-color" content="#1A2B34">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/prettier/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="icon.png">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.css">
<link rel="stylesheet" crossorigin href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/theme/neat.css">
<script src="lib/prettier-version.js"></script>
<script src="playground.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/display/rulers.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/search/searchcursor.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/matchbrackets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/edit/closebrackets.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/comment/comment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/addon/wrap/hardwrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/keymap/sublime.js"></script>
<style type="text/css">
html,
@@ -36,7 +54,7 @@
}
.options-summary {
font-size: 1.2em;
font-size: 1.4em;
margin-top: 8px;
text-align: center;
}
@@ -68,7 +86,9 @@
}
.logo {
height: 100px;
height: 45px;
margin-left: 10px;
margin-right: 20px;
}
.tagline {
@@ -81,6 +101,10 @@
margin-right: 30px;
}
textarea.loading {
opacity: 0;
}
.editors-container {
display: flex;
flex-grow: 1;
@@ -93,13 +117,27 @@
}
.editor {
min-width: 400px;
display: flex;
flex: 1;
flex-basis: 100%;
position: relative;
border-top: 1px solid #1A2B34;
}
/* display as 2x2 grid */
@media (min-width: 800px) {
.editor {
flex-basis: 50%;
}
}
/* display as four columns */
@media (min-width: 1200px) {
.editor {
flex-basis: 25%;
}
}
.arrow {
align-self: center;
font-size: 1.2em;
@@ -139,10 +177,16 @@
margin: 0 10px;
}
@media (max-width: 400px) {
@media (max-width: 408px) {
label {
padding: 8px;
}
.options-container {
flex-direction: column-reverse;
}
.options.last {
flex-direction: column-reverse;
}
}
input[type="number"] {
@@ -158,7 +202,7 @@
<body>
<header>
<a href=".">
<img class="logo" src="https://cloud.githubusercontent.com/assets/311752/24730511/e6690c38-1a18-11e7-95a9-2af91bb60440.png">
<img class="logo" src="prettier.png">
</a>
<h2 class="tagline"><em>Opinionated</em> code formatter</h2>
<span class="links">
@@ -175,13 +219,16 @@
<section class="editors-container">
<div class="editors">
<div class="editor input">
<textarea id="input-editor"></textarea>
<textarea class="loading" id="input-editor"></textarea>
</div>
<div class="editor ast">
<textarea class="loading" id="ast-editor"></textarea>
</div>
<div class="editor doc">
<textarea id="doc-editor"></textarea>
<textarea class="loading" id="doc-editor"></textarea>
</div>
<div class="editor output">
<textarea id="output-editor"></textarea>
<textarea class="loading" id="output-editor"></textarea>
</div>
</div>
</section>
@@ -202,10 +249,11 @@
<label><input type="checkbox" data-inverted id="bracketSpacing"></input> --no-bracket-spacing</label>
<label><input type="checkbox" id="jsxBracketSameLine"></input> --jsx-bracket-same-line</label>
</div>
<div class="options">
<div class="options last">
<label>--trailing-comma <select id="trailingComma"><option value="none">none</option><option value="es5">es5</option><option value="all">all</option></select></label>
<label>--parser <select id="parser"><option value="babylon">babylon</option><option value="flow">flow</option><option value="typescript">typescript</option><option value="postcss">postcss</option></select></label>
<span style="flex: 0.3"></span>
<label><input type="checkbox" id="ast"></input> show AST (debug)</label>
<label><input type="checkbox" id="doc"></input> show doc (debug)</label>
</div>
</div>
@@ -222,8 +270,7 @@
</p>
</footer>
<script src="lib/prettier-version.js"></script>
<script src="playground.js"></script>
<script src="lib/sw-toolbox-companion.js" data-service-worker="service-worker.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</body>