Refresh the docs.talawa.io website for 2025

[palisadoes]

Requirements

There are multiple related requirements. Two PRs will be required:

1. The first, to update the site's CSS
2. Update the home page

CSS

The current site look and feel is not optimal. We need it to be more modern. The Hasura v2.0 documentation site has an attractive color scheme that matches our desired approach.

• https://hasura.io/docs/3.0/index/

1. Convert the CSS in this repo that's used for https://docs.talawa.io to match that of https://hasura.io/docs/3.0/index/
2. The reference CSS should be available here:
   • https://github.com/hasura/ddn-docs/tree/main
3. We don't want a collapsible left drawer.
   
4. We want to restore dark/light mode capabilities
5. We don't need search capabilities. Google works just fine.

NavBar

The NavBar must have entries for:

1. General that links to https://docs.talawa.io/
2. Mobile that links to https://docs-mobile.talawa.io/
3. Admin that links to https://docs-admin.talawa.io/
4. API that links to https://docs-api.talawa.io/

The NavBar must be identical across all sites. Coordinate with other contributors to do this.

Homepage

We want to update the home page. You can take inspiration from the projects listed here as "Favorites": https://docusaurus.io/showcase

The home page of this site and the others referenced before must each be unique to reduce confusion for the user.

1. You must use the updated CSS. The color scheme must match.
2. We need a more intuitive layout to access the links to other https://docs.talawa.io/ pages
   1. The features listed on the current home page must be easily accessible
   2. Ideally, we should have fewer links.
      1. Developer Guides: We need to separate links to autogenerated documentation and the manual general content in a more intuitive way.
      2. User Guides: A separate sidebar should be considered
      3. Features (Maybe)
   3. These sites have used interesting approaches with multiple context specific side bars:
      6. https://wiki.iota.org/
      7. https://reactnative.dev/
      8. https://developers.atinternet-solutions.com/piano-analytics/
3. The links in the footer must be unchanged
4. The look and feel must be professional with minimal use of imagery

Other

Describe alternatives you've considered

• N/A

Approach to be followed (optional)

• N/A

Additional context

• This CSS will be the basis for all Palisadoes Foundation Docusaurus based websites

Potential internship candidates

Please read this if you are planning to apply for a Palisadoes Foundation internship

• https://github.com/PalisadoesFoundation/developer-docs/issues/359

[palisadoes]

@bint-Eve

1. This is the update I referenced. Do you want to work on this?
2. We need the update completed in the next week.

[Abhi-MS]

Is anyone working on this? If not, could you please assign this to me?

[palisadoes]

@Abhi-MS We really need to get this up and running in a few days. Your GitHub profile shows few updates. I'm going to need to assign it to someone else.

[Abhi-MS]

@palisadoes Hi, I actually started looking into it already. I understand your position. I have the coming days completely dedicated to this. It would be great if I could work on this. Please let me know.

[Mamatha1718]

Dear @palisadoes , @Abhi-MS,
My name is Bandi Mamatha, and I am an aspiring software developer interested in contributing to the PalisadoesFoundation organization through GSoC 2025.

I was deeply inspired by the scope and impact of your contributions. I am experience in HTML, CSS, and JavaScript, python, I am eager to participate in GsoC 2025.In NRNB organization I would be grateful if you could share your insights on:

The best way to prepare for contributing to the talawa-docs.
What are the prerequisites and how to start contributing effectively.
Will you please provide discord channel of your organization if available.
Any advice for effectively communicating with mentors and aligning with PalisadoesFoundation goals during GSoC.
Your experience and guidance would mean a lot to me as I embark on this journey. Thank you for your time, and I look forward to your response.

Best regards,
Bandi Mamatha
mamathabandi1718@gmail.com

[bint-Eve]

@Abhi-MS are you working on both PRs ?

[palisadoes]

Dear @palisadoes , @Abhi-MS, My name is Bandi Mamatha, and I am an aspiring software developer interested in contributing to the PalisadoesFoundation organization through GSoC 2025.

I was deeply inspired by the scope and impact of your contributions. I am experience in HTML, CSS, and JavaScript, python, I am eager to participate in GsoC 2025.In NRNB organization I would be grateful if you could share your insights on:

The best way to prepare for contributing to the talawa-docs. What are the prerequisites and how to start contributing effectively. Will you please provide discord channel of your organization if available. Any advice for effectively communicating with mentors and aligning with PalisadoesFoundation goals during GSoC. Your experience and guidance would mean a lot to me as I embark on this journey. Thank you for your time, and I look forward to your response.

Best regards, Bandi Mamatha mamathabandi1718@gmail.com

1. Please ask to be assigned to one of the linked issues above.
2. Coordinate with the others here to make sure we have a seamless UX
3. Use @tasneemkoushar as a resource

[palisadoes]

@Abhi-MS are you working on both PRs ?

1. Please ask to be assigned to one of the linked issues above.
2. Coordinate with the others here to make sure we have a seamless UX
3. Use @tasneemkoushar as a resource

[Mamatha1718]

Thank you for your prompt response and guidance. To ensure seamless collaboration, could you let me know if there is a dedicated Discord channel or any other communication platform where I can coordinate with the team and discuss progress? Additionally, I will be reaching out to @tasneemkoushar any further assistance.

[palisadoes]

Thank you for your prompt response and guidance. To ensure seamless collaboration, could you let me know if there is a dedicated Discord channel or any other communication platform where I can coordinate with the team and discuss progress? Additionally, I will be reaching out to @tasneemkoushar any further assistance.

Please ask to be signed the issue above. Chick on the link

[Mamatha1718]

Thank you for your response.

[palisadoes]

Thank you for your prompt response and guidance. To ensure seamless collaboration, could you let me know if there is a dedicated Discord channel or any other communication platform where I can coordinate with the team and discuss progress? Additionally, I will be reaching out to @tasneemkoushar any further assistance.

We have a slack channel which can be found in the link on the README.md of the repo. Ask to be assigned to the mobile issue if you want to participate in this activity.

[palisadoes]

Please refer to the work here. Use that CSS file

• Refactor Site CSS for the new modern look  developer-docs#17

What's the easiest, best practice way to ensure we have only one copy of the CSS?

[Abhi-MS]

I already updated the css for this issue. It is somewhat similar to this work but more similar to the link(https://hasura.io/docs/3.0/index/) provided in this issue. Should I rework the css for this issue?

[palisadoes]

Please use what you are working on.

We need to make sure the talawa* CSS is identical. That will be important for what needs to be achieved

[Mamatha1718]

Thank you for your prompt response and guidance. To ensure seamless collaboration, could you let me know if there is a dedicated Discord channel or any other communication platform where I can coordinate with the team and discuss progress? Additionally, I will be reaching out to @tasneemkoushar any further assistance.

We have a slack channel which can be found in the link on the README.md of the repo. Ask to be assigned to the mobile issue if you want to participate in this activity.

Thank you for your response. I will join in slack channel. I am eager to participate actively and i ask assigned to me, but whom i ask to assign to me.
Looking forward to your response.
Thank you.

[Mamatha1718]

Hi @palisadoes @Abhi-MS ,
I am eager to tackle the mobile issue. will you please assign to me.

[palisadoes]

@Abhi-MS

1. Thanks for the CSS changes. In the next phase we'll need to use the common NavBar as stated here:
   • Talawa-Mobile: Create a new documentation website talawa#2678
   • I also updated the original requirements in this issue to add clarification
2. This means that the buttons here won't need to be a part of the new home page design
   
3. The original requirement should be re-evaluated. The pages for Admin, Mobile and API will need to be moved to the respective new sites. This is because the new site issues were created after thinking more thoroughly about the challenges. @bint-Eve @Mamatha1718 take note and add this migration to your respective issues.
4. Regarding the home page. The aim of the redesign is to refresh the site as a proxy for the progress we've made over the past year. We're going to need some new design elements including imagery. Some of the sites in the issue have some interesting cards. It needs to look completely different.

[palisadoes]

Hi @palisadoes @Abhi-MS , I am eager to tackle the mobile issue. will you please assign to me.

You have to ask in the comments of the mobile issue. I cannot do it otherwise. GitHub won't show you as an assignee candidate option unless you do that. I cannot put a username, it only provides a prepopulated dropdown.

[Mamatha1718]

Thank you for your response.

[palisadoes]

Thank you for your response.

Please scroll up, click the link and ask to be assigned to the mobile issue.

[karthik-nair-20]

Hi @palisadoes | @Abhi-MS , could we split this workload, 2 issue are pending common navbar and homepage re-design, can I work on any one of them :)

[Abhi-MS]

Hi @palisadoes | @Abhi-MS , could we split this workload, 2 issue are pending common navbar and homepage re-design, can I work on any one of them :)

Hi I am currently working on that part of the issue. Navbar is already done. But it comes under the second PR.

[palisadoes]

1. Please add the changes discussed in slack too.
2. Reopening

[palisadoes]

1. "Learn More" should link to the Introduction page
2. Change "Introduction" to "GitHub" and link to https://github.com/PalisadoesFoundation
3. This will be more intuitive
   

[Abhi-MS]

Will work on all the changes mentioned. Thank you.

[palisadoes]

Reopening

1. Why are the bullets, numbered lists and their text so big?
   
2. The menus are not rendering correctly either
   

[yugam-aggarwal]

can you assign this to me please. I have relevant experience.

[palisadoes]

It's happening in Firefox, not Chrome at 100%

[bint-Eve]

It's happening in Firefox, not Chrome at 100%

ohh cross-browser compatibility issue, ok sir, we'll modify the existing css

[babitarit]

@palisadoes can i work on this issue, i can fix this ??

[palisadoes]

It's happening in Firefox, not Chrome at 100%

ohh cross-browser compatibility issue, ok sir, we'll modify the existing css

1. It's happening in all browsers with this menu item. See how Hasura does it below
   

2. Hasura uses:

   1. a much smaller font.
   2. smaller indentations
   3. less of a margin on the left hand side.
   4. smaller top and bottom margins between menu items

   

[palisadoes]

Reopening
@Abhi-MS We still have the issue where the 1200px width isn't being applied to each row of cards.

[Abhi-MS]

Reopening
@Abhi-MS We still have the issue where the 1200px width isn't being applied to each row of cards.

Could you please give some specifics/image to reproduce the issue

[palisadoes]

Off center

[palisadoes]

Doesn't line up

[palisadoes]

Width change 1080px to 1400px. The top banner is 1500px

[palisadoes]

1. We must standardize on a width and justification.
2. We don't have a lot of text content so going full screen isn't appropriate.
3. I think 1280px for all rows of card is best. If you set that as a variable, we can easily update it if it is too narrow.

[palisadoes]

I have to reopen this. It's an extreme case, but we have truncation of the button and image on wide screens:

1. Ultra wide screen (Firefox)
   

2. Ultra wide screen (Chrome)
   

3. Ultra wide screen (Opera)
   

4. Normal screen
   

[palisadoes]

In these cases, the image isn't aligned on the right hand side