Use jpg instead of png in latest post
Also update assets table screenshot to latest changes.
@ -116,7 +116,7 @@ provide their own Bootstrap theme.
|
|||||||
|
|
||||||
|
|
||||||
![Paragon's modal component displayed in
|
![Paragon's modal component displayed in
|
||||||
Storybook](/img/blog/paragon-modal-storybook.png)
|
Storybook](/img/blog/paragon-modal-storybook.jpg)
|
||||||
|
|
||||||
Studio-frontend composes together Paragon components into higher-level
|
Studio-frontend composes together Paragon components into higher-level
|
||||||
components like [an accessibility
|
components like [an accessibility
|
||||||
@ -128,7 +128,7 @@ the base Paragon components. Other teams at edX using the same components were
|
|||||||
able to receive the same improvements with a single package update.
|
able to receive the same improvements with a single package update.
|
||||||
|
|
||||||
![Screenshot of the studio-frontend assets table inside of
|
![Screenshot of the studio-frontend assets table inside of
|
||||||
Studio](/img/blog/studio-frontend-assets-table.png)
|
Studio](/img/blog/studio-frontend-assets-table.jpg)
|
||||||
|
|
||||||
## Integration with Studio
|
## Integration with Studio
|
||||||
|
|
||||||
@ -183,7 +183,7 @@ leaking outside of the studio-frontend embedded component `div` and affecting
|
|||||||
the rest of the Studio page around it.
|
the rest of the Studio page around it.
|
||||||
|
|
||||||
![Diagram of a studio-frontend component embedded inside of
|
![Diagram of a studio-frontend component embedded inside of
|
||||||
Studio](/img/blog/studio-frontend-style-isolation.png)
|
Studio](/img/blog/studio-frontend-style-isolation.jpg)
|
||||||
|
|
||||||
We were able to prevent styles leaking outside of the studio-frontend component
|
We were able to prevent styles leaking outside of the studio-frontend component
|
||||||
by scoping all CSS to only the `div` that wraps the component. Thanks to the
|
by scoping all CSS to only the `div` that wraps the component. Thanks to the
|
||||||
@ -340,7 +340,7 @@ has to be configured on the webpack-dev-server to get around CORS violations.
|
|||||||
|
|
||||||
![Diagram of studio-frontend's docker container communicating to Studio inside
|
![Diagram of studio-frontend's docker container communicating to Studio inside
|
||||||
of the devstack_default docker
|
of the devstack_default docker
|
||||||
network](/img/blog/studio-frontend-docker-devstack.png)
|
network](/img/blog/studio-frontend-docker-devstack.jpg)
|
||||||
|
|
||||||
## Deploying to Production
|
## Deploying to Production
|
||||||
|
|
||||||
|
BIN
img/blog/paragon-modal-storybook.jpg
Normal file
After Width: | Height: | Size: 78 KiB |
Before Width: | Height: | Size: 82 KiB |
BIN
img/blog/studio-frontend-assets-table.jpg
Normal file
After Width: | Height: | Size: 95 KiB |
Before Width: | Height: | Size: 200 KiB |
BIN
img/blog/studio-frontend-docker-devstack.jpg
Normal file
After Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 13 KiB |
BIN
img/blog/studio-frontend-style-isolation.jpg
Normal file
After Width: | Height: | Size: 77 KiB |
Before Width: | Height: | Size: 20 KiB |