aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--frontend/package.json1
-rw-r--r--frontend/public/index.html3
-rw-r--r--frontend/src/components/App.js42
-rw-r--r--frontend/src/components/Editor.js29
-rw-r--r--frontend/src/components/Footer.js2
-rw-r--r--frontend/src/components/decorators/CharLimit.js1
-rw-r--r--frontend/src/css/index.css10
-rw-r--r--frontend/yarn.lock5
8 files changed, 62 insertions, 31 deletions
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 @@
/>
<link rel="icon" href="icon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jackyzha0/[email protected]/src/lite.css">
- <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Roboto+Mono&display=swap" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap" rel="stylesheet">
<title>ctrl-v | a modern, open-source pastebin </title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DE1TYY2F24"></script>
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 (
- <h3>a modern, <a href="https://github.com/jackyzha0/ctrl-v" target="_blank" rel="noopener noreferrer">open-source</a> pastebin with latex and markdown rendering support</h3>
- );
-}
+const Main = styled.main`
+ margin-top: 10vh;
+`
const GetPasteWithParam = () => {
let { hash } = useParams();
-
- return (
- <ViewPaste hash = {hash} />
- );
+ return <ViewPaste hash = {hash} />;
}
const GetRawWithParam = () => {
let { hash } = useParams();
-
- return (
- <Raw hash={hash} />
- );
+ return <Raw hash={hash} />;
}
const App = () => {
@@ -47,17 +45,15 @@ const App = () => {
/>
<Route>
<div className="lt-content-column">
- <SpacedTitle>
+ <Logo>
<nav>
<h1 className="mainLogo">
- <span role="img" aria-label="clipboard">📋&nbsp;</span>
- <Link to="/">ctrl-v</Link>
+ <a href="https://github.com/jackyzha0/ctrl-v">ctrl-v</a>
</h1>
- <Desc />
</nav>
- </SpacedTitle>
+ </Logo>
- <main id="appElement">
+ <Main id="appElement">
<Switch>
<Route path="/:hash"
children={<GetPasteWithParam />}
@@ -66,7 +62,7 @@ const App = () => {
<NewPaste />
</Route>
</Switch>
- </main>
+ </Main>
<Footer />
</div>
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 (
+ <Editor
+ value={this.state.code}
+ onValueChange={code => 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 (
<SpacedFooter>
- © 2020 &mdash; <Link link="https://jzhao.xyz/" name="jacky" />, <Link link="https://ryanmehri.tech/" name="ryan" />
+ (c) 2020 &mdash; <Link link="https://jzhao.xyz/" name="jacky" />, <Link link="https://ryanmehri.tech/" name="ryan" />
</SpacedFooter>
);
}
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 @@ [email protected]:
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"
generated by cgit v1.2.3 (git 2.25.1) at 2026-03-11 00:31:41 +0000