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:master
Branches Tags
shihaam:master

2 Commits
cc56e17bd4 ... master

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",
"jsxSingleQuote": false,
"bracketSpacing": true,
"jsxBracketSameLine": true,
"arrowParens": "avoid",
"printWidth": 80
}
}

20
index.html
View File

@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Okiba</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Okiba</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</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",
flexDirection: "column",
height: "100%",
}}>
}}
>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/:id" element={<Paste />} />

82
src/components/BottomBar.tsx
View File

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

3
src/components/Editor.tsx
View File

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

5
src/components/EditorTheme.ts
View File

@@ -6,9 +6,8 @@ export default createTheme({
theme: "dark",
settings: {
background: "black",
// gutterBackground: "#0B0E14",
gutterBackground: "black",
gutterForeground: "#B8D7A3",
gutterBackground: "black", // line number background
gutterForeground: "gray", // line number
foreground: "#c9d1d9",
caret: "#c9d1d9",
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;
font-family: "IBM Plex Mono", monospace;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "IBM Plex Mono", monospace;
}
body {
background: black;
color: white;
background: black;
color: rgba(255, 255, 255, 0.774);
}
#root {
height: 100vh;
height: 100vh;
}
@media screen and (max-width: 600px) {
#root {
height: 93vh;
}
}
#root {
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": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

12
tsconfig.node.json
View File

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

8
vite.config.ts
View File

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