Skip to content

Commit

Permalink
Fix: Allignment issue in the blog page (#1029)
Browse files Browse the repository at this point in the history 
* Fixing the allignment issue in the blog page

* Added some changes

* Update pages/blog/index.page.tsx

Co-authored-by: Dhairya Majmudar <124715224+DhairyaMajmudar@users.noreply.github.com>

* Added the suggested Changes like typesafety

* Adding the tailwindconfig file to resolve the css conflicts in cloudfare

* Changing the string concatenation problem

* Changed the tailwind config file

* Correcting the landing page blog component

* Correcting the landing page blog component and resolving some changes

* Resolving the tailwind.config file conflicts

* Added the changes to the community page

---------

Co-authored-by: Ritesh Hiremath <ritesh@Riteshs-MacBook-Air.local>
Co-authored-by: Dhairya Majmudar <124715224+DhairyaMajmudar@users.noreply.github.com>
  • Loading branch information
@Ritesh2351235 @DhairyaMajmudar
3 people authored Oct 26, 2024
1 parent 96ec5f2 commit 6b762a2
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 22 deletions.
74 changes: 66 additions & 8 deletions pages/blog/index.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ import { useRouter } from 'next/router';
import useSetUrlParam from '~/lib/useSetUrlParam';
import { SectionContext } from '~/context';

type Author = {
name: string;
photo?: string;
link?: string;
byline?: string;
};
export type blogCategories =
| 'All'
| 'Community'
Expand Down Expand Up @@ -286,14 +292,40 @@ export default function StaticMarkdownPage({
/>
</div>
</div>
<div className='flex flex-row items-center'>
<div className='flex flex-row pl-2 mr-2'>
<div
className={`
flex
flex-row
items-center
`}
>
<div
className={`
flex
flex-row
pl-2
mr-2
`}
>
{(frontmatter.authors || []).map(
(author: any, index: number) => {
(author: Author, index: number) => {
const sizeClass =
frontmatter.authors.length > 2
? 'h-8 w-8'
: 'h-11 w-11';
return (
<div
key={index}
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
className={[
'bg-slate-50',
sizeClass,
'rounded-full',
'-ml-3',
'bg-cover',
'bg-center',
'border-2',
'border-white',
].join(' ')}
style={{
backgroundImage: `url(${author.photo})`,
zIndex: 10 - index,
Expand All @@ -304,11 +336,37 @@ export default function StaticMarkdownPage({
)}
</div>

<div className='flex flex-col items-start'>
<div
className={`
flex
flex-col
items-start
`}
>
<div className='text-sm font-semibold'>
{frontmatter.authors
.map((author: any) => author.name)
.join(' & ')}
{frontmatter.authors.length > 2 ? (
<>
{frontmatter.authors
.slice(0, 2)
.map((author: Author, index: number) => (
<span key={author.name}>
{author.name}
{index === 0 && ' & '}
</span>
))}
{'...'}
</>
) : (
frontmatter.authors.map(
(author: Author, index: number) => (
<span key={author.name}>
{author.name}
{index < frontmatter.authors.length - 1 &&
' & '}
</span>
),
)
)}
</div>

<div className='text-slate-500 text-sm dark:text-slate-300'>
Expand Down
40 changes: 33 additions & 7 deletions pages/community/index.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -394,15 +394,41 @@ export default function communityPages(props: any) {
/>
</div>
<div className='flex ml-2 mb-2 '>
<div
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
style={{
backgroundImage: `url(${blogPosts[0].frontmatter.authors[0].photo})`,
}}
/>
{(blogPosts[0].frontmatter.authors || []).map(
(author: any, index: number) => {
return (
<div
key={index}
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
style={{
backgroundImage: `url(${author.photo})`,
zIndex: 10 - index,
}}
/>
);
},
)}
<div className='flex flex-col ml-2'>
<p className='text-sm font-semibold dark:text-white'>
{blogPosts[0].frontmatter.authors[0].name}
{blogPosts[0].frontmatter.authors.length > 2 ? (
<>
{blogPosts[0].frontmatter.authors
.slice(0, 2)
.map((author: any, index: number) => (
<span key={author.name}>
{author.name}
{index === 0 && ' & '}
</span>
))}
{'...'}
</>
) : (
blogPosts[0].frontmatter.authors.map(
(author: any) => (
<span key={author.name}>{author.name}</span>
),
)
)}
</p>
<div className='dark:text-slate-300 text-sm'>
<span>
Expand Down
39 changes: 32 additions & 7 deletions pages/index.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,16 +467,41 @@ const Home = (props: any) => {
</div>

<div className='flex ml-2 mb-2 '>
<div
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
style={{
backgroundImage: `url(${blogPosts[0].frontmatter.authors[0].photo})`,
}}
/>
{(blogPosts[0].frontmatter.authors || []).map(
(author: any, index: number) => {
return (
<div
key={index}
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
style={{
backgroundImage: `url(${author.photo})`,
zIndex: 10 - index,
}}
/>
);
},
)}
<div className='flex flex-col ml-2'>
<p className='text-sm font-semibold dark:text-slate-300'>
{blogPosts[0].frontmatter.authors[0].name}
{blogPosts[0].frontmatter.authors.length > 2 ? (
<>
{blogPosts[0].frontmatter.authors
.slice(0, 2)
.map((author: any, index: number) => (
<span key={author.name}>
{author.name}
{index === 0 && ' & '}
</span>
))}
{'...'}
</>
) : (
blogPosts[0].frontmatter.authors.map((author: any) => (
<span key={author.name}>{author.name}</span>
))
)}
</p>

<div className='text-slate-500 text-sm dark:text-slate-300'>
<span>
{blogPosts[0].frontmatter.date} &middot; {timeToRead}{' '}
Expand Down

0 comments on commit 6b762a2

Please sign in to comment.