Skip to content

Commit 6f0e3b7

Browse files
fezcodefezcode
committed
v1
1 parent 104fd70 commit 6f0e3b7

File tree

10 files changed

+192
-43
lines changed

10 files changed

+192
-43
lines changed

‎.idea/git_toolbox_prj.xml‎

Lines changed: 15 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" class="dark">
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
@@ -26,7 +26,7 @@
2626
-->
2727
<title>React App</title>
2828
</head>
29-
<body>
29+
<body class="bg-gray-900">
3030
<noscript>You need to enable JavaScript to run this app.</noscript>
3131
<div id="root"></div>
3232
<!--

‎src/components/Footer.js‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,39 @@
11
import React from 'react';
2+
import { Link } from 'react-router-dom';
23

34
const Footer = () => {
45
return (
5-
<footer className="bg-gray-800 p-4 mt-8">
6-
<div className="container mx-auto text-center text-gray-300">
7-
&copy; {new Date().getFullYear()} My Blog. All Rights Reserved.
6+
<footer className="mt-16 sm:mt-24">
7+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
8+
<div className="border-t border-gray-700/50 py-12">
9+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
10+
<div>
11+
<h3 className="text-lg font-semibold text-white">Newsletter</h3>
12+
<p className="mt-4 text-sm text-gray-400">Subscribe to our newsletter to get the latest updates straight to your inbox.</p>
13+
<form className="mt-4 flex gap-2">
14+
<input type="email" placeholder="Enter your email" className="bg-gray-800 text-white px-4 py-2 rounded-md w-full" />
15+
<button type="submit" className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md transition-colors">Subscribe</button>
16+
</form>
17+
</div>
18+
<div className="md:text-right">
19+
<h3 className="text-lg font-semibold text-white">Follow Us</h3>
20+
<div className="mt-4 flex md:justify-end gap-4">
21+
<a href="#" className="text-gray-400 hover:text-white transition-colors">Twitter</a>
22+
<a href="#" className="text-gray-400 hover:text-white transition-colors">GitHub</a>
23+
<a href="#" className="text-gray-400 hover:text-white transition-colors">LinkedIn</a>
24+
</div>
25+
</div>
26+
</div>
27+
<div className="mt-8 border-t border-gray-700/50 pt-8 flex flex-wrap items-center justify-between gap-4">
28+
<div className="flex flex-wrap items-center gap-6 text-sm font-medium text-gray-400">
29+
<Link to="/" className="hover:text-white transition-colors">Home</Link>
30+
<Link to="/blog" className="hover:text-white transition-colors">Blog</Link>
31+
</div>
32+
<p className="text-sm text-gray-500">
33+
&copy; {new Date().getFullYear()} My Awesome Blog. All rights reserved.
34+
</p>
35+
</div>
36+
</div>
837
</div>
938
</footer>
1039
);

‎src/components/Layout.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import Footer from './Footer';
44

55
const Layout = ({ children }) => {
66
return (
7-
<div className="flex flex-col min-h-screen">
7+
<div className="bg-gray-900 text-white min-h-screen">
88
<Navbar />
9-
<main className="flex-grow container mx-auto px-4 py-8">
9+
<main className="flex-grow">
1010
{children}
1111
</main>
1212
<Footer />

‎src/components/Navbar.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,20 @@ import { Link } from 'react-router-dom';
33

44
const Navbar = () => {
55
return (
6-
<nav className="bg-gray-800 p-4">
7-
<div className="container mx-auto flex justify-between items-center">
8-
<Link to="/" className="text-white text-2xl font-bold">My Blog</Link>
9-
<div>
10-
<Link to="/" className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</Link>
11-
<Link to="/blog" className="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Blog</Link>
6+
<header className="bg-gray-900/80 backdrop-blur-sm sticky top-0 z-40">
7+
<div className="container mx-auto flex justify-between items-center p-4 text-white">
8+
<Link to="/" className="text-2xl font-bold tracking-tight">
9+
My Awesome Blog
10+
</Link>
11+
<div className="flex items-center space-x-6">
12+
<Link to="/" className="text-sm font-medium hover:text-gray-300 transition-colors">Home</Link>
13+
<Link to="/blog" className="text-sm font-medium hover:text-gray-300 transition-colors">Blog</Link>
14+
<button className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition-colors">
15+
Play Latest
16+
</button>
1217
</div>
1318
</div>
14-
</nav>
19+
</header>
1520
);
1621
};
1722

‎src/components/PostItem.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { Link } from 'react-router-dom';
3+
4+
const PostItem = ({ slug }) => {
5+
const title = slug.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
6+
const date = 'October 15, 2025'; // Placeholder date
7+
8+
return (
9+
<article className="py-8 border-b border-gray-700">
10+
<div className="flex items-center">
11+
<p className="text-sm text-gray-400">{date}</p>
12+
<div className="ml-4 flex-grow flex items-center">
13+
<h2 className="text-xl font-bold">
14+
<Link to={`/blog/${slug}`} className="text-white hover:text-blue-400 transition-colors">
15+
{title}
16+
</Link>
17+
</h2>
18+
</div>
19+
<Link to={`/blog/${slug}`} className="ml-4 flex-shrink-0 text-sm font-medium text-blue-400 hover:text-blue-500 transition-colors">
20+
Read post &rarr;
21+
</Link>
22+
</div>
23+
</article>
24+
);
25+
};
26+
27+
export default PostItem;

‎src/pages/BlogPage.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from 'react';
2-
import { Link } from 'react-router-dom';
2+
import PostItem from '../components/PostItem';
33

44
const BlogPage = () => {
55
const [posts, setPosts] = useState([]);
@@ -11,21 +11,23 @@ const BlogPage = () => {
1111
}, []);
1212

1313
return (
14-
<div>
15-
<h1 className="text-3xl font-bold mb-8">Blog Posts</h1>
16-
<div className="grid gap-8">
17-
{posts.map(slug => (
18-
<div key={slug} className="bg-white p-6 rounded-lg shadow-md">
19-
<h2 className="text-2xl font-bold mb-2">
20-
<Link to={`/blog/${slug}`} className="text-blue-500 hover:underline">
21-
{slug.replace(/-/g, ' ')}
22-
</Link>
23-
</h2>
24-
<p className="text-gray-600">
25-
This is a short excerpt of the blog post...
26-
</p>
14+
<div className="py-16 sm:py-24">
15+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
16+
<div className="mx-auto max-w-2xl text-center">
17+
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
18+
From the Blog
19+
</h1>
20+
<p className="mt-6 text-lg leading-8 text-gray-300">
21+
Catch up on the latest news and insights.
22+
</p>
23+
</div>
24+
<div className="mt-16">
25+
<div className="divide-y divide-gray-700">
26+
{posts.map(slug => (
27+
<PostItem key={slug} slug={slug} />
28+
))}
2729
</div>
28-
))}
30+
</div>
2931
</div>
3032
</div>
3133
);

‎src/pages/BlogPostPage.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useEffect } from 'react';
2-
import { useParams } from 'react-router-dom';
2+
import { useParams, Link } from 'react-router-dom';
33
import ReactMarkdown from 'react-markdown';
44

55
const BlogPostPage = () => {
@@ -26,8 +26,15 @@ const BlogPostPage = () => {
2626
}, [slug]);
2727

2828
return (
29-
<div className="prose lg:prose-xl mx-auto">
30-
<ReactMarkdown>{markdown}</ReactMarkdown>
29+
<div className="bg-gray-900 py-16 sm:py-24">
30+
<div className="mx-auto max-w-3xl px-6 lg:px-8">
31+
<Link to="/blog" className="text-blue-400 hover:text-blue-500 transition-colors mb-8 block">
32+
&larr; Back to Blog
33+
</Link>
34+
<div className="prose prose-xl prose-dark max-w-none">
35+
<ReactMarkdown>{markdown}</ReactMarkdown>
36+
</div>
37+
</div>
3138
</div>
3239
);
3340
};

‎src/pages/HomePage.js‎

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,34 @@
1-
import React from 'react';
2-
import { Link } from 'react-router-dom';
1+
import React, { useState, useEffect } from 'react';
2+
import PostItem from '../components/PostItem';
33

44
const HomePage = () => {
5+
const [posts, setPosts] = useState([]);
6+
7+
useEffect(() => {
8+
// In a real app, you'd fetch this from a CMS or API
9+
const postSlugs = ['first-post', 'second-post'];
10+
setPosts(postSlugs);
11+
}, []);
12+
513
return (
6-
<div className="text-center">
7-
<h1 className="text-4xl font-bold mb-4">Welcome to My Blog</h1>
8-
<p className="text-lg mb-8">
9-
This is my personal blog where I share my thoughts on web development, technology, and more.
10-
</p>
11-
<Link to="/blog" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
12-
Go to Blog
13-
</Link>
14+
<div className="py-16 sm:py-24">
15+
<div className="mx-auto max-w-7xl px-6 lg:px-8">
16+
<div className="mx-auto max-w-2xl text-center">
17+
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
18+
Welcome to My Awesome Blog
19+
</h1>
20+
<p className="mt-6 text-lg leading-8 text-gray-300">
21+
Exploring the world of code, one post at a time.
22+
</p>
23+
</div>
24+
<div className="mt-16">
25+
<div className="divide-y divide-gray-700">
26+
{posts.map(slug => (
27+
<PostItem key={slug} slug={slug} />
28+
))}
29+
</div>
30+
</div>
31+
</div>
1432
</div>
1533
);
1634
};

‎tailwind.config.js‎

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,56 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
3+
darkMode: 'class',
34
content: [
45
"./src/**/*.{js,jsx,ts,tsx}",
56
],
67
theme: {
7-
extend: {},
8+
extend: {
9+
typography: (theme) => ({
10+
dark: {
11+
css: {
12+
color: theme('colors.gray.300'),
13+
a: {
14+
color: theme('colors.blue.400'),
15+
'&:hover': {
16+
color: theme('colors.blue.600'),
17+
},
18+
},
19+
20+
h1: {
21+
color: theme('colors.gray.100'),
22+
},
23+
h2: {
24+
color: theme('colors.gray.100'),
25+
},
26+
h3: {
27+
color: theme('colors.gray.100'),
28+
},
29+
h4: {
30+
color: theme('colors.gray.100'),
31+
},
32+
h5: {
33+
color: theme('colors.gray.100'),
34+
},
35+
h6: {
36+
color: theme('colors.gray.100'),
37+
},
38+
39+
strong: {
40+
color: theme('colors.gray.100'),
41+
},
42+
43+
code: {
44+
color: theme('colors.gray.100'),
45+
},
46+
47+
figcaption: {
48+
color: theme('colors.gray.500'),
49+
},
50+
},
51+
},
52+
}),
53+
},
854
},
955
plugins: [
1056
require('@tailwindcss/typography'),

0 commit comments

Comments
 (0)