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

feat: docs landing page with a playground #3667

Merged
merged 15 commits into from
Dec 7, 2023
Merged

Conversation

signorecello
Copy link
Contributor

Description

This PR adds a landing page for the docs with a playground

Problem*

Our first page was OK but could be improved (even had references to a "book", as the previous version was a rust book haha). One idea was to have a nice first page with an editable playground, so I hacked one in Istanbul and refined it a bit over the last few days.

Plans are to update the whole design sometime soon, so I didn't put a lot of care into its design.

Summary*

  • Adds an index.mdx
  • Configures docusaurus to resolve webpack stuff
  • Imports the playground npm package
  • Moves some stuff out of docs/index page and formats it with prettier

Additional Context

Playground is lazy-loaded and triggers only when user clicks a CTA button. The reason is to avoid downloading quite some hefty wasm, which if done synchronously would add a lot of build time

@github-actions github-actions bot added the documentation Improvements or additions to documentation label Dec 1, 2023
Copy link

socket-security bot commented Dec 1, 2023

New and updated dependencies detected. Learn more about Socket for GitHub ↗︎

Packages Version New capabilities Transitives Size Publisher
@signorecello/noir_playground 0.6.0 network +34 158 MB signorecello
@types/lodash 4.14.202 None +0 862 kB types
react-spinners 0.13.8 None +0 507 kB davidhu2000
prettier 3.1.0 filesystem, environment +0 8.44 MB prettier-bot
@web/test-runner-playwright 0.10.1...0.10.3 None +55/-45 466 kB modern-web
smol-toml 1.1.2...1.1.3 None +0/-0 71.3 kB cyyynthia
@types/mocha 10.0.1...10.0.6 None +0/-0 95.6 kB types

Copy link
Contributor

github-actions bot commented Dec 4, 2023

@TomAFrench
Copy link
Member

Something to keep in mind, the playground currently pulls in its own versions of the noir packages as dependencies. This will keep falling out of sync with the latest Noir version in the docs.

@signorecello
Copy link
Contributor Author

Yep that could make it a bit burdensome to maintain, even though it should be just literally bumping Noir versions, as the component does nothing more than loading packages.

I believe it's worth it anyway, let's see.

@signorecello
Copy link
Contributor Author

signorecello commented Dec 4, 2023

FYI

  • Playground wasn't actually being rendered because of a weird bug in webpack that took me a few hours of debugging.

  • Bug is fixed here which is merged in webpack version 5.88.2.

  • Docusaurus 3.0.1 is using 5.88.1 so this is not fixed, and we're still on Docusaurus 2.4.0.

Workaround is to disable optimization.innerGraph which doesn't make too much of a difference in performance. I did that and indeed, started working with no noticeable decrease in performance.

In any case this should be a good incentive to move towards Docusaurus v3 once they move to 5.88.2

@signorecello
Copy link
Contributor Author

that said, this is good for review, gonna tag @Savio-Sou and you @TomAFrench

@Savio-Sou
Copy link
Collaborator

Very cool work Ze! A few random suggestions:


On playground initiation

image
  1. It'd be great if the top "Read the Docs" button opens the docs in a new tab, easier for people to code along.

  2. It'd be nice to hide the bottom "Read the Docs" and "Try it now!" buttons once the playground is rendered to minimize noise.

  3. It'd be nice to use a darker shade of purple for the "Share" button. It currently feels grey'd out to me.


On compiled

image
  1. It'd be nice to simply replace the "Compile" button with the "Proving" button once compiled to further minimize noise.

Docs

image
  1. Not sure if it's caused by this PR, but we seemed to have lost all formatting from the preview 🤔

Happy to do a quick approval when the last formatting issue is resolved 🙌

@signorecello
Copy link
Contributor Author

Thanks Savio! Weird on the last one indeed! I can take care of the others as well ofc 😊 your input is gold here my friend 🙏

@signorecello
Copy link
Contributor Author

gtg now @Savio-Sou

@Savio-Sou Savio-Sou added this pull request to the merge queue Dec 7, 2023
Merged via the queue into master with commit 9a95fbe Dec 7, 2023
33 checks passed
@Savio-Sou Savio-Sou deleted the zpedro/docs_landing_page branch December 7, 2023 17:05
TomAFrench added a commit that referenced this pull request Dec 11, 2023
* master: (120 commits)
  feat: allow passing custom foreign call handlers when creating proofs in NoirJS (#3764)
  fix: add missing assertion to test (#3765)
  chore: re-export the items needed for the lsp from the fm crate instead of importing codespan_reporting (#3757)
  chore: remove special casing for `pedersen_hash` black box function (#3744)
  chore: remove extraneous dbg statement (#3761)
  chore: fix un-needed fully qualified path (#3755)
  feat: aztec-packages (#3754)
  feat: allow underscores in integer literals (#3746)
  fix: deserialize odd length hex literals (#3747)
  feat: optimize out unnecessary truncation instructions (#3717)
  chore: use `tsx` instead of `ts-node` for `noir_js` (#3750)
  chore(ci): fail `tests-end` job if any dependants failed (#3737)
  chore: allow common ascii punctuation in attributes (#3733)
  chore: fix broken onboarding link in README (#3732)
  feat: Dockerfile to test cargo and JS packages (#3684)
  feat(lsp): add goto definition for locals (#3705)
  feat: docs landing page with a playground (#3667)
  fix: `try_unify` no longer binds types on failure (#3697)
  fix: parse negative integer literals (#3698)
  fix: unsigned integers cannot be negated (#3688)
  ...
kevaundray added a commit that referenced this pull request Dec 15, 2023
🤖 I have created a release *beep* *boop*
---


<details><summary>0.21.0</summary>

## [0.21.0](v0.20.0...v0.21.0)
(2023-12-15)


### ⚠ BREAKING CHANGES

* remove unused `source-resolver` package
([#3791](#3791))
* Make file manager read-only to the compiler
([#3760](#3760))

### Features

* Add `prelude.nr`
([#3693](#3693))
([5f0f81f](5f0f81f))
* Add some traits to the stdlib
([#3796](#3796))
([8e11352](8e11352))
* Add support for writing tracing debug info to file
([#3790](#3790))
([98a5004](98a5004))
* Allow passing custom foreign call handlers when creating proofs in
NoirJS ([#3764](#3764))
([6076e08](6076e08))
* Allow underscores in integer literals
([#3746](#3746))
([2c06a64](2c06a64))
* Avoid overflow checks on boolean multiplication
([#3745](#3745))
([9b5b686](9b5b686))
* Aztec-packages
([#3754](#3754))
([c043265](c043265))
* Dockerfile to test cargo and JS packages
([#3684](#3684))
([513d619](513d619))
* Docs landing page with a playground
([#3667](#3667))
([9a95fbe](9a95fbe))
* Enhance test information output
([#3696](#3696))
([468fbbc](468fbbc))
* Implement print without newline
([#3650](#3650))
([9827dfe](9827dfe))
* **lsp:** Add goto definition for locals
([#3705](#3705))
([9dd465c](9dd465c))
* **lsp:** Add goto definition for structs
([#3718](#3718))
([a576c5b](a576c5b))
* Optimize out unnecessary truncation instructions
([#3717](#3717))
([c9c72ae](c9c72ae))
* Remove experimental feature warning for traits
([#3783](#3783))
([cb52242](cb52242))
* Reorganizing docs to fit diataxis framework
([#3711](#3711))
([54a1ed5](54a1ed5))
* Simplify explicit equality assertions to assert equality directly
([#3708](#3708))
([2fc46e2](2fc46e2))
* Speed up transformation of debug messages
([#3815](#3815))
([2a8af1e](2a8af1e))


### Bug Fixes

* `try_unify` no longer binds types on failure
([#3697](#3697))
([f03e581](f03e581))
* Add missing assertion to test
([#3765](#3765))
([bcbe116](bcbe116))
* Add negative integer literals
([#3690](#3690))
([8b3a68f](8b3a68f))
* Allow trait method references from the trait name
([#3774](#3774))
([cfa34d4](cfa34d4))
* Deserialize odd length hex literals
([#3747](#3747))
([4000fb2](4000fb2))
* **docs:** Trigger `update-docs` workflow when the `release-please` PR
gets merged and not on every merge to master
([#3677](#3677))
([9a3d1d2](9a3d1d2))
* Initialise strings as u8 array
([#3682](#3682))
([8da40b7](8da40b7))
* **lsp:** Package resolution on save
([#3794](#3794))
([14f2fff](14f2fff))
* Parse negative integer literals
([#3698](#3698))
([463ab06](463ab06))
* Pub is required on return for entry points
([#3616](#3616))
([7f1d796](7f1d796))
* Remove `noirc_driver/aztec` feature flag in docker
([#3784](#3784))
([a48d562](a48d562))
* Remove include-keys option
([#3692](#3692))
([95d7ce2](95d7ce2))
* Revert chnage to modify version in workspace file for acvm
dependencies ([#3673](#3673))
([0696f75](0696f75))
* Sequence update-lockfile workflow so it gets modified after the ACVM
version in the root has been changed
([#3676](#3676))
([c00cd85](c00cd85))
* **ssa:** Handle array arguments to side effectual constrain statements
([#3740](#3740))
([028d65e](028d65e))
* Stop cloning Traits!
([#3736](#3736))
([fcff412](fcff412))
* Stop issuing unused variable warnings for variables in trait
definitions ([#3797](#3797))
([0bb44c3](0bb44c3))
* Unsigned integers cannot be negated
([#3688](#3688))
([f904ae1](f904ae1))


### Miscellaneous Chores

* Make file manager read-only to the compiler
([#3760](#3760))
([e3dcc21](e3dcc21))
* Remove unused `source-resolver` package
([#3791](#3791))
([57d2505](57d2505))
</details>

<details><summary>0.37.1</summary>

## [0.37.1](v0.37.0...v0.37.1)
(2023-12-15)


### Features

* Aztec-packages
([#3754](#3754))
([c043265](c043265))
* Speed up transformation of debug messages
([#3815](#3815))
([2a8af1e](2a8af1e))


### Bug Fixes

* Deserialize odd length hex literals
([#3747](#3747))
([4000fb2](4000fb2))
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants