shihaam/okiba-org-frontend
1
0
Fork 0
mirror of https://github.com/okiba-org/frontend.git synced 2025-11-05 19:27:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: shihaam:cc56e17bd4eb9389791978d90f2a82ca6d96f647
Branches Tags
shihaam:master
...
compare: shihaam:383fa6275e9e6751a13380bc46fdcfbec419ce9f
Branches Tags
shihaam:master

2 Commits
cc56e17bd4 ... 383fa6275e

Author SHA1 Message Date
alok8bb
383fa6275e fix editor and layout css issues 
Signed-off-by: alok8bb <alok8bb@gmail.com>
 2023-07-29 17:39:23 +05:30
alok8bb
ae4986c091 run formatter 
Signed-off-by: alok8bb <alok8bb@gmail.com>
 2023-07-29 16:38:16 +05:30
12 changed files with 886 additions and 468 deletions
Expand all files Collapse all files

3
.prettierrc
View File

@@ -6,7 +6,6 @@
"quoteProps": "consistent", "quoteProps": "consistent",
"jsxSingleQuote": false, "jsxSingleQuote": false,
"bracketSpacing": true, "bracketSpacing": true,
"jsxBracketSameLine": true,
"arrowParens": "avoid", "arrowParens": "avoid",
"printWidth": 80 "printWidth": 80
} }

20
index.html
View File

@@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg" href="favicon.svg" /> <link rel="icon" type="image/svg" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Okiba</title> <title>Okiba</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

1156
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

3
src/App.tsx
View File

@@ -12,7 +12,8 @@ function App() {
display: "flex", display: "flex",
flexDirection: "column", flexDirection: "column",
height: "100%", height: "100%",
}}> }}
>
<Routes> <Routes>
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="/:id" element={<Paste />} /> <Route path="/:id" element={<Paste />} />

82
src/components/BottomBar.tsx
View File

@@ -5,73 +5,92 @@ const BottomBar: FunctionComponent<propTypes> = props => {
return ( return (
<footer <footer
style={{ style={{
height: "5vh", height: "2rem",
minHeight: "30px", minHeight: "1rem",
position: "relative",
left: "0",
bottom: "0",
width: "100%",
background: "#0B0E14", background: "#0B0E14",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
paddingInline: "15px", paddingInline: "15px",
}} }}
className="BottomBar"> className="BottomBar"
>
<a <a
style={{ style={{
color: "#D9F8C4", color: "#D9F8C4",
cursor: "pointer", cursor: "pointer",
textDecoration: "none", textDecoration: "none",
fontSize: "1rem",
}} }}
href="/"> href="/"
>
<b>Okiba</b> v1.0 <b>Okiba</b> v1.0
</a> </a>
<ul <ul
className="controls" className="controls"
style={{ style={{
display: "flex", display: "flex",
marginBottom: "2px",
alignItems: "center", alignItems: "center",
}}> marginBottom: "2px",
}}
>
{/* make component of these links some day */} {/* make component of these links some day */}
{props.isNewPaste ? ( {props.isNewPaste ? (
<a <li style={listStyle}>
href="#" <a
onClick={async () => { href="#"
if (props.postCallback != undefined) { onClick={async () => {
await props.postCallback(); if (props.postCallback != undefined) {
} await props.postCallback();
}} }
style={linkStyle}> }}
<li style={listStyle}>save</li> style={linkStyle}
</a> >
save
</a>
</li>
) : ( ) : (
<a href={`/raw/${useParams().id}`} style={linkStyle}> <li style={listStyle}>
<li style={listStyle}>raw</li> <a href={`/raw/${useParams().id}`} style={linkStyle}>
</a> raw
</a>
</li>
)} )}
<Separator /> <Separator />
<a href={"/"} style={linkStyle}> <li style={listStyle}>
<li style={listStyle}>new</li> <a href={"/"} style={linkStyle}>
</a> new
</a>
</li>
<Separator /> <Separator />
<a <li style={listStyle}>
href={"https://github.com/okiba-org/"} <a
target="_blank" href={"https://github.com/okiba-org/"}
style={linkStyle}> target="_blank"
<li style={listStyle}>source</li> style={linkStyle}
</a> >
source
</a>
</li>
</ul> </ul>
</footer> </footer>
); );
}; };
const linkStyle = { const linkStyle = {
color: "white", color: "rgba(255, 255, 255, 0.774)",
}; };
const listStyle = { const listStyle = {
marginInline: "10px", marginInline: "10px",
listStyle: "none", listStyle: "none",
fontSize: "2vh", fontSize: "1rem",
height: "100%",
}; };
const Separator = () => ( const Separator = () => (
@@ -79,7 +98,8 @@ const Separator = () => (
style={{ style={{
fontSize: "1rem", fontSize: "1rem",
color: "#839496", color: "#839496",
}}> }}
>
• •
</div> </div>
); );

3
src/components/Editor.tsx
View File

@@ -5,7 +5,6 @@ import Theme from "./EditorTheme";
const Editor: FunctionComponent<propTypes> = props => { const Editor: FunctionComponent<propTypes> = props => {
return ( return (
// TODO: custom implementation?
<CodeMirror <CodeMirror
className="editor" className="editor"
autoFocus={true} autoFocus={true}
@@ -19,7 +18,7 @@ const Editor: FunctionComponent<propTypes> = props => {
flex: 1, flex: 1,
overflowY: "auto", overflowY: "auto",
fontFamily: "IBM Plex Mono", fontFamily: "IBM Plex Mono",
fontSize: "1rem", fontSize: "1.2rem",
}} }}
editable={props.editable} editable={props.editable}
readOnly={props.readonly} readOnly={props.readonly}

5
src/components/EditorTheme.ts
View File

@@ -6,9 +6,8 @@ export default createTheme({
theme: "dark", theme: "dark",
settings: { settings: {
background: "black", background: "black",
// gutterBackground: "#0B0E14", gutterBackground: "black", // line number background
gutterBackground: "black", gutterForeground: "gray", // line number
gutterForeground: "#B8D7A3",
foreground: "#c9d1d9", foreground: "#c9d1d9",
caret: "#c9d1d9", caret: "#c9d1d9",
selection: "#003d73", selection: "#003d73",

22
src/index.css
View File

@@ -1,21 +1,23 @@
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap'); @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap");
* { * {
margin: 0; margin: 0;
font-family: "IBM Plex Mono", monospace; padding: 0;
box-sizing: border-box;
font-family: "IBM Plex Mono", monospace;
} }
body { body {
background: black; background: black;
color: white; color: rgba(255, 255, 255, 0.774);
} }
#root { #root {
height: 100vh; height: 100vh;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
#root { #root {
height: 93vh; height: 93vh;
} }
} }

2
src/util/index.ts
View File

@@ -1 +1 @@
export const SERVER_URL = import.meta.env.VITE_SERVER_URL export const SERVER_URL = import.meta.env.VITE_SERVER_URL;

38
tsconfig.json
View File

@@ -1,21 +1,21 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ESNext", "target": "ESNext",
"useDefineForClassFields": true, "useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"], "lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false, "allowJs": false,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": false, "esModuleInterop": false,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"strict": true, "strict": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"module": "ESNext", "module": "ESNext",
"moduleResolution": "Node", "moduleResolution": "Node",
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "noEmit": true,
"jsx": "react-jsx" "jsx": "react-jsx"
}, },
"include": ["src"], "include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }] "references": [{ "path": "./tsconfig.node.json" }]
} }

12
tsconfig.node.json
View File

@@ -1,8 +1,8 @@
{ {
"compilerOptions": { "compilerOptions": {
"composite": true, "composite": true,
"module": "esnext", "module": "esnext",
"moduleResolution": "node" "moduleResolution": "node"
}, },
"include": ["vite.config.ts"] "include": ["vite.config.ts"]
} }

8
vite.config.ts
View File

@@ -1,7 +1,7 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import react from '@vitejs/plugin-react' import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [react()] plugins: [react()],
}) });