initial commit
This commit is contained in:
commit
2380af1cb4
22 changed files with 12908 additions and 0 deletions
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
5
.prettierrc
Normal file
5
.prettierrc
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"semi": false,
|
||||
"useTabs": true,
|
||||
"tabWidth": 4
|
||||
}
|
||||
8
.vscode/settings.json
vendored
Normal file
8
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"editor.formatOnPaste": true,
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.insertSpaces": false,
|
||||
"editor.detectIndentation": false,
|
||||
"cSpell.words": ["Sider"]
|
||||
}
|
||||
19
LICENSE
Normal file
19
LICENSE
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
Copyright (c) 2021 developomp
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
|
||||
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
|
||||
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
|
||||
OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
1
README.md
Normal file
1
README.md
Normal file
|
|
@ -0,0 +1 @@
|
|||
# llama-bot-web-interface
|
||||
52
package.json
Normal file
52
package.json
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
{
|
||||
"name": "llama-bot-web-interface",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"analyze": "source-map-explorer 'build/static/js/*.js'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.36",
|
||||
"@fortawesome/free-brands-svg-icons": "^5.15.4",
|
||||
"@fortawesome/react-fontawesome": "^0.1.15",
|
||||
"antd": "^4.16.11",
|
||||
"local-storage-fallback": "^4.1.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"styled-components": "^5.3.0",
|
||||
"typescript": "^4.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.11.4",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"@types/jest": "^26.0.15",
|
||||
"@types/node": "^12.0.0",
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"@types/styled-components": "^5.1.12",
|
||||
"react-scripts": "4.0.3",
|
||||
"source-map-explorer": "^2.5.2"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
24
public/index.html
Normal file
24
public/index.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/llama.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#5DADEC" />
|
||||
<meta name="description" content="Llama bot web interface" />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/llama.png" />
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Source+Code+Pro&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<title>Llama Bot</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
Please enable JavaScript / 자바스크립트를 활성화해주세요
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/llama-color.png
Normal file
BIN
public/llama-color.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
public/llama.png
Normal file
BIN
public/llama.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
2
public/robots.txt
Normal file
2
public/robots.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
User-agent: *
|
||||
Disallow:
|
||||
77
src/components/Footer.tsx
Normal file
77
src/components/Footer.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import React from "react"
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||||
import { faGithub } from "@fortawesome/free-brands-svg-icons"
|
||||
import styled from "styled-components"
|
||||
|
||||
import { Layout } from "antd"
|
||||
|
||||
import theming from "../theming"
|
||||
|
||||
const StyledFooter = styled(Layout.Footer)`
|
||||
text-align: center;
|
||||
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "black",
|
||||
dark: "white",
|
||||
})};
|
||||
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "white",
|
||||
dark: "black",
|
||||
})};
|
||||
`
|
||||
|
||||
const StyledFooterContainer = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 0 1rem 0 1rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
max-width: ${theming.size.screen_size2};
|
||||
|
||||
.logo {
|
||||
color: gray;
|
||||
}
|
||||
`
|
||||
|
||||
const GithubLink = styled.a`
|
||||
font-size: 2rem;
|
||||
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: "lightgrey",
|
||||
dark: "grey",
|
||||
})};
|
||||
|
||||
&:hover {
|
||||
color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.color0,
|
||||
dark: theming.dark.color0,
|
||||
})};
|
||||
}
|
||||
`
|
||||
|
||||
export default class Footer extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<StyledFooter>
|
||||
<StyledFooterContainer>
|
||||
<div className="logo">
|
||||
Created by <b>developomp</b>
|
||||
</div>
|
||||
<GithubLink
|
||||
href="https://github.com/developomp/developomp-site"
|
||||
target="_blank"
|
||||
>
|
||||
<FontAwesomeIcon icon={faGithub} />
|
||||
</GithubLink>
|
||||
</StyledFooterContainer>
|
||||
</StyledFooter>
|
||||
)
|
||||
}
|
||||
}
|
||||
51
src/components/Navbar.tsx
Normal file
51
src/components/Navbar.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import { useContext } from "react"
|
||||
|
||||
import { Col, Layout, Menu, Row } from "antd"
|
||||
import { HomeOutlined } from "@ant-design/icons"
|
||||
|
||||
import { SidebarCollapsedContext } from "../contexts"
|
||||
|
||||
const { Header } = Layout
|
||||
|
||||
const Navbar = () => {
|
||||
const { isSidebarCollapsed, setSidebarCollapsed } = useContext(
|
||||
SidebarCollapsedContext
|
||||
)
|
||||
|
||||
return (
|
||||
<Header>
|
||||
<Row justify="space-between" style={{ color: "white" }}>
|
||||
<Col
|
||||
onClick={() => {
|
||||
setSidebarCollapsed(
|
||||
(prevIsCollapsed) => !prevIsCollapsed
|
||||
)
|
||||
}}
|
||||
>
|
||||
{isSidebarCollapsed ? ">" : "<"}
|
||||
</Col>
|
||||
<Col>
|
||||
<img
|
||||
src="/llama.png"
|
||||
alt="llama logo"
|
||||
style={{ width: "60px" }}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Menu
|
||||
theme="dark"
|
||||
mode="horizontal"
|
||||
style={{ width: "1000px" }}
|
||||
>
|
||||
<Menu.Item icon={<HomeOutlined />}>Home</Menu.Item>
|
||||
<Menu.Item>Documentation</Menu.Item>
|
||||
<Menu.Item>Status</Menu.Item>
|
||||
</Menu>
|
||||
</Col>
|
||||
<Col>Login Button</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
40
src/components/Sidebar.tsx
Normal file
40
src/components/Sidebar.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { Layout, Menu } from "antd"
|
||||
import {
|
||||
UserOutlined,
|
||||
VideoCameraOutlined,
|
||||
UploadOutlined,
|
||||
} from "@ant-design/icons"
|
||||
|
||||
import { SidebarCollapsedContext } from "../contexts"
|
||||
|
||||
const Sidebar = () => {
|
||||
return (
|
||||
<SidebarCollapsedContext.Consumer>
|
||||
{({ isSidebarCollapsed }) => (
|
||||
<Layout.Sider
|
||||
trigger={null}
|
||||
collapsible
|
||||
collapsed={isSidebarCollapsed}
|
||||
>
|
||||
<Menu
|
||||
theme="dark"
|
||||
mode="inline"
|
||||
defaultSelectedKeys={["1"]}
|
||||
>
|
||||
<Menu.Item key="1" icon={<UserOutlined />}>
|
||||
nav 1
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
|
||||
nav 2
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3" icon={<UploadOutlined />}>
|
||||
nav 3
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Layout.Sider>
|
||||
)}
|
||||
</SidebarCollapsedContext.Consumer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
8
src/contexts.ts
Normal file
8
src/contexts.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import { createContext, Dispatch, SetStateAction } from "react"
|
||||
|
||||
const SidebarCollapsedContext = createContext({
|
||||
isSidebarCollapsed: false,
|
||||
setSidebarCollapsed: (() => {}) as Dispatch<SetStateAction<boolean>>,
|
||||
})
|
||||
|
||||
export { SidebarCollapsedContext }
|
||||
47
src/index.css
Normal file
47
src/index.css
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: "Noto Sans KR", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: "Source Code Pro", monospace;
|
||||
}
|
||||
|
||||
.site-layout-content {
|
||||
min-height: 280px;
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#components-layout-demo-top .logo {
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 31px;
|
||||
margin: 16px 24px 16px 0;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.ant-row-rtl #components-layout-demo-top .logo {
|
||||
float: right;
|
||||
margin: 16px 0 16px 24px;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
padding: 0 24px;
|
||||
font-size: 18px;
|
||||
line-height: 64px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.trigger:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
77
src/index.tsx
Normal file
77
src/index.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import React, { useEffect, useState } from "react"
|
||||
import ReactDOM from "react-dom"
|
||||
|
||||
import { ThemeProvider } from "styled-components"
|
||||
import storage from "local-storage-fallback"
|
||||
|
||||
import Navbar from "./components/Navbar"
|
||||
import Sidebar from "./components/Sidebar"
|
||||
import Footer from "./components/Footer"
|
||||
import { Layout } from "antd"
|
||||
|
||||
import { SidebarCollapsedContext } from "./contexts"
|
||||
|
||||
import "antd/dist/antd.min.css"
|
||||
import "./index.css" // must be loaded last
|
||||
|
||||
const App = () => {
|
||||
const [currentTheme, setCurrentTheme] = useState("light")
|
||||
const [isSidebarCollapsed, setSidebarCollapsed] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// save theme when it is changed
|
||||
storage.setItem("theme", currentTheme)
|
||||
}, [currentTheme])
|
||||
|
||||
return (
|
||||
<>
|
||||
<ThemeProvider
|
||||
theme={{
|
||||
currentTheme: currentTheme,
|
||||
// make setTheme function available in other components
|
||||
setTheme: (setThemeTo: string) =>
|
||||
setCurrentTheme(setThemeTo),
|
||||
}}
|
||||
>
|
||||
<SidebarCollapsedContext.Provider
|
||||
value={{ isSidebarCollapsed, setSidebarCollapsed }}
|
||||
>
|
||||
<Layout style={{ minHeight: "100vh" }}>
|
||||
<Layout className="site-layout">
|
||||
<Navbar />
|
||||
<Layout>
|
||||
<Sidebar />
|
||||
<Layout.Content
|
||||
style={{
|
||||
padding: "2.5rem",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="site-layout-background site-layout-content"
|
||||
style={{
|
||||
height: "auto",
|
||||
width: "100%",
|
||||
borderRadius: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<h2>Dashboard</h2>
|
||||
Content
|
||||
</div>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
<Footer />
|
||||
</Layout>
|
||||
</Layout>
|
||||
</SidebarCollapsedContext.Provider>
|
||||
</ThemeProvider>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
)
|
||||
1
src/react-app-env.d.ts
vendored
Normal file
1
src/react-app-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="react-scripts" />
|
||||
1
src/setupTests.ts
Normal file
1
src/setupTests.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
import "@testing-library/jest-dom"
|
||||
65
src/theming.ts
Normal file
65
src/theming.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { css } from "styled-components"
|
||||
|
||||
// not declared in the export object so the export object can refer to it
|
||||
function theme(currentTheme: string, values: { [key: string]: string }) {
|
||||
return values[currentTheme]
|
||||
}
|
||||
|
||||
const theming = {
|
||||
theme: theme,
|
||||
size: {
|
||||
x2_small: "3px",
|
||||
x_small: "8px",
|
||||
small: 0,
|
||||
medium: "14px",
|
||||
large: 0,
|
||||
x_large: 0,
|
||||
screen_size1: "1000px",
|
||||
screen_size2: "1500px",
|
||||
},
|
||||
color: {
|
||||
linkColor: "#4592F7",
|
||||
},
|
||||
dark: {
|
||||
backgroundColor0: "#202225",
|
||||
backgroundColor1: "#36393F",
|
||||
color0: "#FFFFFF",
|
||||
color1: "#EEEEEE",
|
||||
},
|
||||
light: {
|
||||
backgroundColor0: "#FFFFFF",
|
||||
backgroundColor1: "#F7F7F7",
|
||||
color0: "#000000",
|
||||
color1: "#111111",
|
||||
},
|
||||
styles: {
|
||||
navbarButtonStyle: css`
|
||||
cursor: pointer; /* so it can be applies to divs too */
|
||||
font-size: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
float: left;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
transition: transform 0.1s linear;
|
||||
color: ${(props) =>
|
||||
theme(props.theme.currentTheme, {
|
||||
light: "black",
|
||||
dark: "#CFD0D0",
|
||||
})};
|
||||
background-color: ${(props) =>
|
||||
theme(props.theme.currentTheme, {
|
||||
light: "white",
|
||||
dark: "#202225",
|
||||
})};
|
||||
&:hover {
|
||||
background-color: ${(props) =>
|
||||
theme(props.theme.currentTheme, {
|
||||
light: "lightgrey",
|
||||
dark: "#36393F",
|
||||
})};
|
||||
}
|
||||
`,
|
||||
},
|
||||
}
|
||||
|
||||
export default theming
|
||||
8
src/types/styled-components.d.ts
vendored
Normal file
8
src/types/styled-components.d.ts
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import "styled-components"
|
||||
|
||||
declare module "styled-components" {
|
||||
export interface DefaultTheme {
|
||||
currentTheme: string
|
||||
setTheme(setThemeTo: string): void
|
||||
}
|
||||
}
|
||||
26
tsconfig.json
Normal file
26
tsconfig.json
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue