Refactor/Update : Homepage Section for Improved Developer Experience and Clean Code

[aviraldevv]

Describe the bug

The current code for our new website is not as clean, developer-friendly, and professional as it could be. This issue aims to address these concerns by refactoring and updating the homepage, ultimately making it easier for developers to contribute to the project.

Additional details Not Required

Potential internship candidates Please read this if you are planning to apply for a Palisadoes Foundation internship https://github.com/PalisadoesFoundation/talawa/issues/359

[github-actions[bot]]

Congratulations on making your first Issue! :confetti_ball: If you haven't already, check out our Contributing Guidelines and Issue Reporting Guidelines to ensure that you are following our guidelines for contributing and making issues.

[aviraldevv]

@palisadoes Please assign this issue to me.

[Biki-das]

@aviraldevv just a small feedback, currently the darkmode/light mode is not visible after the new home page design.

[aviraldevv]

@Biki-das I understand your concern but we don't need dark mode right now according to our current design standards. Let's work on improving its look and feel. If you have any ideas do share with us.

[Biki-das]

@Biki-das I understand your concern but we don't need dark mode right now according to our current design standards. Let's work on improving its look and feel. If you have any ideas do share with us.

sure i have lots of ideas to talk about? prefer it in slack or here itself?

[aviraldevv]

@Biki-das I understand your concern but we don't need dark mode right now according to our current design standards. Let's work on improving its look and feel. If you have any ideas do share with us.

sure i have lots of ideas to talk about? prefer it in slack or here itself?

wherever you feel comfortable :)

[palisadoes]

There will be no dark mode. It causes too much additional work to make sure all the images, CSS and other design elements are compatible. As we increase the levels of automated documents it will become unmanageable.

[Biki-das]

There will be no dark mode. It causes too much additional work to make sure all the images, CSS and other design elements are compatible. As we increase the levels of automated documents it will become unmanageable.

understood!

[Biki-das]

@aviraldevv i would like to start from some very small improvement

Currently the Navbar does not show the active link , which section a particular user is on, this can be a good user experience to fix up

https://user-images.githubusercontent.com/72331432/233436091-31d896cc-5ead-4527-a683-9cf94f952c90.mp4

[aviraldevv]

@Biki-das

Appreciated, Please feel free to make any changes that you believe will improve its visual appeal. Kindly share the screen recording with us after the modifications have been made over here.

[Biki-das]

@Biki-das

Appreciated, Please feel free to make any changes that you believe will improve its visual appeal. Kindly share the screen recording with us after the modifications have been made over here.

Need to dive into the custom.css file, it has been overwritten as by default active links work out of the box in docusuaurus! and you mentioned clean code in the issue, what does it exactly convey? could you elaborate

[aviraldevv]

Nothing just simple refactoring of code to make it easier to understand for other developers. Don't wait for it there might be a slight delay in my PR due to my end-semester examinations.

[Biki-das]

Nothing just simple refactoring of code to make it easier to understand for other developers. Don't wait for it there might be a slight delay in my PR due to my end-semester examinations.

? which section of code are you talking like the codebase of our docs?

[aviraldevv]

Nothing just simple refactoring of code to make it easier to understand for other developers. Don't wait for it there might be a slight delay in my PR due to my end-semester examinations.

? which section of code are you talking like the codebase of our docs?

Yepp, specifically the landing page @Biki-das .

[Biki-das]

got you! thanks for the feedback

[Biki-das]

@aviraldevv we really need a linter (Prettier), the linting is not consistent in files and this really make the code more unorganised, probably need to talk to palisadoes for the same

Also wen through the main hompage index.tsx file and i have a few suggestion to make the code a little bit easier for a beginner to dive in:-

1. we can comment out the imports on the basis of what they are importing, something like below

   
   // Import the necessary modules
   import React, { useEffect } from "react";
   import Head from "@docusaurus/Head";
   import useBaseUrl from "@docusaurus/useBaseUrl";
   import Layout from "@theme/Layout";
   import CodeBlock from "@theme/CodeBlock";

// Import the components import DissectionAnimation from "./components/animations/DissectionAnimation"; import HeaderAnimations from "./components/animations/HeaderAnimation"; import TextContent from "./components/TextContent"; import WelcomeScreen from "./components/WelcomeScreen";

Other components such as textcomponent and welcome screen can be extracted to a the components folder , this way the code lines becomes less and easier to sail through, looking forward to your feedback!

[aviraldevv]

@Biki-das Nice idea , I'll take into account your suggestions in my PR. Thanks buddy,

[Biki-das]

@Biki-das Nice idea , I'll take into account your suggestions in my PR. Thanks buddy,

@aviraldevv should i send a pr related to the same?

[aviraldevv]

Sure go ahead @Biki-das .

[Biki-das]

This is the updated code after my refactored working, if it's fine, then assign me the issue and i shall make the PR, I have also made few components more type safe!

Below is The animationhook file which had two useffect which could be normalized to one, below is the updated code

The disect animation also was using the left property which is not the best for performance since it triggers layout changes so we can rather add the translate property and it work fine as i have tested it

cc @aviraldevv @Cioppolo14

[Biki-das]

@aviraldevv what more things can i help for this issue? anything you have in mind particularly, would love to explore!

[aviraldevv]

Thanks for your efforts @Biki-das . Really appreciate it. We can work together to improve Talawa-Website once my semester exams are over.

[Biki-das]

Thanks for your efforts @Biki-das . Really appreciate it. We can work together to improve Talawa-Website once my semester exams are over.

I am just enjoying the pace of work and the contributions i can make! yeah sure lets make it the best :-)