Browse Source

changed Font from ttf to woff. Configured analytics to gdpr

main
Philipp Lohner 9 months ago
parent
commit
be50499c1c
  1. 30
      package-lock.json
  2. 1
      package.json
  3. 4
      public/.htaccess
  4. 8
      public/index.html
  5. 31
      src/Router.tsx
  6. BIN
      src/assets/fonts/PTS55F-webfont.woff
  7. BIN
      src/assets/fonts/PTS55F.ttf
  8. BIN
      src/assets/img/cards.png
  9. 6
      src/components/Categories/Categories.tsx
  10. 24
      src/components/CategoryLink/CategoryLink.tsx
  11. 6
      src/components/Contact/Contact.tsx
  12. 5
      src/components/Legal/Legal.tsx
  13. 7
      src/components/Main/Main.tsx
  14. 10
      src/components/PartnerLink/PartnerLink.tsx
  15. 8
      src/components/Partners/Partners.tsx
  16. 5
      src/components/Privacy/Privacy.tsx
  17. 2
      src/index.scss
  18. 44
      src/index.tsx

30
package-lock.json generated

@ -7,6 +7,7 @@
"": {
"version": "0.1.0",
"dependencies": {
"@datapunt/matomo-tracker-react": "^0.5.0",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.14.1",
@ -1806,6 +1807,22 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
"node_modules/@datapunt/matomo-tracker-js": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@datapunt/matomo-tracker-js/-/matomo-tracker-js-0.5.0.tgz",
"integrity": "sha512-kN6HePaz1r7G+PxErzUDMhooBJmrj9oSGvaRHc7Agy5oC9CMabGDte97oi9pazYTBq5e+jo0AN00Wo/KbnJLgw=="
},
"node_modules/@datapunt/matomo-tracker-react": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@datapunt/matomo-tracker-react/-/matomo-tracker-react-0.5.0.tgz",
"integrity": "sha512-t/oiJjL2jmw8Vbb7NJblcHYcJyWJ+BDLbCCkP79ictGgnCLgqFnmF5arWTcMBz3D1yH1tX6sxNSxeB7Zkodhog==",
"dependencies": {
"@datapunt/matomo-tracker-js": "^0.5.0"
},
"peerDependencies": {
"react": ">= 16.8.0"
}
},
"node_modules/@emotion/hash": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@ -24917,6 +24934,19 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
"@datapunt/matomo-tracker-js": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@datapunt/matomo-tracker-js/-/matomo-tracker-js-0.5.0.tgz",
"integrity": "sha512-kN6HePaz1r7G+PxErzUDMhooBJmrj9oSGvaRHc7Agy5oC9CMabGDte97oi9pazYTBq5e+jo0AN00Wo/KbnJLgw=="
},
"@datapunt/matomo-tracker-react": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@datapunt/matomo-tracker-react/-/matomo-tracker-react-0.5.0.tgz",
"integrity": "sha512-t/oiJjL2jmw8Vbb7NJblcHYcJyWJ+BDLbCCkP79ictGgnCLgqFnmF5arWTcMBz3D1yH1tX6sxNSxeB7Zkodhog==",
"requires": {
"@datapunt/matomo-tracker-js": "^0.5.0"
}
},
"@emotion/hash": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",

1
package.json

@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@datapunt/matomo-tracker-react": "^0.5.0",
"@material-ui/core": "^4.12.2",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.14.1",

4
public/.htaccess

@ -0,0 +1,4 @@
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

8
public/index.html

@ -14,14 +14,6 @@
<title>Gruenes Quartett</title>
<!-- Matomo -->
<script>
</script>
<!-- End Matomo Code -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

31
src/Router.tsx

@ -8,25 +8,8 @@ import Privacy from "./components/Privacy/Privacy";
import Contact from "./components/Contact/Contact";
import Categories from "./components/Categories/Categories";
import Partners from "./components/Partners/Partners";
import CookieConsent from "react-cookie-consent";
function Router() {
function allowCookie() {
let script = document.createElement("script");
script.text = `var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.av-topo.net/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();`;
document.head.appendChild(script);
}
return (
<BrowserRouter>
<Header />
@ -51,20 +34,6 @@ function Router() {
</Route>
</Switch>
<Footer />
<CookieConsent
location="bottom"
buttonText="Einverstanden"
expires={1}
ariaAcceptLabel="Setzen von Analyse Cookie akzeptieren"
onAccept={() => allowCookie()}
>
Wir nutzen Matomo um unsere Webseite zu analysieren. Alle Informationen
werden anonymisiert erhoben. Die Weitergabe unserer Analysedaten an
Dritte ist ausgeschlossen!{" "}
<a style={{ color: "white" }} href={"/datenschutz"}>
Weitere Informationen
</a>
</CookieConsent>
</BrowserRouter>
);
}

BIN
src/assets/fonts/PTS55F-webfont.woff

Binary file not shown.

BIN
src/assets/fonts/PTS55F.ttf

Binary file not shown.

BIN
src/assets/img/cards.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

6
src/components/Categories/Categories.tsx

@ -4,6 +4,7 @@ import { url } from "../../variables";
import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import CategoryLink from "../CategoryLink/CategoryLink";
import { useMatomo } from "@datapunt/matomo-tracker-react";
function Categories() {
const [{ title, content }, setContent] = useState({
@ -12,6 +13,7 @@ function Categories() {
});
const [categories, setCategories] = useState([]);
const { trackPageView } = useMatomo();
interface HomeProps {
title: string;
@ -40,7 +42,9 @@ function Categories() {
getContent().then();
getCategories().then();
}, []);
trackPageView({ documentTitle: "Kategorien" });
}, [trackPageView]);
return (
<div className="Categories">
<h3 className="categories-title">{title}</h3>

24
src/components/CategoryLink/CategoryLink.tsx

@ -7,6 +7,7 @@ import Typography from "@material-ui/core/Typography";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
import ReactMarkdown from "react-markdown";
import { useMatomo } from "@datapunt/matomo-tracker-react";
interface CategoryProps {
title: string;
@ -15,6 +16,24 @@ interface CategoryProps {
}
const CategoryLink: React.FC<CategoryProps> = (category) => {
const { trackEvent } = useMatomo();
const handleOnClick = () => {
// Track click on button
trackEvent({
category: "Beteiligte-Link",
action: `${category.title} wurde ausgeklappt`,
});
};
const handleOnLinkClick = () => {
// Track click on button
trackEvent({
category: "Beteiligte-Link",
action: `${category.title} Quellen Link wurde gefolgt`,
});
};
return (
<div className="CategoryLink">
<Accordion className="acc-main">
@ -24,7 +43,9 @@ const CategoryLink: React.FC<CategoryProps> = (category) => {
id="panel1a-header"
className="acc-sum"
>
<Typography className="category-title">{category.title}</Typography>
<Typography className="category-title" onClick={handleOnClick}>
{category.title}
</Typography>
</AccordionSummary>
<AccordionDetails className="acc-detail">
<div className="category-text">
@ -35,6 +56,7 @@ const CategoryLink: React.FC<CategoryProps> = (category) => {
className="category-button"
onClick={(e) => {
e.preventDefault();
handleOnLinkClick();
window.open(`${category.url}`, "_blank");
}}
>

6
src/components/Contact/Contact.tsx

@ -2,8 +2,10 @@ import React, { useEffect, useState } from "react";
import "./Contact.scss";
import ReactMarkdown from "react-markdown";
import { url } from "../../variables";
import { useMatomo } from "@datapunt/matomo-tracker-react";
function Contact() {
const { trackPageView } = useMatomo();
const [{ title, content }, setContent] = useState({
title: "",
content: "",
@ -22,7 +24,9 @@ function Contact() {
};
getContent().then();
}, []);
trackPageView({ documentTitle: "Impressum" });
}, [trackPageView]);
return (
<div className="Contact">
<h3 className="contact-title">{title}</h3>

5
src/components/Legal/Legal.tsx

@ -2,8 +2,10 @@ import React, { useEffect, useState } from "react";
import { url } from "../../variables";
import "./Legal.scss";
import ReactMarkdown from "react-markdown";
import { useMatomo } from "@datapunt/matomo-tracker-react";
function Legal() {
const { trackPageView } = useMatomo();
const [{ title, content }, setContent] = useState({
title: "",
content: "",
@ -22,7 +24,8 @@ function Legal() {
};
getContent().then();
}, []);
trackPageView({ documentTitle: "Impressum" });
}, [trackPageView]);
return (
<div className="Legal">

7
src/components/Main/Main.tsx

@ -1,11 +1,13 @@
import React, { useEffect, useState } from "react";
import { url } from "../../variables";
import "./Main.scss";
import mainImage from "../../assets/img/AnordnungKarten.png";
import mainImage from "../../assets/img/cards.png";
import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import { useMatomo } from "@datapunt/matomo-tracker-react";
function Main() {
const { trackPageView } = useMatomo();
const [{ title, content }, setContent] = useState({
title: "",
content: "",
@ -24,7 +26,8 @@ function Main() {
};
getContent().then();
}, []);
trackPageView({ documentTitle: "Beteiligte" });
}, [trackPageView]);
return (
<div className="Main">

10
src/components/PartnerLink/PartnerLink.tsx

@ -1,5 +1,6 @@
import React from "react";
import "./PartnerLink.scss";
import { useMatomo } from "@datapunt/matomo-tracker-react";
interface PartnerProps {
name: string;
@ -7,8 +8,15 @@ interface PartnerProps {
}
const PartnerLink: React.FC<PartnerProps> = (partner) => {
const { trackEvent } = useMatomo();
const handleOnClick = () => {
// Track click on button
trackEvent({ category: "Beteiligte-Link", action: `${partner.name}` });
};
return (
<div className="PartnerLink">
<div className="PartnerLink" onClick={handleOnClick}>
<a target="_blank" rel="noopener noreferrer" href={partner.url}>
{partner.name}
</a>

8
src/components/Partners/Partners.tsx

@ -4,13 +4,14 @@ import { url } from "../../variables";
import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import PartnerLink from "../PartnerLink/PartnerLink";
import { useMatomo } from "@datapunt/matomo-tracker-react";
function Partners() {
const [{ title, content }, setContent] = useState({
title: "",
content: "",
});
const { trackPageView } = useMatomo();
const [partners, setPartners] = useState([]);
interface HomeProps {
@ -39,7 +40,10 @@ function Partners() {
getContent().then();
getPartners().then();
}, []);
trackPageView({ documentTitle: "Beteiligte" });
}, [trackPageView]);
return (
<div className="Partners">
<h3 className="partners-title">{title}</h3>

5
src/components/Privacy/Privacy.tsx

@ -2,8 +2,10 @@ import React, { useEffect, useState } from "react";
import { url } from "../../variables";
import "./Privacy.scss";
import ReactMarkdown from "react-markdown";
import { useMatomo } from "@datapunt/matomo-tracker-react";
function Privacy() {
const { trackPageView } = useMatomo();
const [{ title, content }, setContent] = useState({
title: "",
content: "",
@ -22,7 +24,8 @@ function Privacy() {
};
getContent().then();
}, []);
trackPageView({ documentTitle: "Datenschutz" });
}, [trackPageView]);
return (
<div className="Privacy">

2
src/index.scss

@ -4,7 +4,7 @@
}
@font-face {
font-family: "PT Sans";
src: url(./assets/fonts/PTS55F.ttf);
src: url(./assets/fonts/PTS55F-webfont.woff);
}
@import "./variables";

44
src/index.tsx

@ -1,11 +1,43 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import React from "react";
import ReactDOM from "react-dom";
import "./index.scss";
import App from "./App";
import { createInstance, MatomoProvider } from "@datapunt/matomo-tracker-react";
import CookieConsent from "react-cookie-consent";
function allowCookie() {
return;
}
const instance = createInstance({
urlBase: "https://analytics.av-topo.net/",
siteId: 2,
heartBeat: {
active: true,
seconds: 10, // optional, default value: `15
},
configurations: { setSecureCookie: true },
});
ReactDOM.render(
<React.StrictMode>
<App />
<MatomoProvider value={instance}>
<App />
<CookieConsent
location="bottom"
buttonText="Verstanden"
expires={1}
ariaAcceptLabel="Setzen von Analyse Cookie akzeptieren"
onAccept={() => allowCookie()}
>
Wir nutzen Matomo um unsere Webseite zu analysieren. Alle Informationen
werden anonymisiert erhoben. Die Weitergabe unserer Analysedaten an
Dritte ist ausgeschlossen!{" "}
<a style={{ color: "white" }} href={"/datenschutz"}>
Weitere Informationen
</a>
</CookieConsent>
</MatomoProvider>
</React.StrictMode>,
document.getElementById('root')
document.getElementById("root")
);

Loading…
Cancel
Save