Browse Source

Merge branch 'feature/94-add-an-about-menu-item' into 'develop'

Feature/94 add an about menu item

See merge request ecentrics/concordia!10
develop
Apostolos Fanakis 4 years ago
parent
commit
432931f990
  1. 1
      .dockerignore
  2. 10
      docker/README.md
  3. 1
      packages/concordia-app/.env.development.example
  4. 10
      packages/concordia-app/package.json
  5. 1
      packages/concordia-app/public/locales/en/translation.json
  6. 5
      packages/concordia-app/src/Routes.jsx
  7. 35
      packages/concordia-app/src/assets/About.md
  8. 1
      packages/concordia-app/src/assets/images/app_logo_circle.svg
  9. 17
      packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx
  10. 43
      packages/concordia-app/src/views/About/index.jsx

1
.dockerignore

@ -13,6 +13,7 @@ docker/
packages/*/node_modules
packages/*/dist
packages/*/coverage
packages/*/*.env*
# TO-NEVER-DO: exclude the build folder of the contracts package, it's needed for building the application image.
packages/concordia-app/build

10
docker/README.md

@ -36,7 +36,7 @@ Furthermore, we provide an image that builds the contracts and handles their mig
### Ganache
The Dockerfile is provided in the path `./ganache`. The image makes use of the environment variables described
bellow.
below.
| Environment variable | Default value | Usage |
| --- | --- | --- |
@ -66,7 +66,7 @@ This is a provision system that compiles and deploys the contracts to any Ethere
A Dockerfile is provided in the path `./concordia-contracts` that will build the contracts used by Concordia and
handle their deployment to any Ethereum network defined using env-vars upon container run. Dockerfile contains three
useful stages, described in the table bellow.
useful stages, described in the table below.
| Stage name | Entrypoint | Usage |
| --- | --- | --- |
@ -74,7 +74,7 @@ useful stages, described in the table bellow.
| test | Runs contract tests | Compiles contracts and runs tests using blockchain defined by env vars |
| runtime | Migrates contracts | Compiles contracts and migrates to the blockchain defined by env vars. Does **not** run tests |
The image makes use of the environment variables described bellow.
The image makes use of the environment variables described below.
| Environment variable | Default value | Usage |
| --- | --- | --- |
@ -92,7 +92,7 @@ the image.
### Application
The Dockerfile provided in the path `./concordia-application` builds the application for production and serves
the resulting build using an nginx server. Dockerfile contains two useful stages, described in the table bellow.
the resulting build using an nginx server. Dockerfile contains two useful stages, described in the table below.
| Stage name | Entrypoint | Usage |
| --- | --- | --- |
@ -100,7 +100,7 @@ the resulting build using an nginx server. Dockerfile contains two useful stages
| runtime | Serves application | Builds for production and serves it through nginx |
The image makes use of the environment variables described bellow.
The image makes use of the environment variables described below.
| Environment variable | Default value | Usage |
| --- | --- | --- |

1
packages/concordia-app/.env.development.example

@ -7,6 +7,5 @@ HOST=localhost
PORT=7000
# Variables needed in runtime (in browser)
# Carefull, IPFS won't accept localhost as a valid hostname
REACT_APP_RENDEZVOUS_HOST=127.0.0.1
REACT_APP_RENDEZVOUS_PORT=9090

10
packages/concordia-app/package.json

@ -3,9 +3,9 @@
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"start": "cross-env REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name react-scripts start",
"build": "cross-env REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name react-scripts build",
"test": "cross-env REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name react-scripts test",
"eject": "react-scripts eject",
"postinstall": "patch-package",
"analyze": "react-scripts build && source-map-explorer 'build/static/js/*.js' --gzip",
@ -38,18 +38,20 @@
"react": "~16.13.1",
"react-dom": "~16.13.1",
"react-i18next": "^11.7.3",
"react-markdown": "^5.0.3",
"react-particles-js": "^3.4.0",
"react-redux": "~7.2.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "~3.4.3",
"redux-saga": "~1.1.3",
"react-timeago": "~5.2.0",
"redux-saga": "~1.1.3",
"semantic-ui-css": "~2.4.1",
"semantic-ui-react": "~1.2.1",
"web3": "1.3.0"
},
"devDependencies": {
"cross-env": "^7.0.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-plugin-import": "^2.20.2",

1
packages/concordia-app/public/locales/en/translation.json

@ -62,6 +62,7 @@
"register.form.sign.up.step.error.message.header": "Form contains errors",
"register.form.sign.up.step.title": "Sign Up",
"register.p.account.address": "Account address:",
"topbar.button.about": "About",
"topbar.button.clear.databases": "Clear databases",
"topbar.button.create.topic": "Create topic",
"topbar.button.profile": "Profile",

5
packages/concordia-app/src/Routes.jsx

@ -39,6 +39,11 @@ const routesConfig = [
path: '/home',
component: lazy(() => import('./views/Home')),
},
{
exact: true,
path: '/about',
component: lazy(() => import('./views/About')),
},
{
exact: true,
path: '/topics/:id(\\bnew\\b|\\d+)',

35
packages/concordia-app/src/assets/About.md

@ -0,0 +1,35 @@
# About Concordia
## What
Concordia is a forum platform (remember forums? 🤩) that focuses on user privacy and direct democratic voting. It is a
FOSS distributed via its Gitlab [repository][concordia-repository] and Docker [repository][concordia-docker-hub] under
the [MIT][concordia-license] license.
## Why
The value of privacy, freedom of speech and democracy are diminishing in modern software. Even more so in social media
platforms. Users are called to select between being the product of companies that sell their personal information and
being shut out of the modern, digital society.
Concordia, much like other projects of this kind, provides an alternative to this predicament.
## How
Concordia uses decentralized technologies, namely the Ethereum blockchain and its smart contracts, as well as the
distributed database OrbitDB that's based on the decentralized network IPFS. These technologies make Concordia
impervious to censorship and guaranty the immutability of user information and anonymity while enabling user
authentication that makes trusted, direct voting possible.
You can read more about the technological stack in Concordia's [whitepaper][concordia-whitepaper].
---
Developed by [apostolof][devs-apostolof-profile], [ezerous][devs-ezerous-profile]
[concordia-repository]: https://gitlab.com/ecentrics/apella
[concordia-docker-hub]: https://hub.docker.com/repository/docker/ecentrics/apella-app
[concordia-license]: https://gitlab.com/ecentrics/apella/-/blob/master/LICENSE.md
[devs-apostolof-profile]: https://gitlab.com/Apostolof
[devs-ezerous-profile]: https://gitlab.com/Ezerous
[concordia-whitepaper]: https://whitepaper.concordia.ecentrics.net

1
packages/concordia-app/src/assets/images/app_logo_circle.svg

@ -0,0 +1 @@
<svg id="b37e941a-4c43-4ef7-9a51-e1598f898259" data-name="Main" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 537.4 537.4"><defs><style>.ac1237be-2158-4fc0-ae9f-071b2ff57398{fill:#0b2540;}.b45f1c22-1b20-401d-9f53-3289cddfc3c4,.be317747-31f7-43a4-9fba-03772684f044,.be531e54-2bea-4919-990d-82f88a84fa29{fill:#ea6954;}.a4966b61-2d1b-4dfd-b016-51913d3feac9,.b45f1c22-1b20-401d-9f53-3289cddfc3c4,.be317747-31f7-43a4-9fba-03772684f044,.be531e54-2bea-4919-990d-82f88a84fa29,.e5dfb83f-a67f-4542-9762-d2465cc0a2c6{stroke:#ea6954;stroke-miterlimit:10;}.b45f1c22-1b20-401d-9f53-3289cddfc3c4{stroke-width:4px;}.a4966b61-2d1b-4dfd-b016-51913d3feac9,.e5dfb83f-a67f-4542-9762-d2465cc0a2c6{fill:none;}.a4966b61-2d1b-4dfd-b016-51913d3feac9{stroke-width:8px;}.e5dfb83f-a67f-4542-9762-d2465cc0a2c6{stroke-width:5px;}.be317747-31f7-43a4-9fba-03772684f044{stroke-width:6px;}.be531e54-2bea-4919-990d-82f88a84fa29{stroke-width:10px;}</style></defs><title>concordia_logo_clean</title><g id="aa7412e7-d10f-4a17-bb5d-8cce7f8be73c" data-name="Background"><circle class="ac1237be-2158-4fc0-ae9f-071b2ff57398" cx="268.7" cy="268.7" r="268.7"/></g><g id="b4a70f8e-cb9b-4d04-a6af-3bbf6423659c" data-name="Thin lines"><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="110.22" y1="241.47" x2="317.86" y2="121.92"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="371.69" y1="148.92" x2="111.87" y2="298.91"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M166,329.18"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M111.87,359.31"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M213.08,358.08"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M162,387.77"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="267.76" y1="389.44" x2="322.41" y2="358.21"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="267.76" y1="389.44" x2="267.76" y2="389.44"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M269.1,89.17"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M269.1,149.77"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="317.86" y1="121.92" x2="317.53" y2="180.07"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="371.75" y1="154.56" x2="371.75" y2="210.37"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="165.3" y1="329.98" x2="164.44" y2="333.16"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="213.08" y1="358.08" x2="213.08" y2="358.08"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="164.44" y1="267.78" x2="164.44" y2="328.38"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="267.76" y1="389.44" x2="111.81" y2="298.88"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="268.07" y1="90.08" x2="267.76" y2="389.44"/></g><g id="ad2424b4-f499-4d57-ba69-57371a617f7c" data-name="Thick lines"><polyline class="a4966b61-2d1b-4dfd-b016-51913d3feac9" points="111.87 299.08 112.61 181.66 267.76 90.08"/><polyline class="a4966b61-2d1b-4dfd-b016-51913d3feac9" points="426.2 179.98 372.06 211.97 267.76 151.37 165.24 210.37 165.24 267.97"/><polyline class="a4966b61-2d1b-4dfd-b016-51913d3feac9" points="322.41 358.21 425.97 297.59 425.18 358.68 267.76 451.17 111.87 359.08"/></g><g id="b157ebcc-6b21-403c-8fdd-bc0b20aa202f" data-name="Medium lines"><polyline class="e5dfb83f-a67f-4542-9762-d2465cc0a2c6" points="267.76 90.08 267.76 150.67 317.86 121.92 317.86 180.07 371.96 149.77 371.96 212.17"/><polyline class="e5dfb83f-a67f-4542-9762-d2465cc0a2c6" points="111.87 359.08 165.3 329.98 165.3 386.17 213.08 358.08 213.08 418.17 267.74 389.44 267.74 451.17"/></g><g id="bab675c2-16d2-4e69-a23f-8e6406c1997e" data-name="Small nodes"><circle class="be317747-31f7-43a4-9fba-03772684f044" cx="371.96" cy="149.77" r="3.19"/><circle class="be317747-31f7-43a4-9fba-03772684f044" cx="213.08" cy="358.08" r="3.19"/></g><g id="b3217dd3-e6fd-4786-bb13-4cd0eac59017" data-name="Big nodes"><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="165.24" cy="267.97" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="267.76" cy="90.08" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="267.76" cy="389.44" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="111.87" cy="298.91" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="165.3" cy="329.98" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="426.3" cy="179.98" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="317.86" cy="121.92" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="322.41" cy="358.21" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="111.87" cy="359.08" r="3.19"/></g></svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

17
packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx

@ -35,7 +35,7 @@ const MainLayoutMenu = () => {
link
name="home"
key="home"
onClick={() => { history.push('/'); }}
onClick={() => history.push('/')}
>
<img src={appLogo} alt="app_logo" />
</Menu.Item>
@ -45,7 +45,7 @@ const MainLayoutMenu = () => {
link
name="create-topic"
key="create-topic"
onClick={() => { history.push('/topics/new'); }}
onClick={() => history.push('/topics/new')}
position="right"
>
{t('topbar.button.create.topic')}
@ -57,7 +57,7 @@ const MainLayoutMenu = () => {
link
name="profile"
key="profile"
onClick={() => { history.push('/profile'); }}
onClick={() => history.push('/profile')}
>
{t('topbar.button.profile')}
</Menu.Item>
@ -67,16 +67,23 @@ const MainLayoutMenu = () => {
link
name="register"
key="register"
onClick={() => { history.push('/auth/register'); }}
onClick={() => history.push('/auth/register')}
>
{t('topbar.button.register')}
</Menu.Item>
)}
<Menu.Item
link
name="about"
key="about"
onClick={() => history.push('/about')}
>
{t('topbar.button.about')}
</Menu.Item>
</Menu.Menu>
<Dropdown key="overflow" item direction="left">
<Dropdown.Menu>
<Dropdown.Item
link
name="clear-databases"
key="clear-databases"
onClick={handleClearDatabasesClick}

43
packages/concordia-app/src/views/About/index.jsx

@ -0,0 +1,43 @@
import React, {
memo, useEffect, useState,
} from 'react';
import ReactMarkdown from 'react-markdown';
import { Container, Image } from 'semantic-ui-react';
import AboutMd from '../../assets/About.md';
import appLogo from '../../assets/images/app_logo_circle.svg';
const targetBlank = () => ({ href, children }) => (
<a href={href} target="_blank" rel="noopener noreferrer">
{children}
</a>
);
const About = () => {
const [aboutMd, setAboutMd] = useState('');
useEffect(() => {
fetch(AboutMd)
.then((response) => response.text())
.then((text) => {
setAboutMd(text);
});
}, []);
return (
<Container id="about-container">
<div style={{ textAlign: 'center' }}>
<Image src={appLogo} size="small" centered />
{`v${process.env.REACT_APP_VERSION}`}
</div>
<ReactMarkdown
source={aboutMd}
renderers={{
link: targetBlank(),
linkReference: targetBlank(),
}}
/>
</Container>
);
};
export default memo(About);
Loading…
Cancel
Save