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

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;