Skip to content

Commit 25ceb76

Browse files
pooriasetpooriaset
committed
feat: add description to the posts
1 parent f617ade commit 25ceb76

File tree

5 files changed

+20358
-8768
lines changed

5 files changed

+20358
-8768
lines changed

‎src/components/PostItem/PostItem.tsx‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Image from '@/components/common/Image';
22
import { PostItemFragment } from '@/graphql/types/graphql';
33
import { Link } from '@/navigation';
4+
import { getRefinedMetaDescription } from '@/utils/text';
45
import { Box, Stack, Typography } from '@mui/material';
56
import { FC } from 'react';
67

@@ -43,20 +44,34 @@ const PostItem: FC<PostItemProps> = ({ fragment }) => {
4344
}}
4445
/>
4546
</Box>
46-
<Typography
47-
component="h3"
48-
variant="body1"
49-
sx={{
50-
textOverflow: 'ellipsis',
51-
overflow: 'hidden',
52-
display: '-webkit-box',
53-
WebkitLineClamp: '21',
54-
WebkitBoxOrient: 'vertical',
55-
p: 2,
56-
}}
57-
>
58-
{fragment?.title}
59-
</Typography>
47+
<Stack p={2} spacing={1}>
48+
<Typography
49+
component="h3"
50+
variant="h6"
51+
sx={{
52+
textOverflow: 'ellipsis',
53+
overflow: 'hidden',
54+
display: '-webkit-box',
55+
WebkitLineClamp: '21',
56+
WebkitBoxOrient: 'vertical',
57+
}}
58+
>
59+
{fragment?.title}
60+
</Typography>
61+
<Typography
62+
variant="body2"
63+
color="text.secondary"
64+
sx={{
65+
textOverflow: 'ellipsis',
66+
overflow: 'hidden',
67+
display: '-webkit-box',
68+
WebkitLineClamp: '2',
69+
WebkitBoxOrient: 'vertical',
70+
}}
71+
>
72+
{getRefinedMetaDescription(fragment?.excerpt)}
73+
</Typography>
74+
</Stack>
6075
</Stack>
6176
);
6277
};

‎src/components/common/Image.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22

33
import Skeleton from '@mui/material/Skeleton';
4+
import { grey } from '@mui/material/colors';
45
import NextImage, { type ImageProps as NextImageProps } from 'next/image';
56
import { FC, useState } from 'react';
67

@@ -44,7 +45,13 @@ const Image: FC<
4445
maxWidth: '100%',
4546
...props.style,
4647
visibility: loaded ? 'visible' : 'hidden',
47-
objectFit: !src ? 'contain' : props.style?.objectFit || 'contain',
48+
...(!src
49+
? {
50+
padding: typeof width === 'number' ? width / 10 : 24,
51+
backgroundColor: grey[50],
52+
objectFit: 'contain',
53+
}
54+
: {}),
4855
}}
4956
/>
5057
</>

‎src/graphql/queries/blog.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const POST_ITEM_FRAGMENT = gql`
2121
slug
2222
title
2323
content
24+
excerpt
2425
featuredImage {
2526
node {
2627
sourceUrl

‎src/graphql/types/gql.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ const documents = {
1717
"\n mutation RefreshToken($refreshToken: String!) {\n refreshJwtAuthToken(input: { jwtRefreshToken: $refreshToken }) {\n accessToken: authToken\n }\n }\n": types.RefreshTokenDocument,
1818
"\n mutation RegisterCustomer(\n $email: String\n $firstName: String\n $lastName: String\n $password: String\n ) {\n registerCustomer(\n input: {\n email: $email\n firstName: $firstName\n lastName: $lastName\n password: $password\n }\n ) {\n accessToken: authToken\n refreshToken\n customer {\n id\n firstName\n lastName\n }\n }\n }\n": types.RegisterCustomerDocument,
1919
"\n query GetCategories {\n categories {\n edges {\n node {\n databaseId\n name\n slug\n count\n }\n }\n }\n }\n": types.GetCategoriesDocument,
20-
"\n fragment PostItem on Post {\n databaseId\n slug\n title\n content\n featuredImage {\n node {\n sourceUrl\n }\n }\n }\n": types.PostItemFragmentDoc,
21-
"\n query GetPosts(\n $first: Int\n $last: Int\n $after: String\n $before: String\n $search: String\n $categoryIn: [ID]\n $orderby: [PostObjectsConnectionOrderbyInput]\n ) {\n posts(\n first: $first\n last: $last\n after: $after\n before: $before\n where: { search: $search, categoryIn: $categoryIn, orderby: $orderby }\n ) {\n edges {\n node {\n ...PostItem\n }\n }\n pageInfo {\n endCursor\n startCursor\n hasNextPage\n hasPreviousPage\n }\n }\n }\n \n": types.GetPostsDocument,
20+
"\n fragment PostItem on Post {\n databaseId\n slug\n title\n content\n excerpt\n featuredImage {\n node {\n sourceUrl\n }\n }\n }\n": types.PostItemFragmentDoc,
21+
"\n query GetPosts(\n $first: Int\n $last: Int\n $after: String\n $before: String\n $search: String\n $categoryIn: [ID]\n ) {\n posts(\n first: $first\n last: $last\n after: $after\n before: $before\n where: {\n search: $search\n categoryIn: $categoryIn\n orderby: { field: DATE, order: DESC }\n }\n ) {\n edges {\n node {\n ...PostItem\n }\n }\n pageInfo {\n endCursor\n startCursor\n hasNextPage\n hasPreviousPage\n }\n }\n }\n \n": types.GetPostsDocument,
2222
"\n query GetPost($id: ID!) {\n post(id: $id, idType: DATABASE_ID) {\n title\n slug\n excerpt\n content\n dateGmt\n modifiedGmt\n databaseId\n featuredImage {\n node {\n id\n sourceUrl\n altText\n }\n }\n categories {\n edges {\n node {\n databaseId\n slug\n name\n }\n }\n }\n tags {\n edges {\n node {\n id\n name\n databaseId\n }\n }\n }\n }\n }\n": types.GetPostDocument,
2323
"\n query GetCategoryPosts($first: Int, $id: ID!) {\n category(id: $id, idType: SLUG) {\n description\n name\n posts(first: $first, where: { orderby: { field: DATE, order: DESC } }) {\n edges {\n node {\n ...PostItem\n }\n }\n }\n }\n }\n \n": types.GetCategoryPostsDocument,
2424
"\n query GetCategory($id: ID!) {\n category(id: $id, idType: DATABASE_ID) {\n databaseId\n description\n name\n slug\n }\n }\n": types.GetCategoryDocument,
@@ -89,11 +89,11 @@ export function graphql(source: "\n query GetCategories {\n categories {\n
8989
/**
9090
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
9191
*/
92-
export function graphql(source: "\n fragment PostItem on Post {\n databaseId\n slug\n title\n content\n featuredImage {\n node {\n sourceUrl\n }\n }\n }\n"): (typeof documents)["\n fragment PostItem on Post {\n databaseId\n slug\n title\n content\n featuredImage {\n node {\n sourceUrl\n }\n }\n }\n"];
92+
export function graphql(source: "\n fragment PostItem on Post {\n databaseId\n slug\n title\n content\n excerpt\n featuredImage {\n node {\n sourceUrl\n }\n }\n }\n"): (typeof documents)["\n fragment PostItem on Post {\n databaseId\n slug\n title\n content\n excerpt\n featuredImage {\n node {\n sourceUrl\n }\n }\n }\n"];
9393
/**
9494
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
9595
*/
96-
export function graphql(source: "\n query GetPosts(\n $first: Int\n $last: Int\n $after: String\n $before: String\n $search: String\n $categoryIn: [ID]\n $orderby: [PostObjectsConnectionOrderbyInput]\n ) {\n posts(\n first: $first\n last: $last\n after: $after\n before: $before\n where: { search: $search, categoryIn: $categoryIn, orderby: $orderby }\n ) {\n edges {\n node {\n ...PostItem\n }\n }\n pageInfo {\n endCursor\n startCursor\n hasNextPage\n hasPreviousPage\n }\n }\n }\n \n"): (typeof documents)["\n query GetPosts(\n $first: Int\n $last: Int\n $after: String\n $before: String\n $search: String\n $categoryIn: [ID]\n $orderby: [PostObjectsConnectionOrderbyInput]\n ) {\n posts(\n first: $first\n last: $last\n after: $after\n before: $before\n where: { search: $search, categoryIn: $categoryIn, orderby: $orderby }\n ) {\n edges {\n node {\n ...PostItem\n }\n }\n pageInfo {\n endCursor\n startCursor\n hasNextPage\n hasPreviousPage\n }\n }\n }\n \n"];
96+
export function graphql(source: "\n query GetPosts(\n $first: Int\n $last: Int\n $after: String\n $before: String\n $search: String\n $categoryIn: [ID]\n ) {\n posts(\n first: $first\n last: $last\n after: $after\n before: $before\n where: {\n search: $search\n categoryIn: $categoryIn\n orderby: { field: DATE, order: DESC }\n }\n ) {\n edges {\n node {\n ...PostItem\n }\n }\n pageInfo {\n endCursor\n startCursor\n hasNextPage\n hasPreviousPage\n }\n }\n }\n \n"): (typeof documents)["\n query GetPosts(\n $first: Int\n $last: Int\n $after: String\n $before: String\n $search: String\n $categoryIn: [ID]\n ) {\n posts(\n first: $first\n last: $last\n after: $after\n before: $before\n where: {\n search: $search\n categoryIn: $categoryIn\n orderby: { field: DATE, order: DESC }\n }\n ) {\n edges {\n node {\n ...PostItem\n }\n }\n pageInfo {\n endCursor\n startCursor\n hasNextPage\n hasPreviousPage\n }\n }\n }\n \n"];
9797
/**
9898
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
9999
*/

0 commit comments

Comments
 (0)