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
JtJLg1{2!oZ>OBAe
literal 0
HcmV?d00001
diff --git a/docs/public/static/images/examples/gatsby.svg b/docs/public/static/images/examples/gatsby.svg
new file mode 100644
index 00000000000000..673e893b2d89cc
--- /dev/null
+++ b/docs/public/static/images/examples/gatsby.svg
@@ -0,0 +1,11 @@
+
diff --git a/docs/public/static/images/examples/next.svg b/docs/public/static/images/examples/next.svg
new file mode 100644
index 00000000000000..4c49a0245fa940
--- /dev/null
+++ b/docs/public/static/images/examples/next.svg
@@ -0,0 +1,15 @@
+
diff --git a/docs/public/static/images/examples/preact.svg b/docs/public/static/images/examples/preact.svg
new file mode 100644
index 00000000000000..dbe8c8cf34f35d
--- /dev/null
+++ b/docs/public/static/images/examples/preact.svg
@@ -0,0 +1,7 @@
+
diff --git a/docs/public/static/images/examples/remix.svg b/docs/public/static/images/examples/remix.svg
new file mode 100644
index 00000000000000..f9dc7067a39b6a
--- /dev/null
+++ b/docs/public/static/images/examples/remix.svg
@@ -0,0 +1,4 @@
+
diff --git a/docs/public/static/images/examples/styled.png b/docs/public/static/images/examples/styled.png
new file mode 100644
index 0000000000000000000000000000000000000000..66e9352754c6573e570d28b58b6b21df34263709
GIT binary patch
literal 11219
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
+
+
diff --git a/docs/public/static/images/examples/vite.svg b/docs/public/static/images/examples/vite.svg
new file mode 100644
index 00000000000000..f050e25086544f
--- /dev/null
+++ b/docs/public/static/images/examples/vite.svg
@@ -0,0 +1,15 @@
+
From e3574527188b9794b93fe7bc4b7ed972cd8d327f Mon Sep 17 00:00:00 2001
From: siriwatknp
Date: Fri, 28 Apr 2023 18:12:53 +0700
Subject: [PATCH 2/5] fux styles
---
.../example-projects/ExampleCollection.js | 31 ++++++++++---------
1 file changed, 16 insertions(+), 15 deletions(-)
diff --git a/docs/data/material/getting-started/example-projects/ExampleCollection.js b/docs/data/material/getting-started/example-projects/ExampleCollection.js
index 3f103fe6ac9d41..cb516f4af5da82 100644
--- a/docs/data/material/getting-started/example-projects/ExampleCollection.js
+++ b/docs/data/material/getting-started/example-projects/ExampleCollection.js
@@ -1,7 +1,7 @@
import * as React from 'react';
+import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Card from '@mui/material/Card';
-import Stack from '@mui/material/Stack';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
@@ -88,6 +88,7 @@ export default function ExampleCollection() {
sx={[
(theme) => ({
p: 2,
+ height: '100%',
display: 'flex',
alignItems: 'center',
gap: 2,
@@ -118,7 +119,7 @@ export default function ExampleCollection() {
src={example.src}
alt={example.name}
/>
-
+
{example.name}
-
- {example.tsLink ? (
-
+ {!!example.tsLink && (
+
/
@@ -173,10 +174,10 @@ export default function ExampleCollection() {
{example.tsLabel}
-
- ) : null}
-
-
+
+ )}
+
+
))}
From c73f7c4315ed99e34843b63c3650f4ac85414d3e Mon Sep 17 00:00:00 2001
From: siriwatknp
Date: Mon, 8 May 2023 10:58:19 +0700
Subject: [PATCH 3/5] move ExampleCollection to modules
---
.../example-projects/example-projects.md | 2 +-
.../modules/components}/ExampleCollection.js | 44 ++++++++++---------
packages/markdown/loader.js | 4 +-
3 files changed, 27 insertions(+), 23 deletions(-)
rename docs/{data/material/getting-started/example-projects => src/modules/components}/ExampleCollection.js (82%)
diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md
index 4f8feb974a4e5d..87c739ad2bc46c 100644
--- a/docs/data/material/getting-started/example-projects/example-projects.md
+++ b/docs/data/material/getting-started/example-projects/example-projects.md
@@ -8,7 +8,7 @@ You can find some example projects in the [GitHub repository](https://github.com
-{{"demo": "ExampleCollection.js", "hideToolbar": true, "bg": "inline"}}
+{{"component": "docs/src/modules/components/ExampleCollection.js", "hideToolbar": true, "bg": "inline"}}
Create React App is an awesome project for learning React.
Have a look at [the alternatives available](https://github.com/facebook/create-react-app/blob/HEAD/README.md#popular-alternatives) to see which project best fits your needs.
diff --git a/docs/data/material/getting-started/example-projects/ExampleCollection.js b/docs/src/modules/components/ExampleCollection.js
similarity index 82%
rename from docs/data/material/getting-started/example-projects/ExampleCollection.js
rename to docs/src/modules/components/ExampleCollection.js
index cb516f4af5da82..f31d0980510510 100644
--- a/docs/data/material/getting-started/example-projects/ExampleCollection.js
+++ b/docs/src/modules/components/ExampleCollection.js
@@ -6,6 +6,7 @@ import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import FilterDramaIcon from '@mui/icons-material/FilterDrama';
const examples = [
{
@@ -13,8 +14,7 @@ const examples = [
label: 'View JS example',
tsLabel: 'View TS example',
link: 'https://github.com/mui/material-ui/tree/master/examples/material-next',
- tsLink:
- 'https://github.com/mui/material-ui/tree/master/examples/material-next-ts',
+ tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-next-ts',
src: '/static/images/examples/next.svg',
},
{
@@ -22,8 +22,7 @@ const examples = [
label: 'View JS example',
tsLabel: 'View TS example',
link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra',
- tsLink:
- 'https://github.com/mui/material-ui/tree/master/examples/material-cra-ts',
+ tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-ts',
src: '/static/images/examples/cra.svg',
},
{
@@ -70,6 +69,7 @@ const examples = [
name: 'CDN',
link: 'https://github.com/mui/material-ui/tree/master/examples/material-via-cdn',
label: 'View example',
+ src: ,
},
{
name: 'Express.js (server-rendered)',
@@ -86,28 +86,32 @@ export default function ExampleCollection() {
({
+ {
p: 2,
height: '100%',
display: 'flex',
alignItems: 'center',
gap: 2,
- bgcolor: theme.palette.mode === 'dark' ? 'transparent' : '#fff',
+ bgcolor: '#fff',
backgroundImage: 'none',
borderRadius: 2,
border: '1px solid',
- borderColor: theme.palette.mode === 'dark' ? '#132F4C' : 'grey.200',
+ borderColor: 'grey.200',
boxShadow: 'none',
-
'&:hover': {
- borderColor:
- theme.palette.mode === 'dark' ? '#173A5E' : 'grey.300',
- boxShadow:
- theme.palette.mode === 'dark'
- ? '0px 2px 8px rgba(0, 13, 26, 1)'
- : '0px 2px 8px rgba(170, 180, 190, 0.2)',
+ borderColor: 'grey.300',
+ boxShadow: '0px 2px 8px rgba(170, 180, 190, 0.2)',
},
- }),
+ },
+ (theme) =>
+ theme.applyDarkStyles({
+ bgcolor: 'transparent',
+ borderColor: 'primaryDark.700',
+ '&:hover': {
+ borderColor: 'primaryDark.600',
+ boxShadow: '0px 2px 8px rgba(0, 13, 26, 1)',
+ },
+ }),
]}
>
-
+
{example.name}
{
- const moduleID = path.join(this.rootContext, 'src', componentName).replace(/\\/g, '/');
+ const moduleID = path
+ .join(this.rootContext, 'src', componentName.replace(/^docs\/src/, ''))
+ .replace(/\\/g, '/');
components[moduleID] = componentName;
componentModuleIDs.add(moduleID);
From 907988168fdf0b67aaa11f4d09be2d1cae243b38 Mon Sep 17 00:00:00 2001
From: siriwatknp
Date: Mon, 8 May 2023 11:01:21 +0700
Subject: [PATCH 4/5] adjust layout
---
.../getting-started/example-projects/example-projects.md | 4 +++-
docs/src/modules/components/ExampleCollection.js | 2 +-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md
index 87c739ad2bc46c..ddea9b4bf7a63a 100644
--- a/docs/data/material/getting-started/example-projects/example-projects.md
+++ b/docs/data/material/getting-started/example-projects/example-projects.md
@@ -8,7 +8,9 @@ You can find some example projects in the [GitHub repository](https://github.com
-{{"component": "docs/src/modules/components/ExampleCollection.js", "hideToolbar": true, "bg": "inline"}}
+{{"component": "docs/src/modules/components/ExampleCollection.js"}}
+
+
Create React App is an awesome project for learning React.
Have a look at [the alternatives available](https://github.com/facebook/create-react-app/blob/HEAD/README.md#popular-alternatives) to see which project best fits your needs.
diff --git a/docs/src/modules/components/ExampleCollection.js b/docs/src/modules/components/ExampleCollection.js
index f31d0980510510..78e0cb624e6d37 100644
--- a/docs/src/modules/components/ExampleCollection.js
+++ b/docs/src/modules/components/ExampleCollection.js
@@ -1,6 +1,6 @@
import * as React from 'react';
import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
+import Grid from '@mui/material/Unstable_Grid2';
import Card from '@mui/material/Card';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
From b73c2199842871bd47b617b042719567cd4e3d06 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 8 May 2023 09:20:32 -0300
Subject: [PATCH 5/5] fix border radius
---
docs/src/modules/components/ExampleCollection.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/src/modules/components/ExampleCollection.js b/docs/src/modules/components/ExampleCollection.js
index 78e0cb624e6d37..6666a3da71ca9a 100644
--- a/docs/src/modules/components/ExampleCollection.js
+++ b/docs/src/modules/components/ExampleCollection.js
@@ -94,7 +94,7 @@ export default function ExampleCollection() {
gap: 2,
bgcolor: '#fff',
backgroundImage: 'none',
- borderRadius: 2,
+ borderRadius: 1,
border: '1px solid',
borderColor: 'grey.200',
boxShadow: 'none',