Skip to content

Commit 6b762a2

Browse files
Ritesh2351235Ritesh HiremathDhairyaMajmudar
authored
Fix: Allignment issue in the blog page (#1029)
* Fixing the allignment issue in the blog page * Added some changes * Update pages/blog/index.page.tsx Co-authored-by: Dhairya Majmudar <[email protected]> * 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 <[email protected]> Co-authored-by: Dhairya Majmudar <[email protected]>
1 parent 96ec5f2 commit 6b762a2

File tree

3 files changed

+131
-22
lines changed

3 files changed

+131
-22
lines changed

‎pages/blog/index.page.tsx

+66-8
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ import { useRouter } from 'next/router';
1212
import useSetUrlParam from '~/lib/useSetUrlParam';
1313
import { SectionContext } from '~/context';
1414

15+
type Author = {
16+
name: string;
17+
photo?: string;
18+
link?: string;
19+
byline?: string;
20+
};
1521
export type blogCategories =
1622
| 'All'
1723
| 'Community'
@@ -286,14 +292,40 @@ export default function StaticMarkdownPage({
286292
/>
287293
</div>
288294
</div>
289-
<div className='flex flex-row items-center'>
290-
<div className='flex flex-row pl-2 mr-2'>
295+
<div
296+
className={`
297+
flex
298+
flex-row
299+
items-center
300+
`}
301+
>
302+
<div
303+
className={`
304+
flex
305+
flex-row
306+
pl-2
307+
mr-2
308+
`}
309+
>
291310
{(frontmatter.authors || []).map(
292-
(author: any, index: number) => {
311+
(author: Author, index: number) => {
312+
const sizeClass =
313+
frontmatter.authors.length > 2
314+
? 'h-8 w-8'
315+
: 'h-11 w-11';
293316
return (
294317
<div
295318
key={index}
296-
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
319+
className={[
320+
'bg-slate-50',
321+
sizeClass,
322+
'rounded-full',
323+
'-ml-3',
324+
'bg-cover',
325+
'bg-center',
326+
'border-2',
327+
'border-white',
328+
].join(' ')}
297329
style={{
298330
backgroundImage: `url(${author.photo})`,
299331
zIndex: 10 - index,
@@ -304,11 +336,37 @@ export default function StaticMarkdownPage({
304336
)}
305337
</div>
306338

307-
<div className='flex flex-col items-start'>
339+
<div
340+
className={`
341+
flex
342+
flex-col
343+
items-start
344+
`}
345+
>
308346
<div className='text-sm font-semibold'>
309-
{frontmatter.authors
310-
.map((author: any) => author.name)
311-
.join(' & ')}
347+
{frontmatter.authors.length > 2 ? (
348+
<>
349+
{frontmatter.authors
350+
.slice(0, 2)
351+
.map((author: Author, index: number) => (
352+
<span key={author.name}>
353+
{author.name}
354+
{index === 0 && ' & '}
355+
</span>
356+
))}
357+
{'...'}
358+
</>
359+
) : (
360+
frontmatter.authors.map(
361+
(author: Author, index: number) => (
362+
<span key={author.name}>
363+
{author.name}
364+
{index < frontmatter.authors.length - 1 &&
365+
' & '}
366+
</span>
367+
),
368+
)
369+
)}
312370
</div>
313371

314372
<div className='text-slate-500 text-sm dark:text-slate-300'>

‎pages/community/index.page.tsx

+33-7
Original file line numberDiff line numberDiff line change
@@ -394,15 +394,41 @@ export default function communityPages(props: any) {
394394
/>
395395
</div>
396396
<div className='flex ml-2 mb-2 '>
397-
<div
398-
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
399-
style={{
400-
backgroundImage: `url(${blogPosts[0].frontmatter.authors[0].photo})`,
401-
}}
402-
/>
397+
{(blogPosts[0].frontmatter.authors || []).map(
398+
(author: any, index: number) => {
399+
return (
400+
<div
401+
key={index}
402+
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
403+
style={{
404+
backgroundImage: `url(${author.photo})`,
405+
zIndex: 10 - index,
406+
}}
407+
/>
408+
);
409+
},
410+
)}
403411
<div className='flex flex-col ml-2'>
404412
<p className='text-sm font-semibold dark:text-white'>
405-
{blogPosts[0].frontmatter.authors[0].name}
413+
{blogPosts[0].frontmatter.authors.length > 2 ? (
414+
<>
415+
{blogPosts[0].frontmatter.authors
416+
.slice(0, 2)
417+
.map((author: any, index: number) => (
418+
<span key={author.name}>
419+
{author.name}
420+
{index === 0 && ' & '}
421+
</span>
422+
))}
423+
{'...'}
424+
</>
425+
) : (
426+
blogPosts[0].frontmatter.authors.map(
427+
(author: any) => (
428+
<span key={author.name}>{author.name}</span>
429+
),
430+
)
431+
)}
406432
</p>
407433
<div className='dark:text-slate-300 text-sm'>
408434
<span>

‎pages/index.page.tsx

+32-7
Original file line numberDiff line numberDiff line change
@@ -467,16 +467,41 @@ const Home = (props: any) => {
467467
</div>
468468

469469
<div className='flex ml-2 mb-2 '>
470-
<div
471-
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
472-
style={{
473-
backgroundImage: `url(${blogPosts[0].frontmatter.authors[0].photo})`,
474-
}}
475-
/>
470+
{(blogPosts[0].frontmatter.authors || []).map(
471+
(author: any, index: number) => {
472+
return (
473+
<div
474+
key={index}
475+
className='bg-slate-50 h-[44px] w-[44px] rounded-full -ml-3 bg-cover bg-center border-2 border-white'
476+
style={{
477+
backgroundImage: `url(${author.photo})`,
478+
zIndex: 10 - index,
479+
}}
480+
/>
481+
);
482+
},
483+
)}
476484
<div className='flex flex-col ml-2'>
477485
<p className='text-sm font-semibold dark:text-slate-300'>
478-
{blogPosts[0].frontmatter.authors[0].name}
486+
{blogPosts[0].frontmatter.authors.length > 2 ? (
487+
<>
488+
{blogPosts[0].frontmatter.authors
489+
.slice(0, 2)
490+
.map((author: any, index: number) => (
491+
<span key={author.name}>
492+
{author.name}
493+
{index === 0 && ' & '}
494+
</span>
495+
))}
496+
{'...'}
497+
</>
498+
) : (
499+
blogPosts[0].frontmatter.authors.map((author: any) => (
500+
<span key={author.name}>{author.name}</span>
501+
))
502+
)}
479503
</p>
504+
480505
<div className='text-slate-500 text-sm dark:text-slate-300'>
481506
<span>
482507
{blogPosts[0].frontmatter.date} &middot; {timeToRead}{' '}

0 commit comments

Comments
 (0)