Skip to content

Commit 3d2a9ab

Browse files
rubenlangiusrubenlangius
committed
add translations
1 parent 001b216 commit 3d2a9ab

File tree

12 files changed

+298
-35
lines changed

12 files changed

+298
-35
lines changed

‎package-lock.json‎

Lines changed: 93 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@
1616
"@rjsf/utils": "^5.22.1",
1717
"@rjsf/validator-ajv8": "^5.22.1",
1818
"bootstrap": "^4.6.2",
19+
"i18next": "^23.16.5",
1920
"react": "^18.3.1",
2021
"react-bootstrap": "^1.6.8",
2122
"react-copy-to-clipboard": "^5.1.0",
2223
"react-dom": "^18.3.1",
24+
"react-i18next": "^15.1.1",
2325
"react-syntax-highlighter": "^15.6.1",
2426
"sass-embedded": "^1.80.5"
2527
},
@@ -34,6 +36,7 @@
3436
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
3537
"eslint-plugin-react-refresh": "^0.4.12",
3638
"globals": "^15.9.0",
39+
"i18next-resources-for-ts": "^1.5.0",
3740
"typescript": "^5.5.3",
3841
"typescript-eslint": "^8.7.0",
3942
"vite": "^5.4.8"

‎src/components/CodeBlock.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import SyntaxHighlighter from "react-syntax-highlighter";
22
import { CopyToClipboard } from "react-copy-to-clipboard";
33
import { useState } from "react";
4+
import { useTranslation } from "react-i18next";
45

56
export default function CodeBlock({
67
code,
@@ -18,6 +19,7 @@ export default function CodeBlock({
1819
wrapLongLines?: boolean;
1920
}) {
2021
const [copied, setCopied] = useState(false);
22+
const { t } = useTranslation();
2123

2224
// Reset the copied state after 2 seconds.
2325
if (copied) {
@@ -32,7 +34,7 @@ export default function CodeBlock({
3234
<h6 className="mb-0 ml-2 text-white"> {title}</h6>
3335
<CopyToClipboard text={code}>
3436
<a className="btn btn-primary" onClick={() => setCopied(true)}>
35-
<small>{copied ? "Gekopieerd" : "Kopieer"}</small>
37+
<small>{copied ? t("copied") : t("copy")}</small>
3638
</a>
3739
</CopyToClipboard>
3840
</div>

‎src/components/Intro.tsx‎

Lines changed: 49 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { Card, Button, ListGroup } from "react-bootstrap";
2+
import { useTranslation } from "react-i18next";
3+
import LanguageSwitcher from "./LanguageSwitcher";
24

35
export default function ({
46
forms,
@@ -7,36 +9,60 @@ export default function ({
79
forms: { id: number; title: string }[];
810
onStart: (index: number) => void;
911
}) {
12+
const { t, i18n } = useTranslation();
13+
console.log(i18n);
1014
return (
1115
<Card style={{ minHeight: "300px" }}>
1216
<Card.Body className="d-flex flex-column justify-content-between">
13-
<Card.Title>Identificatie van AI-systemen en impactvolle algoritmes</Card.Title>
17+
<div className="d-flex flex-row justify-content-between align-items-top mb-2">
18+
<Card.Title>{t("cardTitle")}</Card.Title>
19+
<LanguageSwitcher />
20+
</div>
1421

1522
<div className="mb-4">
23+
<p>{t("description1")}</p>
24+
<p>{t("description2")}</p>
25+
<ul>
26+
<li>
27+
{" "}
28+
<a
29+
href="https://www.rijksoverheid.nl/documenten/rapporten/2023/07/11/onderzoekskader-algoritmes-adr-2023#:~:text=De%20Auditdienst%20Rijk%20heeft%20een,risico%27s%20beheerst%20%5C(kunnen%5C)%20worden."
30+
target="_blank"
31+
>
32+
{t("framework1_text")}
33+
</a>{" "}
34+
{t("framework1_author")}
35+
</li>
36+
<li>
37+
{" "}
38+
<a
39+
href="https://minbzk.github.io/Algoritmekader/"
40+
target="_blank"
41+
>
42+
{t("framework2_text")}
43+
</a>{" "}
44+
{t("framework2_author")}
45+
</li>
46+
<li>
47+
{" "}
48+
<a
49+
href="https://www.rijksoverheid.nl/documenten/rapporten/2021/02/25/impact-assessment-mensenrechten-en-algoritmes"
50+
target="_blank"
51+
>
52+
{t("framework3_text")}
53+
</a>{" "}
54+
{t("framework3_author")}
55+
</li>
56+
</ul>
1657
<p>
17-
Aan de hand van maximaal 7 vragen kun je al een gedegen inschatting maken of een datagedreven toepassing een AI-systeem of impactvol algoritme betreft. Vul de dynamische vragenlijst in.
18-
</p>
19-
<p>
20-
Dit open-source templates is afgestemd op eisen
21-
uit de AI-verordening en Nederlandse soft law kaders, zoals:
22-
<ul>
23-
<li>{" "}
24-
<a href="https://www.rijksoverheid.nl/documenten/rapporten/2023/07/11/onderzoekskader-algoritmes-adr-2023#:~:text=De%20Auditdienst%20Rijk%20heeft%20een,risico%27s%20beheerst%20%5C(kunnen%5C)%20worden." target="_blank"> Onderzoekskader Algoritmes</a> van de Audit Dienst Rijk (ADR)
25-
</li>
26-
<li>{" "}
27-
<a href="https://minbzk.github.io/Algoritmekader/" target="_blank">Algoritmekader</a> van het Ministerie van Binnenlandse Zaken en Koninkrijksrelaties
28-
</li>
29-
<li>{" "}
30-
<a href="https://www.rijksoverheid.nl/documenten/rapporten/2021/02/25/impact-assessment-mensenrechten-en-algoritmes" target="_blank">Impact Assessment Mensenrechten en Algoritmes</a> van het Binnenlandse Zaken en Koninkrijksrelaties.
31-
</li>
32-
</ul>
33-
</p>
34-
<p>
35-
Help mee ontwikkelen, deel feedback middels{" "}
36-
<a href="https://github.com/NGO-Algorithm-Audit/AlgorithmAudit_website" target="_blank">
58+
{t("feedback")}{" "}
59+
<a
60+
href="https://github.com/NGO-Algorithm-Audit/AlgorithmAudit_website"
61+
target="_blank"
62+
>
3763
Github
3864
</a>{" "}
39-
of via{" "}
65+
{t("or")}{" "}
4066
<a href="mailto:[email protected]">[email protected]</a>.
4167
</p>
4268
</div>
@@ -49,7 +75,7 @@ export default function ({
4975
>
5076
<p className="m-0 mr-4">{form.title}</p>
5177
<Button variant="primary" onClick={() => onStart(form.id)}>
52-
Start
78+
{t("startButton")}
5379
</Button>
5480
</ListGroup.Item>
5581
))}

‎src/components/LanguageSwitcher.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useTranslation } from "react-i18next";
2+
3+
export default function LanguageSwitcher() {
4+
const { i18n } = useTranslation();
5+
const changeLanguage = (lng: string) => {
6+
i18n.changeLanguage(lng);
7+
};
8+
9+
return (
10+
<div className="d-flex ml-4">
11+
{/* Make the active language bold */}
12+
<a
13+
className={(i18n.language == "nl" ? "font-weight-bold" : "") + " mx-2"}
14+
onClick={() => changeLanguage("nl")}
15+
>
16+
NL
17+
</a>
18+
|
19+
<a
20+
className={(i18n.language == "en" ? "font-weight-bold" : "") + " mx-2"}
21+
onClick={() => changeLanguage("en")}
22+
>
23+
EN
24+
</a>
25+
</div>
26+
);
27+
}

‎src/components/Output.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import a11yLight from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-light"
44
import { dictionaryToCsv } from "../utils/dictionaryToCsv";
55
import { FormProps } from "@rjsf/core";
66
import { RJSFSchema } from "@rjsf/utils";
7+
import { useTranslation } from "react-i18next";
78

89
export default function Output({
910
id,
@@ -25,6 +26,7 @@ export default function Output({
2526
) => void;
2627
data: FormProps<any, RJSFSchema, any>["schema"];
2728
}) {
29+
const { t } = useTranslation();
2830
// filter out intermediate output from the form data.
2931
data = Object.fromEntries(
3032
Object.entries(data).filter(([key]) => !key.startsWith("output"))
@@ -44,7 +46,7 @@ export default function Output({
4446
</Alert>
4547
{type === "output" && (
4648
<>
47-
<Card.Text>Sla de uitkomst op voor toekomstig gebruik:</Card.Text>
49+
<Card.Text>{t("save output")}</Card.Text>
4850
<CodeBlock
4951
style={a11yLight}
5052
code={dictionaryToCsv(data)}
@@ -69,7 +71,7 @@ export default function Output({
6971
variant="primary"
7072
type="submit"
7173
>
72-
Gereed
74+
{t("done")}
7375
</Button>
7476
{step > 0 && (
7577
<Button
@@ -78,7 +80,7 @@ export default function Output({
7880
onClick={handlePrev}
7981
style={{ marginRight: "8px" }}
8082
>
81-
Vorige
83+
{t("back")}
8284
</Button>
8385
)}
8486
</div>

0 commit comments

Comments
 (0)