☂️ Rebranding of the website

[ematipico]

Background

We recently announced that we have a new logo with new colours, this means that we also need to rebrand the website (other than other things).

With the rebranding, I think we should make few changes to our website. Before the fork, the website was divided in two, the main website and the docs website under a different domain. When I announced the fork, I put everything under Starlight because it was easiest and quickest way to have everything ready, with styles for docs.

Although the blog and the playground retained some of the old styles - the blog uses some weird frontmatter and we could make everything better by using content collections and astro assets - the playground is a page that contains a react application. The reason why the styles are different is because the playground needs a full page to function, but the top bar didn't allow to have links, so I had to use the old top bar, which has some broken style. The playground isn't part of starlight at the moment.

At the moment the website is powered by Starlight and Astro. Starlight provides very good styles and components for documentation. Now starlight allows to override its components, which is a feature I was missing.

Possible solutions

Now, we have two options to tide up everything together:
1 keep using starlight for all the pages, and override its components where needed, especially the top bar. Blog, playground and docs should always be accessible from the top bar, although sometimes we won't have much freedom with design and styles
2. use Starlight only for docs/* directory (we don't have it now, we will create it), and the other pages will be built from scratch. We have more freedom in terms of design, but should make sure that we don't deviate too much from the colour palette that starlight offers. Some websites that use starlight for their docs use this approach. I believe it's possible to import starlight styles in pages that don't belong to starlight.

At this repository you can find all the resources you need (colours and assets): https://github.com/biomejs/resources

Starlight has features for creating translated content, and since our Japanese community is growing a lot, maybe we could start translating content in Japanese.

Please let us know if you're willing to help, let us know if you have some ideas other the ones I suggested. Let's use this issue for coordinating ourselves and asking questions.

cc @biomejs/maintainers I recall that some of you wanted to help with the project

Main tasks

• ☂️ Translate the website in Japanese 🇯🇵  #880
• ☂️ Refactor website 💻  #881
• Rebrand the homepage #882

I want to help, what should I do?

• head to one of the main tasks issues;
• make sure you understand the issue and what's missing;
• if you want to work but you don't know what you can do, feel free to ask what you can do. A member of the community or maintainer will reply;
• if you know what to do, please add a comment saying what you will do. This is important because:
  • so other contributors won't work on something you're doing;
  • helps us maintainers to coordinate the work;
  • if two contributors work on the same thing, and only one added a comment, that user will have their PR merged;
• use GitHub to coordinate with people, use Discord for quick feedback;

Important

If you changes apply new styles/user facing changes, please share screenshots of the new changes [desktop and mobile]. Unfortunately, we have some limitations with our preview deployments, which we are trying to solve.
Content changes don't require screenshots unless you want to.

[vasucp1207]

I want to give it a try using component overriding.

[Gumichocopengin8]

I'm willing to help implementing the rebranded website and translating it into Japanese.

[vasucp1207]

I'm willing to help implementing the rebranded website and translating it into Japanese.

Sure, once I am done with the basic revamp, then you can start working on translation and other ideas you like to implement.

[ematipico]

@vasucp1207 I'm not sure what you meant with your previous comment, but I understood that you were only experimenting. I think there's no reason to block other users, unless they decide to work on something that is already taken.

@Gumichocopengin8 thank you! If you start translating the website, you're free to start whenever you want, I created the branch website-v2. We can open PRs against that branch and we can push the new changes there. I will update the description of the issue with more information soon.

[Gumichocopengin8]

@ematipico ok sounds good! Do you know if Biome already have multi-language support? I wonder which folders/files I can use for the translation.

[ematipico]

@ematipico ok sounds good! Do you know if Biome already have multi-language support? I wonder which folders/files I can use for the translation.

We can enable internationalisation using starlight, here the instructions on how to do it: https://starlight.astro.build/guides/i18n/

[vasucp1207]

@vasucp1207 I'm not sure what you meant with your previous comment, but I understood that you were only experimenting. I think there's no reason to block other users, unless they decide to work on something that is already taken.

@Gumichocopengin8 thank you! If you start translating the website, you're free to start whenever you want, I created the branch website-v2. We can open PRs against that branch and we can push the new changes there. I will update the description of the issue with more information soon.

Sorry, I just meant that I am working on the changing logos and home page redesigning.

[ematipico]

@vasucp1207 no worries. Please next time, communicate what you plan to do before you start doing the work and be precise.

This is important because:

• so other contributors won't work on something you're doing
• helps us maintainers to coordinate the work

Also, it's fine if you're experimenting. Please wait for further information on how to proceed with the works :)

[yanthomasdev]

oops, wasn't aware of this issue, but since I've been working on some refactors/changes across the website, I'll leave my 2 cents here.

1 keep using starlight for all the pages, and override its components where needed, especially the top bar. Blog, playground and docs should always be accessible from the top bar, although sometimes we won't have much freedom with design and styles

IMO this is the best option, considering the idea, for now, is only to have "Blog", "Playground" and "Docs", I don't think it justifies going full custom on the other pages. Also, using Starlight's styles outside it is not as straightforward, since most of these cannot be just imported, and would rather need to be copied over, or used from within one of Starlight's internal layouts, etc.

Starlight just got component overriding support which should work perfectly for the proposed changes in the sibling issue for this use case, I've also implemented an easier way to use the Starlight layout/styles outside it on #937, which should help anyone who's working on the non-src/content pages.

Anyone, do feel free to reach out/ping me if any guidance is necessary related to Starlight, or if you want me to tackle anything in particular. 🫡

[zhoujian-official]

Is there a way to contribute translation of docs to other languages besides Japanese?

[ematipico]

Is there a way to contribute translation of docs to other languages besides Japanese?

If there are enough members that can maintain translated documentation, that would be amazing.

We appreciate any help ☺️

[zhoujian-official]

Would like to contribute to Chinese translation. Maybe you can create a wiki or a docs repo so people can contribute translation easily.

[ematipico]

Would like to contribute to Chinese translation. Maybe you can create a wiki or a docs repo so people can contribute translation easily.

The website uses starlight, which supports having multiple languages.

https://starlight.astro.build/guides/i18n/

You can check how the pages are translated in Japanese. Any contribution is welcome, and you're willing to help, we could create an issue and see if there are other people that can help