Fix: Allignment issue in the blog page #1029

Ritesh2351235 · 2024-10-17T06:57:35Z

What kind of change does this PR introduce?
Fix for the Blog page alignment bug and recover the banner image for the latest GSOD blog.

Issue Number:

Closes 🐛 Bug: Alignment issues and banner image missing at latest GSoD blog card #1019

Screenshots/videos:

Summary
Resized the author avatar sizes for more than 2 authors for a single blog which solves the banner issue and alignment issue.
Also changes the author name format for more than 2 authors on a single blog which could be seen in the image

Does this PR introduce a breaking change?
No

github-actions

Welcome to the JSON Schema Community. Thanks a lot for creating your first pull request!! 🎉🎉 We are so excited you are here! We hope this is only the first of many! For more details check out README.md file.

github-actions · 2024-10-17T07:00:08Z

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
website	✅ Ready (View Log)	Visit Preview	`8741790`

codecov · 2024-10-17T07:01:27Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (7ecd915) to head (8741790).
Report is 10 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1029   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           10        10           
  Lines          373       373           
  Branches        94        94           
=========================================
  Hits           373       373

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Ritesh2351235 · 2024-10-17T08:05:14Z

@benjagm Hey Benjamin I tried fixing the blog page alignment and banner image issue and I am successful while doing it in the local system however the build preview above using cloudfare does not align with my changes locally
How can I fix this issue ?

pages/blog/index.page.tsx

DhairyaMajmudar · 2024-10-17T15:59:28Z

pages/blog/index.page.tsx

+                                </>
+                              ) : (
+                                frontmatter.authors.map(
+                                  (author: any, index: number) => (


here please use the correct data type in place of any

DhairyaMajmudar · 2024-10-17T16:00:00Z

pages/blog/index.page.tsx

+                                <>
+                                  {frontmatter.authors
+                                    .slice(0, 2)
+                                    .map((author: any, index: number) => (


please use the correct data type in place of any

DhairyaMajmudar · 2024-10-17T16:02:33Z

Thank you for the PR @Ritesh2351235 its working well locally, left few suggestions.

Ritesh2351235 · 2024-10-18T04:10:59Z

@DhairyaMajmudar Hey I,m getting some NextJS problems while building the project
I tried reckoning the website and starting the development server again but I failed
You could see the build results down in the github workflow

Co-authored-by: Dhairya Majmudar <[email protected]>

Ritesh2351235 · 2024-10-18T06:02:16Z

@DhairyaMajmudar To handle the type safety in typescript I have added the Author interface in the index.ts file which takes care of any type error.
Let me know if any further changes are required!!

DhairyaMajmudar

Working great, LGTM 🚀

benjagm

It seems that now we lost the other images in the other posts. Can you please check?

Ritesh2351235 · 2024-10-18T18:09:59Z

@benjagm The changes i have made above are working totally fine on the local machine but are not working on the preview above in cloudfare.
Any suggestion how i could solve this error

DhairyaMajmudar · 2024-10-18T18:20:06Z

Comment here can be helpful #1021 (comment)

Iam pulling the origin to update the branch

…fare

Ritesh2351235 · 2024-10-19T06:55:29Z

@DhairyaMajmudar I made the necessary changes in the tailwind config file but again it's working fine locally but the build preview its not showing the required changes

benjagm

Good try, however we should try to avoid using the tailwind safelist that way.

Let's make sure we follow the best practices for avoid our styles to be purged:
https://v2.tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

benjagm · 2024-10-19T09:30:04Z

tailwind.config.js

@@ -4,6 +4,28 @@ module.exports = {
    './components/**/*.{js,ts,jsx,tsx,md}',
  ],
  darkMode: "class",
+  safelist: [


Rather than adding elements to the safelist here we should check for other alternatives like making sure we are adding styles without using string concatenation to create class names:

https://v2.tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

Ritesh2351235 · 2024-10-20T03:59:05Z

@benjagm Thank you!!
The site is working fine now.

benjagm

I just left a comment to see if we can avoid using the tailwind safelist config.

benjagm · 2024-10-21T18:30:32Z

tailwind.config.js

+    'h-8',
+    'w-8',
+    'h-11',
+    'w-11',
+    'bg-slate-50',
+    'rounded-full',
+    '-ml-3',
+    'bg-cover',
+    'bg-center',
+    'border-2',
+    'border-white',
+  ],


Are we sure we need to add this to the safelist? I think we can avoid this.

I have removed the safelist from the tailwindconfig now
Its working fine!

benjagm · 2024-10-24T05:54:10Z

@Ritesh2351235 Can we implement the same change on the landing page? There is a preview of the last blog post, and it will be great to have the same behavior. As soon as we add this, we are ready to merge.

Great job!

Ritesh2351235 · 2024-10-24T06:25:18Z

@benjagm I have corrected the Blog component of the Landing page which aligns similarly to the blog page.

Ritesh2351235 · 2024-10-25T16:52:00Z

Hey @benjagm,
I found the same author error on the community page and have fixed it. I’ll be merging the code soon!

benjagm

Great job!

github-actions · 2024-10-26T07:04:00Z

Congratulations, @Ritesh2351235 for your first pull request merge in this repository! 🎉🎉. Thanks for your contribution to JSON Schema!

Fixing the allignment issue in the blog page

3a57eef

Ritesh2351235 requested a review from a team as a code owner October 17, 2024 06:57

github-actions bot reviewed Oct 17, 2024

View reviewed changes

Ritesh2351235 changed the title ~~Fixing the allignment issue in the blog page~~ Fix: Allignment issue in the blog page Oct 17, 2024

github-actions bot deployed to Preview October 17, 2024 07:00 View deployment

Added some changes

7214fc5

github-actions bot deployed to Preview October 17, 2024 07:54 View deployment

DhairyaMajmudar reviewed Oct 17, 2024

View reviewed changes

pages/blog/index.page.tsx Outdated Show resolved Hide resolved

DhairyaMajmudar reviewed Oct 17, 2024

View reviewed changes

DhairyaMajmudar added the Hacktoberfest-accepted Pull requests accepted for Hacktoberfest'24 label Oct 17, 2024

Ritesh2351235 and others added 2 commits October 18, 2024 09:41

Update pages/blog/index.page.tsx

1252b68

Co-authored-by: Dhairya Majmudar <[email protected]>

Added the suggested Changes like typesafety

32b0571

github-actions bot deployed to Preview October 18, 2024 06:03 View deployment

DhairyaMajmudar approved these changes Oct 18, 2024

View reviewed changes

benjagm requested changes Oct 18, 2024

View reviewed changes

Merge remote-tracking branch 'origin/main' into fix/blog-page-allignment

8866837

Iam pulling the origin to update the branch

github-actions bot deployed to Preview October 19, 2024 06:41 View deployment

Adding the tailwindconfig file to resolve the css conflicts in cloud…

77cd2cc

…fare

github-actions bot deployed to Preview October 19, 2024 06:51 View deployment

benjagm requested changes Oct 19, 2024

View reviewed changes

Changing the string concatenation problem

27124ac

github-actions bot deployed to Preview October 20, 2024 03:55 View deployment

benjagm requested changes Oct 21, 2024

View reviewed changes

Changed the tailwind config file

88eafd4

github-actions bot deployed to Preview October 22, 2024 02:52 View deployment

Ritesh Hiremath added 2 commits October 24, 2024 11:47

Correcting the landing page blog component

e74d76d

Correcting the landing page blog component and resolving some changes

0ccba67

Ritesh2351235 requested a review from benjagm October 24, 2024 06:30

Resolving the tailwind.config file conflicts

a922405

github-actions bot deployed to Preview October 24, 2024 06:38 View deployment

Added the changes to the community page

8741790

Ritesh2351235 closed this Oct 25, 2024

Ritesh2351235 reopened this Oct 25, 2024

github-actions bot deployed to Preview October 25, 2024 16:56 View deployment

benjagm approved these changes Oct 26, 2024

View reviewed changes

benjagm merged commit 6b762a2 into json-schema-org:main Oct 26, 2024
12 of 14 checks passed

benjagm mentioned this pull request Nov 8, 2024

fix: Author Rendering at the Blog page #1066

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Allignment issue in the blog page #1029

Fix: Allignment issue in the blog page #1029

Ritesh2351235 commented Oct 17, 2024

github-actions bot left a comment

github-actions bot commented Oct 17, 2024 •

edited

Loading

codecov bot commented Oct 17, 2024 •

edited

Loading

Ritesh2351235 commented Oct 17, 2024

DhairyaMajmudar Oct 17, 2024

DhairyaMajmudar Oct 17, 2024

DhairyaMajmudar commented Oct 17, 2024

Ritesh2351235 commented Oct 18, 2024 •

edited

Loading

Ritesh2351235 commented Oct 18, 2024

DhairyaMajmudar left a comment

benjagm left a comment

Ritesh2351235 commented Oct 18, 2024

DhairyaMajmudar commented Oct 18, 2024

Ritesh2351235 commented Oct 19, 2024

benjagm left a comment

benjagm Oct 19, 2024

Ritesh2351235 commented Oct 20, 2024

benjagm left a comment

benjagm Oct 21, 2024

Ritesh2351235 Oct 22, 2024

benjagm commented Oct 24, 2024

Ritesh2351235 commented Oct 24, 2024

Ritesh2351235 commented Oct 25, 2024 •

edited

Loading

benjagm left a comment

github-actions bot commented Oct 26, 2024

Fix: Allignment issue in the blog page #1029

Fix: Allignment issue in the blog page #1029

Conversation

Ritesh2351235 commented Oct 17, 2024

github-actions bot left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 17, 2024 • edited Loading

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

codecov bot commented Oct 17, 2024 • edited Loading

Codecov Report

Ritesh2351235 commented Oct 17, 2024

DhairyaMajmudar Oct 17, 2024

Choose a reason for hiding this comment

DhairyaMajmudar Oct 17, 2024

Choose a reason for hiding this comment

DhairyaMajmudar commented Oct 17, 2024

Ritesh2351235 commented Oct 18, 2024 • edited Loading

Ritesh2351235 commented Oct 18, 2024

DhairyaMajmudar left a comment

Choose a reason for hiding this comment

benjagm left a comment

Choose a reason for hiding this comment

Ritesh2351235 commented Oct 18, 2024

DhairyaMajmudar commented Oct 18, 2024

Ritesh2351235 commented Oct 19, 2024

benjagm left a comment

Choose a reason for hiding this comment

benjagm Oct 19, 2024

Choose a reason for hiding this comment

Ritesh2351235 commented Oct 20, 2024

benjagm left a comment

Choose a reason for hiding this comment

benjagm Oct 21, 2024

Choose a reason for hiding this comment

Ritesh2351235 Oct 22, 2024

Choose a reason for hiding this comment

benjagm commented Oct 24, 2024

Ritesh2351235 commented Oct 24, 2024

Ritesh2351235 commented Oct 25, 2024 • edited Loading

benjagm left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 26, 2024

github-actions bot commented Oct 17, 2024 •

edited

Loading

codecov bot commented Oct 17, 2024 •

edited

Loading

Ritesh2351235 commented Oct 18, 2024 •

edited

Loading

Ritesh2351235 commented Oct 25, 2024 •

edited

Loading