gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: convert function expressions to declarations (#4926)

Browse Source
This commit is contained in:
Vladislav Shkodin
2021-02-08 20:01:21 +02:00
committed by GitHub
parent c0236536dd
commit 141a2eba56
241 changed files with 3444 additions and 2933 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
website/src/cms/cms.js
View File

@ -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 => {

12
website/src/components/chat-button.js
View File

@ -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;

26
website/src/components/community-channels-list.js
View File

@ -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;

74
website/src/components/community.js
View File

@ -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;

8
website/src/components/docs-nav.js
View File

@ -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;

4
website/src/components/docsearch.js
View File

@ -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);

70
website/src/components/edit-link.js
View File

@ -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;

4
website/src/components/event-box.js
View File

@ -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;

29
website/src/components/features.js
View File

@ -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;

66
website/src/components/footer.js
View File

@ -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;

16
website/src/components/header.js
View File

@ -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;

24
website/src/components/home-section.js
View File

@ -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;

18
website/src/components/layout.js
View File

@ -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;

4
website/src/components/markdown.js
View File

@ -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;

6
website/src/components/markdownify.js
View File

@ -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;

12
website/src/components/notification.js
View File

@ -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;

4
website/src/components/notifications.js
View File

@ -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;

38
website/src/components/page-hero.js
View File

@ -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;

4
website/src/components/release.js
View File

@ -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;

30
website/src/components/sidebar-layout.js
View File

@ -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;

4
website/src/components/table-of-contents.js
View File

@ -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;

22
website/src/components/twitter-meta.js
View File

@ -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;

28
website/src/components/video-embed.js
View File

@ -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;

36
website/src/components/whats-new.js
View File

@ -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;

4
website/src/components/widget-doc.js
View File

@ -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;

8
website/src/components/widgets.js
View File

@ -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;

4
website/src/global-styles.js
View File

@ -91,6 +91,8 @@ const globalStyles = css`
}
`;
const GlobalStyles = () => <Global styles={globalStyles} />;
function GlobalStyles() {
return <Global styles={globalStyles} />;
}
export default GlobalStyles;

64
website/src/pages/blog.js
View File

@ -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;

4
website/src/pages/community.js
View File

@ -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 {

4
website/src/pages/index.js
View File

@ -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 {

40
website/src/templates/blog-post.js
View File

@ -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;

49
website/src/templates/doc-page.js
View File

@ -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!) {

4
website/src/utils.js
View File

@ -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;
}