diff --git a/frontend/.eslintrc b/frontend/.eslintrc new file mode 100644 index 0000000..97a2bb8 --- /dev/null +++ b/frontend/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": ["next", "next/core-web-vitals"] +} diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..1437c53 --- /dev/null +++ b/frontend/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..19087af --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,20 @@ +![home](https://user-images.githubusercontent.com/6770106/133267560-0eea8701-ac94-45f8-8ba8-eead83d83622.png) + +![editor](https://user-images.githubusercontent.com/6770106/133267600-85073cdc-9ebf-4b7c-bbb8-f728318b26a5.png) + + +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. diff --git a/frontend/components/LanguageLink.js b/frontend/components/LanguageLink.js new file mode 100644 index 0000000..f62ded8 --- /dev/null +++ b/frontend/components/LanguageLink.js @@ -0,0 +1,41 @@ +import { alpha, Button } from "@mui/material"; +import { useRouter } from "next/router"; +import React from "react"; + +const LanguageLink = (props) => { + const { link } = props; + const router = useRouter(); + + const handleClick = () => { + router.push(`/editor/${link.id}`); + }; + + return ( + <> + + + ); +}; + +export default LanguageLink; diff --git a/frontend/components/RijuTerminal.js b/frontend/components/RijuTerminal.js new file mode 100644 index 0000000..f24a08a --- /dev/null +++ b/frontend/components/RijuTerminal.js @@ -0,0 +1,47 @@ +import Box from "@mui/material/Box"; +import React, { useEffect } from "react"; +import { Terminal } from "xterm"; +import { FitAddon } from "xterm-addon-fit"; +import "xterm/css/xterm.css"; +import { EventEmitter } from "../utils/EventEmitter"; + +function RijuTerminal() { + useEffect(() => { + const term = new Terminal({ + fontFamily: "Fira Code", + theme: { + background: "#292D3E", + }, + }); + term.open(document.getElementById("riju-term")); + term.write("Connecting to server..."); + const fitAddon = new FitAddon(); + term.loadAddon(fitAddon); + + window.addEventListener("resize", () => fitAddon.fit()); + EventEmitter.subscribe("terminal", (payload) => { + if (!payload) return; + const { type, data } = payload; + switch (type) { + case "terminalClear": + term.reset(); + break; + case "terminalOutput": + term.write(data); + break; + default: + term.write(data); + break; + } + }); + term.onData((data) => { + EventEmitter.dispatch("send", { event: "terminalInput", input: data }); + }); + }, []); + + return ( + + ); +} + +export default RijuTerminal; diff --git a/frontend/components/UI.js b/frontend/components/UI.js new file mode 100644 index 0000000..cbd1c73 --- /dev/null +++ b/frontend/components/UI.js @@ -0,0 +1,48 @@ +import { alpha, InputBase, styled } from "@mui/material"; + +export const Search = styled("div")(({ theme }) => ({ + borderRadius: theme.shape.borderRadius, + backgroundColor: alpha(theme.palette.common.white, 0.15), + "&:hover": { + backgroundColor: alpha(theme.palette.common.white, 0.25), + }, + width: "100%", + [theme.breakpoints.up("sm")]: { + width: "auto", + }, + display: "flex", + alignItems: "center", + // boxShadow: theme.shadows[3], + minHeight: 70, + border: `1px solid`, + borderColor: theme.palette.primary.main, + boxShadow: `0 2px 5px ${alpha(theme.palette.primary.main, 0.5)}`, +})); + +export const SearchIconWrapper = styled("div")(() => ({ + position: "absolute", + pointerEvents: "none", + display: "flex", + alignItems: "center", + justifyContent: "center", + marginLeft: 16, +})); + +export const StyledInputBase = styled(InputBase)(({ theme }) => ({ + color: "inherit", + height: "100%", + width: "100%", + "& .MuiInputBase-input": { + fontSize: 30, + // minHeight: 70, + // fontWeight: "bolder", + // vertical padding + font size from searchIcon + paddingLeft: 32 + 24, + transition: theme.transitions.create("width"), + width: "100%", + [theme.breakpoints.up("md")]: { + // width: "20ch", + }, + }, + flexGrow: 1, +})); diff --git a/frontend/createEmotionCache.js b/frontend/createEmotionCache.js new file mode 100644 index 0000000..79c4a1a --- /dev/null +++ b/frontend/createEmotionCache.js @@ -0,0 +1,5 @@ +import createCache from "@emotion/cache"; + +export default function createEmotionCache() { + return createCache({ key: "css" }); +} diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js new file mode 100644 index 0000000..44c3a09 --- /dev/null +++ b/frontend/pages/_app.js @@ -0,0 +1,49 @@ +import { ThemeProvider } from "@mui/material/styles"; +import "setimmediate"; +import Head from "next/head"; +import Router from "next/router"; +import NProgress from "nprogress"; +import "../../node_modules/nprogress/nprogress.css"; +import React from "react"; +import "../styles/globals.css"; +import { theme } from "../theme"; + +Router.events.on("routeChangeStart", () => { + console.log("routeChangeStart"); + NProgress.start(); +}); +Router.events.on("routeChangeComplete", () => { + console.log("routeChangeComplete"); + NProgress.done(); +}); +Router.events.on("routeChangeError", () => { + console.log("routeChangeError"); + NProgress.done(); +}); + +function MyApp({ Component, pageProps }) { + React.useEffect(() => { + // Remove the server-side injected CSS. + const jssStyles = document.querySelector("#jss-server-side"); + if (jssStyles) { + jssStyles.parentElement.removeChild(jssStyles); + } + }, []); + + return ( + + + Riju + + + + + + + ); +} + +export default MyApp; diff --git a/frontend/pages/_document.js b/frontend/pages/_document.js new file mode 100644 index 0000000..83d0adc --- /dev/null +++ b/frontend/pages/_document.js @@ -0,0 +1,83 @@ +import * as React from "react"; +import Document, { Html, Head, Main, NextScript } from "next/document"; +import createEmotionServer from "@emotion/server/create-instance"; +import { theme } from "../theme"; +import createEmotionCache from "../createEmotionCache"; + +export default class MyDocument extends Document { + render() { + return ( + + + {/* PWA primary color */} + + + +
+ + + + ); + } +} + +// `getInitialProps` belongs to `_document` (instead of `_app`), +// it's compatible with static-site generation (SSG). +MyDocument.getInitialProps = async (ctx) => { + // Resolution order + // + // On the server: + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. document.getInitialProps + // 4. app.render + // 5. page.render + // 6. document.render + // + // On the server with error: + // 1. document.getInitialProps + // 2. app.render + // 3. page.render + // 4. document.render + // + // On the client + // 1. app.getInitialProps + // 2. page.getInitialProps + // 3. app.render + // 4. page.render + + const originalRenderPage = ctx.renderPage; + + // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. + // However, be aware that it can have global side effects. + const cache = createEmotionCache(); + const { extractCriticalToChunks } = createEmotionServer(cache); + + ctx.renderPage = () => + originalRenderPage({ + // eslint-disable-next-line react/display-name + enhanceApp: (App) => (props) => , + }); + + const initialProps = await Document.getInitialProps(ctx); + // This is important. It prevents emotion to render invalid HTML. + // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 + const emotionStyles = extractCriticalToChunks(initialProps.html); + const emotionStyleTags = emotionStyles.styles.map((style) => ( +