[Joy] Add template UIs & first look blog post #32791
Conversation
|
@mui/joy: parsed: +1.54% , gzip: +0.58% |
github-actions
bot
added
the
PR: out-of-date
…rial-ui into joy-example-uis
github-actions
bot
removed
the
PR: out-of-date
|
|
||
| ### Dribbble shot | ||
|
|
||
| {{"demo": "DribbbleShot.js", "bg": true}} | ||
| {{"demo": "DribbbleShot.js" }} |
There was a problem hiding this comment.
| {{"demo": "DribbbleShot.js" }} | |
| {{"demo": "DribbbleShot.js"}} |
x the other instances
| @@ -160,6 +161,7 @@ | |||
| "prettier": "^2.6.2", | |||
| "process": "^0.11.10", | |||
| "prop-types": "^15.8.1", | |||
| "raw-loader": "4.0.2", | |||
There was a problem hiding this comment.
I thought it was deprecated. https://v4.webpack.js.org/loaders/raw-loader/. Why not use https://webpack.js.org/guides/asset-modules/?
| <AspectRatio ratio="2" variant="outlined"> | ||
| <Box | ||
| sx={{ | ||
| background: `center/cover no-repeat url(/static/screenshots/joy-ui/getting-started/templates/${name}${ |
There was a problem hiding this comment.
Why not use an <img> primitive with loading="lazy"?
| import * as React from 'react'; | ||
| import LZString from 'lz-string'; | ||
| import startCase from 'lodash/startCase'; | ||
| import NextLink from 'next/link'; |
There was a problem hiding this comment.
Shouldn't we import from?
| import NextLink from 'next/link'; | |
| import Link from 'docs/src/modules/components/Link'; |
| function compress(object) { | ||
| return LZString.compressToBase64(JSON.stringify(object)) | ||
| .replace(/\+/g, '-') // Convert '+' to '-' | ||
| .replace(/\//g, '_') // Convert '/' to '_' | ||
| .replace(/=+$/, ''); // Remove ending '=' | ||
| } | ||
|
|
||
| function addHiddenInput(form, name, value) { | ||
| const input = document.createElement('input'); | ||
| input.type = 'hidden'; | ||
| input.name = name; | ||
| input.value = value; | ||
| form.appendChild(input); | ||
| } |
There was a problem hiding this comment.
Would it be better to create a shared abstraction for this? It's none trivial, and yet we duplicate it.
| * - The name of the folder will be used as the url and title | ||
| */ | ||
|
|
||
| export default function TemplateCollection() { |
There was a problem hiding this comment.
Each time I open the page, I try to open the template by clicking on the image, as in https://mui.com/material-ui/getting-started/templates/. I struggle to get used to needing to click on the "Live demo" link. I think that it would help to turn the image into a link.
Artifacts from this PR:
generateTemplateScreenshotsthat takes screenshots for every template UI (light & dark mode) and save them todocs/public/static/screenshots/.../*.jpg.