From 2642d0385923f185446224ff43019d86f89b5c33 Mon Sep 17 00:00:00 2001 From: Viktor Rusakov Date: Fri, 9 Jun 2023 09:01:43 +0300 Subject: [PATCH 1/3] docs: make internationalized components available in playroom --- www/README.md | 11 +++++++++++ www/playroom/FrameComponent.jsx | 33 ++++++++++++++++++--------------- 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/www/README.md b/www/README.md index 400957887e..458ecdd8cc 100644 --- a/www/README.md +++ b/www/README.md @@ -55,6 +55,17 @@ exports.THEMES = [ and your theme will automatically get picked up during the build. +## Running playground locally + +Playground is a separate application (provided by [playroom](https://github.com/seek-oss/playroom) package) that in production gets bundled together with docs site and is served by gatsby by rendering this application in an iframe on the `/playground` route. +Currently, there is no way to reproduce this behaviour id development mode. To work with playground locally you have to start `playroom`'s dev server and work with it separately from the docs site, to do that run + +```sh +npm playroom start +``` + +which will make playroom available at http://localhost:9000/ with hot-reloading support. + ## Feature Flags In some scenarios, it is helpful to put your changes to the Paragon documentation site behind a feature flag so that you have more control over how a particular feature or change is rolled out more broadly. diff --git a/www/playroom/FrameComponent.jsx b/www/playroom/FrameComponent.jsx index 7a601aefc7..170d09bdb3 100644 --- a/www/playroom/FrameComponent.jsx +++ b/www/playroom/FrameComponent.jsx @@ -1,24 +1,27 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Helmet } from 'react-helmet'; +import { IntlProvider } from 'react-intl'; export default function FrameComponent({ theme, children }) { return ( -
- - - - - {children} -
+ +
+ + + + + {children} +
+ ); } From 4644f04e2a662699c491b23c546a2a3ede818377 Mon Sep 17 00:00:00 2001 From: Viktor Rusakov Date: Fri, 9 Jun 2023 16:21:21 +0300 Subject: [PATCH 2/3] docs: describe how to run production version of playground locally --- www/README.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/www/README.md b/www/README.md index 458ecdd8cc..444c2dea0d 100644 --- a/www/README.md +++ b/www/README.md @@ -58,13 +58,22 @@ exports.THEMES = [ ## Running playground locally Playground is a separate application (provided by [playroom](https://github.com/seek-oss/playroom) package) that in production gets bundled together with docs site and is served by gatsby by rendering this application in an iframe on the `/playground` route. -Currently, there is no way to reproduce this behaviour id development mode. To work with playground locally you have to start `playroom`'s dev server and work with it separately from the docs site, to do that run +Currently, there is no way to reproduce this behaviour id development mode. To work with playground locally in development mode with hot-reloading you have to start `playroom`'s dev server and work with it separately from the docs site, to do that run ```sh npm playroom start ``` -which will make playroom available at http://localhost:9000/ with hot-reloading support. +which will make playroom available at http://localhost:9000/. + +To reproduce production site environment you need to build playroom's production bundle and serve it with gatsby: + +```sh +npm playroom build +gatsby serve +``` + +this will make docs site available at http://localhost:9000/ together with playground page working as in production site. ## Feature Flags In some scenarios, it is helpful to put your changes to the Paragon documentation site behind a feature flag so that you have more control over how a particular feature or change is rolled out more broadly. From e85f240b6be46a70d64820c19d92aa27971e40c9 Mon Sep 17 00:00:00 2001 From: Adam Stankiewicz Date: Fri, 16 Jun 2023 08:25:45 -0400 Subject: [PATCH 3/3] docs: update readme --- package.json | 4 +++- www/README.md | 17 +++++++++-------- www/package.json | 5 ++++- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 08ab143dbd..2d7e2a3962 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,9 @@ "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --format transifex", "type-check": "tsc --noEmit && tsc --project www --noEmit", "type-check:watch": "npm run type-check -- --watch", - "build-types": "tsc --emitDeclarationOnly" + "build-types": "tsc --emitDeclarationOnly", + "playroom:start": "npm run playroom:start --workspace=www", + "playroom:build": "npm run playroom:build --workspace=www" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.1.1", diff --git a/www/README.md b/www/README.md index 444c2dea0d..8601c512c9 100644 --- a/www/README.md +++ b/www/README.md @@ -57,23 +57,24 @@ exports.THEMES = [ ## Running playground locally -Playground is a separate application (provided by [playroom](https://github.com/seek-oss/playroom) package) that in production gets bundled together with docs site and is served by gatsby by rendering this application in an iframe on the `/playground` route. -Currently, there is no way to reproduce this behaviour id development mode. To work with playground locally in development mode with hot-reloading you have to start `playroom`'s dev server and work with it separately from the docs site, to do that run +Playground is a separate application (provided by [playroom](https://github.com/seek-oss/playroom) package) that in production gets bundled together with docs site and is served by Gatsby by rendering this application in an iframe on the `/playground` route. + +Currently, there is no way to reproduce this behavior in development mode. To work with Playground locally in development mode with hot-reloading you have to start `playroom`'s dev server and work with it separately from the docs site. To do that, run: ```sh -npm playroom start +npm run playroom:start ``` -which will make playroom available at http://localhost:9000/. +which will make `playroom` available at http://localhost:9000/. -To reproduce production site environment you need to build playroom's production bundle and serve it with gatsby: +To reproduce the production environment, you may build `playroom`'s production bundle and serve it with Gatsby: ```sh -npm playroom build -gatsby serve +npm run playroom:build +npm run serve ``` -this will make docs site available at http://localhost:9000/ together with playground page working as in production site. +This will make docs site available at http://localhost:9000/ together with Playground page working as in production site. ## Feature Flags In some scenarios, it is helpful to put your changes to the Paragon documentation site behind a feature flag so that you have more control over how a particular feature or change is rolled out more broadly. diff --git a/www/package.json b/www/package.json index 8fa9c7593e..6648636c99 100644 --- a/www/package.json +++ b/www/package.json @@ -55,8 +55,11 @@ "develop:with-theme": "npm run develop", "lint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx .", "start": "npm run develop", + "serve": "gatsby serve", "test": "echo \"Error: no test specified\" && exit 1", - "build-themes": "node build-themes.js" + "build-themes": "node build-themes.js", + "playroom:start": "playroom start", + "playroom:build": "playroom build" }, "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.16.7",