docs: update community info with channel links (#2403)
This commit is contained in:
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user