add basic frontend
This commit is contained in:
parent
e074228364
commit
d80ad7dd05
3
frontend/.gitignore
vendored
Normal file
3
frontend/.gitignore
vendored
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
node_modules
|
||||||
|
/build
|
||||||
|
/*.log
|
19
frontend/README.md
Normal file
19
frontend/README.md
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
# Imagur
|
||||||
|
|
||||||
|
## CLI Commands
|
||||||
|
* `npm install`: Installs dependencies
|
||||||
|
|
||||||
|
* `npm run dev`: Run a development, HMR server
|
||||||
|
|
||||||
|
* `npm run serve`: Run a production-like server
|
||||||
|
|
||||||
|
* `npm run build`: Production-ready build
|
||||||
|
|
||||||
|
* `npm run lint`: Pass TypeScript files using ESLint
|
||||||
|
|
||||||
|
* `npm run test`: Run Jest and Enzyme with
|
||||||
|
[`enzyme-adapter-preact-pure`](https://github.com/preactjs/enzyme-adapter-preact-pure) for
|
||||||
|
your tests
|
||||||
|
|
||||||
|
|
||||||
|
For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md).
|
42
frontend/package.json
Normal file
42
frontend/package.json
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"name": "imagur-frontend",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"license": "GPL-3.0",
|
||||||
|
"scripts": {
|
||||||
|
"build": "preact build",
|
||||||
|
"serve": "sirv build --port 8080 --cors --single",
|
||||||
|
"dev": "preact watch",
|
||||||
|
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"extends": [
|
||||||
|
"preact",
|
||||||
|
"plugin:@typescript-eslint/recommended"
|
||||||
|
],
|
||||||
|
"ignorePatterns": [
|
||||||
|
"build/"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"preact": "^10.6.6",
|
||||||
|
"preact-render-to-string": "^5.1.20",
|
||||||
|
"preact-router": "^4.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/enzyme": "^3.10.11",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.12.1",
|
||||||
|
"@typescript-eslint/parser": "^5.12.1",
|
||||||
|
"enzyme": "^3.11.0",
|
||||||
|
"enzyme-adapter-preact-pure": "^3.3.0",
|
||||||
|
"eslint": "^8.9.0",
|
||||||
|
"eslint-config-preact": "^1.3.0",
|
||||||
|
"preact-cli": "^3.3.5",
|
||||||
|
"sass": "^1.49.8",
|
||||||
|
"sass-loader": "10",
|
||||||
|
"sirv-cli": "^2.0.2",
|
||||||
|
"typescript": "^4.5.5",
|
||||||
|
"webpack": "5"
|
||||||
|
}
|
||||||
|
}
|
5
frontend/src/.babelrc
Normal file
5
frontend/src/.babelrc
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
"preact-cli/babel"
|
||||||
|
]
|
||||||
|
}
|
BIN
frontend/src/assets/favicon.ico
Normal file
BIN
frontend/src/assets/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
20
frontend/src/components/app.tsx
Normal file
20
frontend/src/components/app.tsx
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
import { FunctionalComponent, h } from 'preact';
|
||||||
|
import { Route, Router } from 'preact-router';
|
||||||
|
|
||||||
|
import Home from '../routes/home';
|
||||||
|
import NotFoundPage from '../routes/notfound';
|
||||||
|
import Header from './header';
|
||||||
|
|
||||||
|
const App: FunctionalComponent = () => {
|
||||||
|
return (
|
||||||
|
<div id="preact_root">
|
||||||
|
<Header />
|
||||||
|
<Router>
|
||||||
|
<Route path="/" component={Home} />
|
||||||
|
<NotFoundPage default />
|
||||||
|
</Router>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
24
frontend/src/components/header/index.tsx
Normal file
24
frontend/src/components/header/index.tsx
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import { FunctionalComponent, h } from 'preact';
|
||||||
|
import { Link } from 'preact-router/match';
|
||||||
|
import style from './style.css';
|
||||||
|
|
||||||
|
const Header: FunctionalComponent = () => {
|
||||||
|
return (
|
||||||
|
<header class={style.header}>
|
||||||
|
<h1>Preact App</h1>
|
||||||
|
<nav>
|
||||||
|
<Link activeClassName={style.active} href="/">
|
||||||
|
Home
|
||||||
|
</Link>
|
||||||
|
<Link activeClassName={style.active} href="/profile">
|
||||||
|
Me
|
||||||
|
</Link>
|
||||||
|
<Link activeClassName={style.active} href="/profile/john">
|
||||||
|
John
|
||||||
|
</Link>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
48
frontend/src/components/header/style.css
Normal file
48
frontend/src/components/header/style.css
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 56px;
|
||||||
|
padding: 0;
|
||||||
|
background: #673AB7;
|
||||||
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
float: left;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 56px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header nav {
|
||||||
|
float: right;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header nav a {
|
||||||
|
display: inline-block;
|
||||||
|
height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
padding: 0 15px;
|
||||||
|
min-width: 50px;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(255,255,255,0);
|
||||||
|
text-decoration: none;
|
||||||
|
color: #FFF;
|
||||||
|
will-change: background-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header nav a:hover,
|
||||||
|
.header nav a:active {
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header nav a.active {
|
||||||
|
background: rgba(0,0,0,0.4);
|
||||||
|
}
|
4
frontend/src/declaration.d.ts
vendored
Normal file
4
frontend/src/declaration.d.ts
vendored
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
declare module "*.css" {
|
||||||
|
const mapping: Record<string, string>;
|
||||||
|
export default mapping;
|
||||||
|
}
|
4
frontend/src/index.ts
Normal file
4
frontend/src/index.ts
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
import './style/index.scss';
|
||||||
|
import App from './components/app';
|
||||||
|
|
||||||
|
export default App;
|
7
frontend/src/manifest.json
Normal file
7
frontend/src/manifest.json
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"name": "Imagur",
|
||||||
|
"short_name": "Imagur",
|
||||||
|
"start_url": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"orientation": "portrait"
|
||||||
|
}
|
13
frontend/src/routes/home/index.tsx
Normal file
13
frontend/src/routes/home/index.tsx
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
import { FunctionalComponent, h } from 'preact';
|
||||||
|
import style from './style.css';
|
||||||
|
|
||||||
|
const Home: FunctionalComponent = () => {
|
||||||
|
return (
|
||||||
|
<div class={style.home}>
|
||||||
|
<h1>Home</h1>
|
||||||
|
<p>This is the Home component.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
5
frontend/src/routes/home/style.css
Normal file
5
frontend/src/routes/home/style.css
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
.home {
|
||||||
|
padding: 56px 20px;
|
||||||
|
min-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
17
frontend/src/routes/notfound/index.tsx
Normal file
17
frontend/src/routes/notfound/index.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import { FunctionalComponent, h } from 'preact';
|
||||||
|
import { Link } from 'preact-router/match';
|
||||||
|
import style from './style.css';
|
||||||
|
|
||||||
|
const Notfound: FunctionalComponent = () => {
|
||||||
|
return (
|
||||||
|
<div class={style.notfound}>
|
||||||
|
<h1>Error 404</h1>
|
||||||
|
<p>That page doesn't exist.</p>
|
||||||
|
<Link href="/">
|
||||||
|
<h4>Back to Home</h4>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Notfound;
|
4
frontend/src/routes/notfound/style.css
Normal file
4
frontend/src/routes/notfound/style.css
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
.notfound {
|
||||||
|
padding: 0 5%;
|
||||||
|
margin: 100px 0;
|
||||||
|
}
|
20
frontend/src/style/index.scss
Normal file
20
frontend/src/style/index.scss
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
background: #FAFAFA;
|
||||||
|
font-family: 'Helvetica Neue', arial, sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #444;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#preact_root {
|
||||||
|
height: 100%;
|
||||||
|
}
|
14
frontend/src/template.html
Normal file
14
frontend/src/template.html
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title><% preact.title %></title>
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<meta name="Author" content="Rubikscraft" />
|
||||||
|
|
||||||
|
<% preact.headEnd %>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<% preact.bodyEnd %>
|
||||||
|
</body>
|
||||||
|
</html>
|
61
frontend/tsconfig.json
Normal file
61
frontend/tsconfig.json
Normal file
|
@ -0,0 +1,61 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
/* Basic Options */
|
||||||
|
"target": "ES5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
|
||||||
|
"module": "ESNext", /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
|
||||||
|
// "lib": [], /* Specify library files to be included in the compilation: */
|
||||||
|
"allowJs": true, /* Allow javascript files to be compiled. */
|
||||||
|
// "checkJs": true, /* Report errors in .js files. */
|
||||||
|
"jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
|
||||||
|
"jsxFactory": "h", /* Specify the JSX factory function to use when targeting react JSX emit, e.g. React.createElement or h. */
|
||||||
|
"jsxFragmentFactory": "Fragment", /* Specify the JSX fragment factory function to use when targeting react JSX emit with jsxFactory compiler option is specified, e.g. Fragment. */
|
||||||
|
// "declaration": true, /* Generates corresponding '.d.ts' file. */
|
||||||
|
// "sourceMap": true, /* Generates corresponding '.map' file. */
|
||||||
|
// "outFile": "./", /* Concatenate and emit output to single file. */
|
||||||
|
// "outDir": "./", /* Redirect output structure to the directory. */
|
||||||
|
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
|
||||||
|
// "removeComments": true, /* Do not emit comments to output. */
|
||||||
|
"noEmit": true, /* Do not emit outputs. */
|
||||||
|
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
|
||||||
|
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
|
||||||
|
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
|
||||||
|
|
||||||
|
/* Strict Type-Checking Options */
|
||||||
|
"strict": true, /* Enable all strict type-checking options. */
|
||||||
|
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
|
||||||
|
// "strictNullChecks": true, /* Enable strict null checks. */
|
||||||
|
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
|
||||||
|
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
|
||||||
|
|
||||||
|
/* Additional Checks */
|
||||||
|
// "noUnusedLocals": true, /* Report errors on unused locals. */
|
||||||
|
// "noUnusedParameters": true, /* Report errors on unused parameters. */
|
||||||
|
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
|
||||||
|
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
|
||||||
|
|
||||||
|
/* Module Resolution Options */
|
||||||
|
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
|
||||||
|
"esModuleInterop": true, /* */
|
||||||
|
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
|
||||||
|
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
|
||||||
|
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
|
||||||
|
// "typeRoots": [], /* List of folders to include type definitions from. */
|
||||||
|
// "types": [], /* Type declaration files to be included in compilation. */
|
||||||
|
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
|
||||||
|
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
|
||||||
|
|
||||||
|
/* Source Map Options */
|
||||||
|
// "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
|
||||||
|
// "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||||
|
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
|
||||||
|
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
|
||||||
|
|
||||||
|
/* Experimental Options */
|
||||||
|
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
|
||||||
|
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
|
||||||
|
|
||||||
|
/* Advanced Options */
|
||||||
|
"skipLibCheck": true /* Skip type checking of declaration files. */
|
||||||
|
},
|
||||||
|
"include": ["src/**/*", "tests/**/*"]
|
||||||
|
}
|
10338
frontend/yarn.lock
Normal file
10338
frontend/yarn.lock
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue