Skip to content

Commit cf0f6fe

Browse files
fezcodefezcode
committed
notebook 3
1 parent f5875d0 commit cf0f6fe

File tree

3 files changed

+88
-16
lines changed

3 files changed

+88
-16
lines changed

‎src/pages/notebooks/NotebookCover.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@ import React from 'react';
22

33
const NotebookCover = ({ title }) => {
44
return (
5-
<div className="w-full h-64 bg-[#d2b48c] rounded-lg shadow-md flex items-center justify-center p-4">
6-
<h2 className="text-white text-xl font-bold text-center">{title}</h2>
5+
<div className="relative w-full pb-[141.4%] bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden hover:shadow-xl hover:scale-105 transition-all duration-300">
6+
<div className="absolute inset-0 p-4"> {/* Added padding here to create space for the inner border */}
7+
<div className="w-full h-full border-2 border-gray-300 flex items-center justify-center p-2"> {/* Inner border div */}
8+
<h2 className="text-gray-800 text-xl font-bold text-center font-playfairDisplay">{title}</h2>
9+
</div>
10+
</div>
711
</div>
812
);
913
};

‎src/pages/notebooks/NotebooksPage.js‎

Lines changed: 72 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,89 @@
11
import React, { useState, useEffect } from 'react';
22
import { Link } from 'react-router-dom';
33
import NotebookCover from "./NotebookCover";
4+
import useSeo from '../../hooks/useSeo';
5+
import { ArrowLeftIcon } from '@phosphor-icons/react';
46

57
const NotebooksPage = () => {
8+
useSeo({
9+
title: 'Notebooks | Fezcodex',
10+
description: 'Explore a collection of my personal notebooks and thoughts.',
11+
keywords: ['Fezcodex', 'notebooks', 'thoughts', 'journal'],
12+
ogTitle: 'Notebooks | Fezcodex',
13+
ogDescription: 'Explore a collection of my personal notebooks and thoughts.',
14+
ogImage: 'https://fezcode.github.io/logo512.png',
15+
twitterCard: 'summary_large_image',
16+
twitterTitle: 'Notebooks | Fezcodex',
17+
twitterDescription: 'Explore a collection of my personal notebooks and thoughts.',
18+
twitterImage: 'https://fezcode.github.io/logo512.png'
19+
});
20+
621
const [notebooks, setNotebooks] = useState([]);
22+
const [loading, setLoading] = useState(true);
723

824
useEffect(() => {
925
fetch('/notebooks/notebooks.json')
1026
.then(response => response.json())
11-
.then(data => setNotebooks(data))
12-
.catch(error => console.error('Error fetching notebooks:', error));
27+
.then(data => {
28+
setNotebooks(data);
29+
setLoading(false);
30+
})
31+
.catch(error => {
32+
console.error('Error fetching notebooks:', error);
33+
setLoading(false);
34+
});
1335
}, []);
1436

37+
if (loading) {
38+
return (
39+
<div className="py-16 sm:py-24 animate-pulse">
40+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
41+
<div className="mx-auto max-w-2xl text-center">
42+
<div className="h-8 bg-gray-800 rounded w-1/4 mb-4 mx-auto"></div>
43+
<div className="h-12 bg-gray-800 rounded w-3/4 mb-4 mx-auto"></div>
44+
<div className="h-6 bg-gray-800 rounded w-1/2 mb-8 mx-auto"></div>
45+
</div>
46+
<div className="mt-16 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
47+
{[...Array(4)].map((_, i) => (
48+
<div key={i} className="bg-gray-800 rounded-lg shadow-lg p-6 h-64"></div>
49+
))}
50+
</div>
51+
</div>
52+
</div>
53+
);
54+
}
55+
1556
return (
16-
<div className="p-4">
17-
<h1 className="text-2xl font-bold mb-4">Notebooks</h1>
18-
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
19-
{notebooks.map(notebook => (
20-
<Link key={notebook.id} to={`/notebooks/${notebook.id}`}>
21-
<NotebookCover title={notebook.title} />
57+
<div className="py-16 sm:py-24">
58+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
59+
<div className="mx-auto max-w-2xl text-center">
60+
<Link
61+
to="/"
62+
className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"
63+
>
64+
<ArrowLeftIcon className="text-xl" /> Back to Home
2265
</Link>
23-
))}
66+
<h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl">
67+
My <span style={{ color: 'var(--fzcdx-spanner)' }}>Notebooks</span>
68+
</h1>
69+
<p className="mt-6 text-lg leading-8 text-gray-300">
70+
A collection of my thoughts, notes, and explorations.
71+
</p>
72+
<div className="mt-4 text-center">
73+
<span className="ml-2 px-3 py-1 text-base font-medium text-gray-200 bg-gray-800 rounded-full">
74+
Total: {notebooks.length}
75+
</span>
76+
</div>
77+
</div>
78+
<div className="mt-16">
79+
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
80+
{notebooks.map(notebook => (
81+
<Link key={notebook.id} to={`/notebooks/${notebook.id}`}>
82+
<NotebookCover title={notebook.title} />
83+
</Link>
84+
))}
85+
</div>
86+
</div>
2487
</div>
2588
</div>
2689
);

‎src/styles/notebook.css‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.notebook-container {
44
width: 100%;
5-
height: 100vh;
5+
height: 95vh;
66
display: flex;
77
justify-content: center;
88
align-items: center;
@@ -45,6 +45,7 @@
4545
}
4646

4747
.page-content {
48+
margin: 10px;
4849
flex-grow: 1;
4950
font-size: 1.2vw;
5051
line-height: 1.6;
@@ -145,7 +146,7 @@
145146

146147
.slider-container {
147148
position: absolute;
148-
bottom: 4rem;
149+
bottom: 2rem;
149150
left: 50%;
150151
transform: translateX(-50%);
151152
width: 50%;
@@ -210,9 +211,9 @@
210211
width: 80%;
211212
}
212213

213-
.page-content {
214-
font-size: 1.2rem;
215-
}
214+
.page-content {
215+
font-size: 1.2rem;
216+
}
216217
}
217218

218219
@media (min-width: 1280px) {
@@ -221,4 +222,8 @@
221222
height: calc(min(80vw, 80vh * 1.414) / 1.414);
222223
}
223224

225+
.page-content {
226+
font-size: 1.1rem;
227+
}
228+
224229
}

0 commit comments

Comments
 (0)