From 0c2d38a59f890afed6466658e1ad0341656137c8 Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 5 Mar 2021 16:53:52 -0800 Subject: title refactor --- frontend/package.json | 1 + frontend/public/index.html | 3 +- frontend/src/components/App.js | 42 +++++++++++-------------- frontend/src/components/Editor.js | 29 +++++++++++++++++ frontend/src/components/Footer.js | 2 +- frontend/src/components/decorators/CharLimit.js | 1 - frontend/src/css/index.css | 10 +++--- frontend/yarn.lock | 5 +++ 8 files changed, 62 insertions(+), 31 deletions(-) create mode 100644 frontend/src/components/Editor.js diff --git a/frontend/package.json b/frontend/package.json index 376660a..f972a30 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -23,6 +23,7 @@ "react-render-html": "^0.6.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", + "react-simple-code-editor": "^0.11.0", "react-syntax-highlighter": "^12.2.1", "serialize-javascript": "^4.0.0", "styled-components": "^5.1.0", diff --git a/frontend/public/index.html b/frontend/public/index.html index 0a92619..b328944 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -10,7 +10,8 @@ /> - + + ctrl-v | a modern, open-source pastebin diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js index 543cd46..f28a220 100644 --- a/frontend/src/components/App.js +++ b/frontend/src/components/App.js @@ -7,35 +7,33 @@ import { BrowserRouter as Router, Switch, Route, - Link, useParams } from "react-router-dom"; import Raw from './renderers/Raw' -const SpacedTitle = styled.div` - margin-top: 10vh +const Logo = styled.div` + position: absolute; + bottom: 1.5em; + left: 2em; + opacity: 0.3; + + & h1 { + font-size: 3rem; + } ` -const Desc = () => { - return ( -

a modern, open-source pastebin with latex and markdown rendering support

- ); -} +const Main = styled.main` + margin-top: 10vh; +` const GetPasteWithParam = () => { let { hash } = useParams(); - - return ( - - ); + return ; } const GetRawWithParam = () => { let { hash } = useParams(); - - return ( - - ); + return ; } const App = () => { @@ -47,17 +45,15 @@ const App = () => { />
- + - + -
+
} @@ -66,7 +62,7 @@ const App = () => { -
+
diff --git a/frontend/src/components/Editor.js b/frontend/src/components/Editor.js new file mode 100644 index 0000000..83d8464 --- /dev/null +++ b/frontend/src/components/Editor.js @@ -0,0 +1,29 @@ +import React from 'react'; +import Editor from 'react-simple-code-editor'; +import { highlight, languages } from 'prismjs/components/prism-core'; +import 'prismjs/components/prism-clike'; +import 'prismjs/components/prism-javascript'; + +const code = `function add(a, b) { + return a + b; +} +`; + +class App extends React.Component { + state = { code }; + + render() { + return ( + this.setState({ code })} + highlight={code => highlight(code, languages.js)} + padding={10} + style={{ + fontFamily: '"JetBrains Mono", monospace', + fontSize: 12, + }} + /> + ); + } +} \ No newline at end of file diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js index c7878e5..3186a42 100644 --- a/frontend/src/components/Footer.js +++ b/frontend/src/components/Footer.js @@ -14,7 +14,7 @@ const Link = (props) => { const Footer = () => { return ( - © 2020 — , + (c) 2020 — , ); } diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js index 5a6fdca..1b5de91 100644 --- a/frontend/src/components/decorators/CharLimit.js +++ b/frontend/src/components/decorators/CharLimit.js @@ -4,7 +4,6 @@ import styled, { css } from 'styled-components' // show char limit if length > half of max const Chars = styled.p` color: #11111100; - font-family: 'Roboto Mono', monospace; position: absolute; font-size: 0.8em; writing-mode: vertical-rl; diff --git a/frontend/src/css/index.css b/frontend/src/css/index.css index fcda1a3..39da6d1 100644 --- a/frontend/src/css/index.css +++ b/frontend/src/css/index.css @@ -8,7 +8,7 @@ body { margin: 0; padding: 0; background-color: #faf9f5; - font-family: 'Lora', serif; + font-family: 'JetBrains Mono', serif; } form { @@ -17,7 +17,7 @@ form { textarea, input[type=text], input[type=password], .Dropdown-root { width: 100%; - font-family: 'Roboto Mono', monospace; + font-family: 'JetBrains Mono', monospace; font-size: 0.8em; padding: calc(0.8em - 1px); border-radius: 3px; @@ -37,7 +37,7 @@ textarea, input[type=text], input[type=password], .Dropdown-root { code, pre { background: #00000000; - font-family: 'Roboto Mono', monospace; + font-family: 'JetBrains Mono', monospace; padding: initial; border-radius: 3px; outline: none; @@ -105,7 +105,7 @@ a { } input[type=submit], button[type=submit] { - font-family: 'Lora', serif; + font-family: 'JetBrains Mono', serif; font-weight: 700; color: #faf9f5; background-color: #111111; @@ -115,7 +115,7 @@ input[type=submit], button[type=submit] { } button[type=button] { - font-family: 'Lora', serif; + font-family: 'JetBrains Mono', serif; font-weight: 700; width: 8em; padding: calc(0.8em - 1px) 1.5em; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 2289530..72d0506 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -9464,6 +9464,11 @@ react-scripts@3.4.1: optionalDependencies: fsevents "2.1.2" +react-simple-code-editor@^0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz#bb57c7c29b570f2ab229872599eac184f5bc673c" + integrity sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw== + react-syntax-highlighter@^12.2.1: version "12.2.1" resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz#14d78352da1c1c3f93c6698b70ec7c706b83493e" -- cgit v1.2.3 From d99b8f3f8bea25a406c448d0fd3cd38e7c3f136f Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 5 Mar 2021 17:43:16 -0800 Subject: remove extra langs --- frontend/src/components/Editor.js | 29 ----------------------------- frontend/src/components/Inputs.js | 2 +- frontend/src/components/NewPaste.js | 2 +- frontend/src/components/ViewPaste.js | 2 +- frontend/src/components/renderers/Code.js | 21 +-------------------- 5 files changed, 4 insertions(+), 52 deletions(-) delete mode 100644 frontend/src/components/Editor.js diff --git a/frontend/src/components/Editor.js b/frontend/src/components/Editor.js deleted file mode 100644 index 83d8464..0000000 --- a/frontend/src/components/Editor.js +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import Editor from 'react-simple-code-editor'; -import { highlight, languages } from 'prismjs/components/prism-core'; -import 'prismjs/components/prism-clike'; -import 'prismjs/components/prism-javascript'; - -const code = `function add(a, b) { - return a + b; -} -`; - -class App extends React.Component { - state = { code }; - - render() { - return ( - this.setState({ code })} - highlight={code => highlight(code, languages.js)} - padding={10} - style={{ - fontFamily: '"JetBrains Mono", monospace', - fontSize: 12, - }} - /> - ); - } -} \ No newline at end of file diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js index 3adad92..e18133d 100644 --- a/frontend/src/components/Inputs.js +++ b/frontend/src/components/Inputs.js @@ -152,7 +152,7 @@ const LangInput = (props) => { ); diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js index ff945a0..a8405b8 100644 --- a/frontend/src/components/NewPaste.js +++ b/frontend/src/components/NewPaste.js @@ -39,7 +39,7 @@ const NewPaste = () => { const [title, setTitle] = useState(''); const [content, setContent] = useState(''); const [pass, setPass] = useState(''); - const [language, setLanguage] = useState(LANGS.raw); + const [language, setLanguage] = useState(LANGS.auto); const [expiry, setExpiry] = useState(''); const [hash, setHash] = useState(''); const [isPreview, setIsPreview] = useState(false); diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js index 5f9a962..a4f1844 100644 --- a/frontend/src/components/ViewPaste.js +++ b/frontend/src/components/ViewPaste.js @@ -24,7 +24,7 @@ const ViewPaste = (props) => { const [expiry, setExpiry] = useState(''); const [theme, setTheme] = useState('atom'); const [isRenderMode, setIsRenderMode] = useState(false); - const [language, setLanguage] = useState(LANGS.raw); + const [language, setLanguage] = useState(LANGS.auto); useEffect(() => { setIsRenderMode(language === 'latex' || language === 'markdown') diff --git a/frontend/src/components/renderers/Code.js b/frontend/src/components/renderers/Code.js index a312c51..9238061 100644 --- a/frontend/src/components/renderers/Code.js +++ b/frontend/src/components/renderers/Code.js @@ -12,28 +12,9 @@ export const THEMES = Object.freeze({ }) export const LANGS = Object.freeze({ - 'bash': 'bash', - 'c': 'c', - 'c++': 'cpp', - 'c#': 'cs', - 'css': 'css', - 'docker': 'dockerfile', - 'go': 'go', - 'haskell': 'haskell', - 'html': 'html', - 'java': 'java', - 'js': 'javascript', - 'jsx': 'jsx', 'latex': 'latex', - 'lisp': 'lisp', - 'makefile': 'makefile', 'markdown': 'markdown', - 'php': 'php', - 'python': 'python', - 'raw': 'text', - 'ruby': 'ruby', - 'scala': 'scala', - 'yaml': 'yaml' + 'auto': 'text', }) const StyledPre = styled.pre` -- cgit v1.2.3 From 3e8500d466b641ef34c24f8b0de8163a44ba7a9e Mon Sep 17 00:00:00 2001 From: jackyzha0 Date: Fri, 5 Mar 2021 22:17:18 -0800 Subject: refactoring css --- frontend/public/index.html | 1 - frontend/src/App.js | 60 +++++++ frontend/src/components/App.js | 76 -------- frontend/src/components/Footer.js | 5 +- frontend/src/components/Form/Button.js | 0 frontend/src/components/Form/Input.js | 3 + frontend/src/components/Form/index.js | 0 frontend/src/components/Form/mixins.js | 33 ++++ frontend/src/components/Inputs.js | 200 --------------------- frontend/src/components/Inputs/Code.js | 35 ++++ frontend/src/components/Inputs/Dropdown.js | 84 +++++++++ frontend/src/components/Inputs/Password.js | 14 ++ frontend/src/components/Inputs/Text.js | 25 +++ frontend/src/components/Inputs/index.js | 6 + frontend/src/components/Inputs/shared.js | 25 +++ frontend/src/components/NewPaste.js | 7 +- frontend/src/components/Options.js | 8 +- frontend/src/components/PasteInfo.js | 4 +- frontend/src/components/ViewPaste.js | 5 +- frontend/src/components/Watermark.js | 26 +++ .../src/components/decorators/FloatingLabel.js | 32 ++-- frontend/src/components/modals/PasswordModal.js | 4 +- frontend/src/components/modals/PasteModal.js | 8 +- frontend/src/css/index.css | 33 ---- frontend/src/index.js | 3 +- frontend/src/theme/GlobalStyle.js | 11 ++ frontend/src/theme/ThemeProvider.js | 12 ++ 27 files changed, 372 insertions(+), 348 deletions(-) create mode 100644 frontend/src/App.js delete mode 100644 frontend/src/components/App.js create mode 100644 frontend/src/components/Form/Button.js create mode 100644 frontend/src/components/Form/Input.js create mode 100644 frontend/src/components/Form/index.js create mode 100644 frontend/src/components/Form/mixins.js delete mode 100644 frontend/src/components/Inputs.js create mode 100644 frontend/src/components/Inputs/Code.js create mode 100644 frontend/src/components/Inputs/Dropdown.js create mode 100644 frontend/src/components/Inputs/Password.js create mode 100644 frontend/src/components/Inputs/Text.js create mode 100644 frontend/src/components/Inputs/index.js create mode 100644 frontend/src/components/Inputs/shared.js create mode 100644 frontend/src/components/Watermark.js create mode 100644 frontend/src/theme/GlobalStyle.js create mode 100644 frontend/src/theme/ThemeProvider.js diff --git a/frontend/public/index.html b/frontend/public/index.html index b328944..8ca24a5 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -9,7 +9,6 @@ content="a modern, open-source pastebin with latex and markdown rendering support" /> - ctrl-v | a modern, open-source pastebin diff --git a/frontend/src/App.js b/frontend/src/App.js new file mode 100644 index 0000000..99e71ae --- /dev/null +++ b/frontend/src/App.js @@ -0,0 +1,60 @@ +import React from 'react'; +import NewPaste from './components/NewPaste' +import ViewPaste from './components/ViewPaste' +import Footer from './components/Footer' +import styled from 'styled-components' +import { + BrowserRouter as Router, + Switch, + Route, + useParams +} from "react-router-dom"; +import Raw from './components/renderers/Raw' +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(); + return ; +} + +const GetRawWithParam = () => { + let { hash } = useParams(); + return ; +} + +const App = () => { + return ( + + + + + + + +
+ + + + + + + + +
+
+ + + + + ); +} + + +export default App; diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js deleted file mode 100644 index f28a220..0000000 --- a/frontend/src/components/App.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import NewPaste from './NewPaste' -import ViewPaste from './ViewPaste' -import Footer from './Footer' -import styled from 'styled-components' -import { - BrowserRouter as Router, - Switch, - Route, - useParams -} from "react-router-dom"; -import Raw from './renderers/Raw' - -const Logo = styled.div` - position: absolute; - bottom: 1.5em; - left: 2em; - opacity: 0.3; - - & h1 { - font-size: 3rem; - } -` - -const Main = styled.main` - margin-top: 10vh; -` - -const GetPasteWithParam = () => { - let { hash } = useParams(); - return ; -} - -const GetRawWithParam = () => { - let { hash } = useParams(); - return ; -} - -const App = () => { - return ( - - - } - /> - -
- - - - -
- - } - /> - - - - -
- -
-
- - - - ); -} - - -export default App; diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js index 3186a42..1074fcb 100644 --- a/frontend/src/components/Footer.js +++ b/frontend/src/components/Footer.js @@ -3,6 +3,9 @@ import styled from 'styled-components' const SpacedFooter = styled.div` margin: 2em 0; + & a { + color: ${p => p.theme.colors.text}; + } ` const Link = (props) => { @@ -14,7 +17,7 @@ const Link = (props) => { const Footer = () => { return ( - (c) 2020 — , +

(c) 2020 — ,

); } diff --git a/frontend/src/components/Form/Button.js b/frontend/src/components/Form/Button.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/components/Form/Input.js b/frontend/src/components/Form/Input.js new file mode 100644 index 0000000..86af7d1 --- /dev/null +++ b/frontend/src/components/Form/Input.js @@ -0,0 +1,3 @@ +import {RelPositioning} from "../Inputs/shared"; +import React from "react"; + diff --git a/frontend/src/components/Form/index.js b/frontend/src/components/Form/index.js new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/components/Form/mixins.js b/frontend/src/components/Form/mixins.js new file mode 100644 index 0000000..dd26f7e --- /dev/null +++ b/frontend/src/components/Form/mixins.js @@ -0,0 +1,33 @@ +import {css} from 'styled-components'; + +export const Dropshadow = css` + box-shadow: 0 14px 28px rgba(27, 33, 48,0.06), 0 10px 10px rgba(27, 33, 48,0.02); +` + +export const InputLike = css` + width: 100%; + font-family: 'JetBrains Mono', monospace; + font-size: 0.8em; + padding: calc(0.8em - 1px); + border-radius: 3px; + border: 1px solid ${p => p.theme.colors.border}; + outline: none; + margin: 1.7em 0; +` + +export const ButtonLike = css` + font-family: 'JetBrains Mono', serif; + font-weight: 700; + padding: 0.8em 2em; + margin: 2em 0; + outline: 0; + + ${p => p.primary ? ` + color: #faf9f5; + background-color: #111111; + ` : ` + color: #faf9f5; + background-color: #111111; + `} + +` \ No newline at end of file diff --git a/frontend/src/components/Inputs.js b/frontend/src/components/Inputs.js deleted file mode 100644 index e18133d..0000000 --- a/frontend/src/components/Inputs.js +++ /dev/null @@ -1,200 +0,0 @@ -import React, {useEffect, useRef} from 'react'; -import CharLimit from './decorators/CharLimit' -import styled from 'styled-components' -import FloatingLabel from './decorators/FloatingLabel' -import Dropdown from 'react-dropdown'; -import { LANGS, THEMES } from './renderers/Code'; -import * as indentation from 'indent-textarea'; - -const RelPositioning = styled.div` - position: relative; - height: calc(100% - 4em); -` - -const FlexChild = styled.div` - display: block; - margin-left: 2em; -` - -const TitleInput = (props) => { - return ( - - - - - - ); -} - -const PasteInput = ({content, ...props}) => { - const textInput = useRef(null); - - useEffect(() => { - indentation.watch(textInput.current); - }, [textInput]) - - return ( - - -