about component

master
Tudor Stanciu 2021-09-07 09:42:48 +03:00
parent 8c8aa4b9ed
commit 302007e7cf
8 changed files with 99 additions and 49 deletions

7
config.js Normal file
View File

@ -0,0 +1,7 @@
const dev = {
REVERSE_PROXY_API_URL: "https://toodle.ddns.net/reverse-proxy-api",
CHATBOT_API_URL: "http://localhost:5061",
REVERSE_PROXY_DOCS_URL: "https://toodle.ddns.net/docs/books/reverse-proxy"
};
module.exports = { dev };

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

View File

@ -127,5 +127,18 @@
"Message7": "I don't think I understand '{previousValue}'. You mean, like, flowers?", "Message7": "I don't think I understand '{previousValue}'. You mean, like, flowers?",
"Message9": "I think you're wasting my time. Farewell!" "Message9": "I think you're wasting my time. Farewell!"
} }
},
"About": {
"Title": "Overview",
"Subtitle": "Expand to see details",
"Content1": "A reverse proxy is a server that accepts a request from a client, forwards the request to another one of many other servers and returns the results from the server that actually processed the request to the client as if the proxy server had processed the request itself.",
"Content2": "A reverse proxy is a type of proxy server. Unlike a traditional proxy server, which is used to protect clients, a reverse proxy is used to protect servers.",
"Content3": "The client only communicates directly with the reverse proxy server and it does not know that some other server actually processed its request.",
"Actions": {
"Documentation": "Documentation"
},
"Technologies": {
"Title": "Technologies"
}
} }
} }

View File

@ -118,5 +118,18 @@
"Message7": "Nu cred că am înțeles '{previousValue}'. Vrei să spui, cum ar fi, flori?", "Message7": "Nu cred că am înțeles '{previousValue}'. Vrei să spui, cum ar fi, flori?",
"Message9": "Cred că îmi irosesti timpul. Ramas bun!" "Message9": "Cred că îmi irosesti timpul. Ramas bun!"
} }
},
"About": {
"Title": "Prezentare generală",
"Subtitle": "Extindeţi pentru a vedea detalii",
"Content1": "Un proxy invers este un server care acceptă o cerere de la un client, redirecționează cererea către altul din multe alte servere și returnează rezultatele de la serverul care a procesat efectiv solicitarea către client ca și cum serverul proxy ar fi procesat solicitarea de unul singur.",
"Content2": "Un proxy invers este un tip de server proxy. Spre deosebire de un server proxy tradițional, care este utilizat pentru a proteja clienții, un proxy invers este utilizat pentru a proteja serverele.",
"Content3": "Clientul comunică direct cu serverul proxy invers și nu știe că un alt server i-a procesat cererea.",
"Actions": {
"Documentation": "Documentație"
},
"Technologies": {
"Title": "Tehnologii"
}
} }
} }

View File

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import clsx from "clsx"; import clsx from "clsx";
import { import {
@ -9,18 +10,21 @@ import {
Collapse, Collapse,
Avatar, Avatar,
IconButton, IconButton,
Typography Typography,
Grid,
Tooltip
} from "@material-ui/core"; } from "@material-ui/core";
import FavoriteIcon from "@material-ui/icons/Favorite";
import ShareIcon from "@material-ui/icons/Share";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert"; import MoreVertIcon from "@material-ui/icons/MoreVert";
import LibraryBooksIcon from "@material-ui/icons/LibraryBooks";
import styles from "../../../components/common/styles/expandableCardStyles"; import styles from "../../../components/common/styles/expandableCardStyles";
import { useTranslation } from "react-i18next";
const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);
const AboutComponent = () => { const AboutComponent = ({ onOpenDocumentation }) => {
const classes = useStyles(); const classes = useStyles();
const { t } = useTranslation();
const [expanded, setExpanded] = React.useState(false); const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => { const handleExpandClick = () => {
@ -40,22 +44,20 @@ const AboutComponent = () => {
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </IconButton>
} }
title="Shrimp and Chorizo Paella" title={t("About.Title")}
subheader="September 14, 2016" subheader={t("About.Subtitle")}
/> />
<CardContent> <CardContent>
<Typography variant="body2" color="textSecondary" component="p"> <Typography variant="body2" color="textSecondary" component="p">
Aici se va descrie la ce e bun reverse proxy-ul asta si ce face el in {t("About.Content1")}
2 3 linii. Poate contine si o poza.
</Typography> </Typography>
</CardContent> </CardContent>
<CardActions disableSpacing> <CardActions disableSpacing>
<IconButton aria-label="add to favorites"> <Tooltip title={t("About.Actions.Documentation")}>
<FavoriteIcon /> <IconButton aria-label="documentation" onClick={onOpenDocumentation}>
</IconButton> <LibraryBooksIcon />
<IconButton aria-label="share">
<ShareIcon />
</IconButton> </IconButton>
</Tooltip>
<IconButton <IconButton
className={clsx(classes.expand, { className={clsx(classes.expand, {
[classes.expandOpen]: expanded [classes.expandOpen]: expanded
@ -69,37 +71,32 @@ const AboutComponent = () => {
</CardActions> </CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit> <Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent> <CardContent>
<Typography paragraph>Method:</Typography> <Grid container spacing={1}>
<Grid item xs={12}>
<Typography paragraph>{t("About.Content2")}</Typography>
</Grid>
<Grid item xs={12}>
<img
className={classes.image}
src="public/images/reverse-proxy2.jpg"
alt="..."
/>
</Grid>
<Grid item xs={12}>
<Typography paragraph> <Typography paragraph>
Aici se va descrie tehnic si detaliat ce e un reverse proxy. Poate {t("About.Content1")} {t("About.Content3")}
contine si o poza. Link catre swagger pe undeva
</Typography>
<Typography paragraph>
Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet
over medium-high heat. Add chicken, shrimp and chorizo, and cook,
stirring occasionally until lightly browned, 6 to 8 minutes.
Transfer shrimp to a large plate and set aside, leaving chicken and
chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes,
onion, salt and pepper, and cook, stirring often until thickened and
fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2
cups chicken broth; bring to a boil.
</Typography>
<Typography paragraph>
Add rice and stir very gently to distribute. Top with artichokes and
peppers, and cook without stirring, until most of the liquid is
absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved
shrimp and mussels, tucking them down into the rice, and cook again
without stirring, until mussels have opened and rice is just tender,
5 to 7 minutes more. (Discard any mussels that dont open.)
</Typography>
<Typography>
Set aside off of the heat to let rest for 10 minutes, and then
serve.
</Typography> </Typography>
</Grid>
</Grid>
</CardContent> </CardContent>
</Collapse> </Collapse>
</Card> </Card>
); );
}; };
AboutComponent.propTypes = {
onOpenDocumentation: PropTypes.func.isRequired
};
export default AboutComponent; export default AboutComponent;

View File

@ -6,9 +6,15 @@ import AboutComponent from "./AboutComponent";
import TechnologiesComponent from "./TechnologiesComponent"; import TechnologiesComponent from "./TechnologiesComponent";
const AboutContainer = () => { const AboutContainer = () => {
const handleOpenDocumentation = event => {
const url = process.env.REVERSE_PROXY_DOCS_URL;
window.open(url, "_blank");
event.preventDefault();
};
return ( return (
<> <>
<AboutComponent /> <AboutComponent onOpenDocumentation={handleOpenDocumentation} />
<br /> <br />
<br /> <br />
<TechnologiesComponent /> <TechnologiesComponent />

View File

@ -16,11 +16,24 @@ import ShareIcon from "@material-ui/icons/Share";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import MoreVertIcon from "@material-ui/icons/MoreVert"; import MoreVertIcon from "@material-ui/icons/MoreVert";
import styles from "../../../components/common/styles/expandableCardStyles"; import styles from "../../../components/common/styles/expandableCardStyles";
import { useTranslation } from "react-i18next";
const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);
/*
https://codepen.io/emreavcilar/pen/eYmejLP
https://codepen.io/ajaykarwal/pen/bqwWNy
https://www.npmjs.com/package/react-skills-bars
https://www.npmjs.com/package/react-skillbars
https://kevincastejon.github.io/react-skills/documentation/
*/
const TechnologiesComponent = () => { const TechnologiesComponent = () => {
const classes = useStyles(); const classes = useStyles();
const { t } = useTranslation();
const [expanded, setExpanded] = React.useState(false); const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => { const handleExpandClick = () => {
@ -40,7 +53,7 @@ const TechnologiesComponent = () => {
<MoreVertIcon /> <MoreVertIcon />
</IconButton> </IconButton>
} }
title="Technologies" title={t("About.Technologies.Title")}
subheader="September 14, 2016" subheader="September 14, 2016"
/> />
<CardContent> <CardContent>

View File

@ -1,9 +1,15 @@
const webpack = require("webpack"); const webpack = require("webpack");
const path = require("path"); const path = require("path");
const config = require("./config");
const HtmlWebpackPlugin = require("html-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin");
process.env.NODE_ENV = "development"; process.env.NODE_ENV = "development";
let configs = {};
Object.keys(config.dev).forEach(z => {
configs[`process.env.${z}`] = JSON.stringify(config.dev[z]);
});
module.exports = { module.exports = {
mode: "development", mode: "development",
target: "web", target: "web",
@ -23,12 +29,7 @@ module.exports = {
https: false https: false
}, },
plugins: [ plugins: [
new webpack.DefinePlugin({ new webpack.DefinePlugin(configs),
"process.env.REVERSE_PROXY_API_URL": JSON.stringify(
"http://localhost:5050"
),
"process.env.CHATBOT_API_URL": JSON.stringify("http://localhost:5061")
}),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: "src/index.html", template: "src/index.html",
favicon: "src/favicon.ico" favicon: "src/favicon.ico"