mirror of
https://github.com/zhigang1992/probot.github.io.git
synced 2026-01-12 22:49:53 +08:00
Add contribute page
This commit is contained in:
Brandon Keepers
@@ -14,7 +14,7 @@
|
||||
<nav class="text-bold col-sm-8 text-sm-right">
|
||||
<a class="text-inherit px-2 d-inline-block" href="/apps/">Explore</a>
|
||||
<a class="text-inherit px-2 d-inline-block" href="/docs/">Build</a>
|
||||
<a class="text-inherit px-2 d-inline-block" href="https://github.com/probot/probot">Contribute</a>
|
||||
<a class="text-inherit px-2 d-inline-block" href="/contribute/">Contribute</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,8 +8,14 @@
|
||||
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
||||
{% seo %}
|
||||
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" charset="utf-8"></script>
|
||||
<script defer src="/assets/js/office-hours.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a class="alt-text text-white d-block bg-brand-red text-center text-white p-3 office-hours-nag d-none" href="/contribute/#office-hours">
|
||||
Join us for office hours
|
||||
<span class="js-office-hours-start-time" data-format="fromNow"></span>.
|
||||
</a>
|
||||
{% include nav.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
109
_sass/addtocalendar.scss
Normal file
109
_sass/addtocalendar.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* AddToCalendar Blue Style
|
||||
* http://addtocalendar.com
|
||||
*/
|
||||
|
||||
/* Base */
|
||||
|
||||
.addtocalendar var {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.addtocalendar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: transparent!important;
|
||||
}
|
||||
|
||||
.atcb-link {
|
||||
outline: none!important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.atcb-link:focus~ul,
|
||||
.atcb-link:active~ul,
|
||||
.atcb-list:hover{
|
||||
visibility:visible;
|
||||
}
|
||||
|
||||
.atcb-list {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 170px;
|
||||
z-index: 900;
|
||||
@extend .border;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.atcb-list,
|
||||
.atcb-item
|
||||
{
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.atcb-item {
|
||||
float: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.atcb-item-link
|
||||
{
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.atcb-item.hover,
|
||||
.atcb-item:hover {
|
||||
position: relative;
|
||||
z-index: 900;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.atc-style-blue .atcb-list,
|
||||
.atc-style-blue .atcb-item
|
||||
{
|
||||
background: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.atc-style-blue .atcb-item,
|
||||
.atc-style-blue .atcb-item-link
|
||||
{
|
||||
line-height: 1.3em;
|
||||
vertical-align: middle;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.atc-style-blue .atcb-item-link,
|
||||
.atc-style-blue .atcb-item-link:hover,
|
||||
.atc-style-blue .atcb-item-link:active,
|
||||
.atc-style-blue .atcb-item-link:focus
|
||||
{
|
||||
color: #000;
|
||||
font-family: $body-font;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.atc-style-blue .atcb-item-link:hover,
|
||||
.atc-style-blue .atcb-item-link:active,
|
||||
.atc-style-blue .atcb-item-link:focus
|
||||
{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.atc-style-blue .atcb-item.hover,
|
||||
.atc-style-blue .atcb-item:hover {
|
||||
background: $text-blue;
|
||||
}
|
||||
@@ -6,6 +6,7 @@
|
||||
@import "colors.scss";
|
||||
@import "markdown.scss";
|
||||
@import "switcher.scss";
|
||||
@import "addtocalendar.scss";
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
|
||||
43
assets/js/office-hours.js
Normal file
43
assets/js/office-hours.js
Normal file
@@ -0,0 +1,43 @@
|
||||
// Calculate the next Office Hours
|
||||
|
||||
|
||||
// Adjust to Friday at 17:00 UTC / 1pm Eastern
|
||||
var attrs = {day: "Friday", hour: 17, minute: 0, second: 0, millisecond: 0}
|
||||
|
||||
var start = moment().utc().set(attrs)
|
||||
|
||||
// If it's already passed today, go to next Friday
|
||||
if(start < moment().utc()) {
|
||||
start.add({days: 7})
|
||||
}
|
||||
|
||||
end = moment(start).add({hour: 1})
|
||||
|
||||
if(start < moment().add(4, 'hours')) {
|
||||
document.body.classList.add('office-hours-soon')
|
||||
document.querySelectorAll('.office-hours-nag').forEach(function(el) {
|
||||
el.classList.remove('d-none')
|
||||
});
|
||||
}
|
||||
|
||||
// Switch back to local time
|
||||
start.local();
|
||||
end.local();
|
||||
|
||||
displayTime(document.querySelectorAll('.js-office-hours-start-time'), start);
|
||||
displayTime(document.querySelectorAll('.js-office-hours-end-time'), end);
|
||||
|
||||
function displayTime(elements, time) {
|
||||
elements.forEach(function(el) {
|
||||
var format = el.dataset.format
|
||||
var value;
|
||||
|
||||
if(format == 'fromNow') {
|
||||
value = time.fromNow();
|
||||
} else {
|
||||
value = time.format(format);
|
||||
}
|
||||
|
||||
el.innerHTML = value;
|
||||
});
|
||||
}
|
||||
BIN
assets/office-hours.png
Normal file
BIN
assets/office-hours.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
74
contribute.html
Normal file
74
contribute.html
Normal file
@@ -0,0 +1,74 @@
|
||||
---
|
||||
layout: default
|
||||
title: Contribute
|
||||
office_hours_link: https://github.zoom.us/j/221410810
|
||||
---
|
||||
|
||||
<div class="container-lg px-3 featurette">
|
||||
<h1 class="alt-h2 text-center">Join the Community</h1>
|
||||
<p class="alt-lead col-md-8 text-center text-gray mx-auto">
|
||||
We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
|
||||
</p>
|
||||
|
||||
<div class="d-flex gutter featurette text-center">
|
||||
<div class="col-4 text-center">
|
||||
<a class="btn btn-outline" href="https://probot-slackin.herokuapp.com/">
|
||||
{% octicon comment-discussion class:"mr-1" %}
|
||||
Chat on Slack
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-4 text-center">
|
||||
<a class="btn btn-outline" href="https://github.com/probot/probot">
|
||||
{% octicon mark-github class:"mr-1" %}
|
||||
Contribute on GitHub
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-4 text-center">
|
||||
<a class="btn btn-outline" href="https://twitter.com/ProbotTheRobot">
|
||||
Follow on Twitter
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="office-hours" class="d-md-flex flex-row-reverse my-6">
|
||||
<div class="col-md-6 flex-md-self-center">
|
||||
<h2 class="alt-h3">Office Hours</h2>
|
||||
<p>
|
||||
Join us every
|
||||
<strong>
|
||||
<span class="js-office-hours-start-time" data-format="dddd">Friday</span> at
|
||||
<span class="js-office-hours-start-time" data-format="h:mm A">17:00 UTC</span>
|
||||
</strong>
|
||||
to give feedback, ask questions, get help, or just chat about ideas.
|
||||
</p>
|
||||
|
||||
<span class="addtocalendar atc-style-blue">
|
||||
<a class="atcb-link btn btn-outline">
|
||||
{% octicon calendar class:"mr-2" %} Add to Calendar
|
||||
</a>
|
||||
|
||||
<var class="atc_event">
|
||||
<var class="atc_date_start js-office-hours-start-time"></var>
|
||||
<var class="atc_date_end js-office-hours-end-time"></var>
|
||||
<var class="atc_title">Probot Office Hours</var>
|
||||
<var class="atc_description">Join us every Friday to give feedback, ask questions, get help, or just chat about ideas.</var>
|
||||
<var class="atc_location">{{ page.office_hours_link }}</var>
|
||||
</var>
|
||||
</span>
|
||||
|
||||
<a href="{{ page.office_hours_link }}" class="btn btn-outline ml-2 office-hours-nag d-none">
|
||||
{% octicon device-camera-video class:"mr-2" %} Join Now
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-6 py-4 px-md-6">
|
||||
<a href="{{ page.office_hours_link }}">
|
||||
<img src="/assets/office-hours.png" alt="" class="width-fit">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script async src="//addtocalendar.com/atc/1.5/atc.min.js" charset="utf-8"></script>
|
||||
Reference in New Issue
Block a user