diff --git a/config.js b/config.js new file mode 100644 index 0000000..5f64db1 --- /dev/null +++ b/config.js @@ -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 }; diff --git a/public/images/reverse-proxy2.jpg b/public/images/reverse-proxy2.jpg new file mode 100644 index 0000000..d43579a Binary files /dev/null and b/public/images/reverse-proxy2.jpg differ diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json index 7275270..8b7fa01 100644 --- a/public/locales/en/translations.json +++ b/public/locales/en/translations.json @@ -127,5 +127,18 @@ "Message7": "I don't think I understand '{previousValue}'. You mean, like, flowers?", "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" + } } } diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json index 4f86fb1..5735cdd 100644 --- a/public/locales/ro/translations.json +++ b/public/locales/ro/translations.json @@ -118,5 +118,18 @@ "Message7": "Nu cred că am înțeles '{previousValue}'. Vrei să spui, cum ar fi, flori?", "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" + } } } diff --git a/src/features/about/components/AboutComponent.js b/src/features/about/components/AboutComponent.js index a07f090..533e370 100644 --- a/src/features/about/components/AboutComponent.js +++ b/src/features/about/components/AboutComponent.js @@ -1,4 +1,5 @@ import React from "react"; +import PropTypes from "prop-types"; import { makeStyles } from "@material-ui/core/styles"; import clsx from "clsx"; import { @@ -9,18 +10,21 @@ import { Collapse, Avatar, IconButton, - Typography + Typography, + Grid, + Tooltip } 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 MoreVertIcon from "@material-ui/icons/MoreVert"; +import LibraryBooksIcon from "@material-ui/icons/LibraryBooks"; import styles from "../../../components/common/styles/expandableCardStyles"; +import { useTranslation } from "react-i18next"; const useStyles = makeStyles(styles); -const AboutComponent = () => { +const AboutComponent = ({ onOpenDocumentation }) => { const classes = useStyles(); + const { t } = useTranslation(); const [expanded, setExpanded] = React.useState(false); const handleExpandClick = () => { @@ -40,22 +44,20 @@ const AboutComponent = () => { } - title="Shrimp and Chorizo Paella" - subheader="September 14, 2016" + title={t("About.Title")} + subheader={t("About.Subtitle")} /> - Aici se va descrie la ce e bun reverse proxy-ul asta si ce face el in - 2 3 linii. Poate contine si o poza. + {t("About.Content1")} - - - - - - + + + + + { - Method: - - Aici se va descrie tehnic si detaliat ce e un reverse proxy. Poate - contine si o poza. Link catre swagger pe undeva - - - 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. - - - 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 don’t open.) - - - Set aside off of the heat to let rest for 10 minutes, and then - serve. - + + + {t("About.Content2")} + + + + ... + + + + {t("About.Content1")} {t("About.Content3")} + + + ); }; +AboutComponent.propTypes = { + onOpenDocumentation: PropTypes.func.isRequired +}; + export default AboutComponent; diff --git a/src/features/about/components/AboutContainer.js b/src/features/about/components/AboutContainer.js index 42b0bc5..d8f8ee8 100644 --- a/src/features/about/components/AboutContainer.js +++ b/src/features/about/components/AboutContainer.js @@ -6,9 +6,15 @@ import AboutComponent from "./AboutComponent"; import TechnologiesComponent from "./TechnologiesComponent"; const AboutContainer = () => { + const handleOpenDocumentation = event => { + const url = process.env.REVERSE_PROXY_DOCS_URL; + window.open(url, "_blank"); + event.preventDefault(); + }; + return ( <> - +

diff --git a/src/features/about/components/TechnologiesComponent.js b/src/features/about/components/TechnologiesComponent.js index a3d2ba4..8a56c09 100644 --- a/src/features/about/components/TechnologiesComponent.js +++ b/src/features/about/components/TechnologiesComponent.js @@ -16,11 +16,24 @@ import ShareIcon from "@material-ui/icons/Share"; import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; import MoreVertIcon from "@material-ui/icons/MoreVert"; import styles from "../../../components/common/styles/expandableCardStyles"; +import { useTranslation } from "react-i18next"; 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 classes = useStyles(); + const { t } = useTranslation(); const [expanded, setExpanded] = React.useState(false); const handleExpandClick = () => { @@ -40,7 +53,7 @@ const TechnologiesComponent = () => { } - title="Technologies" + title={t("About.Technologies.Title")} subheader="September 14, 2016" /> diff --git a/webpack.config.dev.js b/webpack.config.dev.js index 088acf8..ea7e902 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.js @@ -1,9 +1,15 @@ const webpack = require("webpack"); const path = require("path"); +const config = require("./config"); const HtmlWebpackPlugin = require("html-webpack-plugin"); process.env.NODE_ENV = "development"; +let configs = {}; +Object.keys(config.dev).forEach(z => { + configs[`process.env.${z}`] = JSON.stringify(config.dev[z]); +}); + module.exports = { mode: "development", target: "web", @@ -23,12 +29,7 @@ module.exports = { https: false }, plugins: [ - new webpack.DefinePlugin({ - "process.env.REVERSE_PROXY_API_URL": JSON.stringify( - "http://localhost:5050" - ), - "process.env.CHATBOT_API_URL": JSON.stringify("http://localhost:5061") - }), + new webpack.DefinePlugin(configs), new HtmlWebpackPlugin({ template: "src/index.html", favicon: "src/favicon.ico"