Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: create Docusaurus website #628

Merged
merged 1 commit into from
Feb 13, 2024

Conversation

jtkiesel
Copy link
Contributor

@jtkiesel jtkiesel commented Dec 30, 2023

What changed with this PR:

Prettier Java now has a Docusaurus website, including an interactive playground that allows users to see how it works. I am currently self-hosting it here. I have made this a draft PR because the playground currently depends on #616 being merged first, or else #462 prevents it from working properly (that issue seems to have been fixed by newer Chevrotain versions).

Relative issues or prs:

Closes #193

@jtkiesel jtkiesel marked this pull request as ready for review January 14, 2024 06:40
Copy link
Contributor

@clementdessoude clementdessoude left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Waouh, looks great ! The playground worked fine on Google Chrome but does not seems to work on Firefox, do you know why ?

<label title="Print trailing commas wherever possible when multi-line.">
--trailing-comma{" "}
<select
disabled={true} // this option isn't seen by prettier-plugin-java when passed programmatically
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's strange that the other options are working but not this one, I wonder what causes this issue 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Figured this out -- just had to add trailingComma as an option in options.js.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great !

@jtkiesel
Copy link
Contributor Author

The playground worked fine on Google Chrome but does not seems to work on Firefox, do you know why ?

@clementdessoude Hmm. Which version of Firefox? I tried it on the latest version for macOS (121.0.1) and it seemed to work properly. For what it's worth, I also tried it on Safari and it seemed to work well.

@jtkiesel jtkiesel force-pushed the docs/create-website branch 4 times, most recently from db8cffd to da3611f Compare January 19, 2024 05:34
@jtkiesel
Copy link
Contributor Author

Pushed an update that implements a "state hash" feature on the playground (very similar to the one on Prettier's playground), which enables the sharing of links to the playground with the code and all options persisted.

@clementdessoude
Copy link
Contributor

The playground worked fine on Google Chrome but does not seems to work on Firefox, do you know why ?

@clementdessoude Hmm. Which version of Firefox? I tried it on the latest version for macOS (121.0.1) and it seemed to work properly. For what it's worth, I also tried it on Safari and it seemed to work well.

I'm on Firefox 121.0.1 (it seems that it is the latest version)

Screenshot 2024-01-22 at 09 50 43

As you see in the screenshot, I don't see any code in the formatted section. I don't understand why for the moment, but it seems that the width property is not taken into account for the second editor :/

image

@jtkiesel
Copy link
Contributor Author

jtkiesel commented Jan 27, 2024

@clementdessoude Thanks for the screenshots! I realize now that when I opened the website in Firefox, I had it open in a small window, so the editors were rendered on top of each other, rather than next to each other, which happened to work. Once I expanded my browser window, I also saw the issue.

I just pushed a fix. For some reason, on Firefox flex-flow: wrap; wasn't working the same as it was on Chrome. On Firefox, it didn't seem to allow the 2nd flex item (the 2nd editor) to fully reach the right edge of the viewport. If I changed the width of the editors to be 0.1px smaller, it worked, but then there was an odd tiny gap on the right side. I ended up changing the CSS to remove flex-flow: wrap; and simply change the flex-direction based on the screen width, and it now seems to work properly on both Chrome and Firefox.

@clementdessoude clementdessoude merged commit 01ec632 into jhipster:main Feb 13, 2024
6 checks passed
@jtkiesel jtkiesel deleted the docs/create-website branch February 14, 2024 01:58
@jtkiesel
Copy link
Contributor Author

@clementdessoude Thank you for merging this! When you have a moment, could you follow the deployment steps on a direct clone (not a fork) of this repo? Doing that will create a gh-pages branch on this repo containing the compiled website, and GitHub will use it to host the website at https://jhipster.github.io/prettier-java/.

@clementdessoude
Copy link
Contributor

It's done :)

@jtkiesel
Copy link
Contributor Author

@clementdessoude Thanks! Looks like it worked. 🎉 As a heads up, in order for the website to use the latest version of the plugin (in the playground), those deployment steps should be run (following a local build of the plugin) after every release of the plugin. I'm not sure if it's possible to automate that process? If you use the deploy.sh script, perhaps we can/should add it to that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create Demos/Playground
2 participants