mirror of
https://github.com/strapi/strapi.git
synced 2025-10-31 01:47:13 +00:00
wip home page
This commit is contained in:
ronronscelestes
parent
b6ab5e58e4
commit
487bb82cb1
@ -1,48 +0,0 @@
|
|||||||
import React, { memo } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { LoadingBar } from '@strapi/helper-plugin';
|
|
||||||
|
|
||||||
const BlogPost = ({ error, isFirst, isLoading, title, content, link }) => {
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<LoadingBar style={{ marginBottom: 13 }} />
|
|
||||||
<LoadingBar style={{ width: '40%', marginBottom: 31 }} />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<a
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
target="_blank"
|
|
||||||
href={`https://strapi.io/blog/${link}`}
|
|
||||||
style={{ color: '#333740' }}
|
|
||||||
>
|
|
||||||
<h2>{title}</h2>
|
|
||||||
<p style={{ marginTop: 17, marginBottom: isFirst ? 32 : 10 }}>{content}</p>
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
BlogPost.defaultProps = {
|
|
||||||
content: null,
|
|
||||||
isFirst: false,
|
|
||||||
link: null,
|
|
||||||
title: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
BlogPost.propTypes = {
|
|
||||||
content: PropTypes.string,
|
|
||||||
error: PropTypes.bool.isRequired,
|
|
||||||
isFirst: PropTypes.bool,
|
|
||||||
isLoading: PropTypes.bool.isRequired,
|
|
||||||
link: PropTypes.string,
|
|
||||||
title: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(BlogPost);
|
|
||||||
49
packages/core/admin/admin/src/pages/HomePage/ContentBlock.js
Normal file
49
packages/core/admin/admin/src/pages/HomePage/ContentBlock.js
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { Row } from '@strapi/parts/Row';
|
||||||
|
import { Stack } from '@strapi/parts/Stack';
|
||||||
|
import { Text, TextButton } from '@strapi/parts/Text';
|
||||||
|
|
||||||
|
const IconWrapper = styled(Row)`
|
||||||
|
margin-right: ${({ theme }) => theme.spaces[6]};
|
||||||
|
svg {
|
||||||
|
width: ${32 / 16}rem;
|
||||||
|
height: ${32 / 16}rem;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
|
||||||
|
return (
|
||||||
|
<Row background="neutral0" shadow="tableShadow" hasRadius padding={6}>
|
||||||
|
<IconWrapper background={iconBackground} hasRadius padding={3}>
|
||||||
|
{icon}
|
||||||
|
</IconWrapper>
|
||||||
|
<Stack size={endAction ? '' : 1}>
|
||||||
|
<Row>
|
||||||
|
<TextButton>{title}</TextButton>
|
||||||
|
{endAction}
|
||||||
|
</Row>
|
||||||
|
<Text textColor="neutral600">{subtitle}</Text>
|
||||||
|
</Stack>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ContentBox.defaultProps = {
|
||||||
|
title: undefined,
|
||||||
|
subtitle: undefined,
|
||||||
|
icon: undefined,
|
||||||
|
iconBackground: undefined,
|
||||||
|
endAction: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
ContentBox.propTypes = {
|
||||||
|
title: PropTypes.string,
|
||||||
|
subtitle: PropTypes.string,
|
||||||
|
icon: PropTypes.node,
|
||||||
|
iconBackground: PropTypes.string,
|
||||||
|
endAction: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContentBox;
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { Stack } from '@strapi/parts/Stack';
|
||||||
|
import ReadDoc from '@strapi/icons/ReadDoc';
|
||||||
|
import CodeExample from '@strapi/icons/CodeExample';
|
||||||
|
import Tutorial from '@strapi/icons/Tutorial';
|
||||||
|
import Blog from '@strapi/icons/Blog';
|
||||||
|
import ContentBlock from './ContentBlock';
|
||||||
|
|
||||||
|
const BlockLink = styled.a`
|
||||||
|
text-decoration: none;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ContentBlocks = () => {
|
||||||
|
return (
|
||||||
|
<Stack size={5}>
|
||||||
|
<BlockLink href="https://strapi.io/blog">
|
||||||
|
<ContentBlock
|
||||||
|
title="Read the documentation"
|
||||||
|
subtitle="Discover the concepts, reference, guides and tutorials"
|
||||||
|
icon={<ReadDoc />}
|
||||||
|
iconBackground="primary100"
|
||||||
|
/>
|
||||||
|
</BlockLink>
|
||||||
|
<BlockLink href="https://strapi.io/blog">
|
||||||
|
<ContentBlock
|
||||||
|
title="Code example"
|
||||||
|
subtitle="Learn by testing real project developed by the community"
|
||||||
|
icon={<CodeExample />}
|
||||||
|
iconBackground="warning100"
|
||||||
|
/>
|
||||||
|
</BlockLink>
|
||||||
|
<BlockLink href="https://strapi.io/blog">
|
||||||
|
<ContentBlock
|
||||||
|
title="Tutorial"
|
||||||
|
subtitle="Discover the concepts, reference, guides and tutorials"
|
||||||
|
icon={<Tutorial />}
|
||||||
|
iconBackground="secondary100"
|
||||||
|
/>
|
||||||
|
</BlockLink>
|
||||||
|
<BlockLink href="https://strapi.io/blog">
|
||||||
|
<ContentBlock
|
||||||
|
title="Blog"
|
||||||
|
subtitle="Discover the concepts, reference, guides and tutorials"
|
||||||
|
icon={<Blog />}
|
||||||
|
iconBackground="alternative100"
|
||||||
|
/>
|
||||||
|
</BlockLink>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContentBlocks;
|
||||||
76
packages/core/admin/admin/src/pages/HomePage/HomeHeader.js
Normal file
76
packages/core/admin/admin/src/pages/HomePage/HomeHeader.js
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { useIntl } from 'react-intl';
|
||||||
|
import { Subtitle, H1 } from '@strapi/parts/Text';
|
||||||
|
import { Link } from '@strapi/parts/Link';
|
||||||
|
import { Stack } from '@strapi/parts/Stack';
|
||||||
|
import { Box } from '@strapi/parts/Box';
|
||||||
|
import { Button } from '@strapi/parts/Button';
|
||||||
|
import NextIcon from '@strapi/icons/NextIcon';
|
||||||
|
|
||||||
|
const WordWrap = styled(Subtitle)`
|
||||||
|
word-break: break-word;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const StackCustom = styled(Stack)`
|
||||||
|
align-items: flex-start;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const HomeHeader = ({ hasCreatedContentType, id, onCreateCT }) => {
|
||||||
|
const { formatMessage } = useIntl();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box paddingLeft={6} paddingBottom={10}>
|
||||||
|
<StackCustom size={5}>
|
||||||
|
<H1 id={id}>
|
||||||
|
{hasCreatedContentType
|
||||||
|
? formatMessage({
|
||||||
|
id: 'app.components.HomePage.welcome.again',
|
||||||
|
defaultMessage: 'Welcome 👋',
|
||||||
|
})
|
||||||
|
: formatMessage({
|
||||||
|
id: 'app.components.HomePage.welcome',
|
||||||
|
defaultMessage: 'Welcome on board!',
|
||||||
|
})}
|
||||||
|
</H1>
|
||||||
|
<WordWrap textColor="neutral600">
|
||||||
|
{hasCreatedContentType
|
||||||
|
? formatMessage({
|
||||||
|
id: 'app.components.HomePage.welcomeBlock.content.again',
|
||||||
|
defaultMessage:
|
||||||
|
'We hope you are making progress on your project! Feel free to read the latest news about Strapi. We are giving our best to improve the product based on your feedback.',
|
||||||
|
})
|
||||||
|
: formatMessage({
|
||||||
|
id: 'app.components.HomePage.welcomeBlock.content',
|
||||||
|
defaultMessage:
|
||||||
|
'Congrats! You are logged as the first administrator. To discover the powerful features provided by Strapi, we recommend you to create your first Content type!',
|
||||||
|
})}
|
||||||
|
</WordWrap>
|
||||||
|
{hasCreatedContentType ? (
|
||||||
|
<Link href="https://strapi.io/blog">see more on the blog</Link>
|
||||||
|
) : (
|
||||||
|
<Button onClick={onCreateCT} endIcon={<NextIcon />}>
|
||||||
|
Create your first Content type
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</StackCustom>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
HomeHeader.defaultProps = {
|
||||||
|
hasCreatedContentType: undefined,
|
||||||
|
id: undefined,
|
||||||
|
onCreateCT: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
HomeHeader.propTypes = {
|
||||||
|
hasCreatedContentType: PropTypes.bool,
|
||||||
|
id: PropTypes.string,
|
||||||
|
onCreateCT: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomeHeader;
|
||||||
@ -1,54 +0,0 @@
|
|||||||
/**
|
|
||||||
*
|
|
||||||
* SocialLink
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, { memo } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
import Gh from '../../assets/images/social_gh.png';
|
|
||||||
import Slack from '../../assets/images/social_slack.png';
|
|
||||||
import Medium from '../../assets/images/social_medium.png';
|
|
||||||
import Twitter from '../../assets/images/social_twitter.png';
|
|
||||||
import Reddit from '../../assets/images/social_reddit.png';
|
|
||||||
import Forum from '../../assets/images/social_forum.png';
|
|
||||||
|
|
||||||
import { SocialLinkWrapper } from './components';
|
|
||||||
|
|
||||||
function getSrc(name) {
|
|
||||||
switch (name) {
|
|
||||||
case 'GitHub':
|
|
||||||
return Gh;
|
|
||||||
case 'Reddit':
|
|
||||||
return Reddit;
|
|
||||||
case 'Medium':
|
|
||||||
return Medium;
|
|
||||||
case 'Slack':
|
|
||||||
return Slack;
|
|
||||||
case 'Twitter':
|
|
||||||
return Twitter;
|
|
||||||
case 'Forum':
|
|
||||||
case 'Academy':
|
|
||||||
return Forum;
|
|
||||||
default:
|
|
||||||
return Gh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const SocialLink = ({ link, name }) => {
|
|
||||||
return (
|
|
||||||
<SocialLinkWrapper className="col-6">
|
|
||||||
<a href={link} target="_blank" rel="noopener noreferrer">
|
|
||||||
<img src={getSrc(name)} alt={name} />
|
|
||||||
<span>{name}</span>
|
|
||||||
</a>
|
|
||||||
</SocialLinkWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
SocialLink.propTypes = {
|
|
||||||
link: PropTypes.string.isRequired,
|
|
||||||
name: PropTypes.string.isRequired,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default memo(SocialLink);
|
|
||||||
130
packages/core/admin/admin/src/pages/HomePage/SocialLinks.js
Normal file
130
packages/core/admin/admin/src/pages/HomePage/SocialLinks.js
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
/**
|
||||||
|
*
|
||||||
|
* SocialLink
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import { H3, Text } from '@strapi/parts/Text';
|
||||||
|
import { Box } from '@strapi/parts/Box';
|
||||||
|
import { Stack } from '@strapi/parts/Stack';
|
||||||
|
import { Grid, GridItem } from '@strapi/parts/Grid';
|
||||||
|
import { LinkButton } from '@strapi/parts/LinkButton';
|
||||||
|
import { Link } from '@strapi/parts/Link';
|
||||||
|
import ExternalLink from '@strapi/icons/ExternalLink';
|
||||||
|
import Forum from '../../assets/images/social_forum.png';
|
||||||
|
import Reddit from '../../assets/images/social_reddit.png';
|
||||||
|
import Twitter from '../../assets/images/social_twitter.png';
|
||||||
|
import Medium from '../../assets/images/social_medium.png';
|
||||||
|
import Slack from '../../assets/images/social_slack.png';
|
||||||
|
import Gh from '../../assets/images/social_gh.png';
|
||||||
|
|
||||||
|
const socialLinks = [
|
||||||
|
{
|
||||||
|
name: 'Github',
|
||||||
|
link: 'https://github.com/strapi/strapi/',
|
||||||
|
img: Gh,
|
||||||
|
alt: 'github',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Discord',
|
||||||
|
link: 'https://slack.strapi.io/',
|
||||||
|
img: Slack,
|
||||||
|
alt: 'slack',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Reddit',
|
||||||
|
link: 'https://www.reddit.com/r/Strapi/',
|
||||||
|
img: Reddit,
|
||||||
|
alt: 'reddit',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Twitter',
|
||||||
|
link: 'https://twitter.com/strapijs',
|
||||||
|
img: Twitter,
|
||||||
|
alt: 'twitter',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Medium',
|
||||||
|
link: 'https://medium.com/@strapi',
|
||||||
|
img: Medium,
|
||||||
|
alt: 'medium',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Forum',
|
||||||
|
link: 'https://forum.strapi.io',
|
||||||
|
img: Forum,
|
||||||
|
alt: 'forum',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const LinkCustom = styled(LinkButton)`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
word-break: keep-all;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const GridGap = styled(Grid)`
|
||||||
|
row-gap: ${({ theme }) => theme.spaces[2]};
|
||||||
|
column-gap: ${({ theme }) => theme.spaces[4]};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const WordWrap = styled(Text)`
|
||||||
|
word-break: break-word;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SocialLinks = () => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
background="neutral0"
|
||||||
|
hasRadius
|
||||||
|
paddingRight={5}
|
||||||
|
paddingLeft={5}
|
||||||
|
paddingTop={6}
|
||||||
|
paddingBottom={6}
|
||||||
|
shadow="tableShadow"
|
||||||
|
>
|
||||||
|
<Box paddingBottom={7}>
|
||||||
|
<Stack size={5}>
|
||||||
|
<Stack size={3}>
|
||||||
|
<H3>Join the community</H3>
|
||||||
|
<WordWrap textColor="neutral600">
|
||||||
|
Discuss with team members, contributors and developers on different channels
|
||||||
|
</WordWrap>
|
||||||
|
</Stack>
|
||||||
|
<Link href="https://strapi.io/" endIcon={<ExternalLink />}>
|
||||||
|
see our road map
|
||||||
|
</Link>
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
<GridGap>
|
||||||
|
{socialLinks.map(socialLink => {
|
||||||
|
return (
|
||||||
|
<GridItem col={6} s={12} key={socialLink.name}>
|
||||||
|
<LinkCustom
|
||||||
|
size="L"
|
||||||
|
startIcon={<img alt={socialLink.alt} src={socialLink.img} />}
|
||||||
|
variant="tertiary"
|
||||||
|
href={socialLink.link}
|
||||||
|
>
|
||||||
|
{socialLink.name}
|
||||||
|
</LinkCustom>
|
||||||
|
</GridItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</GridGap>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SocialLinks;
|
||||||
@ -1,260 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
import styled, { css } from 'styled-components';
|
|
||||||
|
|
||||||
const Block = styled.div`
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 34px;
|
|
||||||
background: #ffffff;
|
|
||||||
padding: 19px 30px 30px 30px;
|
|
||||||
box-shadow: 0 2px 4px 0 #e3e9f3;
|
|
||||||
border-radius: 3px;
|
|
||||||
line-height: 18px;
|
|
||||||
|
|
||||||
a {
|
|
||||||
position: relative;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
&:hover::after {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
content: '';
|
|
||||||
opacity: 0.1;
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h2,
|
|
||||||
p {
|
|
||||||
line-height: 18px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
#mainHeader {
|
|
||||||
&:after {
|
|
||||||
content: '';
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
margin-top: 4px;
|
|
||||||
display: block;
|
|
||||||
background: #f0b41e;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-wrapper {
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
> div:nth-child(2n) {
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
padding: 47px 13px 0 13px;
|
|
||||||
> div {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const P = styled.p`
|
|
||||||
max-width: 550px;
|
|
||||||
padding-top: 10px;
|
|
||||||
padding-right: 30px;
|
|
||||||
color: #5c5f66;
|
|
||||||
font-size: 14px;
|
|
||||||
b {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Wave = styled.div`
|
|
||||||
&:before {
|
|
||||||
content: '👋';
|
|
||||||
position: absolute;
|
|
||||||
top: 24px;
|
|
||||||
right: 30px;
|
|
||||||
font-size: 50px;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ALink = styled.a`
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
height: 34px;
|
|
||||||
padding-right: 20px;
|
|
||||||
border-radius: 3px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
line-height: 34px;
|
|
||||||
font-size: 13px;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '\f105';
|
|
||||||
|
|
||||||
font-weight: 600;
|
|
||||||
margin-right: 10px;
|
|
||||||
font-family: 'FontAwesome';
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
:focus,
|
|
||||||
:active {
|
|
||||||
text-decoration: none;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::after {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
content: '';
|
|
||||||
opacity: 0.1;
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
${({ type }) =>
|
|
||||||
type === 'blog' || type === 'documentation'
|
|
||||||
? css`
|
|
||||||
padding-left: 20px;
|
|
||||||
margin-top: 16px;
|
|
||||||
color: #ffffff;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
&:before {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
`
|
|
||||||
: css`
|
|
||||||
margin-top: 9px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #005fea;
|
|
||||||
&:before {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: #005fea;
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
|
|
||||||
${({ type }) =>
|
|
||||||
type === 'blog' &&
|
|
||||||
css`
|
|
||||||
background-color: #333740;
|
|
||||||
`}
|
|
||||||
|
|
||||||
${({ type }) =>
|
|
||||||
type === 'documentation' &&
|
|
||||||
css`
|
|
||||||
background-color: #005fea;
|
|
||||||
`}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Separator = styled.div`
|
|
||||||
height: 2px;
|
|
||||||
background-color: #f7f8f8;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const LinkWrapper = styled.a`
|
|
||||||
width: calc(50% - 6px);
|
|
||||||
position: relative;
|
|
||||||
padding: 21px 30px;
|
|
||||||
padding-left: 95px;
|
|
||||||
height: auto;
|
|
||||||
line-height: 18px;
|
|
||||||
background-color: #f7f8f8;
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
:focus,
|
|
||||||
:active {
|
|
||||||
text-decoration: none;
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
position: absolute;
|
|
||||||
left: 30px;
|
|
||||||
top: 38px;
|
|
||||||
font-family: 'FontAwesome';
|
|
||||||
font-size: 38px;
|
|
||||||
|
|
||||||
${({ type }) => {
|
|
||||||
if (type === 'doc') {
|
|
||||||
return css`
|
|
||||||
content: '\f02d';
|
|
||||||
color: #42b88e;
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return css`
|
|
||||||
content: '\f121';
|
|
||||||
color: #f0811e;
|
|
||||||
`;
|
|
||||||
}}
|
|
||||||
}
|
|
||||||
|
|
||||||
> p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 13px;
|
|
||||||
&:first-child {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
color: #919bae;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.bold {
|
|
||||||
color: #333740;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const SocialLinkWrapper = styled.div`
|
|
||||||
position: relative;
|
|
||||||
height: 24px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: #333740 !important;
|
|
||||||
text-decoration: none;
|
|
||||||
line-height: 18px;
|
|
||||||
img,
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
height: 24px;
|
|
||||||
width: 24px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
width: calc(100% - 24px);
|
|
||||||
padding-left: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export { ALink, Block, Container, LinkWrapper, P, Separator, SocialLinkWrapper, Wave };
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
import { useEffect, useState, useRef } from 'react';
|
|
||||||
import axios from 'axios';
|
|
||||||
|
|
||||||
const useFetch = () => {
|
|
||||||
const isMounted = useRef(true);
|
|
||||||
const [state, setState] = useState({
|
|
||||||
error: false,
|
|
||||||
isLoading: true,
|
|
||||||
posts: [{ link: '1' }, { link: '2' }],
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const CancelToken = axios.CancelToken;
|
|
||||||
const source = CancelToken.source();
|
|
||||||
|
|
||||||
const fetchData = async () => {
|
|
||||||
try {
|
|
||||||
const { data } = await axios.get(
|
|
||||||
'https://strapi.io/api/blog-posts?_limit=2&_sort=publishedAt:desc',
|
|
||||||
{
|
|
||||||
cancelToken: source.token,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const posts = data.reduce((acc, curr) => {
|
|
||||||
acc.push({
|
|
||||||
title: curr.seo.metaTitle,
|
|
||||||
link: curr.slug,
|
|
||||||
content: curr.seo.metaDescription,
|
|
||||||
});
|
|
||||||
|
|
||||||
return acc;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
setState({ isLoading: false, posts, error: false });
|
|
||||||
} catch (err) {
|
|
||||||
if (isMounted.current) {
|
|
||||||
setState({ isLoading: false, error: true, posts: [] });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchData();
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
isMounted.current = false;
|
|
||||||
source.cancel('abort');
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return state;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useFetch;
|
|
||||||
@ -6,77 +6,31 @@
|
|||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
import React, { memo, useMemo } from 'react';
|
import React, { memo, useMemo } from 'react';
|
||||||
import { FormattedMessage, useIntl } from 'react-intl';
|
import { FormattedMessage, useIntl } from 'react-intl';
|
||||||
import { get, upperFirst } from 'lodash';
|
|
||||||
import { useModels } from '../../hooks';
|
import { useModels } from '../../hooks';
|
||||||
|
|
||||||
import useFetch from './hooks';
|
import SocialLinks from './SocialLinks';
|
||||||
import { ALink, Block, Container, LinkWrapper, P, Wave, Separator } from './components';
|
import HomeHeader from './HomeHeader';
|
||||||
import BlogPost from './BlogPost';
|
import ContentBlocks from './ContentBlocks';
|
||||||
import SocialLink from './SocialLink';
|
|
||||||
|
|
||||||
import PageTitle from '../../components/PageTitle';
|
import PageTitle from '../../components/PageTitle';
|
||||||
import { auth, LoadingIndicatorPage, SettingsPageTitle } from '@strapi/helper-plugin';
|
import { LoadingIndicatorPage } from '@strapi/helper-plugin';
|
||||||
import { HeaderLayout, Layout, ContentLayout, ActionLayout } from '@strapi/parts/Layout';
|
import { Layout } from '@strapi/parts/Layout';
|
||||||
import { Main } from '@strapi/parts/Main';
|
import { Main } from '@strapi/parts/Main';
|
||||||
|
import { Box } from '@strapi/parts/Box';
|
||||||
const FIRST_BLOCK_LINKS = [
|
import { Grid, GridItem } from '@strapi/parts/Grid';
|
||||||
{
|
|
||||||
link:
|
|
||||||
'https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html#_4-create-a-category-content-type',
|
|
||||||
contentId: 'app.components.BlockLink.documentation.content',
|
|
||||||
titleId: 'app.components.BlockLink.documentation',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
link: 'https://github.com/strapi/foodadvisor',
|
|
||||||
contentId: 'app.components.BlockLink.code.content',
|
|
||||||
titleId: 'app.components.BlockLink.code',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const SOCIAL_LINKS = [
|
|
||||||
{
|
|
||||||
name: 'GitHub',
|
|
||||||
link: 'https://github.com/strapi/strapi/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Slack',
|
|
||||||
link: 'https://slack.strapi.io/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Medium',
|
|
||||||
link: 'https://medium.com/@strapi',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Twitter',
|
|
||||||
link: 'https://twitter.com/strapijs',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Reddit',
|
|
||||||
link: 'https://www.reddit.com/r/Strapi/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Forum',
|
|
||||||
link: 'https://forum.strapi.io',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Academy',
|
|
||||||
link: 'https://academy.strapi.io',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const HomePage = ({ history: { push } }) => {
|
const HomePage = ({ history: { push } }) => {
|
||||||
const { formatMessage } = useIntl();
|
// const { formatMessage } = useIntl();
|
||||||
// const { error, isLoading, posts } = useFetch();
|
// const { error, isLoading, posts } = useFetch();
|
||||||
// // Temporary until we develop the menu API
|
// // Temporary until we develop the menu API
|
||||||
const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
|
const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
|
||||||
|
|
||||||
// const handleClick = e => {
|
const handleClick = e => {
|
||||||
// e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
// push(
|
push(
|
||||||
// '/plugins/content-type-builder/content-types/plugins::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null'
|
'/plugins/content-type-builder/content-types/plugins::users-permissions.user?modalType=contentType&kind=collectionType&actionType=create&settingType=base&forTarget=contentType&headerId=content-type-builder.modalForm.contentType.header-create&header_icon_isCustom_1=false&header_icon_name_1=contentType&header_label_1=null'
|
||||||
// );
|
);
|
||||||
// };
|
};
|
||||||
|
|
||||||
const hasAlreadyCreatedContentTypes = useMemo(() => {
|
const hasAlreadyCreatedContentTypes = useMemo(() => {
|
||||||
const filterContentTypes = contentTypes => contentTypes.filter(c => c.isDisplayed);
|
const filterContentTypes = contentTypes => contentTypes.filter(c => c.isDisplayed);
|
||||||
@ -90,168 +44,33 @@ const HomePage = ({ history: { push } }) => {
|
|||||||
return <LoadingIndicatorPage />;
|
return <LoadingIndicatorPage />;
|
||||||
}
|
}
|
||||||
|
|
||||||
// const headerId = hasAlreadyCreatedContentTypes
|
|
||||||
// ? 'HomePage.greetings'
|
|
||||||
// : 'app.components.HomePage.welcome';
|
|
||||||
// const username = get(auth.getUserInfo(), 'firstname', '');
|
|
||||||
// const linkProps = hasAlreadyCreatedContentTypes
|
|
||||||
// ? {
|
|
||||||
// id: 'app.components.HomePage.button.blog',
|
|
||||||
// href: 'https://strapi.io/blog/',
|
|
||||||
// onClick: () => {},
|
|
||||||
// type: 'blog',
|
|
||||||
// target: '_blank',
|
|
||||||
// }
|
|
||||||
// : {
|
|
||||||
// id: 'app.components.HomePage.create',
|
|
||||||
// href: '',
|
|
||||||
// onClick: handleClick,
|
|
||||||
// type: 'documentation',
|
|
||||||
// };
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<FormattedMessage id="HomePage.helmet.title">
|
<FormattedMessage id="HomePage.helmet.title">
|
||||||
{title => <PageTitle title={title[0]} />}
|
{title => <PageTitle title={title[0]} />}
|
||||||
</FormattedMessage>
|
</FormattedMessage>
|
||||||
<Main labelledBy="homepage">
|
<Main labelledBy="homepage">
|
||||||
<HeaderLayout
|
<Box padding={10}>
|
||||||
as="h1"
|
<Grid>
|
||||||
|
<GridItem col={8} s={12}>
|
||||||
|
<HomeHeader
|
||||||
|
onCreateCT={handleClick}
|
||||||
id="homepage"
|
id="homepage"
|
||||||
title={hasAlreadyCreatedContentTypes ? (
|
hasCreatedContentType={hasAlreadyCreatedContentTypes}
|
||||||
formatMessage({
|
|
||||||
id: 'app.components.HomePage.welcome.again',
|
|
||||||
defaultMessage: 'Welcome 👋',
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
formatMessage({
|
|
||||||
id: 'app.components.HomePage.welcome',
|
|
||||||
defaultMessage: 'Welcome on board!',
|
|
||||||
}))}
|
|
||||||
subtitle={!hasAlreadyCreatedContentTypes ? (
|
|
||||||
formatMessage({
|
|
||||||
id: 'app.components.HomePage.welcomeBlock.content.again',
|
|
||||||
defaultMessage: 'Get POST changes notifications.',
|
|
||||||
})
|
|
||||||
) : (formatMessage({
|
|
||||||
id: 'app.components.HomePage.welcomeBlock.content',
|
|
||||||
defaultMessage: 'Get POST changes notifications.',
|
|
||||||
}))}
|
|
||||||
// primaryAction={}
|
|
||||||
/>
|
/>
|
||||||
|
</GridItem>
|
||||||
|
</Grid>
|
||||||
|
<Grid gap={6}>
|
||||||
|
<GridItem col={8} s={12}>
|
||||||
|
<ContentBlocks />
|
||||||
|
</GridItem>
|
||||||
|
<GridItem col={4} s={12}>
|
||||||
|
<SocialLinks />
|
||||||
|
</GridItem>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
</Main>
|
</Main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
// {hasAlreadyCreatedContentTypes ? (
|
|
||||||
// <FormattedMessage id="app.components.HomePage.welcomeBlock.content.again">
|
|
||||||
// {msg => <P>{msg}</P>}
|
|
||||||
// </FormattedMessage>
|
|
||||||
// ) : (
|
|
||||||
// <FormattedMessage id="HomePage.welcome.congrats">
|
|
||||||
// {congrats => {
|
|
||||||
// return (
|
|
||||||
// <FormattedMessage id="HomePage.welcome.congrats.content">
|
|
||||||
// {content => {
|
|
||||||
// return (
|
|
||||||
// <FormattedMessage id="HomePage.welcome.congrats.content.bold">
|
|
||||||
// {boldContent => {
|
|
||||||
// return (
|
|
||||||
// <P>
|
|
||||||
// <b>{congrats}</b>
|
|
||||||
// {content}
|
|
||||||
// <b>{boldContent}</b>
|
|
||||||
// </P>
|
|
||||||
// );
|
|
||||||
// }}
|
|
||||||
// </FormattedMessage>
|
|
||||||
// );
|
|
||||||
// }}
|
|
||||||
// </FormattedMessage>
|
|
||||||
// );
|
|
||||||
// }}
|
|
||||||
// </FormattedMessage>
|
|
||||||
// )}
|
|
||||||
// {hasAlreadyCreatedContentTypes && (
|
|
||||||
// <div style={{ marginTop: isLoading ? 60 : 50 }}>
|
|
||||||
// {posts.map((post, index) => (
|
|
||||||
// <BlogPost
|
|
||||||
// {...post}
|
|
||||||
// key={post.link}
|
|
||||||
// isFirst={index === 0}
|
|
||||||
// isLoading={isLoading}
|
|
||||||
// error={error}
|
|
||||||
// />
|
|
||||||
// ))}
|
|
||||||
// </div>
|
|
||||||
// )}
|
|
||||||
// <FormattedMessage id={linkProps.id}>
|
|
||||||
// {msg => (
|
|
||||||
// <ALink
|
|
||||||
// rel="noopener noreferrer"
|
|
||||||
// {...linkProps}
|
|
||||||
// style={{ verticalAlign: ' bottom', marginBottom: 5 }}
|
|
||||||
// >
|
|
||||||
// {msg}
|
|
||||||
// </ALink>
|
|
||||||
// )}
|
|
||||||
// </FormattedMessage>
|
|
||||||
// <Separator style={{ marginTop: 37, marginBottom: 36 }} />
|
|
||||||
// <div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
// {FIRST_BLOCK_LINKS.map((data, index) => {
|
|
||||||
// const type = index === 0 ? 'doc' : 'code';
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <LinkWrapper href={data.link} target="_blank" key={data.link} type={type}>
|
|
||||||
// <FormattedMessage id={data.titleId}>
|
|
||||||
// {title => <p className="bold">{title}</p>}
|
|
||||||
// </FormattedMessage>
|
|
||||||
// <FormattedMessage id={data.contentId}>
|
|
||||||
// {content => <p>{content}</p>}
|
|
||||||
// </FormattedMessage>
|
|
||||||
// </LinkWrapper>
|
|
||||||
// );
|
|
||||||
// })}
|
|
||||||
// </div>
|
|
||||||
// </Block>
|
|
||||||
// </div>
|
|
||||||
|
|
||||||
// <div className="col-md-12 col-lg-4">
|
|
||||||
// <Block style={{ paddingRight: 30, paddingBottom: 0 }}>
|
|
||||||
// <FormattedMessage id="HomePage.community">{msg => <h2>{msg}</h2>}</FormattedMessage>
|
|
||||||
// <FormattedMessage id="app.components.HomePage.community.content">
|
|
||||||
// {content => <P style={{ marginTop: 7, marginBottom: 0 }}>{content}</P>}
|
|
||||||
// </FormattedMessage>
|
|
||||||
// <FormattedMessage id="HomePage.roadmap">
|
|
||||||
// {msg => (
|
|
||||||
// <ALink
|
|
||||||
// rel="noopener noreferrer"
|
|
||||||
// href="https://portal.productboard.com/strapi/1-public-roadmap/tabs/2-under-consideration"
|
|
||||||
// target="_blank"
|
|
||||||
// >
|
|
||||||
// {msg}
|
|
||||||
// </ALink>
|
|
||||||
// )}
|
|
||||||
// </FormattedMessage>
|
|
||||||
|
|
||||||
// <Separator style={{ marginTop: 18 }} />
|
|
||||||
// <div
|
|
||||||
// className="row social-wrapper"
|
|
||||||
// style={{
|
|
||||||
// display: 'flex',
|
|
||||||
// margin: 0,
|
|
||||||
// marginTop: 36,
|
|
||||||
// marginLeft: -15,
|
|
||||||
// }}
|
|
||||||
// >
|
|
||||||
// {SOCIAL_LINKS.map((value, key) => (
|
|
||||||
// <SocialLink key={key} {...value} />
|
|
||||||
// ))}
|
|
||||||
// </div>
|
|
||||||
// </Block>
|
|
||||||
// </div>
|
|
||||||
// </div>
|
|
||||||
// </Container>
|
|
||||||
// </>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -222,7 +222,7 @@
|
|||||||
"app.components.HomePage.create": "Create your first Content-Type",
|
"app.components.HomePage.create": "Create your first Content-Type",
|
||||||
"app.components.HomePage.welcome": "Welcome on board 👋",
|
"app.components.HomePage.welcome": "Welcome on board 👋",
|
||||||
"app.components.HomePage.welcome.again": "Welcome 👋",
|
"app.components.HomePage.welcome.again": "Welcome 👋",
|
||||||
"app.components.HomePage.welcomeBlock.content": "We are happy to have you as part of the community. We are constantly looking for feedback so feel free to send us DM on ",
|
"app.components.HomePage.welcomeBlock.content": "Congrats! You are logged as the first administrator. To discover the powerful features provided by Strapi, we recommend you to create your first Content type!",
|
||||||
"app.components.HomePage.welcomeBlock.content.again": "We hope you are making progress on your project! Feel free to read the latest news about Strapi. We are giving our best to improve the product based on your feedback.",
|
"app.components.HomePage.welcomeBlock.content.again": "We hope you are making progress on your project! Feel free to read the latest news about Strapi. We are giving our best to improve the product based on your feedback.",
|
||||||
"app.components.HomePage.welcomeBlock.content.issues": "issues.",
|
"app.components.HomePage.welcomeBlock.content.issues": "issues.",
|
||||||
"app.components.HomePage.welcomeBlock.content.raise": " or raise ",
|
"app.components.HomePage.welcomeBlock.content.raise": " or raise ",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user