Skip to content
This repository was archived by the owner on Nov 16, 2023. It is now read-only.

Make site into an editable playground with monaco editor #139

Open
alejandrogarciasalas wants to merge 16 commits into
base: master
Choose a base branch
from
Open

Make site into an editable playground with monaco editor #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e4726b7
modularize body components so it is easier to add a left side panel
alejandrogarciasalas Jul 29, 2018
d13e660
change theme logic to fit refactored containers
alejandrogarciasalas Jul 29, 2018
8859583
got panel open and closing
alejandrogarciasalas Jul 29, 2018
f8946e0
add zoom in animation
alejandrogarciasalas Jul 29, 2018
f2fda64
add animations to panel opening
alejandrogarciasalas Jul 29, 2018
e39ce52
add minified monaco-editor files
alejandrogarciasalas Jul 29, 2018
13af66d
add monaco editor to side panel
alejandrogarciasalas Jul 29, 2018
d833726
change size of panels
alejandrogarciasalas Jul 29, 2018
9cfb566
refactor side panel css
alejandrogarciasalas Jul 29, 2018
fa474ff
fix side panel bug
alejandrogarciasalas Jul 29, 2018
994bbd4
only update code inside playground-editable-area
alejandrogarciasalas Jul 29, 2018
3f89143
signal where to edit
alejandrogarciasalas Jul 29, 2018
4b69f50
refactor code
alejandrogarciasalas Jul 29, 2018
6303a97
reset anchor points after updating html
alejandrogarciasalas Jul 29, 2018
1ca5acb
better comments
alejandrogarciasalas Jul 30, 2018
ae2f57f
change editor theme according to activeTheme
alejandrogarciasalas Jul 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 111 additions & 4 deletions docs/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,15 +110,23 @@ html {
background-color: var(--dark-grey);
}

html[data-loaded] {
body {
margin: 0;
}

.gradient-background {
padding: 5px;
}

.gradient-background[data-loaded] {
background: linear-gradient(
to bottom,
var(--brand-blue) 33%,
var(--brand-yellow) 67%
);
}

html:before {
.gradient-background:before {
content: "";
position: absolute;
display: block;
Expand All @@ -141,12 +149,11 @@ html:before {
animation: var(--root-gradient-animation);
}

body {
.content-background {
display: flex;
flex-direction: column;
align-items: center;
min-height: calc(100vh - 10px);
margin: 5px;
padding: 0 var(--small-space);
color: var(--off-white);
background-color: var(--dark-grey);
Expand Down Expand Up @@ -353,3 +360,103 @@ footer [href*="github"]:focus {
.time-travel a {
cursor: pointer;
}

/* Editable Playground */

@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}

50% {
opacity: 1;
}
}

@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}

50% {
opacity: 1;
}
}

@-webkit-keyframes zoomOut {
from {
opacity: 1;
}

50% {
opacity: 0;
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}

to {
opacity: 0;
}
}

@keyframes zoomOut {
from {
opacity: 1;
}

50% {
opacity: 0;
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}

to {
opacity: 0;
}
}

.side-panel,
.side-panel-open {
-webkit-animation-duration: 0.75s;
animation-duration: 0.8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: zoomIn;
}

.side-pushable-content {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.side-pushable-content-open {
width: 50%;
-webkit-transform: translate(97%, 0);
transform: translate(97%, 0);
}

.side-panel {
position: absolute;
height: 100%;
width: 50%;
visibility: hidden;
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
visibility: visible;
}

.side-panel-open {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
visibility: visible;
}

.editor-container {
width: 100%;
height: 100%;
overflow: hidden; /* work-around for this issue: https://github.com/Microsoft/monaco-editor/issues/29 */
}
176 changes: 99 additions & 77 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,87 +16,109 @@
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="theme/theme.css">
<link rel="shortcut icon" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
<script>var require = { paths: { 'vs': 'playground/monaco-editor/min/vs' } };</script>
<script src="playground/monaco-editor/min/vs/loader.js"></script>
<script src="playground/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="playground/monaco-editor/min/vs/editor/editor.main.js"></script>
</head>

<body class="js-theme-dark">
<div class="container">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span class="logo-tile logo-tile--red"></span>
<span class="logo-tile logo-tile--green"></span>
<span class="logo-tile logo-tile--blue"></span>
<span class="logo-tile logo-tile--yellow"></span>
</div>
</a>
</header>
<main>
<h1>
Microsoft is looking for designers who code to help create the most compelling developer tools&nbsp;&amp;&nbsp;services on
the planet.
</h1>
<p>
We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.
</p>
</main>
</div>
<footer class="footer">
<div class="theme">
<ul class="theme__list">
<li class="theme__item">
<button class="theme__button" value="dark" title="Enable dark theme">Dark</button>
</li>
<li class="theme__item">
<button class="theme__button" value="light" title="Enable light theme">Light</button>
</li>
</ul>
<body class="js-theme-light" id="playground-initial-code">
<div class="side-panel" id="side-panel">
<div class="editor-container" id="editor-container">
<!--
This is where the editor (monaco) goes.
Yes. this is the same editor used by VSCode.
-->
</div>
<div class="time-travel">
<p>
<a href="./time-travel/" title="See past versions of this site">Time Travel</a>
</p>
</div>
<p>
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is the first interface design tool based in the browser, making it easier for teams to create software.">Figma</a>.
</span>
<span class="footer-piece">
Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));
</div>
<div
class="gradient-background side-pushable-content"
id="side-pushable-content"
>
<div class="content-background" id="theme-background">
<!-- editable area starts here -->
<div class="container" id="playground-editable-area">
<header>
<a class="logo-link" href="https://microsoft.com" title="Microsoft Website">
<div class="logo" role="img" aria-label="Microsoft Logo">
<span class="logo-tile logo-tile--red"></span>
<span class="logo-tile logo-tile--green"></span>
<span class="logo-tile logo-tile--blue"></span>
<span class="logo-tile logo-tile--yellow"></span>
</div>
</a>
</header>
<main>
<h1>
Microsoft is looking for designers who <a href="#" id="toggle-side-panel-open">code</a> to help create the most compelling developer tools&nbsp;&amp;&nbsp;services on
the planet.
</h1>
<p>
We have open positions for technical product designers &amp; design leaders in San Francisco, Seattle, and elsewhere.
</p>
<p>
We use PCs, Macs, Figma, Sketch, GitHub, JavaScript, ZEIT, and other modern tools to design, prototype, and build the future
of software development.
</p>
<p>
We believe in diversity, openness, and building delightful tools that empower every person and organization to achieve more.
</p>
<p>
Interested? Send a PR with any improvement to
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">microsoft/join-dev-design</a> or
<a href="mailto:dasiege@microsoft.com" title="Email address for dasiege@microsoft.com">email us</a>.
</p>
</main>
</div>
<!-- editable area ends here -->
<footer class="footer">
<div class="theme">
<ul class="theme__list">
<li class="theme__item">
<button class="theme__button" value="dark" title="Enable dark theme">Dark</button>
</li>
<li class="theme__item">
<button class="theme__button" value="light" title="Enable light theme">Light</button>
</li>
</ul>
</div>
<div class="time-travel">
<p>
<a href="./time-travel/" title="See past versions of this site">Time Travel</a>
</p>
</div>
<p>
<span class="footer-piece">
Designed in
<a href="https://figma.com" title="Figma is the first interface design tool based in the browser, making it easier for teams to create software.">Figma</a>.
</span>
<span class="footer-piece">
Built in
<a href="https://code.visualstudio.com" title="Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.">Code</a>.
</span>
<span class="footer-piece footer-piece--separate">
Created by
<a href="https://github.com/Microsoft/join-dev-design/graphs/contributors" id="contributors" title="Contributors to the GitHub repository join-dev-design by the Microsoft organization">10</a> contributors on
<a href="https://github.com/Microsoft/join-dev-design" title="GitHub repository join-dev-design by the Microsoft organization">GitHub</a>.
</span>
</p>
<script>
fetch('https://api.github.com/repos/Microsoft/join-dev-design/stats/contributors')
.then(response => {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
return response.json();
})
.then(data => document.getElementById('contributors').innerText = data.length)
.catch(err => console.log('Fetch Error :-S', err));

</script>
</footer>
</script>
</footer>
</div>
</div>
<script src="playground/playground.js"></script>
<script async src="theme/theme.js"></script>
<script>
function logLogo(size) {
Expand Down
Loading