base next refactor

19 files changed, 455 insertions, 403 deletions

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 0a47baa..f00397f 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -13,10 +13,7 @@ import ThemeProvider from './theme/ThemeProvider'
 import GlobalStyle from './theme/GlobalStyle'
 import {Watermark} from "./components/Watermark";
 
-const Main = styled.div`
-  margin-top: 10vh;
-  padding: 0 20vw 30px 20vw;
-`
+
 
 const GetPasteWithParam = () => {
   let { hash } = useParams();
diff --git a/frontend/src/components/PasteInfo.js b/frontend/src/components/PasteInfo.js
index 6ab5b19..2f912fb 100644
--- a/frontend/src/components/PasteInfo.js
+++ b/frontend/src/components/PasteInfo.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components'
-import { useHistory } from 'react-router-dom';
 import { Theme } from './Inputs'
 import {Button} from "./Common/Button";
+import {useRouter} from "next/router";
 
 const Bold = styled.span`
     font-weight: 700
@@ -28,10 +28,10 @@ const Flex = styled.div`
 `
 
 const PasteInfo = (props) => {
-    const history = useHistory();
+    const router = useRouter()
     const redirRaw = () => {
         const redirUrl = `/raw/${props.hash}`
-        history.push(redirUrl);
+        router.push(redirUrl);
     }
 
     const renderable = () => {
diff --git a/frontend/src/components/modals/PasteModal.js b/frontend/src/components/modals/PasteModal.js
index e7dbed2..a0fd309 100644
--- a/frontend/src/components/modals/PasteModal.js
+++ b/frontend/src/components/modals/PasteModal.js
@@ -1,21 +1,21 @@
 import React from 'react';
 import Modal from 'react-modal';
 import {Form, ModalHeader, modalStyles} from './shared'
-import { useHistory } from 'react-router-dom';
+import { useRouter } from 'next/router'
 import { Text } from '../Inputs'
 import { useClipboard } from 'use-clipboard-copy';
 import {Button} from "../Common/Button";
 
 const PasteModal = (props) => {
-    const history = useHistory();
-    const fullURL = `${window.location.origin}/${props.hash}`;
+    const fullURL = `https://ctrl-v.app/${props.hash}`;
     const clipboard = useClipboard({ copiedTimeout: 3000 });
     Modal.setAppElement('body');
+    const router = useRouter()
 
     const redir = (e) => {
         e.preventDefault();
         const redirUrl = `/${props.hash}`
-        history.push(redirUrl);
+        router.push(redirUrl);
     }
 
     return (
diff --git a/frontend/src/components/pages/NewPaste.js b/frontend/src/components/pages/NewPaste.js
deleted file mode 100644
index 19161da..0000000
--- a/frontend/src/components/pages/NewPaste.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { Text, Code } from '../Inputs'
-import OptionsContainer from '../Options'
-import Error from '../Err'
-import PasteModal from '../modals/PasteModal'
-import styled from 'styled-components'
-import CodeRenderer from '../renderers/Code'
-import Latex from '../renderers/Latex'
-import Markdown from '../renderers/Markdown'
-import {Button, SubmitButton} from "../Common/Button";
-import {newPaste} from "../hooks/shared";
-
-const Flex = styled.div`
-    display: flex;
-    flex-direction: row;
-`
-
-const FlexLeft = styled.div`
-    flex: 0 0 calc(50% - 1em - 2px);
-`
-
-const FlexRight = styled.div`
-    flex: 0 0 50%;
-    max-width: calc(50% - 1em + 2px);
-    margin-left: 2em;
-`
-
-const PreviewWrapper = styled.div`
-    margin: 2em;
-`
-
-const NewPaste = () =>  {
-    const [title, setTitle] = useState('');
-    const [content, setContent] = useState('');
-    const [pass, setPass] = useState('');
-    const [language, setLanguage] = useState('detect');
-    const [expiry, setExpiry] = useState('');
-    const [hash, setHash] = useState('');
-    const [isPreview, setIsPreview] = useState(false);
-    const ErrorLabel = useRef(null);
-
-    useEffect(() => {
-      document.title = title === "" ? `ctrl-v` : `ctrl-v | ${title}`;
-    }, [title])
-
-    function handleSubmit(e) {
-        e.preventDefault();
-
-        // prevent resubmission
-        if (!hash) {
-            newPaste({title, content, language, pass, expiry})
-                .then(resp => {setHash(resp.data.hash)})
-                .catch((error) => {
-                    const resp = error.response
-
-                    // some weird err (e.g. network)
-                    if (!resp) {
-                        ErrorLabel.current.showMessage(error)
-                        return
-                    }
-
-                    // some weird err
-                    const errTxt = `${resp.status}: ${resp.data}`
-                    ErrorLabel.current.showMessage(errTxt)
-                });
-        }
-    }
-
-    function renderPreview() {
-        const pasteInput = <Code
-            setContentCallback={setContent}
-            content={content}
-            maxLength="100000" />
-
-        if (isPreview) {
-            var preview
-            switch (language) {
-                case 'latex':
-                    preview =
-                        <PreviewWrapper>
-                            <Latex
-                                content={content} />
-                        </PreviewWrapper>
-                    break
-                case 'markdown':
-                    preview =
-                        <PreviewWrapper className='md' >
-                            <Markdown
-                                content={content} />
-                        </PreviewWrapper>
-                    break
-                default:
-                    preview =
-                        <CodeRenderer
-                            lang={language}
-                            theme='atom'
-                            content={content} />
-            }
-
-            return (
-                <Flex>
-                    <FlexLeft>
-                        {pasteInput}
-                    </FlexLeft>
-                    <FlexRight className='preview' >
-                        {preview}
-                    </FlexRight>
-                </Flex>
-            );
-        } else {
-            return (
-                pasteInput
-            );
-        }
-    }
-
-    return (
-        <form onSubmit={handleSubmit}>
-            <PasteModal hash={hash} />
-            <Text
-                label="title"
-                onChange={(e) => {setTitle(e.target.value)}}
-                value={title}
-                autoFocus
-                maxLength="100"
-                id="titleInput" />
-            {renderPreview()}
-            <OptionsContainer
-                pass={pass}
-                expiry={expiry}
-                lang={language}
-                onPassChange={(e) => { setPass(e.target.value) }} 
-                onLangChange={(e) => { setLanguage(e.target.value) }} 
-                onExpiryChange={(e) => { setExpiry(e.target.value) }} />
-            <div>
-              <SubmitButton type="submit" value="new paste" />
-              {language !== 'detect' && <Button
-                secondary
-                type="button"
-                onClick={() => setIsPreview(!isPreview)}>
-                preview
-              </Button>}
-            </div>
-            <br />
-            <Error ref={ErrorLabel} />
-        </form>
-    );
-}
-
-export default NewPaste
\ No newline at end of file
diff --git a/frontend/src/components/pages/Raw.js b/frontend/src/components/pages/Raw.js
deleted file mode 100644
index 23ef6bf..0000000
--- a/frontend/src/components/pages/Raw.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import styled from 'styled-components'
-import {CodeLike} from "../Common/mixins";
-import useFetchPaste from "../hooks/useFetchPaste";
-
-const RawText = styled.pre`
-    ${CodeLike}
-    padding: 0 1em;
-`
-
-const Raw = ({hash}) => {
-    const { err, result } = useFetchPaste(hash)
-    return <RawText>{result?.content || err}</RawText>
-}
-
-export default Raw
\ No newline at end of file
diff --git a/frontend/src/components/pages/ViewPaste.js b/frontend/src/components/pages/ViewPaste.js
deleted file mode 100644
index bc61314..0000000
--- a/frontend/src/components/pages/ViewPaste.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-import Error from '../Err';
-import { Text } from '../Inputs';
-import CodeRenderer from '../renderers/Code'
-import PasteInfo from '../PasteInfo';
-import PasswordModal from '../modals/PasswordModal'
-import RenderDispatch from '../renderers/RenderDispatch'
-import useFetchPaste from "../hooks/useFetchPaste";
-
-const ViewPaste = (props) => {
-    const { err, requiresAuth, validPass, getWithPassword, result } = useFetchPaste(props.hash)
-    const {content, language, expiry, title} = result ?? {}
-    const [theme, setTheme] = useState('atom');
-    const [isRenderMode, setIsRenderMode] = useState(false);
-    const [enteredPass, setEnteredPass] = useState('');
-    const ErrorLabelRef = useRef(null);
-
-    if (err) {
-        ErrorLabelRef.current.showMessage(err, -1)
-    }
-
-    useEffect(() => {
-        setIsRenderMode(language === 'latex' || language === 'markdown')
-    }, [language])
-
-    function getDisplay() {
-        return isRenderMode ? <RenderDispatch
-          language={language}
-          content={content}
-        /> : <CodeRenderer
-          content={content}
-          lang={language}
-          theme={theme}
-          id="pasteInput" />
-    }
-
-    return (
-        <div>
-            <PasswordModal
-                hasPass={requiresAuth}
-                validPass={validPass}
-                value={enteredPass}
-                onChange={(e) => setEnteredPass(e.target.value)}
-                validateCallback={getWithPassword} />
-            <Text
-                label="title"
-                value={title}
-                id="titleInput"
-                readOnly />
-            {getDisplay()}
-            <PasteInfo
-                hash={props.hash}
-                lang={language}
-                theme={theme}
-                expiry={expiry}
-                toggleRenderCallback={() => setIsRenderMode(!isRenderMode)}
-                isRenderMode={isRenderMode}
-                onChange={(e) => setTheme(e.target.value)}
-                err={<Error ref={ErrorLabelRef} />}
-            />
-        </div>
-    );
-}
-
-export default ViewPaste
\ No newline at end of file
diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js
index 29531fc..85fd5ab 100644
--- a/frontend/src/components/renderers/Code.js
+++ b/frontend/src/components/renderers/Code.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import virtualizedRenderer from 'react-syntax-highlighter-virtualized-renderer';
-import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { atomOneLight, ascetic, atomOneDark, dracula, ocean } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import styled from 'styled-components'
 import {Border, CodeLike, DropShadow, Rounded} from "../Common/mixins";
 
diff --git a/frontend/src/components/renderers/InlineCode.js b/frontend/src/components/renderers/InlineCode.js
index 44a3f58..2156503 100644
--- a/frontend/src/components/renderers/InlineCode.js
+++ b/frontend/src/components/renderers/InlineCode.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { atomOneDark } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { LANGS } from './Code'
 
 const MarkdownCodeRenderer = ({language, value}) => {
diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css
deleted file mode 100644
index 0340813..0000000
--- a/frontend/src/css/index.css
+++ /dev/null
@@ -1,150 +0,0 @@
-@media all and (max-width: 1000px) {
-  .lt-content-column {
-    padding: 0 calc(5vw + 1em) 0 5vw !important; 
-  }
-}
-
-form {
-  width: 100%;
-}
-
-textarea, input[type=text], input[type=password], .Dropdown-root {
-  width: 100%;
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 0.8em;
-  padding: calc(0.8em - 1px);
-  border-radius: 3px;
-  border: 1px solid #565656;
-  outline: none;
-  margin: 1.7em 0;
-}
-
-/* fix weird symbol height in render mode */
-.large-op {
-  transform: translateY(-0.55em);
-}
-
-.small-op {
-  transform: translateY(-0.1em);
-}
-
-code, pre {
-  background: #00000000;
-  font-family: 'JetBrains Mono', monospace;
-  padding: initial;
-  border-radius: 3px;
-  outline: none;
-}
-
-.Dropdown-root {
-  cursor: pointer;
-}
-
-.Dropdown-root:hover, .Dropdown-root.is-open {
-   opacity: 1;
-}
-
-.Dropdown-root + label {
-  top: 0.5em;
-  opacity: 0;
-}
-
-.Dropdown-root.is-open + label, .Dropdown-root:hover + label {
-  opacity: 1;
-  top: -0.1em;
-}
-
-.Dropdown-placeholder {
-  width: 5.5em;
-}
-
-.Dropdown-menu {
-  border-top: 1px solid #111111;
-  margin-top: 0.5em;
-  bottom: auto;
-}
-
-.Dropdown-option {
-  margin-top: 0.5em;
-  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
-}
-
-.Dropdown-option:hover {
-  font-weight: 700;
-  opacity: 0.4;
-}
-
-textarea, input[type=text], input[type=password], .Dropdown-root {
-  opacity: 0.5;
-  transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
-}
-
-textarea:focus, input[type=text]:focus, input[type=password]:focus {
-  opacity: 1;
-}
-
-input[type=password] {
-  font-weight: 700;
-}
-
-textarea {
-  height: max(40vh, 100%);
-  resize: vertical;
-  min-height: 40vh;
-}
-
-a {
-  color: #111111;
-}
-
-input[type=submit], button[type=submit] {
-  font-family: 'JetBrains Mono', serif;
-  font-weight: 700;
-  color: #faf9f5;
-  background-color: #111111;
-  padding: 0.8em 2em;
-  margin: 2em 0;
-  outline: 0;
-}
-
-button[type=button] {
-  font-family: 'JetBrains Mono', serif;
-  font-weight: 700;
-  width: 8em;
-  padding: calc(0.8em - 1px) 1.5em;
-  border-radius: 3px;
-  color: #111111;
-  background-color: #faf9f5;
-  border: 1px solid #565656;
-  outline: none;
-  margin: 2em 2em;
-}
-
-
-/* fixing markdown renderer */
-.md h3 {
-  font-weight: bold;
-}
-
-.md hr {
-  border-top: 1px solid #000;
-  border-style: solid;
-}
-
-.md code {
-  background: #00000008;
-  font-size: 0.8em;
-}
-
-.md pre {
-  padding: 0.7em;
-  background: #00000008;
-}
-
-.md pre > code {
-  background: none;
-}
-
-.md table {
-  width: 100%;
-}
\ No newline at end of file
diff --git a/frontend/src/components/hooks/shared.js b/frontend/src/http/shared.js
index 00d41e9..00d41e9 100644
--- a/frontend/src/components/hooks/shared.js
+++ b/frontend/src/http/shared.js
diff --git a/frontend/src/components/hooks/useFetchPaste.js b/frontend/src/http/useFetchPaste.js
index c394f5b..ba482f9 100644
--- a/frontend/src/components/hooks/useFetchPaste.js
+++ b/frontend/src/http/useFetchPaste.js
@@ -1,8 +1,8 @@
 import {useEffect, useState} from 'react'
 import {fetchPaste, fmtDateStr} from './shared'
-import {LANGS} from "../renderers/Code";
+import {LANGS} from "../components/renderers/Code";
 
-export default (id) => {
+const useFetchPaste = (id) => {
   const [loading, setLoading] = useState(true)
   const [err, setErr] = useState()
   const [requiresAuth, setRequiresAuth] = useState(false)
@@ -64,4 +64,6 @@ export default (id) => {
   }, [id])
 
   return { loading, err, requiresAuth, validPass, getWithPassword, result }
-}
\ No newline at end of file
+}
+
+export default useFetchPaste
\ No newline at end of file
diff --git a/frontend/src/pages/[hash].js b/frontend/src/pages/[hash].js
new file mode 100644
index 0000000..27f808b
--- /dev/null
+++ b/frontend/src/pages/[hash].js
@@ -0,0 +1,65 @@
+import React, { useEffect, useState, useRef } from 'react';
+import Error from '../components/Err';
+import { Text } from '../components/Inputs';
+import CodeRenderer from '../components/renderers/Code'
+import PasteInfo from '../components/PasteInfo';
+import PasswordModal from '../components/modals/PasswordModal'
+import RenderDispatch from '../components/renderers/RenderDispatch'
+import useFetchPaste from "../http/useFetchPaste";
+
+const ViewPaste = (props) => {
+  const { err, requiresAuth, validPass, getWithPassword, result } = useFetchPaste(props.hash)
+  const {content, language, expiry, title} = result ?? {}
+  const [theme, setTheme] = useState('atom');
+  const [isRenderMode, setIsRenderMode] = useState(false);
+  const [enteredPass, setEnteredPass] = useState('');
+  const ErrorLabelRef = useRef(null);
+
+  if (err) {
+    ErrorLabelRef.current.showMessage(err, -1)
+  }
+
+  useEffect(() => {
+    setIsRenderMode(language === 'latex' || language === 'markdown')
+  }, [language])
+
+  function getDisplay() {
+    return isRenderMode ? <RenderDispatch
+      language={language}
+      content={content}
+    /> : <CodeRenderer
+      content={content}
+      lang={language}
+      theme={theme}
+      id="pasteInput" />
+  }
+
+  return (
+    <div>
+      <PasswordModal
+        hasPass={requiresAuth}
+        validPass={validPass}
+        value={enteredPass}
+        onChange={(e) => setEnteredPass(e.target.value)}
+        validateCallback={getWithPassword} />
+      <Text
+        label="title"
+        value={title}
+        id="titleInput"
+        readOnly />
+      {getDisplay()}
+      <PasteInfo
+        hash={props.hash}
+        lang={language}
+        theme={theme}
+        expiry={expiry}
+        toggleRenderCallback={() => setIsRenderMode(!isRenderMode)}
+        isRenderMode={isRenderMode}
+        onChange={(e) => setTheme(e.target.value)}
+        err={<Error ref={ErrorLabelRef} />}
+      />
+    </div>
+  );
+}
+
+export default ViewPaste
\ No newline at end of file
diff --git a/frontend/src/pages/_app.js b/frontend/src/pages/_app.js
new file mode 100644
index 0000000..7e99f01
--- /dev/null
+++ b/frontend/src/pages/_app.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import ThemeProvider from "../theme/ThemeProvider";
+import GlobalStyle from "../theme/GlobalStyle";
+import '../theme/style.css';
+import {Watermark} from "../components/Watermark";
+import styled from "styled-components";
+
+const Main = styled.div`
+  margin-top: 10vh;
+  padding: 0 20vw 30px 20vw;
+`
+
+const App = ({ Component, pageProps }) => (
+  <ThemeProvider>
+    <GlobalStyle />
+    <Watermark/>
+    <Main id="appElement">
+      <Component {...pageProps} />
+    </Main>
+  </ThemeProvider>
+)
+
+export default App
\ No newline at end of file
diff --git a/frontend/src/pages/_document.js b/frontend/src/pages/_document.js
new file mode 100644
index 0000000..0cbd6a3
--- /dev/null
+++ b/frontend/src/pages/_document.js
@@ -0,0 +1,30 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class StyledDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js
new file mode 100644
index 0000000..141ebac
--- /dev/null
+++ b/frontend/src/pages/index.js
@@ -0,0 +1,150 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { Text, Code } from '../components/Inputs'
+import OptionsContainer from '../components/Options'
+import Error from '../components/Err'
+import PasteModal from '../components/modals/PasteModal'
+import styled from 'styled-components'
+import CodeRenderer from '../components/renderers/Code'
+import Latex from '../components/renderers/Latex'
+import Markdown from '../components/renderers/Markdown'
+import {Button, SubmitButton} from "../components/Common/Button";
+import {newPaste} from "../http/shared";
+
+const Flex = styled.div`
+    display: flex;
+    flex-direction: row;
+`
+
+const FlexLeft = styled.div`
+    flex: 0 0 calc(50% - 1em - 2px);
+`
+
+const FlexRight = styled.div`
+    flex: 0 0 50%;
+    max-width: calc(50% - 1em + 2px);
+    margin-left: 2em;
+`
+
+const PreviewWrapper = styled.div`
+    margin: 2em;
+`
+
+const NewPaste = () =>  {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [pass, setPass] = useState('');
+  const [language, setLanguage] = useState('detect');
+  const [expiry, setExpiry] = useState('');
+  const [hash, setHash] = useState('');
+  const [isPreview, setIsPreview] = useState(false);
+  const ErrorLabel = useRef(null);
+
+  useEffect(() => {
+    document.title = title === "" ? `ctrl-v` : `ctrl-v | ${title}`;
+  }, [title])
+
+  function handleSubmit(e) {
+    e.preventDefault();
+
+    // prevent resubmission
+    if (!hash) {
+      newPaste({title, content, language, pass, expiry})
+        .then(resp => {setHash(resp.data.hash)})
+        .catch((error) => {
+          const resp = error.response
+
+          // some weird err (e.g. network)
+          if (!resp) {
+            ErrorLabel.current.showMessage(error)
+            return
+          }
+
+          // some weird err
+          const errTxt = `${resp.status}: ${resp.data}`
+          ErrorLabel.current.showMessage(errTxt)
+        });
+    }
+  }
+
+  function renderPreview() {
+    const pasteInput = <Code
+      setContentCallback={setContent}
+      content={content}
+      maxLength="100000" />
+
+    if (isPreview) {
+      var preview
+      switch (language) {
+        case 'latex':
+          preview =
+            <PreviewWrapper>
+              <Latex
+                content={content} />
+            </PreviewWrapper>
+          break
+        case 'markdown':
+          preview =
+            <PreviewWrapper className='md' >
+              <Markdown
+                content={content} />
+            </PreviewWrapper>
+          break
+        default:
+          preview =
+            <CodeRenderer
+              lang={language}
+              theme='atom'
+              content={content} />
+      }
+
+      return (
+        <Flex>
+          <FlexLeft>
+            {pasteInput}
+          </FlexLeft>
+          <FlexRight className='preview' >
+            {preview}
+          </FlexRight>
+        </Flex>
+      );
+    } else {
+      return (
+        pasteInput
+      );
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <PasteModal hash={hash} />
+      <Text
+        label="title"
+        onChange={(e) => {setTitle(e.target.value)}}
+        value={title}
+        autoFocus
+        maxLength="100"
+        id="titleInput" />
+      {renderPreview()}
+      <OptionsContainer
+        pass={pass}
+        expiry={expiry}
+        lang={language}
+        onPassChange={(e) => { setPass(e.target.value) }}
+        onLangChange={(e) => { setLanguage(e.target.value) }}
+        onExpiryChange={(e) => { setExpiry(e.target.value) }} />
+      <div>
+        <SubmitButton type="submit" value="new paste" />
+        {language !== 'detect' && <Button
+          secondary
+          type="button"
+          onClick={() => setIsPreview(!isPreview)}>
+          preview
+        </Button>}
+      </div>
+      <br />
+      <Error ref={ErrorLabel} />
+    </form>
+  );
+}
+
+export default NewPaste
\ No newline at end of file
diff --git a/frontend/src/pages/raw/index.js b/frontend/src/pages/raw/index.js
new file mode 100644
index 0000000..86db3d4
--- /dev/null
+++ b/frontend/src/pages/raw/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import useFetchPaste from "../../http/useFetchPaste";
+import { useRouter } from 'next/router'
+
+
+export default (req, res) => {
+  const router = useRouter()
+  const { hash } = router.query
+  const { err, result } = useFetchPaste(hash)
+  res.statusCode = 200
+  res.json({
+    text: 'Hello World! This is the Next.js starter kit :D',
+  })
+}
\ No newline at end of file
diff --git a/frontend/src/theme/GlobalStyle.js b/frontend/src/theme/GlobalStyle.js
index 9fe80a5..94e4b57 100644
--- a/frontend/src/theme/GlobalStyle.js
+++ b/frontend/src/theme/GlobalStyle.js
@@ -2,10 +2,10 @@ import { createGlobalStyle } from 'styled-components'
 
 export default createGlobalStyle`
   body {
-    margin: 0;
-    padding: 0;
-    background: ${(p) => p.theme.colors.background};
-    font-family: 'JetBrains Mono', monospace;
-    color: ${(p) => p.theme.colors.text};
+      margin: 0;
+      padding: 0;
+      background: ${(p) => p.theme.colors.background};
+      font-family: 'JetBrains Mono', monospace;
+      color: ${(p) => p.theme.colors.text};
   }
 `
\ No newline at end of file
diff --git a/frontend/src/theme/ThemeProvider.js b/frontend/src/theme/ThemeProvider.js
index d9edcb0..942bc40 100644
--- a/frontend/src/theme/ThemeProvider.js
+++ b/frontend/src/theme/ThemeProvider.js
@@ -10,4 +10,6 @@ const theme = {
   },
 }
 
-export default ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>
\ No newline at end of file
+const Provider = ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>
+
+export default Provider
\ No newline at end of file
diff --git a/frontend/src/theme/style.css b/frontend/src/theme/style.css
new file mode 100644
index 0000000..10b955b
--- /dev/null
+++ b/frontend/src/theme/style.css
@@ -0,0 +1,150 @@
+@media all and (max-width: 1000px) {
+    .lt-content-column {
+        padding: 0 calc(5vw + 1em) 0 5vw !important;
+    }
+}
+
+form {
+    width: 100%;
+}
+
+textarea, input[type=text], input[type=password], .Dropdown-root {
+    width: 100%;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.8em;
+    padding: calc(0.8em - 1px);
+    border-radius: 3px;
+    border: 1px solid #565656;
+    outline: none;
+    margin: 1.7em 0;
+}
+
+/* fix weird symbol height in render mode */
+.large-op {
+    transform: translateY(-0.55em);
+}
+
+.small-op {
+    transform: translateY(-0.1em);
+}
+
+code, pre {
+    background: #00000000;
+    font-family: 'JetBrains Mono', monospace;
+    padding: initial;
+    border-radius: 3px;
+    outline: none;
+}
+
+.Dropdown-root {
+    cursor: pointer;
+}
+
+.Dropdown-root:hover, .Dropdown-root.is-open {
+    opacity: 1;
+}
+
+.Dropdown-root + label {
+    top: 0.5em;
+    opacity: 0;
+}
+
+.Dropdown-root.is-open + label, .Dropdown-root:hover + label {
+    opacity: 1;
+    top: -0.1em;
+}
+
+.Dropdown-placeholder {
+    width: 5.5em;
+}
+
+.Dropdown-menu {
+    border-top: 1px solid #111111;
+    margin-top: 0.5em;
+    bottom: auto;
+}
+
+.Dropdown-option {
+    margin-top: 0.5em;
+    transition: all 0.5s cubic-bezier(.25,.8,.25,1);
+}
+
+.Dropdown-option:hover {
+    font-weight: 700;
+    opacity: 0.4;
+}
+
+textarea, input[type=text], input[type=password], .Dropdown-root {
+    opacity: 0.5;
+    transition: opacity 0.5s cubic-bezier(.25,.8,.25,1);
+}
+
+textarea:focus, input[type=text]:focus, input[type=password]:focus {
+    opacity: 1;
+}
+
+input[type=password] {
+    font-weight: 700;
+}
+
+textarea {
+    height: max(40vh, 100%);
+    resize: vertical;
+    min-height: 40vh;
+}
+
+a {
+    color: #111111;
+}
+
+input[type=submit], button[type=submit] {
+    font-family: 'JetBrains Mono', serif;
+    font-weight: 700;
+    color: #faf9f5;
+    background-color: #111111;
+    padding: 0.8em 2em;
+    margin: 2em 0;
+    outline: 0;
+}
+
+button[type=button] {
+    font-family: 'JetBrains Mono', serif;
+    font-weight: 700;
+    width: 8em;
+    padding: calc(0.8em - 1px) 1.5em;
+    border-radius: 3px;
+    color: #111111;
+    background-color: #faf9f5;
+    border: 1px solid #565656;
+    outline: none;
+    margin: 2em 2em;
+}
+
+
+/* fixing markdown renderer */
+.md h3 {
+    font-weight: bold;
+}
+
+.md hr {
+    border-top: 1px solid #000;
+    border-style: solid;
+}
+
+.md code {
+    background: #00000008;
+    font-size: 0.8em;
+}
+
+.md pre {
+    padding: 0.7em;
+    background: #00000008;
+}
+
+.md pre > code {
+    background: none;
+}
+
+.md table {
+    width: 100%;
+}
\ No newline at end of file