fix for extra spaces in the beginning every page of handbook.

[tirukovelamanoj]

Description

This PR fixes #
[Handbook] Extra spaces in the beginning every page of handbook. #6312

Notes for Reviewers

Total 16 pages in Table of Contents:

1. About
2. Guidelines
3. Roles
4. Contribution
5. Recognition
6. Repository Overview
7. Projects
8. Mentorship Programs
9. Writing Program
10. UX Contributors
11. Learning
12. Connect with us
13. Code of Conduct
14. Security Vulnerabilities
15. GitHub Process
16. FAQs

And there is extra notable space when the screen width is 750px-768px and >768px for the below pages (Group 1):

1. Contribution
2. Projects
3. Writing Program
4. UX Contributors
5. Code of Conduct
6. Security Vulnerabilities
7. GitHub Process
8. FAQs

These can be fixed by adjusting the margin-top css property of page-section class in Handbook.style.js

      @media (min-width: 750px) {
        margin-top: -32rem;
        margin-left: 20rem;
      }

      @media screen and (min-width: 768px) and (max-height: 1145px) {
        margin-top : -62vh ;
      }

And below are the pages that are having notable extra space when the screen width is in between 750-768px (Group 2):

1. About
2. Guidelines
3. Roles
4. Repository Overview
5. Learning
6. Connect with us

These can also be fixed by adjusting the same CSS properties as above but the reason we are not seeing the extra notable space in-between 750-768px screen width is due to the following lines in code

          <Container>
            <div className="content">
              <a id="top">
                <h2>Layer5 community leader undertake different roles</h2>
              </a>
              <p>
                A leader is someone who can contribute to the Layer5 Community's
                growth by faithfully upholding one of the responsibilities outlined in the roles below.
              </p>

So because of <a><h2></h2><p></p><a> these tags being inside the <div className="content">, the problem is becomming different if we move them above the div tag like the below these would also fall under the same fix as of first 8 pages (Group 1)

        <Container>
          <h2 className="heading-top">General contribution flow</h2>
          <p>
            Pull requests (PRs) are the best ways to propose changes to a
            project repository. At Layer5 org, we use the Github Flow:
          </p>
          <div className="content">
            <a id="Clone your fork">  <h3>Clone your fork to your local machine</h3> </a>
            <ul>

Signed commits

• Yes, I signed my commits.

[l5io]

🚀 Preview for commit 830e1a8 at: https://683e11e1abd551005b42e309--layer5.netlify.app

[M-DEV-1]

Hi @tirukovelamanoj 👋🏼

The reduction is extra spaces is great, but we'll need to reduce them a bit more, if possible. Some of these pages have other broken links or images, but we can deal with them in a seperate issue.

[M-DEV-1]

@tirukovelamanoj can we make these changes by manipulating the content class? instead of manually pushing these elements outside the div?

[l5io]

🚀 Preview for commit e87f8f1 at: https://683edfb2d1ea7e6620fe6c8a--layer5.netlify.app

[github-actions]

🚨 Alert! Git Police! We couldn’t help but notice that one or more of your commits is missing a sign-off. A what? A commit sign-off (your email address).

To amend the commits in this PR with your signoff using the instructions provided in the DCO check.

To configure your dev environment to automatically signoff on your commits in the future, see these instructions.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[github-actions]

🚨 Alert! Git Police! We couldn’t help but notice that one or more of your commits is missing a sign-off. A what? A commit sign-off (your email address).

To amend the commits in this PR with your signoff using the instructions provided in the DCO check.

To configure your dev environment to automatically signoff on your commits in the future, see these instructions.

---

        Be sure to join the community, if you haven't yet and please leave a ⭐ star on the project 😄

[tirukovelamanoj]

@tirukovelamanoj can we make these changes by manipulating the content class? instead of manually pushing these elements outside the div?

Sure @M-DEV-1, I noticed these when I saw the Preview, I did raise the PR still though because I couldn't run the repo in my local so I just pushed these changes to see if they work or not. I will accommodate the requested changes.

Thank you for the review.

[LibenHailu]

@tirukovelamanoj can we make these changes by manipulating the content class? instead of manually pushing these elements outside the div?

Sure @M-DEV-1, I noticed these when I saw the Preview, I did raise the PR still though because I couldn't run the repo in my local so I just pushed these changes to see if they work or not. I will accommodate the requested changes.

Thank you for the review.

Hi @tirukovelamanoj, Regarding the issue running the project, If you have github pro, you can run it in on github codespace, if you have a student email you can get free access to it.

[M-DEV-1]

thanks @LibenHailu, just dropping the discussion forum link here for selective rendering - https://discuss.layer5.io/t/optimizing-large-scale-gatsby-builds-through-selective-rendering/6951

[LibenHailu]

[LibenHailu]

thanks @LibenHailu, just dropping the discussion forum link here for selective rendering - https://discuss.layer5.io/t/optimizing-large-scale-gatsby-builds-through-selective-rendering/6951

@M-DEV-1 This optimization improves the build process a lot, however it is not working for me on 8GB RAM still, we might have to explore other optimizations.

[M-DEV-1]

thanks @LibenHailu, just dropping the discussion forum link here for selective rendering - https://discuss.layer5.io/t/optimizing-large-scale-gatsby-builds-through-selective-rendering/6951

@M-DEV-1 This optimization improves the build process a lot, however it is not working for me on 8GB RAM still, we might have to explore other optimizations.

Hmm, we'll have to take this up in the sites meeting. We can discuss in depth there. Would you also message about this issue in the #websites channel? We can start there.

[LibenHailu]

thanks @LibenHailu, just dropping the discussion forum link here for selective rendering - https://discuss.layer5.io/t/optimizing-large-scale-gatsby-builds-through-selective-rendering/6951

@M-DEV-1 This optimization improves the build process a lot, however it is not working for me on 8GB RAM still, we might have to explore other optimizations.

Hmm, we'll have to take this up in the sites meeting. We can discuss in depth there. Would you also message about this issue in the #websites channel? We can start there.

Definitely

[l5io]

🚀 Preview for commit 4e63aa2 at: https://6841267a599b2ddfeb47de8e--layer5.netlify.app

[l5io]

🚀 Preview for commit 55de1b2 at: https://684245ff81532099fb680aef--layer5.netlify.app

[l5io]

🚀 Preview for commit a574f4e at: https://684304288da13145ded28037--layer5.netlify.app

[l5io]

🚀 Preview for commit 0e91acd at: https://68445dbb9928c8331183811f--layer5.netlify.app

[l5io]

🚀 Preview for commit f114845 at: https://68446de817cd2b33e9f9b628--layer5.netlify.app

[l5io]

🚀 Preview for commit 9662f37 at: https://6844ef30650af7c13fe3c509--layer5.netlify.app

[tirukovelamanoj]

Thank you @M-DEV-1 , @LibenHailu for the review.

I attempted to use the selective rendering method mentioned in the post above. While it did reduce the overall build time, the responsiveness was still lacking, and page rendering remained slow. It took nearly 15 minutes just to load the home page. I tested this approach both on my local machine and in GitHub Codespaces, but was only able to successfully complete the build once while using Codespaces.

@M-DEV-1 as requested, I have updated the CSS to properly display the content section along with the heading and text. I also made some code adjustments on a few other pages, moving the <h2> and <p> tags inside the content <div> to apply the same styling changes consistently. Additionally, I fixed issues with broken text and spacing. All 16 pages are now rendering without any noticeably excessive spacing. Please let me know if these changes sufficiently address the issue, and I hope you can review them again.

Please see below for the most recent preview of the changes:

• https://6844ef30650af7c13fe3c509--layer5.netlify.app/

[LibenHailu]

Hi @tirukovelamanoj,
Thank you for working under these circumstances. We hope to find a solution soon.

As for the review it looks good visually. However, it would be preferable to fix the behavior that’s pushing the content down, rather than pulling the content up. It's probably due to a margin-top on some of the elements. I believe this could become an issue in the next iteration. LGTM!

[LibenHailu]

@tirukovelamanoj Let's create issues for further enhancement.

[tirukovelamanoj]

Let's create issues for further enhancement.

Sure @LibenHailu , I Apologize for the delayed response. I have been tied up with a lot of personal tasks recently. We can create a story to identify the classes responsible for negative padding on the handbook pages and address the necessary CSS updates related to those changes as a new issue.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[M-DEV-1]

Hi @tirukovelamanoj, the DCO check is failing. Please signoff your commits.

Ref: https://github.com/layer5io/layer5/pull/6522/checks?check_run_id=43677831839