added Social Sharing Buttons

main
Philipp Lohner 1 year ago
parent 5b153c1cfc
commit fc48689a17
  1. 2
      .env
  2. 80
      package-lock.json
  3. 1
      package.json
  4. 8
      public/index.html
  5. 1
      public/manifest.json
  6. 2
      src/components/Categories/Categories.tsx
  7. 2
      src/components/Main/Main.tsx
  8. 2
      src/components/Partners/Partners.tsx
  9. 1
      src/components/SocialBar/SocialBar.scss
  10. 60
      src/components/SocialBar/SocialBar.tsx
  11. 10
      src/components/footer/Footer.scss
  12. 2
      src/components/footer/Footer.tsx
  13. 3
      src/variables.ts

@ -1,2 +0,0 @@
REACT_APP_HTTPS=true
REACT_APP_INLINE_RUNTIME_CHUNK=false

80
package-lock.json generated

@ -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",

@ -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"
},

@ -1,14 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<html lang="de">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Die Webseite zum Gruenen Quartett zum Bundestagswahlkampf 2021"
content="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."
/>
<meta http-equiv="language" content="de">
<meta name="robots" content="noarchive">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo_ffm.png" />
<link rel="manifest" href="%PUBLIC_URL%/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",

@ -47,7 +47,7 @@ function Categories() {
}, [trackPageView]);
return (
<div className="Categories">
<h3 className="categories-title">{title}</h3>
<h1 className="categories-title">{title}</h1>
<div className="categories-content">
<ReactMarkdown>{content}</ReactMarkdown>
</div>

@ -31,7 +31,7 @@ function Main() {
return (
<div className="Main">
<h3 className="main-title">{title}</h3>
<h1 className="main-title">{title}</h1>
<div className="main-content">
<ReactMarkdown>{content}</ReactMarkdown>
</div>

@ -46,7 +46,7 @@ function Partners() {
return (
<div className="Partners">
<h3 className="partners-title">{title}</h3>
<h1 className="partners-title">{title}</h1>
<div className="partners-content">
<ReactMarkdown>{content}</ReactMarkdown>
</div>

@ -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 = () => (
<div className="share-container">
<EmailShareButton
url={shareUrl}
subject={shareTitle}
body="body"
className="share-button"
>
<EmailIcon size={shareSize} round />
</EmailShareButton>
<FacebookShareButton
url={shareUrl}
quote={shareTitle}
className="share-button"
>
<FacebookIcon size={shareSize} round />
</FacebookShareButton>
<LinkedinShareButton url={shareUrl} className="share-button">
<LinkedinIcon size={shareSize} round />
</LinkedinShareButton>
<RedditShareButton
url={shareUrl}
title={shareTitle}
windowWidth={660}
windowHeight={460}
className="share-button"
>
<RedditIcon size={shareSize} round />
</RedditShareButton>
<TwitterShareButton
url={shareUrl}
title={shareTitle}
className="share-button"
>
<TwitterIcon size={shareSize} round />
</TwitterShareButton>
</div>
);
export default SocialBar;

@ -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;
}
}
}

@ -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() {
</NavLink>
</div>
</div>
<SocialBar />
</div>
);
}

@ -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;

Loading…
Cancel
Save