docs: update community info with channel links (#2403)

This commit is contained in:
Shawn Erquhart
2019-06-24 19:07:19 -04:00
committed by GitHub
parent 814aa5091b
commit 50dc371ebc
9 changed files with 119 additions and 92 deletions

View File

@ -24,10 +24,10 @@ class DocSearch extends Component {
}
return (
<a className="utility-input">
<img src={searchIcon} />
<div className="utility-input">
<img src={searchIcon} alt="" />
<input type="search" placeholder="Search the docs" className="algolia-search" />
</a>
</div>
);
}
}

View File

@ -55,7 +55,7 @@ class Header extends Component {
<div className="contained">
<div className="logo-container">
<Link to="/" className="logo">
<img src={logo} />
<img src={logo} alt="Netlify CMS" />
</Link>
<DocSearch />
</div>

View File

@ -36,20 +36,23 @@ class VideoEmbed extends Component {
frameBorder={0}
allow="autoplay; encrypted-media"
allowFullScreen
title="video_embed"
/>
);
const imgPlaceholder = <img src={screenshotEditor} className="responsive" />;
const imgPlaceholder = (
<img src={screenshotEditor} className="responsive" alt="editor video screenshot" />
);
return (
<a className="hero-graphic" onClick={this.toggleVideo}>
<div className="hero-graphic" onClick={this.toggleVideo}>
{toggled ? embedcode : imgPlaceholder}
{!toggled && (
<div className="hero-videolink">
<PlayIcon className="hero-videolink-arrow" />
</div>
)}
</a>
</div>
);
}
}

View File

@ -1,5 +1,5 @@
.collab,
.how-it-works {
.community-channels {
margin: $medium $tiny;
@media screen and (min-width: $mobile) {
@ -40,7 +40,7 @@
}
}
.how-it-works {
.community-channels {
padding-bottom: $xl;
text-align: left;
@ -52,3 +52,41 @@
color: $darkGreen;
}
}
.community-channels-list {
margin-left: 0;
li {
list-style-type: none;
margin-bottom: 24px;
}
a {
display: block;
font-weight: inherit;
position: relative;
&:focus,
&:active,
&:hover {
&:before {
display: block;
}
}
&:before {
display: none;
content: '';
position: absolute;
width: 3px;
height: 100%;
background-color: $darkGreen;
left: -16px;
}
}
p {
color: $grey;
margin-bottom: 0;
}
}

View File

@ -95,23 +95,6 @@ header {
@media screen and (max-width: $tablet) {
position: static;
}
/*.nav-link {
@media screen and (min-width: 487px) and (max-width: 767px) {
margin-top: $micro;
}
}*/
/*.utility-input {
@media screen and (max-width: 767px) {
display: block;
height: $small;
margin: $tiny 0 0 0;
}
@media screen and (min-width: 487px) and (max-width: 767px) {
margin-top: 32px;
}
}*/
}
.nav-container {

View File

@ -1,30 +1,20 @@
import React from 'react';
import Helmet from 'react-helmet';
import Markdown from 'react-markdown';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import EventWidget from '../components/event-widget';
import Markdownify from '../components/markdownify';
import '../css/imports/collab.css';
const CommunityPage = ({ data }) => {
const {
title,
headline,
subhead,
primarycta,
upcomingevent,
howitworks,
howtojoin,
} = data.markdownRemark.frontmatter;
const { title, headline, subhead, sections } = data.markdownRemark.frontmatter;
return (
<Layout>
<div className="community page">
<Helmet title={title} />
<section className="community hero">
<section className="hero">
<div className="contained">
<div className="hero-copy">
<h1 className="headline">
@ -33,36 +23,28 @@ const CommunityPage = ({ data }) => {
<h2 className="subhead">
<Markdownify source={subhead} />
</h2>
<h3 className="ctas">
<ul>
<li>
<Markdownify source={primarycta} />
</li>
</ul>
</h3>
</div>
<div className="calendar-cta">
<h2>{upcomingevent.hook}</h2>
<EventWidget />
<div className="cal-cta">
<Markdownify source={primarycta} />
</div>
</div>
</div>
</section>
<section className="how-it-works clearfix">
<section className="community-channels clearfix">
<div className="contained">
<div className="half">
<h4 className="section-label">How it works</h4>
<p>
<Markdown source={howitworks} />
</p>
<h4 className="section-label">How to join</h4>
<p>
<Markdown source={howtojoin} />
</p>
{sections.map(({ title: sectionTitle, channels }, channelIdx) => (
<React.Fragment key={channelIdx}>
<h4 className="section-label">{sectionTitle}</h4>
<ul className="community-channels-list">
{channels.map(({ title, description, url }, idx) => (
<li key={idx}>
<a href={url}>
<strong>{title}</strong>
<p>{description}</p>
</a>
</li>
))}
</ul>
</React.Fragment>
))}
</div>
</div>
</section>
@ -77,12 +59,14 @@ export const pageQuery = graphql`
frontmatter {
headline
subhead
primarycta
upcomingevent {
hook
sections {
title
channels {
title
description
url
}
}
howitworks
howtojoin
}
}
}

View File

@ -16,7 +16,7 @@ import '../css/imports/community.css';
const Features = ({ items }) =>
items.map(item => (
<div className="feature" key={item.feature}>
{item.imgpath && <img src={require(`../img/${item.imgpath}`)} />}
{item.imgpath && <img src={require(`../img/${item.imgpath}`)} alt="" />}
<h3>
<Markdownify source={item.feature} />
</h3>