Skip to content

Commit 7d52e7a

Browse files
yosuke-furukawayosuke-furukawa
authored
Merge pull request #252 from nodejsjp/feature/github-corner
Add more github link / add twitter link / clean up footer
2 parents 40da2eb + e6c3550 commit 7d52e7a

5 files changed

Lines changed: 94 additions & 43 deletions

File tree

‎bulbofile.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ const branch = require('branch-pipe')
1212
const data = {
1313
orgName: 'Japan Node.js Association',
1414
pages: require('./pages'),
15-
layoutDir: path.join(__dirname, 'source/layout'),
15+
layoutDir: path.join(__dirname, 'source', 'layout'),
16+
partialsDir: path.join(__dirname, 'source', 'layout', 'partials'),
1617
// file を受け取って root への相対パスを返す関数
1718
basepath: file => path.dirname(path.relative(file.relative, ''))
1819
}

‎source/layout/layout.njk‎

Lines changed: 47 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,47 @@
1-
<title>{{ orgName }}</title>
2-
<meta charset="UTF-8">
3-
<meta name="viewport" content="width=device-width, initial-scale=1">
4-
<link rel="stylesheet" href="{{ basepath(file) }}/css/tacit.min.css"/>
5-
<link rel="stylesheet" href="{{ basepath(file) }}/css/style.css"/>
6-
<link rel="icon" href="{{ basepath(file) }}/images/favicon.png" />
7-
8-
<nav>
9-
<img width="150" src="{{ basepath(file) }}/images/nodejs-logo.svg" />
10-
<br />
11-
<ul>
12-
{% for page in pages %}
13-
{% if page.path == file.relative %}
14-
<li>{{ page.name }}
15-
{% else %}
16-
<li><a href="{{ basepath(file) }}/{{ page.path }}">{{ page.name }}</a>
17-
{% endif %}
18-
{% endfor %}
19-
</ul>
20-
</nav>
21-
<section>
22-
<article>
23-
{% block main %}{% endblock %}
24-
<hr/>
25-
<footer>
26-
<p>
27-
<small>© 2016 {{ orgName }}</small>
28-
<small><a href="https://github.com/nodejsjp/nodejsjp.github.com">GitHub</a></small>
29-
</p>
30-
</footer>
31-
</article>
32-
</section>
33-
<script type="text/javascript">
34-
var _gaq = _gaq || [];
35-
_gaq.push(['_setAccount', 'UA-2570409-8']);
36-
_gaq.push(['_trackPageview']);
37-
(function() {
38-
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
39-
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
40-
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
41-
})();
42-
</script>
1+
{# 全ページ共通レイアウトファイル #}
2+
<!DOCTYPE html>
3+
<html>
4+
<head>
5+
<title>{{ orgName }}</title>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="{{ basepath(file) }}/css/tacit.min.css"/>
9+
<link rel="stylesheet" href="{{ basepath(file) }}/css/style.css"/>
10+
<link rel="icon" href="{{ basepath(file) }}/images/favicon.png" />
11+
</head>
12+
<body>
13+
{% include partialsDir + '/github-corner.njk' %}
14+
<nav>
15+
<img width="150" src="{{ basepath(file) }}/images/nodejs-logo.svg" />
16+
<br />
17+
<ul>
18+
{% for page in pages %}
19+
{% if page.path == file.relative %}
20+
<li>{{ page.name }}
21+
{% else %}
22+
<li><a href="{{ basepath(file) }}/{{ page.path }}">{{ page.name }}</a>
23+
{% endif %}
24+
{% endfor %}
25+
</ul>
26+
</nav>
27+
<section>
28+
<article>
29+
{% block main %}{% endblock %}
30+
</article>
31+
<footer>
32+
<nav>
33+
<ul>
34+
<li>
35+
<small>© 2016 {{ orgName }}</small>
36+
</li>
37+
</ul>
38+
<ul>
39+
<li><small><a target="_blank" href="https://github.com/nodejsjp/nodejsjp.github.com">GitHub</a></small></li>
40+
<li><small><a target="_blank" href="https://twitter.com/nodejsjp">Twitter</a></small></li>
41+
</ul>
42+
</nav>
43+
</article>
44+
</section>
45+
{% include partialsDir + '/analytics.njk' %}
46+
</body>
47+
</html>

‎source/layout/partials/analytics.njk‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script type="text/javascript">
2+
var _gaq = _gaq || [];
3+
_gaq.push(['_setAccount', 'UA-2570409-8']);
4+
_gaq.push(['_trackPageview']);
5+
(function() {
6+
var ga = document.createElement('script');
7+
ga.type = 'text/javascript';
8+
ga.async = true;
9+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
10+
var s = document.getElementsByTagName('script')[0];
11+
s.parentNode.insertBefore(ga, s);
12+
})();
13+
</script>

‎source/layout/partials/github-corner.njk‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<a target="_blank" href="https://gihtub.com/nodejsjp/nodejsjp.github.com" class="github-corner" aria-label="View source on Github">
2+
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9bb48f; color:#f5f5f5; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
3+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
4+
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="#f5f5f5" style="transform-origin: 130px 106px;" class="octo-arm"></path>
5+
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="#f5f5f5" class="octo-body"></path>
6+
</svg>
7+
</a>
8+
<style>
9+
.github-corner:hover .octo-arm {
10+
animation: octocat-wave 560ms ease-in-out
11+
}
12+
@keyframes octocat-wave {
13+
0%, 100% {
14+
transform: rotate(0)
15+
}
16+
20%,60% {
17+
transform: rotate(-25deg)
18+
}
19+
40%, 80% {
20+
transform: rotate(10deg)
21+
}
22+
}
23+
@media (max-width: 500px) {
24+
.github-corner:hover .octo-arm {
25+
animation:none
26+
}
27+
.github-corner .octo-arm {
28+
animation: octocat-wave 560ms ease-in-out
29+
}
30+
}
31+
</style>

‎test.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<a href="https://your-url" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#9bb48f; color:#f5f5f5; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="#f5f5f5" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="#f5f5f5" class="octo-body"></path></svg></a>

0 commit comments

Comments
 (0)