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

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:

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

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):

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

[x] Yes, I signed my commits.

Jun 02 '25 20:06 tirukovelamanoj

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

Jun 02 '25 21:06 l5io

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.

Jun 03 '25 11:06 M-DEV-1

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

Jun 03 '25 11:06 M-DEV-1

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

Jun 03 '25 11:06 l5io

🚨 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: star on the project :smile:

Jun 03 '25 11:06 github-actions[bot]

🚨 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: star on the project :smile:

Jun 03 '25 11:06 github-actions[bot]

@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.

Jun 03 '25 19:06 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.

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.

Jun 04 '25 07:06 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

Jun 04 '25 07:06 M-DEV-1

Screenshot from 2025-06-04 10-22-43

Jun 04 '25 07:06 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.

Jun 04 '25 07:06 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.

Jun 04 '25 07:06 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.

Definitely

Jun 04 '25 07:06 LibenHailu

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

Jun 05 '25 05:06 l5io

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

Jun 06 '25 01:06 l5io

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

Jun 06 '25 15:06 l5io

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

Jun 07 '25 15:06 l5io

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

Jun 07 '25 16:06 l5io

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

Jun 08 '25 02:06 l5io

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/

Jun 08 '25 02:06 tirukovelamanoj

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!

Jun 09 '25 10:06 LibenHailu

@tirukovelamanoj Let's create issues for further enhancement.

Jun 09 '25 12:06 LibenHailu

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.

Jun 10 '25 14:06 tirukovelamanoj

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.

Jun 27 '25 00:06 stale[bot]

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

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

Jun 27 '25 08:06 M-DEV-1

@tirukovelamanoj Thank you for your contribution! Let's discuss this during the website call today at 7 AM CT

Add it as an agenda item to the meeting minutes, if you would :)

Jun 30 '25 11:06 vr-varad

@tirukovelamanoj, did you present this work? What was the outcome? Are you still working on this PR?

Jul 07 '25 03:07 leecalcote

@tirukovelamanoj, did you present this work? What was the outcome? Are you still working on this PR?

@leecalcote, I Apologize for the delay in progressing with the PR. I have been caught up with a lot of personal work lately and, unfortunately, couldn't make time to complete the fixes as planned.

I am still working on the PR and will have it ready for review by tomorrow's meeting. I will incorporate any recommendations that come up and aim to complete it right after. Thanks for your patience, and I appreciate your understanding.

Jul 07 '25 04:07 tirukovelamanoj

🚀 Preview for commit 75084394028814af176a0d24d48068125e22c2f1 at: https://686ca89221444294c2598a69--layer5.netlify.app

Jul 08 '25 05:07 l5io

🚀 Preview for commit 95c101914fe87179101cfefeefba475103cc7636 at: https://686cad530e652570be8b8be6--layer5.netlify.app

Jul 08 '25 05:07 l5io