Feature: Improve the design of the `lexical.dev`

thegreatercurve commented 1 year ago

Improve the design and look-and-feel of the static pages on lexical.dev

(The site must still use Docusaurus as the site generator).

ixahmedxi commented 1 year ago

I have been playing around in Figma a bit and this is the first initial design that I came up with, would love some feedback on this and thoughts for iterations and improvements.

Landing

thegreatercurve commented 1 year ago

@ixahmedxi I really like this! Thank you for taking it on as well. It's definitely a lot better than the header/hero image we have at the moment.

Is the plan to have the main background color the same as the nav background color? If so, we probably want to add a drop shadow or some kind of visual queue under the nav bar once you start scrolling.

I like the symmetry of centering the nav bar contents as well, but I think we should still keep the search input and dark/light mode toggle, which might compromise your design slightly.

Another design suggestion, could be to add a typewriter effect to the last word in the header, but I'm not sure if that's overkill or overused: https://css-tricks.com/snippets/css/typewriter-effect.

In terms of content under the header, what's there currently in the tabs can probably be inlined to make it more readable, but we can help with writing better content as well (I really like the quick start guide from trpc.io):

We could also potentially add examples from the #showcase channel in the Discord to show what you can actually build with Lexical.

ixahmedxi commented 1 year ago

@thegreatercurve Thank you for all these suggestions:

In terms of content under the header, this will be designed and influenced by the header itself so firstly the header design will be finalised I guess.
The search input and dark mode toggle is something I unfortunately missed but I do agree that it needs to be there so I will iterate over the design to add them.
A shadow is definitely the way to go once scrolling starts yes.
The typewriter effect is a great suggestion and I think it's perfect for something like Lexical, don't think it's overused especially in the context of Lexical.

ixahmedxi commented 1 year ago

Here is an iteration of the above design that includes the following changes:

Adds typewriter cursor to header.
Adds dark mode toggle.
Adds search input field in the navigation bar.
Changes the "differently" word second colour in the gradient to teal instead of pink.

Landing (1)

thegreatercurve commented 1 year ago

Looks great! The only thing might be putting the logo in the left of the navbar, so that you can navigate back to the home page.

ixahmedxi commented 1 year ago

Looks great! The only thing might be putting the logo in the left of the navbar, so that you can navigate back to the home page.

Landing (2)

Yeah i like how this is looking :fire:

ixahmedxi commented 1 year ago

So i've been trying to come up with a design for the 3 outlined features section, I tried using the same SVGs currently on the website but I felt like they did not resemble the direction the new design is going (being more modern). So after a while I came up with an idea about using Craft docs like cards to outline the three features, Craft being a note taking platform with the core functionality being an editor also made more sense for that inspiration. Let me know what you guys think.

thegreatercurve commented 1 year ago

@ixahmedxi I really like these cards and the custom icons. The color combinations between each 3 look great as well.

ixahmedxi commented 1 year ago

Hello everyone, I think I have completed my initial design for the new website of Lexical. Let me know what you think overall of it and if there are any missing sections or things you want me to change/add.

Landing

thegreatercurve commented 1 year ago

@ixahmedxi Phenomenal! I love it, it looks great! I don't think there's anything I'd add, remove or change.

ixahmedxi commented 1 year ago

@thegreatercurve That's great to hear, glad you like it 🥰

I can start implementation work on this tomorrow but just some thoughts as that I have already gone through the existing codebase for the website and I would like to take the opportunity to migrate the codebase of the website over to TypeScript as well as introducing Tailwind for the styling. What do you think?

thegreatercurve commented 1 year ago

@ixahmedxi Sounds good to me! Thanks again for taking on the work.

I have no issue with TypeScript or Tailwind being used either. Just CC-ing @acywatson who set up the initial website, to check if there's any deliberate we're not already using TS?

acywatson commented 1 year ago

@ixahmedxi Sounds good to me! Thanks again for taking on the work.

I have no issue with TypeScript or Tailwind being used either. Just CC-ing @acywatson who set up the initial website, to check if there's any deliberate we're not already using TS?

You can certainly use TS.

I don't think Tailwind is particularly useful, to be honest, but I don't think it's important enough to stop you if you feel strongly about it.

acywatson commented 1 year ago

I have a couple of questions/comments on the design:

1) The h1 copy should be "A text editor framework that does things differently."

2) If you can set it up to automatically list all contributors or a random sample of contributors in addition to the core team, that's way, way ahead of TS or Tailwind migration on my wish list.

3) What does "view all packages" link to?

4) What does light mode look like?

ixahmedxi commented 1 year ago

@acywatson

I have changed the title of the header, should be in the design files attached below.
We could definitely do that, we have some scripts in trpc that pull twitter feed posts so we can do the same thing with github contributors of Lexical. I do think however it could be a separate feature that gets added on after the implementation of the new design.
The view all packages links to the docs section where it lists all of lexical's plugins and packages that can be installed and used.
Light mode is attached below.

Landing Landing (1)

acywatson commented 1 year ago

@ixahmedxi love it!

Feel free to take a crack at it. With respect to point 3 - we probably need to polish up those docs a bit - IIRC a lot of them are empty lol. Wonder if it would make more sense to link to "Getting Started" or something.

acywatson commented 1 year ago

@ixahmedxi Hi! Just wondering if there were any plans to implement this design? We probably need to do something with the landing page eventually, so I wanted to check in with you on your plans.

ixahmedxi commented 1 year ago

Hey @acywatson I would love to! I'm just unsure about what the best course of action to go about this, for example:

When the website is migrated to TypeScript, it is automatically added to the global typecheck CI step which fails because its using the base tsconfig rather than the docusaurus one. There is no way currently of extending multiple tsconfigs until TypeScript 5.0 is released on the 14th of March. Another fix for that would be to exclude the website from the CI typecheck and create its own typecheck step. Obviously another fix would be to not migrate the website to Typescript at all :(

LuciNyan commented 1 year ago

it looks awesome!!! 😍 If you need any help, just let me know <3

acywatson commented 1 year ago

Another fix for that would be to exclude the website from the CI typecheck and create its own typecheck step. Obviously another fix would be to not migrate the website to Typescript at all :(

Either of these sound good to me, for now. Not sure about the level of effort involved in the former, but I think the latter is fine for now. Is it feasible to do that?

@LuciNyan good to hear from you :)

LuciNyan commented 1 year ago

Thank you! @acywatson <3

ixahmedxi commented 1 year ago

@acywatson Sounds good to me, I think I will invest in the time to migrate to TypeScript as that it will benefit us in the development of the new website and in the long run.

As for the pull requests, is it expected to be mini pull requests that enhance the website bit by bit or a giant one that revamps the entire website?

acywatson commented 1 year ago

@acywatson Sounds good to me, I think I will invest in the time to migrate to TypeScript as that it will benefit us in the development of the new website and in the long run.

As for the pull requests, is it expected to be mini pull requests that enhance the website bit by bit or a giant one that revamps the entire website?

I mean, ideally the requests would be as small as possible to make it easier for us to review. We all know that in practice sometimes it makes sense to group logically-related changes into larger PRs though.

Benbinbin commented 11 months ago

really like this re-design, I also think not only the home page, but also the content of documentation should keep evolving with the version updating of lexical, so the developer can check out and find the information more easily

Mahmoudgalalz commented 4 months ago

I like @ixahmedxi designs and I want to work on them, he has proposed it to me, and it seems like a very good thing to work on

So it is still on the plan?

Mahmoudgalalz commented 4 months ago

@thegreatercurve ?

amlan-xyz commented 4 months ago

I'm definitely interested if the new design moves forward.

facebook / lexical

Feature: Improve the design of the `lexical.dev` #3567