Skip to content
This repository has been archived by the owner on Jan 15, 2025. It is now read-only.

Commit

Permalink
feature: i18n
Browse files Browse the repository at this point in the history
fix #2
  • Loading branch information
levino committed Apr 29, 2023
1 parent 0343deb commit 9782cfb
Show file tree
Hide file tree
Showing 21 changed files with 660 additions and 498 deletions.
18 changes: 18 additions & 0 deletions .storybook/i18next.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { initReactI18next } from "react-i18next";
import i18n from "i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import translations from "../src/translations.json";
i18n
.use(initReactI18next)
.use(LanguageDetector)
.use(Backend)
.init({
fallbackLng: "en",
interpolation: { escapeValue: false },
react: { useSuspense: false },
supportedLngs: ["en", "de"],
resources: translations,
});

export default i18n;
1 change: 1 addition & 0 deletions .storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const config: StorybookConfig = {
"@storybook/addon-essentials",
"@storybook/preset-create-react-app",
"@storybook/addon-interactions",
"storybook-react-i18next",
],
framework: {
name: "@storybook/react-webpack5",
Expand Down
9 changes: 9 additions & 0 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import "../style.css";
import type { Preview } from "@storybook/react";
import i18n from "./i18next";

const preview: Preview = {
parameters: {
Expand All @@ -10,6 +11,14 @@ const preview: Preview = {
date: /Date$/,
},
},
i18n,
},
globals: {
locale: "en",
locales: {
en: { title: "English" },
de: { title: "Deutsch" },
},
},
};

Expand Down
5 changes: 5 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,16 @@
},
"dependencies": {
"handlebars": "^4.7.7",
"i18next": "^22.4.15",
"i18next-browser-languagedetector": "^7.0.1",
"i18next-http-backend": "^2.2.0",
"jsonresume-theme-stackoverflow": "^2.0.1",
"markdown-it": "^13.0.1",
"moment": "^2.29.4",
"ramda": "^0.29.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-i18next": "^12.2.2",
"react-scripts": "5.0.1",
"styled-components": "^5.3.10",
"web-vitals": "^2.1.0"
Expand All @@ -46,6 +50,7 @@
"prop-types": "^15.8.1",
"resume-cli": "^3.0.8",
"storybook": "^7.0.7",
"storybook-react-i18next": "^2.0.1",
"typescript": "^5.0.4",
"webpack": "^5.81.0"
},
Expand Down
65 changes: 34 additions & 31 deletions src/Awards.tsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,42 @@
import React from "react";
import { Award } from "./types";
import { withTranslation, WithTranslation } from "react-i18next";

export const Awards: React.FC<{ awards: Award[] }> = ({ awards }) => (
<>
{awards.length > 0 && (
<section className="section">
<header>
<h2 className="section-title">Awards</h2>
</header>
<section id="awards">
{awards.map((award, index) => (
<section key={index} className="award-item">
{award.summary && <label htmlFor={`award-item-${index}`} />}
<header className="clear">
{award.date && (
<div className="date">
{new Date(award.date).getFullYear()}
export const Awards = withTranslation()(
({ awards, t }: { awards: Award[] } & WithTranslation) => (
<>
{awards.length > 0 && (
<section className="section">
<header>
<h2 className="section-title">{t("Awards")}</h2>
</header>
<section id="awards">
{awards.map((award, index) => (
<section key={index} className="award-item">
{award.summary && <label htmlFor={`award-item-${index}`} />}
<header className="clear">
{award.date && (
<div className="date">
{new Date(award.date).getFullYear()}
</div>
)}
<div className="header-left">
{award.title && <div className="title">{award.title}</div>}
{award.awarder && (
<div className="awarder">{award.awarder}</div>
)}
</div>
)}
<div className="header-left">
{award.title && <div className="title">{award.title}</div>}
{award.awarder && (
<div className="awarder">{award.awarder}</div>
</header>
<div className="item">
{award.summary && (
<div className="summary">{award.summary}</div>
)}
</div>
</header>
<div className="item">
{award.summary && (
<div className="summary">{award.summary}</div>
)}
</div>
</section>
))}
</section>
))}
</section>
</section>
</section>
)}
</>
)}
</>
)
);
86 changes: 43 additions & 43 deletions src/Certificates.tsx
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
import React from "react";
import { Certificate } from "./types";
import { withTranslation, WithTranslation } from "react-i18next";

export const Certificates: React.FC<{ certificates: Certificate[] }> = ({
certificates,
}) => (
<>
{certificates.length > 0 && (
<section className="section">
<header>
<h2 className="section-title">Certificates</h2>
</header>
<section id="certificates">
{certificates.map((certificate, index) => (
<section key={index} className="certificate-item">
<header className="clear">
{certificate.date && (
<div className="date">{certificate.date}</div>
)}
<div className="header-left">
{certificate.name && (
<div className="name">{certificate.name}</div>
export const Certificates = withTranslation()(
({ certificates, t }: { certificates: Certificate[] } & WithTranslation) => (
<>
{certificates.length > 0 && (
<section className="section">
<header>
<h2 className="section-title">{t("Certificates")}</h2>
</header>
<section id="certificates">
{certificates.map((certificate, index) => (
<section key={index} className="certificate-item">
<header className="clear">
{certificate.date && (
<div className="date">{certificate.date}</div>
)}
{certificate.issuer && (
<div className="issuer">{certificate.issuer}</div>
<div className="header-left">
{certificate.name && (
<div className="name">{certificate.name}</div>
)}
{certificate.issuer && (
<div className="issuer">{certificate.issuer}</div>
)}
</div>
</header>
<div className="item">
{certificate.url && (
<span className="url">
<span className="fas fa-external-link-alt"></span>
<a
target="_blank"
rel="noopener noreferrer"
href={certificate.url}
>
{"\u00A0"}
{certificate.url}
</a>
</span>
)}
</div>
</header>
<div className="item">
{certificate.url && (
<span className="url">
<span className="fas fa-external-link-alt"></span>
<a
target="_blank"
rel="noopener noreferrer"
href={certificate.url}
>
{"\u00A0"}
{certificate.url}
</a>
</span>
)}
</div>
</section>
))}
</section>
))}
</section>
</section>
</section>
)}
</>
)}
</>
)
);
129 changes: 68 additions & 61 deletions src/Education.tsx
Original file line number Diff line number Diff line change
@@ -1,71 +1,78 @@
import React from "react";
import { EducationProps } from "./types";
import { withTranslation, WithTranslation } from "react-i18next";

export const Education: React.FC<{ education: EducationProps[] }> = ({
education,
}) => {
if (!education.length) return null;
export const Education = withTranslation()(
({ education, t }: { education: EducationProps[] } & WithTranslation) => {
if (!education.length) return null;

const formatDate = (date: string) => {
return new Date(date).getFullYear();
};
const formatDate = (date: string) => {
return new Date(date).getFullYear();
};

return (
<section className="section">
<header>
<h2 className="section-title">
Education <span className="item-count">({education.length})</span>
</h2>
</header>
return (
<section className="section">
<header>
<h2 className="section-title">
{t("Education")}{" "}
<span className="item-count">({education.length})</span>
</h2>
</header>

<section id="education">
{education.map((edu, index) => (
<section className="education-item" key={index}>
<header className="clear">
<div className="date">
{edu.startDate && (
<span className="startDate">{formatDate(edu.startDate)}</span>
)}
{edu.endDate ? (
<span className="endDate"> - {formatDate(edu.endDate)}</span>
) : (
<span className="endDate"> - Current</span>
)}
</div>
<div className="header-left">
{edu.studyType && (
<div className="studyType">{edu.studyType}</div>
)}
{edu.area && (
<div className="area">
{"\u00A0"}
{edu.area}
<section id="education">
{education.map((edu, index) => (
<section className="education-item" key={index}>
<header className="clear">
<div className="date">
{edu.startDate && (
<span className="startDate">
{formatDate(edu.startDate)}
</span>
)}
{edu.endDate ? (
<span className="endDate">
{" "}
- {formatDate(edu.endDate)}
</span>
) : (
<span className="endDate"> - Current</span>
)}
</div>
<div className="header-left">
{edu.studyType && (
<div className="studyType">{edu.studyType}</div>
)}
{edu.area && (
<div className="area">
{"\u00A0"}
{edu.area}
</div>
)}
{edu.institution && (
<div className="institution">{edu.institution}</div>
)}
</div>
</header>

{edu.courses?.length && (
<ul className="courses">
{edu.courses.map((course, i) => (
<li key={i}>{course}</li>
))}
</ul>
)}

<div className="item">
{edu.score && (
<div className="gpa">
<strong> Grade:</strong> <span>{edu.score}</span>
</div>
)}
{edu.institution && (
<div className="institution">{edu.institution}</div>
)}
</div>
</header>

{edu.courses?.length && (
<ul className="courses">
{edu.courses.map((course, i) => (
<li key={i}>{course}</li>
))}
</ul>
)}

<div className="item">
{edu.score && (
<div className="gpa">
<strong> Grade:</strong> <span>{edu.score}</span>
</div>
)}
</div>
</section>
))}
</section>
))}
</section>
</section>
</section>
);
};
);
}
);
Loading

0 comments on commit 9782cfb

Please sign in to comment.