diff --git a/.env b/.env deleted file mode 100644 index 178a8af..0000000 --- a/.env +++ /dev/null @@ -1,2 +0,0 @@ -REACT_APP_HTTPS=true -REACT_APP_INLINE_RUNTIME_CHUNK=false \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0705acf..ea3f711 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "react-markdown": "^6.0.2", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "react-share": "^4.4.0", "typescript": "^4.3.5", "web-vitals": "^1.1.2" }, @@ -6187,6 +6188,11 @@ "node": ">=0.10.0" } }, + "node_modules/classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "node_modules/clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -13681,6 +13687,27 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/jsonp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz", + "integrity": "sha1-pltPoPEL2nGaBUQep7lMVfPhW64=", + "dependencies": { + "debug": "^2.1.3" + } + }, + "node_modules/jsonp/node_modules/debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/jsonp/node_modules/ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, "node_modules/jsprim": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", @@ -17986,6 +18013,22 @@ "semver": "bin/semver" } }, + "node_modules/react-share": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-share/-/react-share-4.4.0.tgz", + "integrity": "sha512-POe8Ge/JT9Ew9iyW7CiYsCCWCb8uMJWqFl9S7W0fJ/oH5gBJNzukH0bL5vSr17KKG5h15d3GfKaoviI22BKeYA==", + "dependencies": { + "classnames": "^2.2.5", + "jsonp": "^0.2.1" + }, + "engines": { + "node": ">=6.9.0", + "npm": ">=5.0.0" + }, + "peerDependencies": { + "react": "^16.3.0 || ^17" + } + }, "node_modules/react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", @@ -28286,6 +28329,11 @@ } } }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -33957,6 +34005,29 @@ "universalify": "^2.0.0" } }, + "jsonp": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/jsonp/-/jsonp-0.2.1.tgz", + "integrity": "sha1-pltPoPEL2nGaBUQep7lMVfPhW64=", + "requires": { + "debug": "^2.1.3" + }, + "dependencies": { + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "jsprim": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", @@ -37360,6 +37431,15 @@ } } }, + "react-share": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/react-share/-/react-share-4.4.0.tgz", + "integrity": "sha512-POe8Ge/JT9Ew9iyW7CiYsCCWCb8uMJWqFl9S7W0fJ/oH5gBJNzukH0bL5vSr17KKG5h15d3GfKaoviI22BKeYA==", + "requires": { + "classnames": "^2.2.5", + "jsonp": "^0.2.1" + } + }, "react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", diff --git a/package.json b/package.json index 43fdcc3..b3cef64 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react-markdown": "^6.0.2", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", + "react-share": "^4.4.0", "typescript": "^4.3.5", "web-vitals": "^1.1.2" }, diff --git a/public/index.html b/public/index.html index cde3f04..a2be31d 100644 --- a/public/index.html +++ b/public/index.html @@ -1,14 +1,16 @@ - + - + + + diff --git a/public/manifest.json b/public/manifest.json index 1ebdf15..c94bdf2 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,6 +1,7 @@ { "short_name": "Gruenes Quartett", "name": "Die Webseite zum Bundestagswahlkampf Quartett", + "description": "Das GRÜNE Städte-Quartett ermöglicht Einblicke in das Leben in 28 deutschen Städten. Im Quartett enthalten sind die 16 Landeshauptstädte sowie die 12 weiteren größten Städte gemessen an der Zahl der Einwohner*innen.", "icons": [ { "src": "favicon.ico", diff --git a/src/components/Categories/Categories.tsx b/src/components/Categories/Categories.tsx index 5177cd2..490bdb8 100644 --- a/src/components/Categories/Categories.tsx +++ b/src/components/Categories/Categories.tsx @@ -47,7 +47,7 @@ function Categories() { }, [trackPageView]); return (
-

{title}

+

{title}

{content}
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx index 568963f..d02bee5 100644 --- a/src/components/Main/Main.tsx +++ b/src/components/Main/Main.tsx @@ -31,7 +31,7 @@ function Main() { return (
-

{title}

+

{title}

{content}
diff --git a/src/components/Partners/Partners.tsx b/src/components/Partners/Partners.tsx index e96dea8..1a19373 100644 --- a/src/components/Partners/Partners.tsx +++ b/src/components/Partners/Partners.tsx @@ -46,7 +46,7 @@ function Partners() { return (
-

{title}

+

{title}

{content}
diff --git a/src/components/SocialBar/SocialBar.scss b/src/components/SocialBar/SocialBar.scss new file mode 100644 index 0000000..e2b39bb --- /dev/null +++ b/src/components/SocialBar/SocialBar.scss @@ -0,0 +1 @@ +.SocialBar {} \ No newline at end of file diff --git a/src/components/SocialBar/SocialBar.tsx b/src/components/SocialBar/SocialBar.tsx new file mode 100644 index 0000000..cd9e68d --- /dev/null +++ b/src/components/SocialBar/SocialBar.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import "./SocialBar.scss"; +import { + EmailIcon, + EmailShareButton, + FacebookIcon, + FacebookShareButton, + LinkedinIcon, + LinkedinShareButton, + RedditIcon, + RedditShareButton, + TwitterIcon, + TwitterShareButton, +} from "react-share"; +import { shareSize, shareTitle, shareUrl } from "../../variables"; + +const SocialBar = () => ( +
+ + + + + + + + + + + + + + + + + + + +
+); + +export default SocialBar; diff --git a/src/components/footer/Footer.scss b/src/components/footer/Footer.scss index c805c32..131c267 100644 --- a/src/components/footer/Footer.scss +++ b/src/components/footer/Footer.scss @@ -33,6 +33,7 @@ justify-content: left; } + a { margin-right: .5rem; color: var(--yellow-color); @@ -66,6 +67,13 @@ align-self: flex-end; } } - } + } + .share-container { + display: flex; + padding: 0 0 1rem 1rem; + button { + margin-right: .5rem; + } + } } \ No newline at end of file diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx index fd3505d..4dadf00 100644 --- a/src/components/footer/Footer.tsx +++ b/src/components/footer/Footer.tsx @@ -3,6 +3,7 @@ import "./Footer.scss"; import { NavLink } from "react-router-dom"; import greenLogo from "../../assets/img/greenLogo.svg"; import greenClaim from "../../assets/img/greenClaim.svg"; +import SocialBar from "../SocialBar/SocialBar"; function Footer() { return ( @@ -34,6 +35,7 @@ function Footer() {
+
); } diff --git a/src/variables.ts b/src/variables.ts index 6181882..06cddda 100644 --- a/src/variables.ts +++ b/src/variables.ts @@ -1 +1,4 @@ export const url = "https://cms.gruenes-quartett.de"; +export const shareUrl = "https://gruenes-quartett.de"; +export const shareTitle = "Gruenes Quartett"; +export const shareSize = 42;