Preparation to move the docs to the main repository

.vscode/settings.json

@@ -21,5 +21,13 @@
     },
     "editor.tabSize": 4,
     "typescript.tsdk": "node_modules\\typescript\\lib",
-    "typescript.preferences.importModuleSpecifier": "relative"
+    "typescript.preferences.importModuleSpecifier": "relative",
+    "appService.zipIgnorePattern": [
+        "node_modules{,/**}",
+        ".vscode{,/**}",
+        ".temp{,/**}",
+        ".next{,/**}",
+    ],
+    "appService.deploySubpath": ".",
+    "appService.defaultWebAppToDeploy": "None"
 }

.yarnrc

@@ -1 +1,2 @@
-network-timeout 60000
+network-timeout: 500000
+<!-- registry: https://registry.npmjs.org/ -->

README.md

@@ -37,4 +37,4 @@ will add a playground to the examples pane, allow to show its preview, add a sty
 
 Documentation for all markdown components is coming soon.
 
-[![Powered by vercel](public/powered-by-vercel.svg?raw=true)](https://vercel.com/?utm_source=babylonjs&utm_campaign=oss)
+<!-- [![Powered by vercel](public/powered-by-vercel.svg?raw=true)](https://vercel.com/?utm_source=babylonjs&utm_campaign=oss) -->

components/bucketContent.component.tsx

@@ -1,9 +1,9 @@
 import { FunctionComponent } from "react";
 import { IDocumentationPageProps } from "../lib/content.interfaces";
-import { Card, CardContent, Theme, Typography } from "@mui/material";
-import { createStyles, makeStyles } from "@mui/styles";
+import { Card, CardContent, Typography } from "@mui/material";
+import { styled } from "@mui/material/styles";
 
-import Link from "next/link";
+import Link, { LinkProps } from "next/link";
 import Image from "next/image";
 import { getImageUrl } from "../lib/frontendUtils/frontendTools";
 
@@ -15,64 +15,44 @@ export interface IBucketContentProps {
     externalLinks?: { title: string; url: string }[];
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        h3: {
-            borderTop: "1px solid",
-            marginTop: "3.125rem !important",
-            paddingTop: theme.spacing(2),
-        },
-        container: {
-            display: "flex",
-            flexWrap: "wrap",
-            maxWidth: "100%",
-        },
-        divRoot: {
-            padding: 16,
-            height: 160,
-            minHeight: 160,
-            minWidth: 200,
-            width: "100%",
+const StyledLink = styled(Link)<LinkProps>(({ theme }) => ({
+    padding: 16,
+    height: 160,
+    minHeight: 160,
+    minWidth: 200,
+    width: "100%",
 
-            [theme.breakpoints.up("lg")]: {
-                width: "50% !important",
-            },
-            [theme.breakpoints.up("xl")]: {
-                width: "33% !important",
-            },
-        },
-        root: {
-            display: "flex",
-            height: "100%",
-            cursor: "pointer",
-        },
-        details: {
-            display: "flex",
-            flexDirection: "column",
-            width: "50% !important",
-            flex: 1,
-        },
-        content: {
-            flex: "1 0 auto",
-        },
-        imageContainer: {
-            minHeight: "100%",
-            cursor: "pointer",
-            display: "inline-block",
-            overflow: "hidden",
-            position: "relative",
-            minWidth: "150px !important",
-            width: "unset !important",
-            "& img": {
-                pointerEvents: "none",
-                position: "absolute",
-                minWidth: "100%",
-                minHeight: "100%",
-                objectFit: "cover",
-            },
-        },
-    }),
-);
+    [theme.breakpoints.up("lg")]: {
+        width: "50% !important",
+    },
+    [theme.breakpoints.up("xl")]: {
+        width: "33% !important",
+    },
+}));
+
+const ImageContainer = styled("div")(({ theme }) => ({
+    minHeight: "100%",
+    cursor: "pointer",
+    display: "inline-block",
+    overflow: "hidden",
+    position: "relative",
+    minWidth: "150px !important",
+    width: "unset !important",
+    "& img": {
+        pointerEvents: "none",
+        position: "absolute",
+        minWidth: "100%",
+        minHeight: "100%",
+        objectFit: "cover",
+    },
+}));
+
+const DetailsDiv = styled("div")(({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    width: "50% !important",
+    flex: 1,
+}));
 
 interface IBucketItem {
     title: string;
@@ -82,30 +62,44 @@ interface IBucketItem {
 }
 
 const SingleBucketItem: FunctionComponent<IBucketItem> = ({ link, title, imageUrl, description }: IBucketItem) => {
-    const classes = useStyles();
     return (
-        <Link key={link} href={link} className={classes.divRoot}>
-            <Card className={classes.root}>
-                <div className={classes.details}>
-                    <CardContent className={classes.content}>
+        <StyledLink key={link} href={link}>
+            <Card
+                sx={{
+                    display: "flex",
+                    height: "100%",
+                    cursor: "pointer",
+                }}
+            >
+                <DetailsDiv>
+                    <CardContent
+                        sx={{
+                            flex: "1 0 auto",
+                        }}
+                    >
                         <Typography component="h6" variant="h6">
                             {title}
                         </Typography>
                         <Typography style={{}} variant="subtitle1" color="textSecondary" title={title}>
                             {description}
                         </Typography>
                     </CardContent>
-                </div>
-                <div className={classes.imageContainer}>
+                </DetailsDiv>
+                <ImageContainer>
                     <Image alt={title} src={imageUrl} fill={true}></Image>
-                </div>
+                </ImageContainer>
             </Card>
-        </Link>
+        </StyledLink>
     );
 };
 
+const DivContainer = styled("div")(({ theme }) => ({
+    display: "flex",
+    flexWrap: "wrap",
+    maxWidth: "100%",
+}));
+
 export const BucketContent: FunctionComponent<IBucketContentProps> = ({ childPages, title = "Coming next", externalLinks }) => {
-    const classes = useStyles();
     const bucketItems: IBucketItem[] = Object.keys(childPages || []).map((child) => {
         const childData = childPages[child].metadata;
         const title = (childData.title || child).replace(/_/g, " ");
@@ -117,15 +111,23 @@ export const BucketContent: FunctionComponent<IBucketContentProps> = ({ childPag
         <>
             {(!!bucketItems.length || (externalLinks && !!externalLinks.length)) && (
                 <>
-                    <Typography className={classes.h3} component="h3" variant="h3">
+                    <Typography
+                        sx={{
+                            borderTop: "1px solid",
+                            marginTop: "3.125rem !important",
+                            pt: 2, // theme.spacing(2)
+                        }}
+                        component="h3"
+                        variant="h3"
+                    >
                         {title}
                     </Typography>
                     {!!bucketItems.length && (
-                        <div className={classes.container}>
+                        <DivContainer>
                             {bucketItems.map((child, idx) => {
                                 return <SingleBucketItem key={idx} {...child} />;
                             })}
-                        </div>
+                        </DivContainer>
                     )}
                     {externalLinks && (
                         <ul>