Skip to content

Commit

Permalink
content/static: clean up homepage to address various issues
Browse files Browse the repository at this point in the history 
+ Replace tabs with spaces in root.html
+ Adds ARIA labels to form elements that are missing them
+ Removes unused playground popup code
+ Changes the primary container tag from div to main to
  indicate a page landmark
+ Updates the videos randomly displayed
+ Sets the rel attribute on cross-origin links to improve
  performance and increase security
+ Use textContent instead of innerHTML when constructing
  the blog feed content since it's faster and safer

Updates golang/go#9936

Change-Id: I7b2cac3ad89ac2ee0044d7e19322b0b0e1bfa5cb
Reviewed-on: https://go-review.googlesource.com/c/website/+/180997
Reviewed-by: Katie Hockman <katie@golang.org>
  • Loading branch information
@andybons
andybons committed Jun 6, 2019
1 parent d83058c commit a2e45d1
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 133 deletions.
225 changes: 125 additions & 100 deletions content/static/doc/root.html
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,48 @@
<!--{
"Path": "/",
"Template": true
"Path": "/",
"Template": true
}-->

<div class="left">

<div id="learn">
{{if not $.GoogleCN}}
<a class="popout share">Pop-out</a>
{{end}}
<div class="rootHeading">Try Go</div>
<div class="input">
<textarea spellcheck="false" class="code">// You can edit this code!
{{if not $.GoogleCN}}
<a class="popout share">Pop-out</a>
{{end}}
<div class="rootHeading">Try Go</div>
<div class="input">
<textarea spellcheck="false" class="code" aria-label="Try Go">// You can edit this code!
// Click here and start typing.
package main

import "fmt"

func main() {
fmt.Println("Hello, 世界")
fmt.Println("Hello, 世界")
}</textarea>
</div>
<div class="output">
<pre>
<pre>
Hello, 世界
</pre>
</pre>
</div>
<div class="buttons">
<a class="run" href="#" title="Run this code [shift-enter]">Run</a>
{{if not $.GoogleCN}}
<a class="share" href="#" title="Share this code">Share</a>
<a class="tour" href="//tour.golang.org/" title="Learn Go from your browser">Tour</a>
{{end}}
<a class="run" href="#" title="Run this code [shift-enter]">Run</a>
{{if not $.GoogleCN}}
<a class="share" href="#" title="Share this code">Share</a>
<a class="tour" href="//tour.golang.org/" title="Learn Go from your browser">Tour</a>
{{end}}
</div>
<div class="toys">
<select>
<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 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>
</div>
Expand Down Expand Up @@ -74,91 +74,116 @@
<div class="left">
<div id="video">
<div class="rootHeading">Featured video</div>
<div class="js-frontpage-video" style="--aspect-ratio-padding: 58.07%;"><iframe width="415" height="241" src="//www.youtube.com/embed/ytEkHepK08c" frameborder="0" allowfullscreen></iframe></div>
<div style="--aspect-ratio-padding: 58.07%;">
<iframe width="415" height="241" src="https://www.youtube.com/embed/cQ7STILAS0M" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

<div class="right">
<div id="blog">
<div class="rootHeading">Featured articles</div>
<div class="read"><a href="//blog.golang.org/">Read more</a></div>
</div>
<div id="blog">
<div class="rootHeading">Featured articles</div>
<div class="read"><a href="//blog.golang.org/">Read more</a></div>
</div>
</div>
{{end}}

<div style="clear: both;"></div>

<script>
(function() {
'use strict';

window.initFuncs.push(function() {
// Set up playground if enabled.
if (window.playground) {
window.playground({
"codeEl": "#learn .code",
"outputEl": "#learn .output",
"runEl": "#learn .run",
"shareEl": "#learn .share",
"shareRedirect": "//play.golang.org/p/",
"toysEl": "#learn .toys select"
});
} else {
$('#learn').hide()
}
});

{{if not $.GoogleCN}}

function readableTime(t) {
var m = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
var p = t.substring(0, t.indexOf("T")).split("-");
var d = new Date(p[0], p[1]-1, p[2]);
return d.getDate() + " " + m[d.getMonth()] + " " + d.getFullYear();
}

window.feedLoaded = function(result) {
var blog = document.getElementById("blog");
var read = blog.getElementsByClassName("read")[0];
for (var i = 0; i < result.length && i < 2; i++) {
var entry = result[i];
var title = document.createElement("a");
title.className = "title";
title.href = entry.Link;
title.innerHTML = entry.Title;
blog.insertBefore(title, read);
var extract = document.createElement("div");
extract.className = "extract";
extract.innerHTML = entry.Summary;
blog.insertBefore(extract, read);
var when = document.createElement("div");
when.className = "when";
when.innerHTML = "Published " + readableTime(entry.Time);
blog.insertBefore(when, read);
}
}

window.initFuncs.push(function() {
// Load blog feed.
$('<script/>').attr('text', 'text/javascript')
.attr('src', '//blog.golang.org/.json?jsonp=feedLoaded')
.appendTo('body');

// Set the video at random.
var videos = [
{h: 241, s: "//www.youtube.com/embed/ytEkHepK08c"}, // Tour of Go
{h: 241, s: "//www.youtube.com/embed/f6kdp27TYZs"}, // Concurrency Patterns
{h: 233, s: "//player.vimeo.com/video/69237265"} // Simple environment
];
var v = videos[Math.floor(Math.random()*videos.length)];
$('#video iframe').attr('height', v.h).attr('src', v.s);
// Compute the aspect ratio (as a percentage) of the video
// using the fixed width 415 and the height of the current video, v.h.
var ar = 100*v.h/415;
$('.js-frontpage-video').attr('style', '--aspect-ratio-padding: ' + ar + '%;');
});

{{end}}
'use strict';

window.initFuncs.push(function() {
// Set up playground if enabled.
if (window.playground) {
window.playground({
"codeEl": "#learn .code",
"outputEl": "#learn .output",
"runEl": "#learn .run",
"shareEl": "#learn .share",
"shareRedirect": "//play.golang.org/p/",
"toysEl": "#learn .toys select"
});
} else {
$('#learn').hide()
}
});

{{if not $.GoogleCN}}

function readableTime(t) {
var m = ["January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"];
var p = t.substring(0, t.indexOf("T")).split("-");
var d = new Date(p[0], p[1]-1, p[2]);
return d.getDate() + " " + m[d.getMonth()] + " " + d.getFullYear();
}

window.feedLoaded = function(result) {
var blog = document.getElementById("blog");
var read = blog.getElementsByClassName("read")[0];
for (var i = 0; i < result.length && i < 2; i++) {
var entry = result[i];
var title = document.createElement("a");
title.className = "title";
title.href = entry.Link;
title.rel = "noopener";
title.textContent = entry.Title;
blog.insertBefore(title, read);
var extract = document.createElement("div");
extract.className = "extract";
extract.innerHTML = entry.Summary;
// Ensure any cross-origin links have rel=noopener set.
var links = extract.querySelectorAll("a");
for (var j = 0; j < links.length; j++) {
links[j].rel = "noopener";
}
blog.insertBefore(extract, read);
var when = document.createElement("div");
when.className = "when";
when.textContent = "Published " + readableTime(entry.Time);
blog.insertBefore(when, read);
}
}

window.initFuncs.push(function() {
// Load blog feed.
$('<script/>').attr('text', 'text/javascript')
.attr('src', '//blog.golang.org/.json?jsonp=feedLoaded')
.appendTo('body');

// Set the video at random.
var videos = [
{
s: "https://www.youtube.com/embed/cQ7STILAS0M",
title: "Why Go is Successful by Creator Rob Pike",
},
{
s: "https://www.youtube.com/embed/0ReKdcpNyQg",
title: "GopherCon 2015: Robert Griesemer - The Evolution of Go",
},
{
s: "https://www.youtube.com/embed/sX8r6zATHGU",
title: "Steve Francia - Go: building on the shoulders of giants and stepping on a few toes",
},
{
s: "https://www.youtube.com/embed/rWJHbh6qO_Y",
title: "Brad Fitzpatrick Go 1.11 and beyond",
},
{
s: "https://www.youtube.com/embed/bmZNaUcwBt4",
title: "The Why of Go",
},
{
s: "https://www.youtube.com/embed/0Zbh_vmAKvk",
title: "GopherCon 2017: Russ Cox - The Future of Go",
},
];
var v = videos[Math.floor(Math.random()*videos.length)];
$('#video iframe').attr('src', v.s).attr('title', v.title);
});

{{end}}
})();
</script>
24 changes: 2 additions & 22 deletions content/static/godoc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,27 +84,7 @@
</nav>
</header>

{{if .Playground}}
<div id="playground" class="play">
<div class="input"><textarea class="code" spellcheck="false">package main

import "fmt"

func main() {
fmt.Println("Hello, 世界")
}</textarea></div>
<div class="output"></div>
<div class="buttons">
<a class="run" title="Run this code [shift-enter]">Run</a>
<a class="fmt" title="Format this code">Format</a>
{{if not $.GoogleCN}}
<a class="share" title="Share this code">Share</a>
{{end}}
</div>
</div>
{{end}}

<div id="page"{{if .Title}} class="wide"{{end}}>
<main id="page"{{if .Title}} class="wide"{{end}}>
<div class="container">

{{if or .Title .SrcPath}}
Expand Down Expand Up @@ -142,7 +122,7 @@ <h2>
</div>

</div><!-- .container -->
</div><!-- #page -->
</main><!-- #page -->
{{if .GoogleAnalytics}}
<script>
(function() {
Expand Down
4 changes: 2 additions & 2 deletions content/static/godocs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,9 +169,9 @@ function setupInlinePlayground() {
});
}

// fixFocus tries to put focus to div#page so that keyboard navigation works.
// fixFocus tries to put focus to #page so that keyboard navigation works.
function fixFocus() {
var page = $('div#page');
var page = $('#page');
var topbar = $('div#topbar');
page.css('outline', 0); // disable outline when focused
page.attr('tabindex', -1); // and set tabindex so that it is focusable
Expand Down
Loading

0 comments on commit a2e45d1

Please sign in to comment.