fix(www-website): fix link to community, fix CMS previews (#3189)

This commit is contained in:
Erez Rokah
2020-02-04 09:16:48 +02:00
committed by GitHub
parent 4f5544287f
commit 68dd3c1de7
10 changed files with 375 additions and 369 deletions

View File

@ -1,5 +1,5 @@
import React from 'react';
import CMS from 'netlify-cms';
import CMS from 'netlify-cms-app';
import dayjs from 'dayjs';
import Prism from 'prismjs';
import { BlogPostTemplate } from '../templates/blog-post';
@ -64,13 +64,14 @@ const WidgetDocPreview = ({ entry, widgetFor }) => (
const ReleasePreview = ({ entry }) => (
<WhatsNew
updates={[
entry.getIn(['data', 'updates']).map(release => ({
updates={entry
.getIn(['data', 'updates'])
.map(release => ({
version: release.get('version'),
date: dayjs(release.get('date')).format('MMMM D, YYYY'),
description: release.get('description'),
})),
]}
}))
.toJS()}
/>
);

View File

@ -10,7 +10,7 @@ const ChatLink = styled.a`
`;
const ChatButton = () => (
<ChatLink href="/chat">
<ChatLink href="/chat" target="_blank" rel="noopener noreferrer">
<img src="/img/slack.svg" />
</ChatLink>
);

View File

@ -44,7 +44,7 @@ const CommunityChannelsList = ({ channels }) => (
<StyledCommunityChannelsList>
{channels.map(({ title, description, url }, idx) => (
<li key={idx}>
<a href={url}>
<a href={url} target="_blank" rel="noopener noreferrer">
<strong>{title}</strong>
<p>{description}</p>
</a>

View File

@ -1,43 +1,52 @@
import React from 'react';
import Markdownify from '../components/markdownify';
import { css } from '@emotion/core';
import Markdownify from './markdownify';
import PageHero from './page-hero';
import HeroTitle from './hero-title';
import Lead from './lead';
import Container from './container';
import SectionLabel from './section-label';
import Page from './page';
import Grid from './grid';
import CommunityChannelsList from './community-channels-list';
import theme from '../theme';
const Community = ({ headline, subhead, sections }) => (
<div className="community page">
<section className="hero">
<div className="contained">
<div className="hero-copy">
<h1 className="headline">
<Markdownify source={headline} />
</h1>
<h2 className="subhead">
<Markdownify source={subhead} />
</h2>
</div>
<>
<PageHero>
<div
css={css`
margin-bottom: 20px;
`}
>
<HeroTitle>
<Markdownify source={headline} />
</HeroTitle>
<Lead light>
<Markdownify source={subhead} />
</Lead>
</div>
</section>
</PageHero>
<section className="community-channels clearfix">
<div className="contained">
<div className="half">
{sections.map(({ title: sectionTitle, channels }, channelIdx) => (
<React.Fragment key={channelIdx}>
<h4 className="section-label">{sectionTitle}</h4>
<ul className="community-channels-list">
{channels.map(({ title: channelTitle, description, url }, idx) => (
<li key={idx}>
<a href={url}>
<strong>{channelTitle}</strong>
<p>{description}</p>
</a>
</li>
))}
</ul>
</React.Fragment>
))}
</div>
</div>
</section>
</div>
<Container>
<Page>
<Grid cols={2}>
<div
css={css`
margin-bottom: ${theme.space[5]};
`}
>
{sections.map(({ title: sectionTitle, channels }, channelIdx) => (
<React.Fragment key={channelIdx}>
<SectionLabel>{sectionTitle}</SectionLabel>
<CommunityChannelsList channels={channels} />
</React.Fragment>
))}
</div>
</Grid>
</Page>
</Container>
</>
);
export default Community;

View File

@ -126,7 +126,11 @@ const StyledMarkdown = styled.div`
`;
const Markdown = ({ html }) => {
return <StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />;
if (React.isValidElement(html)) {
return html;
} else {
return <StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />;
}
};
export default Markdown;

View File

@ -1,20 +1,9 @@
import React from 'react';
import Helmet from 'react-helmet';
import { graphql } from 'gatsby';
import { css } from '@emotion/core';
import Layout from '../components/layout';
import Markdownify from '../components/markdownify';
import PageHero from '../components/page-hero';
import HeroTitle from '../components/hero-title';
import Lead from '../components/lead';
import Container from '../components/container';
import SectionLabel from '../components/section-label';
import Page from '../components/page';
import Grid from '../components/grid';
import CommunityChannelsList from '../components/community-channels-list';
import theme from '../theme';
import Community from '../components/community';
const CommunityPage = ({ data }) => {
const { title, headline, subhead, sections } = data.markdownRemark.frontmatter;
@ -22,39 +11,7 @@ const CommunityPage = ({ data }) => {
return (
<Layout hasPageHero>
<Helmet title={title} />
<PageHero>
<div
css={css`
margin-bottom: 20px;
`}
>
<HeroTitle>
<Markdownify source={headline} />
</HeroTitle>
<Lead light>
<Markdownify source={subhead} />
</Lead>
</div>
</PageHero>
<Container>
<Page>
<Grid cols={2}>
<div
css={css`
margin-bottom: ${theme.space[5]};
`}
>
{sections.map(({ title: sectionTitle, channels }, channelIdx) => (
<React.Fragment key={channelIdx}>
<SectionLabel>{sectionTitle}</SectionLabel>
<CommunityChannelsList channels={channels} />
</React.Fragment>
))}
</div>
</Grid>
</Page>
</Container>
<Community headline={headline} subhead={subhead} sections={sections} />
</Layout>
);
};