refactor: convert function expressions to declarations (#4926)
This commit is contained in:
committed by
GitHub
parent
c0236536dd
commit
141a2eba56
@ -23,11 +23,13 @@ function getEmotionCache() {
|
||||
return emotionCache;
|
||||
}
|
||||
|
||||
const PreviewContainer = ({ children, highlight }) => (
|
||||
<CacheProvider value={getEmotionCache()}>
|
||||
<Layout>{highlight ? <Highlight>{children}</Highlight> : children}</Layout>
|
||||
</CacheProvider>
|
||||
);
|
||||
function PreviewContainer({ children, highlight }) {
|
||||
return (
|
||||
<CacheProvider value={getEmotionCache()}>
|
||||
<Layout>{highlight ? <Highlight>{children}</Highlight> : children}</Layout>
|
||||
</CacheProvider>
|
||||
);
|
||||
}
|
||||
|
||||
class Highlight extends React.Component {
|
||||
constructor(props) {
|
||||
@ -56,7 +58,7 @@ class Highlight extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
const BlogPostPreview = ({ entry, widgetFor }) => {
|
||||
function BlogPostPreview({ entry, widgetFor }) {
|
||||
const data = entry.get('data');
|
||||
return (
|
||||
<PreviewContainer highlight={true}>
|
||||
@ -68,56 +70,64 @@ const BlogPostPreview = ({ entry, widgetFor }) => {
|
||||
/>
|
||||
</PreviewContainer>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const CommunityPreview = ({ entry }) => {
|
||||
function CommunityPreview({ entry }) {
|
||||
const { title, headline, subhead, sections } = entry.get('data').toJS();
|
||||
return (
|
||||
<PreviewContainer>
|
||||
<Community title={title} headline={headline} subhead={subhead} sections={sections} />
|
||||
</PreviewContainer>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
const DocsPreview = ({ entry, widgetFor }) => (
|
||||
<PreviewContainer highlight={true}>
|
||||
<DocsTemplate title={entry.getIn(['data', 'title'])} body={widgetFor('body')} />
|
||||
</PreviewContainer>
|
||||
);
|
||||
function DocsPreview({ entry, widgetFor }) {
|
||||
return (
|
||||
<PreviewContainer highlight={true}>
|
||||
<DocsTemplate title={entry.getIn(['data', 'title'])} body={widgetFor('body')} />
|
||||
</PreviewContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const WidgetDocPreview = ({ entry, widgetFor }) => (
|
||||
<PreviewContainer highlight={true}>
|
||||
<WidgetDoc visible={true} label={entry.get('label')} body={widgetFor('body')} />
|
||||
</PreviewContainer>
|
||||
);
|
||||
function WidgetDocPreview({ entry, widgetFor }) {
|
||||
return (
|
||||
<PreviewContainer highlight={true}>
|
||||
<WidgetDoc visible={true} label={entry.get('label')} body={widgetFor('body')} />
|
||||
</PreviewContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const ReleasePreview = ({ entry }) => (
|
||||
<PreviewContainer highlight={true}>
|
||||
<WhatsNew
|
||||
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()}
|
||||
/>
|
||||
</PreviewContainer>
|
||||
);
|
||||
function ReleasePreview({ entry }) {
|
||||
return (
|
||||
<PreviewContainer highlight={true}>
|
||||
<WhatsNew
|
||||
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()}
|
||||
/>
|
||||
</PreviewContainer>
|
||||
);
|
||||
}
|
||||
|
||||
const NotificationPreview = ({ entry }) => (
|
||||
<PreviewContainer>
|
||||
{entry
|
||||
.getIn(['data', 'notifications'])
|
||||
.filter(notif => notif.get('published'))
|
||||
.map((notif, idx) => (
|
||||
<Notification key={idx} url={notif.get('url')} loud={notif.get('loud')}>
|
||||
{notif.get('message')}
|
||||
</Notification>
|
||||
))}
|
||||
</PreviewContainer>
|
||||
);
|
||||
function NotificationPreview({ entry }) {
|
||||
return (
|
||||
<PreviewContainer>
|
||||
{entry
|
||||
.getIn(['data', 'notifications'])
|
||||
.filter(notif => notif.get('published'))
|
||||
.map((notif, idx) => (
|
||||
<Notification key={idx} url={notif.get('url')} loud={notif.get('loud')}>
|
||||
{notif.get('message')}
|
||||
</Notification>
|
||||
))}
|
||||
</PreviewContainer>
|
||||
);
|
||||
}
|
||||
|
||||
CMS.registerPreviewTemplate('blog', BlogPostPreview);
|
||||
siteConfig.menu.docs.forEach(group => {
|
||||
|
@ -9,10 +9,12 @@ const ChatLink = styled.a`
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const ChatButton = () => (
|
||||
<ChatLink href="/chat" target="_blank" rel="noopener noreferrer">
|
||||
<img src="/img/slack.svg" />
|
||||
</ChatLink>
|
||||
);
|
||||
function ChatButton() {
|
||||
return (
|
||||
<ChatLink href="/chat" target="_blank" rel="noopener noreferrer">
|
||||
<img src="/img/slack.svg" />
|
||||
</ChatLink>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChatButton;
|
||||
|
@ -40,17 +40,19 @@ const StyledCommunityChannelsList = styled.ul`
|
||||
}
|
||||
`;
|
||||
|
||||
const CommunityChannelsList = ({ channels }) => (
|
||||
<StyledCommunityChannelsList>
|
||||
{channels.map(({ title, description, url }, idx) => (
|
||||
<li key={idx}>
|
||||
<a href={url} target="_blank" rel="noopener noreferrer">
|
||||
<strong>{title}</strong>
|
||||
<p>{description}</p>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</StyledCommunityChannelsList>
|
||||
);
|
||||
function CommunityChannelsList({ channels }) {
|
||||
return (
|
||||
<StyledCommunityChannelsList>
|
||||
{channels.map(({ title, description, url }, idx) => (
|
||||
<li key={idx}>
|
||||
<a href={url} target="_blank" rel="noopener noreferrer">
|
||||
<strong>{title}</strong>
|
||||
<p>{description}</p>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</StyledCommunityChannelsList>
|
||||
);
|
||||
}
|
||||
|
||||
export default CommunityChannelsList;
|
||||
|
@ -11,42 +11,44 @@ import Grid from './grid';
|
||||
import CommunityChannelsList from './community-channels-list';
|
||||
import theme from '../theme';
|
||||
|
||||
const Community = ({ headline, subhead, sections }) => (
|
||||
<>
|
||||
<PageHero>
|
||||
<div
|
||||
css={css`
|
||||
margin-bottom: 20px;
|
||||
`}
|
||||
>
|
||||
<HeroTitle>
|
||||
<Markdownify source={headline} />
|
||||
</HeroTitle>
|
||||
<Lead light>
|
||||
<Markdownify source={subhead} />
|
||||
</Lead>
|
||||
</div>
|
||||
</PageHero>
|
||||
function Community({ headline, subhead, sections }) {
|
||||
return (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
<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;
|
||||
|
@ -62,12 +62,12 @@ const NavLink = styled(Link)`
|
||||
}
|
||||
`;
|
||||
|
||||
const DocsNav = ({ items, location }) => {
|
||||
function DocsNav({ items, location }) {
|
||||
const [isMenuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
const toggleMenu = () => {
|
||||
function toggleMenu() {
|
||||
setMenuOpen(isOpen => !isOpen);
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
@ -94,7 +94,7 @@ const DocsNav = ({ items, location }) => {
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default DocsNav;
|
||||
|
||||
|
@ -26,7 +26,7 @@ const SearchField = styled.input`
|
||||
outline: 0;
|
||||
`;
|
||||
|
||||
const DocSearch = () => {
|
||||
function DocSearch() {
|
||||
const [enabled, setEnabled] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
@ -51,6 +51,6 @@ const DocSearch = () => {
|
||||
<SearchField type="search" placeholder="Search the docs" id="algolia-search" />
|
||||
</SearchForm>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default memo(DocSearch);
|
||||
|
@ -1,44 +1,46 @@
|
||||
import React from 'react';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
const EditLink = ({ collection, filename }) => (
|
||||
<div
|
||||
css={css`
|
||||
float: right;
|
||||
function EditLink({ collection, filename }) {
|
||||
return (
|
||||
<div
|
||||
css={css`
|
||||
float: right;
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
}
|
||||
a {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#pencil {
|
||||
fill: #7ca511;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<a href={`/admin/#/edit/${collection}/${filename}`} target="_blank" rel="noopener noreferrer">
|
||||
<svg
|
||||
version="1.1"
|
||||
id="pencil"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="14px"
|
||||
height="14px"
|
||||
viewBox="0 0 512 512"
|
||||
enableBackground="new 0 0 512 512"
|
||||
xmlSpace="preserve"
|
||||
>
|
||||
<path
|
||||
d="M398.875,248.875L172.578,475.187l-22.625-22.625L376.25,226.265L398.875,248.875z M308.375,158.39L82.063,384.687
|
||||
#pencil {
|
||||
fill: #7ca511;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<a href={`/admin/#/edit/${collection}/${filename}`} target="_blank" rel="noopener noreferrer">
|
||||
<svg
|
||||
version="1.1"
|
||||
id="pencil"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
width="14px"
|
||||
height="14px"
|
||||
viewBox="0 0 512 512"
|
||||
enableBackground="new 0 0 512 512"
|
||||
xmlSpace="preserve"
|
||||
>
|
||||
<path
|
||||
d="M398.875,248.875L172.578,475.187l-22.625-22.625L376.25,226.265L398.875,248.875z M308.375,158.39L82.063,384.687
|
||||
l45.266,45.25L353.625,203.64L308.375,158.39z M263.094,113.125L36.828,339.437l22.625,22.625L285.75,135.765L263.094,113.125z
|
||||
M308.375,67.875L285.719,90.5L421.5,226.265l22.625-22.625L308.375,67.875z M376.25,0L331,45.25l135.75,135.766L512,135.781
|
||||
L376.25,0z M32,453.5V480h26.5L32,453.5 M0,376.25L135.766,512H0V376.25L0,376.25z"
|
||||
/>
|
||||
</svg>{' '}
|
||||
Edit this page
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
/>
|
||||
</svg>{' '}
|
||||
Edit this page
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditLink;
|
||||
|
@ -64,7 +64,7 @@ const CalDates = styled.p`
|
||||
|
||||
const CalCta = styled.div``;
|
||||
|
||||
const EventBox = ({ title, cta }) => {
|
||||
function EventBox({ title, cta }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [eventDate, setEventDate] = useState('');
|
||||
|
||||
@ -121,6 +121,6 @@ const EventBox = ({ title, cta }) => {
|
||||
</CalCta>
|
||||
</Root>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default EventBox;
|
||||
|
@ -25,19 +25,22 @@ const Text = styled.p`
|
||||
}
|
||||
`;
|
||||
|
||||
const FeatureItem = ({ feature, description, imgpath, kind }) => (
|
||||
<Box>
|
||||
{imgpath && <img src={require(`../img/${imgpath}`)} alt="" />}
|
||||
<Title kind={kind}>
|
||||
<Markdownify source={feature} />
|
||||
</Title>
|
||||
<Text>
|
||||
<Markdownify source={description} />
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
function FeatureItem({ feature, description, imgpath, kind }) {
|
||||
return (
|
||||
<Box>
|
||||
{imgpath && <img src={require(`../img/${imgpath}`)} alt="" />}
|
||||
<Title kind={kind}>
|
||||
<Markdownify source={feature} />
|
||||
</Title>
|
||||
<Text>
|
||||
<Markdownify source={description} />
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const Features = ({ items, kind }) =>
|
||||
items.map(item => <FeatureItem kind={kind} {...item} key={item.feature} />);
|
||||
function Features({ items, kind }) {
|
||||
return items.map(item => <FeatureItem kind={kind} {...item} key={item.feature} />);
|
||||
}
|
||||
|
||||
export default Features;
|
||||
|
@ -60,37 +60,39 @@ const Info = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const Footer = ({ buttons }) => (
|
||||
<Root>
|
||||
<Container>
|
||||
<FooterGrid>
|
||||
<FooterButtons>
|
||||
{buttons.map(btn => (
|
||||
<SocialButton href={btn.url} key={btn.url}>
|
||||
{btn.name}
|
||||
</SocialButton>
|
||||
))}
|
||||
</FooterButtons>
|
||||
<Info>
|
||||
<p>
|
||||
<a
|
||||
href="https://github.com/netlify/netlify-cms/blob/master/LICENSE"
|
||||
className="text-link"
|
||||
>
|
||||
Distributed under MIT License
|
||||
</a>{' '}
|
||||
·{' '}
|
||||
<a
|
||||
href="https://github.com/netlify/netlify-cms/blob/master/CODE_OF_CONDUCT.md"
|
||||
className="text-link"
|
||||
>
|
||||
Code of Conduct
|
||||
</a>
|
||||
</p>
|
||||
</Info>
|
||||
</FooterGrid>
|
||||
</Container>
|
||||
</Root>
|
||||
);
|
||||
function Footer({ buttons }) {
|
||||
return (
|
||||
<Root>
|
||||
<Container>
|
||||
<FooterGrid>
|
||||
<FooterButtons>
|
||||
{buttons.map(btn => (
|
||||
<SocialButton href={btn.url} key={btn.url}>
|
||||
{btn.name}
|
||||
</SocialButton>
|
||||
))}
|
||||
</FooterButtons>
|
||||
<Info>
|
||||
<p>
|
||||
<a
|
||||
href="https://github.com/netlify/netlify-cms/blob/master/LICENSE"
|
||||
className="text-link"
|
||||
>
|
||||
Distributed under MIT License
|
||||
</a>{' '}
|
||||
·{' '}
|
||||
<a
|
||||
href="https://github.com/netlify/netlify-cms/blob/master/CODE_OF_CONDUCT.md"
|
||||
className="text-link"
|
||||
>
|
||||
Code of Conduct
|
||||
</a>
|
||||
</p>
|
||||
</Info>
|
||||
</FooterGrid>
|
||||
</Container>
|
||||
</Root>
|
||||
);
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
|
@ -145,7 +145,7 @@ const NOTIFS_QUERY = graphql`
|
||||
}
|
||||
`;
|
||||
|
||||
const Header = ({ hasHeroBelow }) => {
|
||||
function Header({ hasHeroBelow }) {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [isNavOpen, setNavOpen] = useState(false);
|
||||
const [isSearchOpen, setSearchOpen] = useState(false);
|
||||
@ -159,23 +159,23 @@ const Header = ({ hasHeroBelow }) => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleScroll = () => {
|
||||
function handleScroll() {
|
||||
const currentWindowPos = document.documentElement.scrollTop || document.body.scrollTop;
|
||||
|
||||
const scrolled = currentWindowPos > 0;
|
||||
|
||||
setScrolled(scrolled);
|
||||
};
|
||||
}
|
||||
|
||||
const handleMenuBtnClick = () => {
|
||||
function handleMenuBtnClick() {
|
||||
setNavOpen(s => !s);
|
||||
setSearchOpen(false);
|
||||
};
|
||||
}
|
||||
|
||||
const handleSearchBtnClick = () => {
|
||||
function handleSearchBtnClick() {
|
||||
setSearchOpen(s => !s);
|
||||
setNavOpen(false);
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<StaticQuery query={NOTIFS_QUERY}>
|
||||
@ -241,6 +241,6 @@ const Header = ({ hasHeroBelow }) => {
|
||||
}}
|
||||
</StaticQuery>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Header;
|
||||
|
@ -21,16 +21,18 @@ const Text = styled.div`
|
||||
margin: 0 auto;
|
||||
`;
|
||||
|
||||
const HomeSection = ({ title, text, children, ...props }) => (
|
||||
<Page as="section" {...props}>
|
||||
<Container>
|
||||
<Header>
|
||||
<Title>{title}</Title>
|
||||
{text && <Text>{text}</Text>}
|
||||
</Header>
|
||||
{children}
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
function HomeSection({ title, text, children, ...props }) {
|
||||
return (
|
||||
<Page as="section" {...props}>
|
||||
<Container>
|
||||
<Header>
|
||||
<Title>{title}</Title>
|
||||
{text && <Text>{text}</Text>}
|
||||
</Header>
|
||||
{children}
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomeSection;
|
||||
|
@ -28,14 +28,16 @@ const LAYOUT_QUERY = graphql`
|
||||
}
|
||||
`;
|
||||
|
||||
export const LayoutTemplate = ({ children }) => (
|
||||
<ThemeProvider theme={theme}>
|
||||
<GlobalStyles />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
export function LayoutTemplate({ children }) {
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<GlobalStyles />
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const Layout = ({ hasPageHero, children }) => {
|
||||
function Layout({ hasPageHero, children }) {
|
||||
return (
|
||||
<StaticQuery query={LAYOUT_QUERY}>
|
||||
{data => {
|
||||
@ -63,6 +65,6 @@ const Layout = ({ hasPageHero, children }) => {
|
||||
}}
|
||||
</StaticQuery>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Layout;
|
||||
|
@ -125,11 +125,11 @@ const StyledMarkdown = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const Markdown = ({ body, html }) => {
|
||||
function Markdown({ body, html }) {
|
||||
if (body) {
|
||||
return <StyledMarkdown>{body}</StyledMarkdown>;
|
||||
}
|
||||
return <StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />;
|
||||
};
|
||||
}
|
||||
|
||||
export default Markdown;
|
||||
|
@ -1,8 +1,8 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import Markdown from 'react-markdown';
|
||||
|
||||
const Markdownify = ({ source }) => (
|
||||
<Markdown renderers={{ root: Fragment, paragraph: Fragment }}>{source}</Markdown>
|
||||
);
|
||||
function Markdownify({ source }) {
|
||||
return <Markdown renderers={{ root: Fragment, paragraph: Fragment }}>{source}</Markdown>;
|
||||
}
|
||||
|
||||
export default Markdownify;
|
||||
|
@ -38,10 +38,12 @@ const Notif = styled.a`
|
||||
}
|
||||
`;
|
||||
|
||||
const Notification = ({ url, loud, children }) => (
|
||||
<Notif href={url} loud={loud} target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</Notif>
|
||||
);
|
||||
function Notification({ url, loud, children }) {
|
||||
return (
|
||||
<Notif href={url} loud={loud} target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</Notif>
|
||||
);
|
||||
}
|
||||
|
||||
export default Notification;
|
||||
|
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
import Notification from './notification';
|
||||
|
||||
const Notifications = ({ notifications }) => {
|
||||
function Notifications({ notifications }) {
|
||||
return notifications.map((node, i) => (
|
||||
<Notification key={i} url={node.url} loud={node.loud}>
|
||||
{node.message}
|
||||
</Notification>
|
||||
));
|
||||
};
|
||||
}
|
||||
|
||||
export default Notifications;
|
||||
|
@ -6,24 +6,26 @@ import Container from './container';
|
||||
import theme from '../theme';
|
||||
import { mq } from '../utils';
|
||||
|
||||
const PageHero = ({ children }) => (
|
||||
<section
|
||||
css={css`
|
||||
background: ${theme.colors.darkerGray};
|
||||
background-image: linear-gradient(to bottom, #2a2c24 0%, ${theme.colors.darkerGray} 20%);
|
||||
color: ${theme.colors.blueGray};
|
||||
position: relative;
|
||||
padding-top: ${theme.space[6]};
|
||||
padding-bottom: ${theme.space[6]};
|
||||
|
||||
${mq[3]} {
|
||||
function PageHero({ children }) {
|
||||
return (
|
||||
<section
|
||||
css={css`
|
||||
background: ${theme.colors.darkerGray};
|
||||
background-image: linear-gradient(to bottom, #2a2c24 0%, ${theme.colors.darkerGray} 20%);
|
||||
color: ${theme.colors.blueGray};
|
||||
position: relative;
|
||||
padding-top: ${theme.space[6]};
|
||||
padding-bottom: ${theme.space[8]};
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Container>{children}</Container>
|
||||
</section>
|
||||
);
|
||||
padding-bottom: ${theme.space[6]};
|
||||
|
||||
${mq[3]} {
|
||||
padding-top: ${theme.space[6]};
|
||||
padding-bottom: ${theme.space[8]};
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Container>{children}</Container>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default PageHero;
|
||||
|
@ -27,7 +27,7 @@ const Version = styled.span`
|
||||
color: ${theme.colors.gray};
|
||||
`;
|
||||
|
||||
const Release = ({ version, versionPrevious, date, description, url }) => {
|
||||
function Release({ version, versionPrevious, date, description, url }) {
|
||||
const displayDate = moment(date).format('MMMM D, YYYY');
|
||||
const defaultUrl = `https://github.com/netlify/netlify-cms/compare/netlify-cms@${versionPrevious}...netlify-cms@${version}`;
|
||||
|
||||
@ -63,6 +63,6 @@ const Release = ({ version, versionPrevious, date, description, url }) => {
|
||||
</ReleaseLink>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Release;
|
||||
|
@ -10,19 +10,21 @@ const Children = styled.div`
|
||||
padding-left: 2rem;
|
||||
`;
|
||||
|
||||
const SidebarLayout = ({ sidebar, children }) => (
|
||||
<Page
|
||||
css={css`
|
||||
${mq[1]} {
|
||||
display: grid;
|
||||
grid-template-columns: ${sidebar ? '300px' : ''} minmax(0, 1fr);
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
`}
|
||||
>
|
||||
{sidebar && <div>{sidebar}</div>}
|
||||
<Children>{children}</Children>
|
||||
</Page>
|
||||
);
|
||||
function SidebarLayout({ sidebar, children }) {
|
||||
return (
|
||||
<Page
|
||||
css={css`
|
||||
${mq[1]} {
|
||||
display: grid;
|
||||
grid-template-columns: ${sidebar ? '300px' : ''} minmax(0, 1fr);
|
||||
grid-gap: 2rem;
|
||||
}
|
||||
`}
|
||||
>
|
||||
{sidebar && <div>{sidebar}</div>}
|
||||
<Children>{children}</Children>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
export default SidebarLayout;
|
||||
|
@ -29,7 +29,7 @@ const TocLink = styled.a`
|
||||
*
|
||||
* https://github.com/gatsbyjs/gatsby/issues/5436
|
||||
*/
|
||||
const TableOfContents = () => {
|
||||
function TableOfContents() {
|
||||
const [headings, setHeadings] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
@ -57,6 +57,6 @@ const TableOfContents = () => {
|
||||
</TocList>
|
||||
)
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default TableOfContents;
|
||||
|
@ -1,15 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Helmet } from 'react-helmet';
|
||||
|
||||
const TwitterMeta = ({ title, description, image, imageAlt }) => (
|
||||
<Helmet>
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@netlifycms" />
|
||||
{title && <meta name="twitter:title" content={title} />}
|
||||
{description && <meta name="twitter:description" content={description} />}
|
||||
{image && <meta name="twitter:image" content={image} />}
|
||||
{image && imageAlt && <meta name="twitter:image:alt" content={imageAlt} />}
|
||||
</Helmet>
|
||||
);
|
||||
function TwitterMeta({ title, description, image, imageAlt }) {
|
||||
return (
|
||||
<Helmet>
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@netlifycms" />
|
||||
{title && <meta name="twitter:title" content={title} />}
|
||||
{description && <meta name="twitter:description" content={description} />}
|
||||
{image && <meta name="twitter:image" content={image} />}
|
||||
{image && imageAlt && <meta name="twitter:image:alt" content={imageAlt} />}
|
||||
</Helmet>
|
||||
);
|
||||
}
|
||||
|
||||
export default TwitterMeta;
|
||||
|
@ -64,20 +64,24 @@ const VideoButton = styled.div`
|
||||
* We should be able to import complete inline svg's rather than base64, this
|
||||
* component is a stopgap for now. Source in '../img/play.svg'.
|
||||
*/
|
||||
const PlayIcon = ({ className }) => (
|
||||
<svg className={className} viewBox="0 0 43 44">
|
||||
<path
|
||||
d="M41.5156904,23.7808694 L2.91022212,43.5125531 C1.92667513,44.0152549 0.721832431,43.6254529 0.219130636,42.6419059 C0.07510106,42.3601089 -3.51395713e-15,42.048155 -3.55271368e-15,41.7316838 L-1.77635684e-15,2.26831623 C-2.40215499e-15,1.16374673 0.8954305,0.268316226 2,0.268316226 C2.31647127,0.268316226 2.62842512,0.343417285 2.91022212,0.487446861 L41.5156904,20.2191306 C42.4992374,20.7218324 42.8890394,21.9266751 42.3863376,22.9102221 C42.1949001,23.2847739 41.8902421,23.5894318 41.5156904,23.7808694 Z"
|
||||
id="Triangle"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
function PlayIcon({ className }) {
|
||||
return (
|
||||
<svg className={className} viewBox="0 0 43 44">
|
||||
<path
|
||||
d="M41.5156904,23.7808694 L2.91022212,43.5125531 C1.92667513,44.0152549 0.721832431,43.6254529 0.219130636,42.6419059 C0.07510106,42.3601089 -3.51395713e-15,42.048155 -3.55271368e-15,41.7316838 L-1.77635684e-15,2.26831623 C-2.40215499e-15,1.16374673 0.8954305,0.268316226 2,0.268316226 C2.31647127,0.268316226 2.62842512,0.343417285 2.91022212,0.487446861 L41.5156904,20.2191306 C42.4992374,20.7218324 42.8890394,21.9266751 42.3863376,22.9102221 C42.1949001,23.2847739 41.8902421,23.5894318 41.5156904,23.7808694 Z"
|
||||
id="Triangle"
|
||||
fillRule="nonzero"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const VideoEmbed = () => {
|
||||
function VideoEmbed() {
|
||||
const [toggled, setToggled] = useState(false);
|
||||
|
||||
const toggleVideo = () => setToggled(true);
|
||||
function toggleVideo() {
|
||||
return setToggled(true);
|
||||
}
|
||||
|
||||
const embedcode = (
|
||||
<iframe
|
||||
@ -103,6 +107,6 @@ const VideoEmbed = () => {
|
||||
)}
|
||||
</VideoLink>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default VideoEmbed;
|
||||
|
@ -6,22 +6,24 @@ import Release from './release';
|
||||
import Grid from './grid';
|
||||
import theme from '../theme';
|
||||
|
||||
const WhatsNew = ({ updates }) => (
|
||||
<section
|
||||
css={css`
|
||||
background: ${theme.colors.lightishGray};
|
||||
padding-top: ${theme.space[6]};
|
||||
padding-bottom: ${theme.space[5]};
|
||||
`}
|
||||
>
|
||||
<Container>
|
||||
<Grid as="ol" cols={3}>
|
||||
{updates.slice(0, 3).map((item, idx) => (
|
||||
<Release {...item} versionPrevious={updates[idx + 1].version} key={item.version} />
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
function WhatsNew({ updates }) {
|
||||
return (
|
||||
<section
|
||||
css={css`
|
||||
background: ${theme.colors.lightishGray};
|
||||
padding-top: ${theme.space[6]};
|
||||
padding-bottom: ${theme.space[5]};
|
||||
`}
|
||||
>
|
||||
<Container>
|
||||
<Grid as="ol" cols={3}>
|
||||
{updates.slice(0, 3).map((item, idx) => (
|
||||
<Release {...item} versionPrevious={updates[idx + 1].version} key={item.version} />
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default WhatsNew;
|
||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
||||
|
||||
import Markdown from './markdown';
|
||||
|
||||
const WidgetDoc = ({ visible, label, body, html }) => {
|
||||
function WidgetDoc({ visible, label, body, html }) {
|
||||
if (!visible) {
|
||||
return null;
|
||||
}
|
||||
@ -13,6 +13,6 @@ const WidgetDoc = ({ visible, label, body, html }) => {
|
||||
<Markdown html={html} body={body} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default WidgetDoc;
|
||||
|
@ -21,7 +21,7 @@ const WidgetsContent = styled.div`
|
||||
border-radius: 4px;
|
||||
`;
|
||||
|
||||
const Widgets = ({ widgets, location }) => {
|
||||
function Widgets({ widgets, location }) {
|
||||
const initialLoadRef = useRef(true);
|
||||
const navRef = useRef(null);
|
||||
const [currentWidget, setWidget] = useState(null);
|
||||
@ -42,13 +42,13 @@ const Widgets = ({ widgets, location }) => {
|
||||
initialLoadRef.current = false;
|
||||
}, [widgets, location.hash]);
|
||||
|
||||
const handleWidgetChange = (event, title) => {
|
||||
function handleWidgetChange(event, title) {
|
||||
event.preventDefault();
|
||||
|
||||
setWidget(title);
|
||||
|
||||
window.history.pushState(null, null, `#${title}`);
|
||||
};
|
||||
}
|
||||
|
||||
return (
|
||||
<section>
|
||||
@ -77,6 +77,6 @@ const Widgets = ({ widgets, location }) => {
|
||||
</WidgetsContent>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default Widgets;
|
||||
|
@ -91,6 +91,8 @@ const globalStyles = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const GlobalStyles = () => <Global styles={globalStyles} />;
|
||||
function GlobalStyles() {
|
||||
return <Global styles={globalStyles} />;
|
||||
}
|
||||
|
||||
export default GlobalStyles;
|
||||
|
@ -11,40 +11,42 @@ import Lead from '../components/lead';
|
||||
|
||||
import theme from '../theme';
|
||||
|
||||
const Blog = ({ data }) => (
|
||||
<Layout>
|
||||
<Helmet>
|
||||
<title>Blog</title>
|
||||
<meta name="description" content="Recent news and updates about Netlify CMS." />
|
||||
</Helmet>
|
||||
<Page>
|
||||
<Container size="sm">
|
||||
<h1>Netlify CMS Blog</h1>
|
||||
{data.allMarkdownRemark.edges.map(({ node }) => (
|
||||
<article
|
||||
key={node.id}
|
||||
css={css`
|
||||
margin-bottom: ${theme.space[5]};
|
||||
`}
|
||||
>
|
||||
<h2
|
||||
function Blog({ data }) {
|
||||
return (
|
||||
<Layout>
|
||||
<Helmet>
|
||||
<title>Blog</title>
|
||||
<meta name="description" content="Recent news and updates about Netlify CMS." />
|
||||
</Helmet>
|
||||
<Page>
|
||||
<Container size="sm">
|
||||
<h1>Netlify CMS Blog</h1>
|
||||
{data.allMarkdownRemark.edges.map(({ node }) => (
|
||||
<article
|
||||
key={node.id}
|
||||
css={css`
|
||||
margin-bottom: 0;
|
||||
margin-bottom: ${theme.space[5]};
|
||||
`}
|
||||
>
|
||||
<Link to={node.fields.slug}>{node.frontmatter.title}</Link>
|
||||
</h2>
|
||||
<MetaInfo>
|
||||
by {node.frontmatter.author} on {node.frontmatter.date}
|
||||
</MetaInfo>
|
||||
<Lead>{node.frontmatter.description}</Lead>
|
||||
</article>
|
||||
))}
|
||||
{/* TODO: pagination */}
|
||||
</Container>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
<h2
|
||||
css={css`
|
||||
margin-bottom: 0;
|
||||
`}
|
||||
>
|
||||
<Link to={node.fields.slug}>{node.frontmatter.title}</Link>
|
||||
</h2>
|
||||
<MetaInfo>
|
||||
by {node.frontmatter.author} on {node.frontmatter.date}
|
||||
</MetaInfo>
|
||||
<Lead>{node.frontmatter.description}</Lead>
|
||||
</article>
|
||||
))}
|
||||
{/* TODO: pagination */}
|
||||
</Container>
|
||||
</Page>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Blog;
|
||||
|
||||
|
@ -5,7 +5,7 @@ import { graphql } from 'gatsby';
|
||||
import Layout from '../components/layout';
|
||||
import Community from '../components/community';
|
||||
|
||||
const CommunityPage = ({ data }) => {
|
||||
function CommunityPage({ data }) {
|
||||
const { title, headline, subhead, sections } = data.markdownRemark.frontmatter;
|
||||
|
||||
return (
|
||||
@ -14,7 +14,7 @@ const CommunityPage = ({ data }) => {
|
||||
<Community headline={headline} subhead={subhead} sections={sections} />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query communityPage {
|
||||
|
@ -65,7 +65,7 @@ const ContribList = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const HomePage = ({ data }) => {
|
||||
function HomePage({ data }) {
|
||||
const landing = data.landing.childDataYaml;
|
||||
const updates = data.updates.childDataYaml;
|
||||
const contribs = data.contribs.childDataJson;
|
||||
@ -182,7 +182,7 @@ const HomePage = ({ data }) => {
|
||||
</HomeSection>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query homeQuery {
|
||||
|
@ -11,25 +11,27 @@ import Markdown from '../components/markdown';
|
||||
import MetaInfo from '../components/meta-info';
|
||||
import Page from '../components/page';
|
||||
|
||||
export const BlogPostTemplate = ({ title, author, date, body, html }) => (
|
||||
<Container size="sm">
|
||||
<Page as="article">
|
||||
<h1
|
||||
css={css`
|
||||
margin-bottom: 0;
|
||||
`}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<MetaInfo>
|
||||
by {author} on {date}
|
||||
</MetaInfo>
|
||||
<Markdown body={body} html={html} />
|
||||
</Page>
|
||||
</Container>
|
||||
);
|
||||
export function BlogPostTemplate({ title, author, date, body, html }) {
|
||||
return (
|
||||
<Container size="sm">
|
||||
<Page as="article">
|
||||
<h1
|
||||
css={css`
|
||||
margin-bottom: 0;
|
||||
`}
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
<MetaInfo>
|
||||
by {author} on {date}
|
||||
</MetaInfo>
|
||||
<Markdown body={body} html={html} />
|
||||
</Page>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const BlogPost = ({ data }) => {
|
||||
function BlogPost({ data }) {
|
||||
const { html, frontmatter } = data.markdownRemark;
|
||||
const {
|
||||
author,
|
||||
@ -57,7 +59,7 @@ const BlogPost = ({ data }) => {
|
||||
<BlogPostTemplate title={title} author={author} date={date} html={html} />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default BlogPost;
|
||||
|
||||
|
@ -18,19 +18,22 @@ function filenameFromPath(p) {
|
||||
.split('.')[0];
|
||||
}
|
||||
|
||||
const toMenu = (menu, nav) =>
|
||||
menu.map(group => ({
|
||||
function toMenu(menu, nav) {
|
||||
return menu.map(group => ({
|
||||
title: group.title,
|
||||
group: nav.group.find(g => g.fieldValue === group.name),
|
||||
}));
|
||||
}
|
||||
|
||||
const DocsSidebar = ({ docsNav, location }) => (
|
||||
<aside>
|
||||
<DocsNav items={docsNav} location={location} />
|
||||
</aside>
|
||||
);
|
||||
function DocsSidebar({ docsNav, location }) {
|
||||
return (
|
||||
<aside>
|
||||
<DocsNav items={docsNav} location={location} />
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
export const DocsTemplate = ({
|
||||
export function DocsTemplate({
|
||||
title,
|
||||
filename,
|
||||
body,
|
||||
@ -41,20 +44,22 @@ export const DocsTemplate = ({
|
||||
docsNav,
|
||||
location,
|
||||
group,
|
||||
}) => (
|
||||
<Container size="md">
|
||||
<SidebarLayout sidebar={showSidebar && <DocsSidebar docsNav={docsNav} location={location} />}>
|
||||
<article data-docs-content>
|
||||
{filename && <EditLink collection={`docs_${group}`} filename={filename} />}
|
||||
<h1>{title}</h1>
|
||||
<Markdown body={body} html={html} />
|
||||
{showWidgets && <Widgets widgets={widgets} location={location} />}
|
||||
</article>
|
||||
</SidebarLayout>
|
||||
</Container>
|
||||
);
|
||||
}) {
|
||||
return (
|
||||
<Container size="md">
|
||||
<SidebarLayout sidebar={showSidebar && <DocsSidebar docsNav={docsNav} location={location} />}>
|
||||
<article data-docs-content>
|
||||
{filename && <EditLink collection={`docs_${group}`} filename={filename} />}
|
||||
<h1>{title}</h1>
|
||||
<Markdown body={body} html={html} />
|
||||
{showWidgets && <Widgets widgets={widgets} location={location} />}
|
||||
</article>
|
||||
</SidebarLayout>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const DocPage = ({ data, location }) => {
|
||||
function DocPage({ data, location }) {
|
||||
const {
|
||||
nav,
|
||||
page: { frontmatter, html, fields },
|
||||
@ -83,7 +88,7 @@ const DocPage = ({ data, location }) => {
|
||||
/>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query docPage($slug: String!) {
|
||||
|
@ -2,4 +2,6 @@ import theme from './theme';
|
||||
|
||||
export const mq = theme.breakpoints.map(bp => `@media (min-width: ${bp}px)`);
|
||||
|
||||
export const themeGet = (key, initial) => props => props.theme[key] || initial;
|
||||
export function themeGet(key, initial) {
|
||||
return props => props.theme[key] || initial;
|
||||
}
|
||||
|
Reference in New Issue
Block a user