Writing #68: intro page

website/pages/docs/features/websocket.mdx

@@ -7,7 +7,7 @@ With `TGrid`, you can easily develop WebSocket system under the RPC (Remote Proc
 
 By the way, when you're developing WebSocket server natively only with `TGrid`, you have to construct and open the WebSocket server through [WebSocketServer](#websocketserver) class. Also, you have to access to the WebSocket server with manual [WebSocketConnector](#websocketconnector) composition.
 
-Instead, if you develop the WebSocket server with `NestJS`, client can easily interact with the WebSocket server by SDK (Software Development Kit) library generated by `Nestia`. Also, you can add HTTP protocol operations to the WebSocket server with `NestJS`'s HTTP controller.
+Instead, if you develop the WebSocket server with `NestJS`, client can easily interact with the WebSocket server by SDK (Software Development Kit) library generated by `Nestia`. Also, you can make both http and websocket operations to the NestJS controllers, so that makes the server compatible on both protocols.
 
 Therefore, when you develop WebSocket server, I recommend to use `NestJS` with `TGrid` for the best development experience.
 

website/pages/index.mdx

@@ -0,0 +1,15 @@
+import HomeLayout from "../src/components/home/HomeLayout";
+import HomeHeroMovie from "../src/movies/home/HomeHeroMovie";
+import HomeStrengthMovie from "../src/movies/home/HomeStrengthMovie";
+
+<HomeLayout>
+  <HomeHeroMovie />
+</HomeLayout>
+
+
+
+## Key Features
+
+<HomeLayout>
+  <HomeStrengthMovie />
+</HomeLayout>

website/src/components/home/HomeCodeBlock.tsx

@@ -0,0 +1,11 @@
+const HomeCodeBlock = (props: {
+  children: React.ReactNode;
+}) => (
+  <span style={{ 
+    color: "white", 
+    backgroundColor: "gray",
+  }}>
+    {props.children}
+  </span>
+);
+export default HomeCodeBlock;

website/src/components/home/HomeLayout.tsx

@@ -0,0 +1,11 @@
+const HomeLayout = (props: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    style={{
+      marginLeft: "-1.5rem",
+      marginRight: "-1.5rem",
+    }}
+  >
+    {props.children}
+  </div>
+);
+export default HomeLayout;

website/src/components/home/ProductHeroLayout.tsx

@@ -0,0 +1,82 @@
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import { Theme, styled } from "@mui/material/styles";
+import { SxProps } from "@mui/system";
+import React from "react";
+
+const ProductHeroLayoutRoot = styled("section")(({ theme }) => ({
+  color: theme.palette.common.white,
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  [theme.breakpoints.up("sm")]: {
+    height: "calc(100vh - 50px)",
+  },
+}));
+
+const Background = styled("div")({
+  position: "absolute",
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundSize: "contain",
+  backgroundRepeat: "no-repeat",
+  zIndex: -2,
+});
+
+const ArrowBox = styled("div")(({ theme }) => ({
+  position: "absolute",
+  bottom: 32,
+  display: "none",
+  [theme.breakpoints.up("sm")]: {
+    display: "block",
+  },
+}));
+
+interface ProductHeroLayoutProps {
+  sxBackground: SxProps<Theme>;
+}
+
+const ProductHeroLayout = (
+  props: React.HTMLAttributes<HTMLDivElement> & ProductHeroLayoutProps,
+) => {
+  const { sxBackground, children } = props;
+  return (
+    <ProductHeroLayoutRoot>
+      <Container
+        sx={{
+          mt: 3,
+          mb: 3,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+      >
+        {children}
+        <Box
+          sx={{
+            position: "absolute",
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            backgroundColor: "common.black",
+            opacity: 0.7,
+            zIndex: -1,
+          }}
+        />
+        <Background sx={sxBackground} />
+        <ArrowBox>
+          <img
+            src="/images/home/productHeroArrowDown.png"
+            height="32"
+            width="24"
+            alt="arrow down"
+          />
+        </ArrowBox>
+      </Container>
+    </ProductHeroLayoutRoot>
+  );
+};
+export default ProductHeroLayout;

website/src/movies/home/HomeHeroMovie.tsx

@@ -0,0 +1,100 @@
+import GitHubIcon from "@mui/icons-material/GitHub";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import { Button, Grid, Typography } from "@mui/material";
+import { ReactNode } from "react";
+
+import ProductHeroLayout from "../../components/home/ProductHeroLayout";
+import React from "react";
+
+const CYAN = "rgb(80, 200, 0)";
+const PURPLE = "rgb(191, 64, 191)";
+const YELLOW = "#DEC20B";
+
+const QuickButton = (props: {
+  title: string;
+  href: string;
+  icon?: ReactNode;
+  color: "info" | "warning" | "success";
+}) => (
+  <Grid item xs={12} md={6}>
+    <Button
+      color={props.color}
+      variant="outlined"
+      size="large"
+      component="a"
+      href={props.href}
+      startIcon={props.icon}
+      fullWidth
+      style={{ fontFamily: "unset", fontWeight: "bold" }}
+    >
+      {props.title}
+    </Button>
+  </Grid>
+);
+
+const HomeHeroMovie = () => (
+  <ProductHeroLayout
+    sxBackground={{
+      background: `url(/images/home/background.jpg) no-repeat center top`,
+      backgroundColor: "black",
+      backgroundPosition: "center",
+    }}
+  >
+    <Typography
+      color="inherit"
+      align="center"
+      variant="h2"
+      fontFamily="fantasy"
+    >
+      TGrid
+    </Typography>
+    <Typography
+      color="inherit"
+      align="center"
+      variant="h5"
+      fontFamily="cursive"
+      sx={{ mb: 4, mt: { xs: 4, sm: 10 } }}
+    >
+      Remote Procedure Call
+      <br />
+      <br />
+      TypeScript Grid Computing Framework
+    </Typography>
+    <br />
+    <br />
+    <Typography
+      align="center"
+      variant="h5"
+      fontFamily="monospace"
+      sx={{ fontWeight: "bold" }}
+    >
+      <React.Fragment>
+        <span style={{ color: PURPLE }}>{"await "}</span>
+        <span style={{ color: CYAN }}>driver</span>
+        <span style={{ color: "gray" }}>{"."}</span>
+        <span style={{ color: YELLOW }}>{"method("}</span>
+        <span style={{ color: "gray" }}>{"...params"}</span>
+        <span style={{ color: YELLOW }}>{")"}</span>
+      </React.Fragment>
+    </Typography>
+    <br />
+    <br />
+    <br />
+    <br />
+    <Grid container spacing={2}>
+      <QuickButton
+        title="Guide Documents"
+        icon={<MenuBookIcon />}
+        href="/docs"
+        color="info"
+      />
+      <QuickButton
+        title="Github Repository"
+        icon={<GitHubIcon />}
+        href="https://github.com/samchon/tgrid"
+        color="success"
+      />
+    </Grid>
+  </ProductHeroLayout>
+);
+export default HomeHeroMovie;

website/src/movies/home/HomeStrengthMovie.tsx

@@ -0,0 +1,152 @@
+import { Box, Container, Grid } from "@mui/material";
+import React from "react";
+
+import HomeStrengthSectionMovie from "./HomeStrengthSectionMovie";
+
+const BLUE = "rgb(0, 200, 255)";
+const CYAN = "rgb(80, 200, 0)";
+const PURPLE = "rgb(191, 64, 191)";
+const YELLOW = "#DEC20B";
+
+const sections: HomeStrengthSectionMovie.Props[] = [
+  {
+    title: "Remote Procedure Call",
+    subTitle: (
+      <React.Fragment>
+        <span style={{ color: PURPLE }}>{"await "}</span>
+        <span style={{ color: CYAN }}>driver</span>
+        <span style={{ color: "gray" }}>{"."}</span>
+        <span style={{ color: YELLOW }}>{"method("}</span>
+        <span style={{ color: "gray" }}>{"...params"}</span>
+        <span style={{ color: YELLOW }}>{")"}</span>
+      </React.Fragment>
+    ),
+    description: (
+      <React.Fragment>
+        <p>You can call remote system's functions</p>
+        <br />
+        <p>
+          <span style={{ color: BLUE }}>Provider</span>
+          : functions for remote system
+        </p>
+        <br />
+        <p>
+          <span style={{ color: BLUE }}>Driver</span>
+          <span style={{ color: "gray" }}>{"<"}</span>
+          <span style={{ color: CYAN }}>Remote</span>
+          <span style={{ color: "gray" }}>{">"}</span>
+          : remote function caller
+        </p>
+      </React.Fragment>
+    ),
+    image: "/images/home/rpc.png",
+    href: "/docs/remote-procedure-call",
+  },
+  {
+    title: "Web Socket Protocol",
+    subTitle: (
+      <React.Fragment>
+        <span style={{ color: BLUE }}>WebSocketAcceptor</span>
+        <span style={{ color: "gray" }}>{"<"}</span>
+        <span style={{ color: CYAN }}>Header</span>
+        <span style={{ color: "gray" }}>{", "}</span>
+        <span style={{ color: CYAN }}>Provider</span>
+        <span style={{ color: "gray" }}>{", "}</span>
+        <span style={{ color: CYAN }}>Remote</span>
+        <span style={{ color: "gray" }}>{">"}</span>
+      </React.Fragment>
+    ),
+    description: (
+      <React.Fragment>
+        <p>Supports RPC on WebSocket protocol</p>
+        <br />
+        <p>Available in both Web Browser and NodeJS</p>
+        <br />
+        <p>
+          <span style={{ color: PURPLE }}>await</span>
+          {" "}
+          <span style={{ color: CYAN }}>remote</span>
+          <span style={{ color: "gray" }}>{"."}</span>
+          <span style={{ color: YELLOW }}>{"method("}</span>
+          <span style={{ color: "gray" }}>{"...params"}</span>
+          <span style={{ color: YELLOW }}>{")"}</span>
+        </p>
+      </React.Fragment>
+    ),
+    image: "/images/home/websocket.svg",
+    href: "/docs/features/websocket",
+  },
+  {
+    title: "Worker Protocol",
+    subTitle: (
+      <React.Fragment>
+        <span style={{ color: BLUE }}>WorkerConnector</span>
+        <span style={{ color: "gray" }}>{"<"}</span>
+        <span style={{ color: CYAN }}>Header</span>
+        <span style={{ color: "gray" }}>{", "}</span>
+        <span style={{ color: CYAN }}>Provider</span>
+        <span style={{ color: "gray" }}>{", "}</span>
+        <span style={{ color: CYAN }}>Remote</span>
+        <span style={{ color: "gray" }}>{">"}</span>
+      </React.Fragment>
+    ),
+    description: (
+      <React.Fragment>
+        <p>Considers Worker as a remote system</p>
+        <br />
+        <p>So that supports RPC in Worker</p>
+        <br />
+        <p>So that supports RPC in SharedWorker</p>
+      </React.Fragment>
+    ),
+    image: "/images/home/worker.svg",
+    href: "/docs/features/worker",
+  },
+  {
+    title: "NestJS WebSocket",
+    subTitle: (
+      <React.Fragment>
+        <span style={{ color: PURPLE }}>@</span>
+        <span style={{ color: YELLOW }}>{"WebSocketRoute()"}</span>
+        <span style={{ color: "gray" }}>{" acceptor: "}</span>
+        <span style={{ color: BLUE }}>WebSocketAcceptor</span>
+        {/* <span style={{ color: "gray" }}>{"<"}</span>
+        <span style={{ color: CYAN }}>{"H"}</span>
+        <span style={{ color: "gray" }}>{", "}</span>
+        <span style={{ color: CYAN }}>{"P"}</span>
+        <span style={{ color: "gray" }}>{", "}</span>
+        <span style={{ color: CYAN }}>{"R"}</span>
+        <span style={{ color: "gray" }}>{">"}</span> */}
+      </React.Fragment>
+    ),
+    description: (
+      <React.Fragment>
+        <p>WebSocket RPC in NestJS</p>
+        <br />
+        <p>Compatible with both HTTP/WebSocket protocols</p>
+        <br/>
+        <p>Supports SDK (Software Development Kit) generation</p>
+      </React.Fragment>
+    ),
+    image: "/images/home/nestia.png",
+    href: "/docs/features/websocket/#nestjs-integration",
+    width: 120,
+  },
+];
+
+const HomeStrengthMovie = () => (
+  <Box sx={{ display: "flex" }}>
+    <Container
+      sx={{
+        mt: 3,
+        display: "flex",
+        position: "relative",
+      }}
+    >
+      <Grid container spacing={3}>
+        {sections.map(HomeStrengthSectionMovie)}
+      </Grid>
+    </Container>
+  </Box>
+);
+export default HomeStrengthMovie;