Skip to content

Commit ca8af0f

Browse files
fezcodefezcode
committed
fixes
1 parent ad82285 commit ca8af0f

File tree

14 files changed

+80
-83
lines changed

14 files changed

+80
-83
lines changed

‎.eslintrc.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"extends": [
3+
"react-app",
4+
"react-app/jest"
5+
],
6+
"rules": {
7+
"no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 0, "maxBOF": 0 }],
8+
"padded-blocks": ["error", "never"],
9+
"no-trailing-spaces": "error"
10+
}
11+
}

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"build": "react-scripts build",
2626
"test": "react-scripts test",
2727
"eject": "react-scripts eject",
28+
"lint": "eslint src/**/*.{js,jsx} --fix",
2829
"predeploy": "npm run build",
2930
"deploy": "gh-pages -d build -b gh-pages"
3031
},

‎public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<link rel="preconnect" href="https://fonts.googleapis.com">
1616
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1717
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
18+
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Playfair+Display&display=swap" rel="stylesheet">
1819
<title>fezcodex</title>
1920
</head>
2021
<body class="bg-slate-950">

‎src/components/Label.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22

3-
43
const Label = ({ children, onClick }) => {
54
return (
65
<span className="inline-block bg-gray-700 text-gray-300 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded-full" onClick={onClick}>

‎src/components/Navbar.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
33
import Fez from './Fez';
4-
import { List, User, BookOpen } from '@phosphor-icons/react';
4+
import { Sidebar, User, BookOpen } from '@phosphor-icons/react';
55

66
const Navbar = ({ toggleSidebar, isSidebarOpen }) => {
77
const [isScrolled, setIsScrolled] = useState(false);
@@ -19,12 +19,12 @@ const Navbar = ({ toggleSidebar, isSidebarOpen }) => {
1919
return (
2020
<header className={`backdrop-blur-sm sticky top-0 z-30 transition-colors border-b ${isScrolled ? 'border-gray-700/50' : 'border-transparent'} relative`}>
2121
<button onClick={toggleSidebar} className="absolute top-1/2 -translate-y-1/2 left-4 text-red-500 focus:outline-none hidden md:block">
22-
<List size={24} />
22+
<Sidebar size={24} />
2323
</button>
2424
<div className="container mx-auto flex justify-between items-center p-4 text-white">
2525
<div className="md:hidden flex items-center space-x-2">
2626
<button onClick={toggleSidebar} className="text-white focus:outline-none">
27-
<List size={24} />
27+
<Sidebar size={24} />
2828
</button>
2929
<Link to="/" className="flex items-center space-x-2">
3030
<Fez />
@@ -41,7 +41,12 @@ const Navbar = ({ toggleSidebar, isSidebarOpen }) => {
4141
</div>
4242
{isSidebarOpen && (
4343
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
44-
<span className="text-lg font-semibold tracking-tight">A Fez of Code</span>
44+
<span
45+
className="text-lg font-normal tracking-tight"
46+
style={{ fontFamily: "'Arvo', 'Playfair Display', serif" }}
47+
>
48+
A Fez of Code
49+
</span>
4550
</div>
4651
)}
4752
<div className="hidden md:flex items-center space-x-6">

‎src/components/PostItem.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import { Link } from 'react-router-dom';
33

44
const PostItem = ({ slug, title, date, updatedDate, category }) => {
5-
65
// Format the date to a shorter format: Month Day, Year
76
const formattedDate = new Date(date).toLocaleDateString('en-US', {
87
month: 'short',

‎src/components/Sidebar.js‎

Lines changed: 51 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
1-
21
import React, { useState, useEffect } from 'react';
32

43
import { NavLink, Link, useLocation } from 'react-router-dom';
54

65
import { motion } from 'framer-motion';
76

8-
import { House, User, BookOpen, Wrench, Article, CaretDown, GameController, List, GithubLogo } from '@phosphor-icons/react';
7+
import { House, User, BookOpen, Wrench, Article, CaretDown, GameControllerIcon, List, GithubLogo, GlobeSimple, ArrowSquareOutIcon } from '@phosphor-icons/react';
98

109
import Fez from './Fez';
1110

1211
import { version } from '../version';
1312

14-
15-
1613
const Sidebar = ({ isOpen, toggleSidebar }) => {
17-
1814
const [isMainOpen, setIsMainOpen] = useState(true);
1915
const [isContentOpen, setIsContentOpen] = useState(true);
20-
const [isGamesOpen, setIsGamesOpen] = useState(true);
21-
const [isExternalLinksOpen, setIsExternalLinksOpen] = useState(true);
16+
const [isGamesOpen, setIsGamesOpen] = useState(false);
17+
const [isExternalLinksOpen, setIsExternalLinksOpen] = useState(false);
2218
const [allSectionsOpen, setAllSectionsOpen] = useState(true); // New state for collapse all
2319

2420
const location = useLocation();
@@ -37,42 +33,22 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
3733
setIsExternalLinksOpen(newState);
3834
};
3935

40-
41-
4236
const getLinkClass = ({ isActive }) =>
4337

44-
45-
4638
`flex items-center space-x-3 px-3 py-1 rounded-md transition-colors ${
4739
48-
49-
5040
isActive
5141
52-
53-
5442
? 'text-primary-400 bg-gray-800 font-bold'
5543
56-
57-
5844
: 'text-gray-300 hover:text-white hover:bg-gray-800'
5945
60-
61-
6246
}`;
6347

64-
65-
66-
67-
68-
69-
7048
const isMainActive = location.pathname === '/' || location.pathname === '/about';
7149

7250
const isContentActive = location.pathname.startsWith('/blog') || location.pathname.startsWith('/projects') || location.pathname.startsWith('/logs');
7351

74-
75-
7652
const variants = {
7753

7854
open: { x: 0 },
@@ -81,8 +57,6 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
8157

8258
};
8359

84-
85-
8660
return (
8761

8862
<>
@@ -97,8 +71,6 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
9771

9872
></div>
9973

100-
101-
10274
{/* Sidebar */}
10375

10476
<motion.aside
@@ -138,19 +110,19 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
138110

139111
onClick={() => setIsMainOpen(!isMainOpen)}
140112

141-
className={`flex items-center justify-between w-full text-sm font-semibold uppercase tracking-wider mb-4 focus:outline-none ${
113+
className={`flex items-center justify-between w-full text-sm font-normal uppercase tracking-wider mb-4 focus:outline-none ${
142114
143115
isMainActive ? 'text-red-400' : 'text-gray-300'
144116
145117
}`}
146118

147119
>
148120

149-
<span>Main</span>
121+
<span className="font-arvo">Main</span>
150122

151-
<CaretDown size={20} className={`transition-transform ${isMainOpen ? 'transform rotate-180' : ''}`} />
123+
<CaretDown size={20} className={`transition-transform ${isMainOpen ? 'transform rotate-180' : ''}`} />
152124

153-
</button>
125+
</button>
154126

155127
{isMainOpen && (
156128

@@ -184,19 +156,19 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
184156

185157
onClick={() => setIsContentOpen(!isContentOpen)}
186158

187-
className={`flex items-center justify-between w-full text-sm font-semibold uppercase tracking-wider mb-4 focus:outline-none ${
159+
className={`flex items-center justify-between w-full text-sm font-normal uppercase tracking-wider mb-4 focus:outline-none ${
188160
189161
isContentActive ? 'text-red-400' : 'text-gray-300'
190162
191163
}`}
192164

193165
>
194166

195-
<span>Content</span>
167+
<span className="font-arvo">Content</span>
196168

197-
<CaretDown size={20} className={`transition-transform ${isContentOpen ? 'transform rotate-180' : ''}`} />
169+
<CaretDown size={20} className={`transition-transform ${isContentOpen ? 'transform rotate-180' : ''}`} />
198170

199-
</button>
171+
</button>
200172

201173
{isContentOpen && (
202174

@@ -234,35 +206,47 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
234206

235207
<div className="mt-8">
236208

237-
<button
209+
<button
210+
211+
onClick={() => setIsGamesOpen(!isGamesOpen)}
212+
213+
className={`flex items-center justify-between w-full text-sm font-normal uppercase tracking-wider mb-4 focus:outline-none ${isGamesOpen ? 'text-gray-300' : 'text-gray-300'}`}
214+
215+
>
216+
<span className="flex items-center gap-2 font-arvo">
217+
218+
<span>Games</span>
219+
220+
<ArrowSquareOutIcon size={16} />
221+
222+
</span>
223+
224+
<CaretDown size={20} className={`transition-transform ${isGamesOpen ? 'transform rotate-180' : ''}`} />
225+
226+
</button>
227+
{isGamesOpen && (
238228

239-
onClick={() => setIsGamesOpen(!isGamesOpen)}
229+
<nav className="space-y-2 border-l-2 border-gray-700 ml-3 pl-3">
240230

241-
className={`flex items-center justify-between w-full text-sm font-semibold uppercase tracking-wider mb-4 focus:outline-none ${isGamesOpen ? 'text-gray-300' : 'text-gray-300'}`}
231+
<a href="https://www.nytimes.com/games/wordle/index.html" target="_blank" rel="noopener noreferrer" className={`flex items-center space-x-3 px-3 py-1 rounded-md transition-colors text-gray-300 hover:text-white hover:bg-gray-800`}>
242232

243-
>
233+
<GameControllerIcon size={24} />
244234

245-
<span>Games</span>
235+
<span>Wordle</span>
246236

247-
<CaretDown size={20} className={`transition-transform ${isGamesOpen ? 'transform rotate-180' : ''}`} />
248-
249-
</button>
250-
251-
{isGamesOpen && (
252-
253-
<nav className="space-y-2 border-l-2 border-gray-700 ml-3 pl-3">
237+
</a>
254238

255-
<a href="https://www.nytimes.com/games/wordle/index.html" target="_blank" rel="noopener noreferrer" className={`flex items-center space-x-3 px-3 py-1 rounded-md transition-colors text-gray-300 hover:text-white hover:bg-gray-800`}>
239+
<a href="https://openfront.io" target="_blank" rel="noopener noreferrer" className={`flex items-center space-x-3 px-3 py-1 rounded-md transition-colors text-gray-300 hover:text-white hover:bg-gray-800`}>
256240

257-
<GameController size={24} />
241+
<GlobeSimple size={24} />
258242

259-
<span>Play Wordle</span>
243+
<span>Openfront.io</span>
260244

261-
</a>
245+
</a>
262246

263-
</nav>
247+
</nav>
264248

265-
)}
249+
)}
266250

267251
</div>
268252

@@ -272,11 +256,14 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
272256

273257
onClick={() => setIsExternalLinksOpen(!isExternalLinksOpen)}
274258

275-
className={`flex items-center justify-between w-full text-sm font-semibold uppercase tracking-wider mb-4 focus:outline-none ${isExternalLinksOpen ? 'text-gray-300' : 'text-gray-300'}`}
259+
className={`flex items-center justify-between w-full text-sm font-normal uppercase tracking-wider mb-4 focus:outline-none ${isExternalLinksOpen ? 'text-gray-300' : 'text-gray-300'}`}
276260

277261
>
278262

279-
<span>External Links</span>
263+
<span className="flex items-center gap-2 font-arvo">
264+
<span>External Links</span>
265+
<ArrowSquareOutIcon size={16} />
266+
</span>
280267

281268
<CaretDown size={20} className={`transition-transform ${isExternalLinksOpen ? 'transform rotate-180' : ''}`} />
282269

@@ -302,7 +289,7 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
302289

303290
</div>
304291

305-
<div className="p-4 text-xs text-gray-500">
292+
<div className="p-4 text-xs text-gray-500 text-left">
306293
<button
307294
onClick={toggleAllSections}
308295
className="flex items-center justify-center w-full text-sm font-medium uppercase tracking-wider mb-4 focus:outline-none bg-gray-700 text-white hover:bg-gray-600 rounded-md p-2"
@@ -320,22 +307,17 @@ const Sidebar = ({ isOpen, toggleSidebar }) => {
320307

321308
</div>
322309

323-
<p className="mt-4">&copy; {new Date().getFullYear()} fezcode</p>
324-
325-
<p>Version {version}</p>
326-
310+
<div className="flex justify-between items-center mt-4">
311+
<p>&copy; {new Date().getFullYear()} fezcode</p>
312+
<p>Version {version}</p>
313+
</div>
327314
</div>
328315

329316
</motion.aside>
330317

331318
</>
332319

333320
);
334-
335321
};
336322

337-
338-
339323
export default Sidebar;
340-
341-

‎src/components/ToastProvider.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import React, { createContext, useState, useCallback } from 'react';
32
import Toast from './Toast';
43

@@ -24,7 +23,6 @@ export const ToastProvider = ({ children }) => {
2423
setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
2524
}, []);
2625

27-
2826
return (
2927
<ToastContext.Provider value={{ addToast, removeToast }}>
3028
{children}

‎src/config/fonts.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
arvo: ['Arvo', 'serif'],
3+
playfairDisplay: ['Playfair Display', 'serif'],
4+
};

‎src/hooks/useToast.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
import { useContext } from 'react';
32
import { ToastContext } from '../components/ToastProvider';
43

0 commit comments

Comments
 (0)