diff --git a/.vscode/settings.json b/.vscode/settings.json index 13ca3ee57..a714166ad 100644 --- a/.vscode/settings.json +++ b/.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" } \ No newline at end of file diff --git a/.yarnrc b/.yarnrc index 74075b796..1640821e5 100644 --- a/.yarnrc +++ b/.yarnrc @@ -1 +1,2 @@ -network-timeout 60000 \ No newline at end of file +network-timeout: 500000 + \ No newline at end of file diff --git a/README.md b/README.md index 39f6d4582..2f78a3987 100644 --- a/README.md +++ b/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) + diff --git a/components/bucketContent.component.tsx b/components/bucketContent.component.tsx index 8f0f50a02..e174e7e81 100644 --- a/components/bucketContent.component.tsx +++ b/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)(({ 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,12 +62,21 @@ interface IBucketItem { } const SingleBucketItem: FunctionComponent = ({ link, title, imageUrl, description }: IBucketItem) => { - const classes = useStyles(); return ( - - -
- + + + + {title} @@ -95,17 +84,22 @@ const SingleBucketItem: FunctionComponent = ({ link, title, imageUr {description} -
-
+ + {title} -
+
- + ); }; +const DivContainer = styled("div")(({ theme }) => ({ + display: "flex", + flexWrap: "wrap", + maxWidth: "100%", +})); + export const BucketContent: FunctionComponent = ({ 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 = ({ childPag <> {(!!bucketItems.length || (externalLinks && !!externalLinks.length)) && ( <> - + {title} {!!bucketItems.length && ( -
+ {bucketItems.map((child, idx) => { return ; })} -
+ )} {externalLinks && (