feat: 🎸 read name and title from data.json

umutcanbolat · Apr 21, 2022 · cbd0d4d · cbd0d4d
1 parent cecf8cf
commit cbd0d4d
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "puppeteer": "^10.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "react-highlight-words": "^0.17.0",
     "react-icons": "^4.2.0",
     "react-scripts": "4.0.3",

diff --git a/public/index.html b/public/index.html
@@ -5,11 +5,6 @@
     <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="Resume of Umut Canbolat"
-    />
-    <title>Umut Canbolat</title>
   </head>
   <body class="A4">
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.jsx b/src/App.jsx
@@ -8,16 +8,18 @@ import './App.css';
 import data from './static/data.json';
 
 function App() {
+  const { name, title, experiences, education, personalProjects, publications } = data;
+
   return (
     <>
       <section className="sheet padding-10mm">
-        <Header />
-        <ExperienceList title="Experience" data={data.experiences} />
-        <ExperienceList title="Education" dateFormat="year" data={data.education} />
+        <Header name={name} title={title} />
+        <ExperienceList title="Experience" data={experiences} />
+        <ExperienceList title="Education" dateFormat="year" data={education} />
       </section>
       <section className="sheet padding-10mm">
-        <PersonalProjects data={data.personalProjects} />
-        <Publications data={data.publications} />
+        <PersonalProjects data={personalProjects} />
+        <Publications data={publications} />
       </section>
     </>
   );

diff --git a/src/App.test.jsx b/src/App.test.jsx
@@ -2,8 +2,10 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
+import data from './static/data.json';
+
 test('renders title', () => {
   render(<App />);
-  const linkElement = screen.getByText(/umut canbolat/i);
+  const linkElement = screen.getByText(data.name);
   expect(linkElement).toBeInTheDocument();
 });
diff --git a/src/index.jsx b/src/index.jsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Helmet } from 'react-helmet';
+
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import data from './static/data.json';
 
 ReactDOM.render(
   <React.StrictMode>
+    <Helmet>
+      <title>{data.name}</title>
+      <meta name="description" content={`Resume of ${data.name}`} />
+    </Helmet>
     <App />
   </React.StrictMode>,
   document.getElementById('root'),

diff --git a/src/sections/Header.jsx b/src/sections/Header.jsx
@@ -19,11 +19,11 @@ const StyledHeader = styled.div`
   }
 `;
 
-export default function Header() {
+export default function Header({ name, title }) {
   return (
     <StyledHeader>
-      <h1>Umut Canbolat</h1>
-      <p>Full-Stack Software Engineer</p>
+      <h1>{name}</h1>
+      <p>{title}</p>
       <SocialLinks />
     </StyledHeader>
   );

diff --git a/src/static/data.json b/src/static/data.json
@@ -1,4 +1,6 @@
 {
+  "name": "Umut Canbolat",
+  "title": "Full-Stack Software Engineer",
   "experiences": [
     {
       "id": 1,

diff --git a/yarn.lock b/yarn.lock
@@ -11167,6 +11167,21 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-highlight-words@^0.17.0:
   version "0.17.0"
   resolved "https://registry.yarnpkg.com/react-highlight-words/-/react-highlight-words-0.17.0.tgz#e79a559a2de301548339d7216264d6cd0f1eed6f"
@@ -11262,6 +11277,11 @@ [email protected]:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-side-effect@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"