Skip to content

[FEAT] Add description in the 'blog' and 'news' pages #226

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Nov 29, 2021
2 changes: 2 additions & 0 deletions src/content/NewsContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,6 @@ const news: PostDescription[] = [

export const newsContent = {
news,
description:
'Find all the news articles about Process Analytics to be informed of major changes, new libraries, examples update, and more.',
};
5 changes: 4 additions & 1 deletion src/content/PostsContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const posts: PostDescription[] = [
{
title:
'Simplifying life: Using GitHub Actions for Continuous Integration in BPMN Visualization', // original title: 'Simplifying life: Using GitHub Actions for Continuous Integration in a BPMN Visualization open source project'
text: 'A step-by-step tutorial that explains how to setup GitHub Actions to continously build and test a TypeScript project.',
text: 'A step-by-step tutorial that explains how to setup GitHub Actions to continuously build and test a TypeScript project.',
cover:
'https://res.cloudinary.com/practicaldev/image/fetch/s--vBB9KCW4--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/twfkvzk83m0cpjwz26js.png', // from https://dev.to/parthpandyappp/implemented-github-actions-to-a-django-python-repository-2128
url: 'https://dev.to/marcin_michniewicz/simplifying-life-using-github-actions-for-continuous-integration-in-a-bpmn-visualization-open-source-project-42i7',
Expand All @@ -99,4 +99,7 @@ const posts: PostDescription[] = [

export const postsContent = {
posts: posts,
description:
'Find all the blog posts explaining how to use the libraries developed by Process Analytics, ' +
'as well as those explaining how they were developed using external technical tools, and more.',
};
1 change: 1 addition & 0 deletions src/pages/blog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const BlogPage = (): JSX.Element => (
layoutTitle={PAGE.blog}
containerTitle={SECTION.blog}
posts={postsContent.posts}
description={postsContent.description}
/>
);

Expand Down
1 change: 1 addition & 0 deletions src/pages/news.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const NewsPage = (): JSX.Element => (
layoutTitle={PAGE.news}
containerTitle={SECTION.news}
posts={newsContent.news}
description={newsContent.description}
/>
);

Expand Down
20 changes: 18 additions & 2 deletions src/theme/pages/PageWithPosts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,27 @@ import Layout from '../components/Layout';
import PageHeader from '../components/PageHeader';
import Footer from '../components/Footer';
import Section from '../components/Section';
import { Heading } from 'rebass/styled-components';
import { Heading, Text } from 'rebass/styled-components';
import Triangle from '../components/Triangle';
import { PostContainer } from '../components/Post';
import { PostDescription } from '../types';
import { PAGE, SECTION } from '../utils/constants';

// TODO duplicated from Landing.tsx
const centerHorizontally = { marginRight: 'auto', marginLeft: 'auto' };

interface PageWithPostsProps {
layoutTitle: PAGE;
containerTitle: SECTION;
posts: PostDescription[];
description: string;
}

export const PageWithPosts = ({
layoutTitle,
containerTitle,
posts,
description,
}: PageWithPostsProps): JSX.Element => (
<Layout title={layoutTitle}>
<PageHeader />
Expand All @@ -43,11 +48,22 @@ export const PageWithPosts = ({
as="h1"
color="primary"
fontSize={[6, 8]}
mb={[5, 5, 6]}
mb={[3, 4, 4]}
mt={[5, 5, 6]}
>
{containerTitle}
</Heading>
<Text
as="p"
width={['85%', '80%', '70%']}
color="primary"
fontSize={[2, 4]}
mb={[3, 5]}
textAlign="center"
style={centerHorizontally}
>
{description}
</Text>
<PostContainer posts={posts} />
</Section.Container>
<Footer />
Expand Down