Skip to content

Commit 9908b73

Browse files
Type-StyleType-Style
committed
[Task] #58 app setup react
1 parent adfde74 commit 9908b73

5 files changed

Lines changed: 105 additions & 74 deletions

File tree

‎src/app.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ app.use((req, res, next) => { // limit body for specific http methods
5656
// routes
5757
app.get('/', (req, res) => {
5858
logger.log(req.ip + " - " + res.locals.ip, true);
59-
res.render("index");
59+
res.render("index", {root: process.env.ROOT});
6060
});
6161

6262
app.use('/write', writeRouter);

‎src/client/components/App.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, { Component } from 'react';
22
import Contact from './Contact';
3+
import * as css from"./css/app.module.css";
34

45
class App extends Component {
56
render() {
67
return (
7-
<div>
8-
<h1>Hello, React!</h1>
9-
<Contact />
8+
<div className={css.app}>
9+
<h1 className={css.headline}>Hello, React!</h1>
10+
<Contact name="Joe Doe" email='jd@gmail.com' phone='0123456789'/>
1011
</div>
1112
);
1213
}

‎src/client/components/Contact.tsx‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
1-
import React, { Component } from 'react'
1+
import React, { Component } from 'react';
2+
import * as classes from "./css/contact.module.css";
23

3-
export default class Contact extends Component {
4+
export default class Contact extends Component<client.contact> {
5+
static defaultProps = {
6+
name: "no name",
7+
email: "no email",
8+
hobby: "no hobby"
9+
}
410
render() {
11+
const {name, email, phone, hobby} = this.props;
12+
513
return (
6-
<div>
7-
<h4>John Doe</h4>
8-
<ul>
9-
<li>Email: jdoe@gmail.com</li>
10-
<li>Phone: 555-555-5555</li>
11-
</ul>
14+
<div className={classes.contact}>
15+
<h4>{name}</h4>
16+
<dl>
17+
<dt>Email:</dt><dd>{email}</dd>
18+
<dt>Phone:</dt><dd>{phone}</dd>
19+
<dt>Hobby:</dt><dd>{hobby}</dd>
20+
</dl>
1221
</div>
1322
)
1423
}
1524
}
25+
26+
Contact

‎src/client/components/css/app.module.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@keyframes slideInFromLeft {
2+
0% {
3+
transform: translateX(-5%);
4+
}
5+
6+
100% {
7+
transform: translateX(5%);
8+
}
9+
}
10+
11+
@keyframes move-it {
12+
to {
13+
background-position: 200px 0px;
14+
}
15+
}
16+
17+
.app {
18+
--bg1: var(--neutral-L7);
19+
--bg2: var(--neutral-L7);
20+
--text: var(--neutral-L1);
21+
--shadow: var(--main);
22+
@media (prefers-color-scheme: dark) {
23+
--bg1: var(--neutral-L1);
24+
--bg2: var(--neutral-L2);
25+
--text: var(--main);
26+
--shadow: var(--neutral-L1);
27+
}
28+
29+
height: 100%;
30+
color: var(--text);
31+
background: repeating-linear-gradient(45deg,
32+
var(--bg1),
33+
var(--bg1) 5%,
34+
var(--bg2) 5%,
35+
var(--bg2) 10%);
36+
background-size: 200px 200px;
37+
animation: move-it 10s linear infinite;
38+
font-family: Arial, sans-serif;
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
43+
44+
.headline {
45+
text-align: center;
46+
animation: 2s ease-in-out 0s infinite slideInFromLeft alternate-reverse, 3s ease-in-out 0s infinite textShadow;
47+
text-shadow: 0 0 15px var(--shadow);
48+
font-size: clamp(30px, 5dvmax, 100px);
49+
}
50+
}

‎views/index.ejs‎

Lines changed: 31 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,38 @@
11
<!DOCTYPE html>
2-
<html lang="en">
32

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Welcome Page</title>
8-
<style>
9-
@keyframes slideInFromLeft {
10-
0% {
11-
transform: translateX(-10%);
12-
}
13-
14-
100% {
15-
transform: translateX(10%);
16-
}
17-
}
18-
19-
@keyframes textShadow {
20-
50% {
21-
text-shadow: 0 0 20px #000;
22-
}
23-
}
24-
25-
@keyframes move-it {
26-
to {
27-
background-position: 100px 0px;
28-
}
29-
}
3+
<html xmlns="http://www.w3.org/1999/xhtml" id="html" class="no-js" lang="en_US">
304

31-
html,
32-
body {
33-
height: 100%;
34-
overflow: hidden;
35-
}
36-
37-
body {
38-
background: repeating-linear-gradient(45deg,
39-
#014126,
40-
#014126 5%,
41-
#025c37 5%,
42-
#025c37 10%);
43-
background-size: 100px 100px;
44-
animation: move-it 2s linear infinite;
45-
font-family: Arial, sans-serif;
46-
display: flex;
47-
justify-content: center;
48-
align-items: center;
49-
}
50-
51-
h1 {
52-
color: rgb(255, 255, 255);
53-
text-align: center;
54-
animation: 2s ease-in-out 0s infinite slideInFromLeft alternate-reverse, 3s ease-in-out 0s infinite textShadow;
55-
filter: drop-shadow(0 0 10px rgb(0, 255, 128));
56-
font-size: 40px;
57-
font-size: 5dvmax;
58-
}
59-
</style>
5+
<head>
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
8+
<title>LOREX - Osmand Webtracking Frontend</title>
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
11+
<meta name="color-scheme" content"dark light">
12+
13+
<meta property="og:title" content="LOREX - Osmand Webtracking Frontend">
14+
<meta name="description" content="LOREX - Based on leaflet, openstreetmap React and Express, save your webtracking and display it on a map">
15+
<meta property="og:description" content="LOREX - Based on leaflet, openstreetmap React and Express, save your webtracking and display it on a map">
16+
<meta property="og:image" content="<%= locals.root %>/icon.png">
17+
<meta property="og:image:alt" content="Image description">
18+
<meta property="og:locale" content="en_US">
19+
<meta property="og:type" content="website">
20+
<meta name="twitter:card" content="summary_large_image">
21+
<meta property="og:url" content="<%= locals.root %>">
22+
23+
<link rel="stylesheet" href="/css/base.css">
24+
<link rel="stylesheet" href="/css/colors.css">
25+
<link rel="icon" href="favicon.ico">
26+
27+
<link rel="apple-touch-icon" href="/icon.png">
28+
<meta name="apple-mobile-web-app-capable" content="yes">
29+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
6030
</head>
6131

6232
<body>
63-
<div id="root">
64-
<h1>Welcome</h1>
65-
</div>
33+
<div id="react-root">
34+
<h1>Welcome</h1>
35+
</div>
36+
6637
<script src="/js/bundle.js"></script>
67-
</body>
68-
69-
</html>
38+
</body>

0 commit comments

Comments
 (0)