mirror of
https://github.com/strapi/strapi.git
synced 2025-09-03 13:50:38 +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 */
|
||||
import React, { memo, useMemo } from 'react';
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
import { get, upperFirst } from 'lodash';
|
||||
import { useModels } from '../../hooks';
|
||||
|
||||
import useFetch from './hooks';
|
||||
import { ALink, Block, Container, LinkWrapper, P, Wave, Separator } from './components';
|
||||
import BlogPost from './BlogPost';
|
||||
import SocialLink from './SocialLink';
|
||||
|
||||
import SocialLinks from './SocialLinks';
|
||||
import HomeHeader from './HomeHeader';
|
||||
import ContentBlocks from './ContentBlocks';
|
||||
import PageTitle from '../../components/PageTitle';
|
||||
import { auth, LoadingIndicatorPage, SettingsPageTitle } from '@strapi/helper-plugin';
|
||||
import { HeaderLayout, Layout, ContentLayout, ActionLayout } from '@strapi/parts/Layout';
|
||||
import { LoadingIndicatorPage } from '@strapi/helper-plugin';
|
||||
import { Layout } from '@strapi/parts/Layout';
|
||||
import { Main } from '@strapi/parts/Main';
|
||||
|
||||
const FIRST_BLOCK_LINKS = [
|
||||
{
|
||||
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',
|
||||
},
|
||||
];
|
||||
import { Box } from '@strapi/parts/Box';
|
||||
import { Grid, GridItem } from '@strapi/parts/Grid';
|
||||
|
||||
const HomePage = ({ history: { push } }) => {
|
||||
const { formatMessage } = useIntl();
|
||||
// const { formatMessage } = useIntl();
|
||||
// const { error, isLoading, posts } = useFetch();
|
||||
// // Temporary until we develop the menu API
|
||||
const { collectionTypes, singleTypes, isLoading: isLoadingForModels } = useModels();
|
||||
|
||||
// const handleClick = e => {
|
||||
// e.preventDefault();
|
||||
const handleClick = e => {
|
||||
e.preventDefault();
|
||||
|
||||
// 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'
|
||||
// );
|
||||
// };
|
||||
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'
|
||||
);
|
||||
};
|
||||
|
||||
const hasAlreadyCreatedContentTypes = useMemo(() => {
|
||||
const filterContentTypes = contentTypes => contentTypes.filter(c => c.isDisplayed);
|
||||
@ -90,168 +44,33 @@ const HomePage = ({ history: { push } }) => {
|
||||
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 (
|
||||
<Layout>
|
||||
<FormattedMessage id="HomePage.helmet.title">
|
||||
{title => <PageTitle title={title[0]} />}
|
||||
</FormattedMessage>
|
||||
<Main labelledBy="homepage">
|
||||
<HeaderLayout
|
||||
as="h1"
|
||||
id="homepage"
|
||||
title={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={}
|
||||
/>
|
||||
<Box padding={10}>
|
||||
<Grid>
|
||||
<GridItem col={8} s={12}>
|
||||
<HomeHeader
|
||||
onCreateCT={handleClick}
|
||||
id="homepage"
|
||||
hasCreatedContentType={hasAlreadyCreatedContentTypes}
|
||||
/>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
<Grid gap={6}>
|
||||
<GridItem col={8} s={12}>
|
||||
<ContentBlocks />
|
||||
</GridItem>
|
||||
<GridItem col={4} s={12}>
|
||||
<SocialLinks />
|
||||
</GridItem>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Main>
|
||||
</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.welcome": "Welcome on board 👋",
|
||||
"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.issues": "issues.",
|
||||
"app.components.HomePage.welcomeBlock.content.raise": " or raise ",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user