go.dev/_content: copy golang.org playground onto go.dev homepage
HTML and styles for the go.dev playground are copied from golang.org
so that a playground section appears between the testimonials and
"What’s possible with Go" sections.
Change-Id: Ic7648462c7c27b22c057e05b3c0e8e2303d9643c
Reviewed-on: https://go-review.googlesource.com/c/website/+/352549
Trust: Jamal Carvalho <jamal@golang.org>
Trust: Julie Qiu <julie@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: Go Bot <gobot@golang.org>
Reviewed-by: Russ Cox <rsc@golang.org>
Website-Publish: Russ Cox <rsc@golang.org>
diff --git a/go.dev/_content/css/styles.css b/go.dev/_content/css/styles.css
index e553212..f47f5f0 100644
--- a/go.dev/_content/css/styles.css
+++ b/go.dev/_content/css/styles.css
@@ -544,6 +544,7 @@
}
.SubHero-gridContainer,
.WhoUses-gridContainer,
+.Playground-gridContainer,
.WhoUsesHero-gridContainer,
.WhoUsesCaseStudyList-gridContainer,
.WhyGo-gridContainer,
@@ -557,6 +558,7 @@
}
.SubHero-gridContainer,
.WhoUses-gridContainer,
+.Playground-gridContainer,
.WhoUsesHero-gridContainer,
.WhyGo-gridContainer,
.UseCases-gridContainer,
@@ -597,6 +599,7 @@
.WhoUses-headerH2,
.WhyGo-headerH2,
.GettingStartedGo-headerH2,
+.HomeSection-header,
.LearnGo-header h2 {
font-size: 1.25rem;
font-style: normal;
@@ -611,6 +614,7 @@
.WhoUses-headerH2,
.WhyGo-headerH2,
.GettingStartedGo-headerH2,
+ .HomeSection-header,
.LearnGo-header h2 {
font-size: 2.25rem;
line-height: 2.625rem;
@@ -3633,3 +3637,128 @@
border-radius: 0.3125rem;
}
+.Playground-headerContainer {
+ text-align: center;
+}
+.Playground-popout {
+ background: url('/lib/godoc/images/play-link.svg') no-repeat;
+ background-position: right center;
+ cursor: pointer;
+ display: block;
+ font-size: 1rem;
+ padding: 0 1.688rem;
+}
+.Playground-input,
+.Playground-output {
+ padding: 0;
+ margin: 0;
+ font-family: Menlo, monospace;
+ font-size: 0.875rem;
+}
+.Playground-inputContainer {
+ border-top-left-radius: 0.3125rem;
+ border-top-right-radius: 0.3125rem;
+ overflow: hidden;
+}
+.Playground-input {
+ width: 100%;
+ height: 100%;
+ border: none;
+ outline: none;
+ padding: 0.625rem;
+ min-height: 11rem;
+ resize: none;
+}
+.Playground-outputContainer {
+ border-bottom-right-radius: 0.3125rem;
+ border-bottom-left-radius: 0.3125rem;
+ border-top: none !important;
+ padding: 0.625rem;
+ height: 5rem;
+ margin-bottom: 1rem;
+ overflow: auto;
+}
+.Playground-output {
+ padding: 0;
+ border-radius: 0;
+}
+.Playground-inputContainer,
+.Playground-input,
+.Playground-outputContainer,
+.Playground-output {
+ background: #f7f9fa;
+ color: #202224;
+}
+.Playground-inputContainer,
+.Playground-outputContainer {
+ border: 0.0625rem solid #c0c2c3;
+ resize: vertical;
+}
+.Playground-controls {
+ display: flex;
+ flex-wrap: wrap;
+}
+.Playground-buttons {
+ display: flex;
+ flex: 1;
+ flex-wrap: nowrap;
+ gap: 0.5rem;
+ justify-content: flex-end;
+}
+.Playground-selectExample {
+ background-color: white;
+ border-radius: 3px;
+ border: 0.0625rem solid #979797;
+ color: inherit;
+ font-family: inherit;
+ font-size: 16px;
+ /* Prevents automatic zoom on mobile devices */
+ height: 2.375rem;
+ margin: 0 0 0.5rem 0;
+ width: 100%;
+}
+.Playground-secondaryButtons {
+ white-space: nowrap;
+}
+.Playground-secondaryButtons .Button:not(:first-child) {
+ margin-left: 0.4375rem;
+}
+@media only screen and (min-width: 27.8125rem) {
+ .Playground-outputContainer {
+ margin-bottom: 1.688rem;
+ }
+ .Playground-controls {
+ flex-wrap: nowrap;
+ }
+ .Playground-selectExample {
+ margin: 0 0.4375rem 0 0;
+ width: auto;
+ }
+}
+.Button,
+.Button:link,
+.Button:visited {
+ align-items: center;
+ background-color: #f7f9fa;
+ border: none;
+ border-radius: 0.1875rem;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ box-sizing: border-box;
+ color: #007d9c;
+ cursor: pointer;
+ display: inline-flex;
+ font: bold 0.875rem Roboto, sans-serif;
+ height: 2.375rem;
+ padding: 0 0.625rem;
+ justify-content: center;
+ min-width: 4.063rem;
+ text-decoration: none;
+}
+.Button:active {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.Button--primary,
+.Button--primary:link,
+.Button--primary:visited {
+ border: 0.0625rem solid #00add8;
+}
diff --git a/go.dev/_content/index.md b/go.dev/_content/index.md
index 2573bc6..d402916 100644
--- a/go.dev/_content/index.md
+++ b/go.dev/_content/index.md
@@ -143,7 +143,45 @@
</div>
</div>
</section>
-
+<section class="Playground">
+ <div class="Playground-gridContainer">
+ <div class="Playground-headerContainer">
+ <h2 class="HomeSection-header">Try Go</h2>
+ </div>
+ <div class="Playground-inputContainer">
+ <textarea class="Playground-input js-playgroundCodeEl" spellcheck="false" aria-label="Try Go">// You can edit this code!
+// Click here and start typing.
+package main
+import "fmt"
+func main() {
+ fmt.Println("Hello, 世界")
+}
+ </textarea>
+ </div>
+ <div class="Playground-outputContainer js-playgroundOutputEl">
+ <pre class="Playground-output"><noscript>Hello, 世界</noscript></pre>
+ </div>
+ <div class="Playground-controls">
+ <select class="Playground-selectExample js-playgroundToysEl" aria-label="Code examples">
+ <option value="hello.go">Hello, World!</option>
+ <option value="life.go">Conway's Game of Life</option>
+ <option value="fib.go">Fibonacci Closure</option>
+ <option value="peano.go">Peano Integers</option>
+ <option value="pi.go">Concurrent pi</option>
+ <option value="sieve.go">Concurrent Prime Sieve</option>
+ <option value="solitaire.go">Peg Solitaire Solver</option>
+ <option value="tree.go">Tree Comparison</option>
+ </select>
+ <div class="Playground-buttons">
+ <button class="Button Button--primary js-playgroundRunEl" title="Run this code [shift-enter]">Run</button>
+ <div class="Playground-secondaryButtons">
+ <button class="Button js-playgroundShareEl" title="Share this code">Share</button>
+ <a class="Button tour" href="https://tour.golang.org/" title="Playground Go from your browser">Tour</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
<section class="WhyGo">
<div class="WhyGo-gridContainer">
<div class="WhyGo-header">
@@ -326,3 +364,4 @@
</div>
</div>
</section>
+<script src="/js/index.js" defer></script>
diff --git a/go.dev/_content/js/index.js b/go.dev/_content/js/index.js
new file mode 100644
index 0000000..8e71971
--- /dev/null
+++ b/go.dev/_content/js/index.js
@@ -0,0 +1,23 @@
+// Copyright 2021 The Go Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+window.addEventListener('DOMContentLoaded', () => {
+ // Set up playground if enabled.
+ if (window.playground) {
+ window.playground({
+ "codeEl": ".js-playgroundCodeEl",
+ "outputEl": ".js-playgroundOutputEl",
+ "runEl": ".js-playgroundRunEl",
+ "shareEl": ".js-playgroundShareEl",
+ "shareRedirect": "//play.golang.org/p/",
+ "toysEl": ".js-playgroundToysEl"
+ });
+
+ // The pre matched below is added by the code above. Style it appropriately.
+ document.querySelector(".js-playgroundOutputEl pre").classList.add("Playground-output");
+ $('.js-playgroundToysEl').val("hello.go").trigger("change")
+ } else {
+ $(".Playground").hide();
+ }
+});
diff --git a/go.dev/_content/js/playground.js b/go.dev/_content/js/playground.js
index 7933ac0..048faaf 100644
--- a/go.dev/_content/js/playground.js
+++ b/go.dev/_content/js/playground.js
@@ -146,7 +146,7 @@
return;
}
- $.ajax('/vet', {
+ $.ajax('https://play.golang.org/vet', {
data: { body: body },
type: 'POST',
dataType: 'json',
@@ -474,7 +474,7 @@
if ($(opts.fmtImportEl).is(':checked')) {
data['imports'] = 'true';
}
- $.ajax('/fmt', {
+ $.ajax('https://play.golang.org/fmt', {
data: data,
type: 'POST',
dataType: 'json',
@@ -499,7 +499,7 @@
sharing = true;
var sharingData = body();
- $.ajax('/share', {
+ $.ajax('https://play.golang.org/share', {
processData: false,
data: sharingData,
type: 'POST',
@@ -565,6 +565,7 @@
return;
}
setBody(xhr.responseText);
+ run();
},
});
});
diff --git a/go.dev/_content/site.tmpl b/go.dev/_content/site.tmpl
index 678208e..03cd07b 100644
--- a/go.dev/_content/site.tmpl
+++ b/go.dev/_content/site.tmpl
@@ -168,10 +168,12 @@
</div>
</div>
</div>
+ <script src="/js/jquery.js"></script>
<script src="/js/carousels.js"></script>
<script src="/js/searchBox.js"></script>
<script src="/js/misc.js"></script>
<script src="/js/hats.js"></script>
+ <script src="/js/playground.js"></script>
</footer>
</body>
</html>
