Skip to content

Commit e463dfb

Browse files
alphatrlalphatrl
authored
fix(deps): Tailwind support and react dependencies bump (#24)
* build(deps): Add tailwindcss * refactor(styles): Support tailwindcss * refactor: move to tailwindcss * chore: fix rebase issues * build(deps): Upgrade react, react-dom and styled-components to latest * build(vite): Support for react 19 * refactor: React 19 supprot * refactor: remove `react-helmet-async` * refactor: react 19
1 parent 7c2396d commit e463dfb

9 files changed

Lines changed: 361 additions & 321 deletions

File tree

‎index.html‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link
6-
rel="icon"
7-
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👋</text></svg>"
8-
/>
9-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10-
<title>alphatrl.github.io</title>
11-
</head>
12-
<body>
13-
<div id="root"></div>
14-
<script type="module" src="/src/main.tsx"></script>
15-
</body>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon"
7+
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👋</text></svg>" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
9+
<title>Portfolio | Amos Tan </title>
10+
<link href="/src/styles.css" rel="stylesheet" />
11+
</head>
12+
13+
<body>
14+
<div id="root"></div>
15+
<script type="module" src="/src/main.tsx"></script>
16+
</body>
17+
1618
</html>

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@
99
"lint": "eslint ."
1010
},
1111
"dependencies": {
12+
"@tailwindcss/vite": "^4.1.18",
1213
"lodash": "^4.17.21",
13-
"react": "17.0.2",
14-
"react-dom": "17.0.2",
15-
"react-helmet-async": "^2.0.5",
16-
"styled-components": "^5.3.3"
14+
"react": "^19.0.0",
15+
"react-dom": "^19.0.0",
16+
"styled-components": "^6.1.13",
17+
"tailwindcss": "^4.1.18"
1718
},
1819
"devDependencies": {
1920
"@eslint/js": "^9.39.2",
2021
"@types/node": "^16.4.13",
21-
"@types/react": "^17.0.16",
22-
"@types/react-dom": "^17.0.9",
23-
"@types/styled-components": "^5.1.12",
22+
"@types/react": "^19.0.0",
23+
"@types/react-dom": "^19.0.0",
2424
"@vitejs/plugin-react": "^5.1.2",
2525
"eslint": "^9.39.2",
2626
"eslint-config-prettier": "^10.1.8",
@@ -39,4 +39,4 @@
3939
"vite-plugin-svgr": "^4.5.0"
4040
},
4141
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
42-
}
42+
}

‎src/App.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,19 @@
11
import React from 'react';
2-
import styled, { ThemeProvider } from 'styled-components';
2+
import { ThemeProvider } from 'styled-components';
33

44
import Introduction from './components/Introduction';
55
import Projects from './components/Projects';
66
import DefaultLayout from './layout/DefaultLayout';
77
import { theme } from './theme';
88

9-
const Wrapper = styled.div`
10-
display: flex;
11-
flex-direction: column;
12-
`;
13-
149
const App: React.FC = () => {
1510
return (
1611
<ThemeProvider theme={theme}>
1712
<DefaultLayout title="Portfolio">
18-
<Wrapper>
13+
<div className="flex flex-col">
1914
<Introduction />
2015
<Projects />
21-
</Wrapper>
16+
</div>
2217
</DefaultLayout>
2318
</ThemeProvider>
2419
);

‎src/components/SEO.tsx‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,23 @@
11
import React from 'react';
2-
import { Helmet } from 'react-helmet-async';
32

43
import config from '../config';
54

65
interface Props {
7-
lang?: string;
86
description?: string;
97
title: string;
108
}
119

1210
const SEO: React.FC<Props> = function (props) {
13-
const { description, title, lang = 'en' } = props;
11+
const { description, title } = props;
1412
const { siteMetadata } = config;
1513

1614
const metaDescription = description || siteMetadata.description;
1715
const logoUrl = new URL('logo-meta.png', siteMetadata.siteUrl).toString();
1816

1917
return (
20-
<Helmet>
21-
<title>
22-
{title} | {siteMetadata.title}
23-
</title>
24-
<meta
25-
name="viewport"
26-
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
27-
/>
18+
<React.Fragment>
19+
<title>{`${title} | ${siteMetadata.title}`}</title>
2820

29-
<html lang={lang} />
3021
<meta name="description" content={metaDescription} />
3122
<meta name="og:title" content={`${title} | ${siteMetadata.title}`} />
3223
<meta name="og:description" content={metaDescription} />
@@ -39,7 +30,7 @@ const SEO: React.FC<Props> = function (props) {
3930
<meta name="twitter:url" content={siteMetadata.siteUrl} />
4031
<meta name="twitter:title" content={`${title} | ${siteMetadata.title}`} />
4132
<meta name="twitter:description" content={metaDescription} />
42-
</Helmet>
33+
</React.Fragment>
4334
);
4435
};
4536

‎src/layout/DefaultLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ interface Props {
1111
title?: string;
1212
}
1313

14-
const DefaultLayout: React.FC<Props> = (props) => {
14+
const DefaultLayout: React.FC<React.PropsWithChildren<Props>> = (props) => {
1515
const { title = 'Amos Tan', children } = props;
1616

1717
return (

‎src/main.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import './styles.css';
22

33
import React from 'react';
4-
import ReactDOM from 'react-dom';
5-
import { HelmetProvider } from 'react-helmet-async';
4+
import { createRoot } from 'react-dom/client';
65

76
import App from './App';
87

9-
ReactDOM.render(
8+
const container = document.getElementById('root');
9+
const root = createRoot(container!);
10+
root.render(
1011
<React.StrictMode>
11-
<HelmetProvider>
12-
<App />
13-
</HelmetProvider>
12+
<App />
1413
</React.StrictMode>,
15-
document.getElementById('root'),
1614
);

‎src/styles.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "tailwindcss";
2+
13
body {
24
background-color: #fafafa;
35
color: #111111;

‎vite.config.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1+
import tailwindcss from '@tailwindcss/vite';
12
import react from '@vitejs/plugin-react';
23
import { defineConfig } from 'vite';
34
import svgr from 'vite-plugin-svgr';
45

56
// https://vitejs.dev/config/
67
export default defineConfig({
7-
plugins: [react(), svgr()],
8+
plugins: [react(), svgr(), tailwindcss()],
89
});

0 commit comments

Comments
 (0)