Blog_php/index.php at main · a-zahi2002/Blog_php · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<?php
// Load all article files
$articles = [];
$files = glob("articles/article_*.json");
foreach ($files as $file) {
    $data = json_decode(file_get_contents($file), true);
    if ($data) {
        $articles[] = $data;
    }
}

// Sort newest first
usort($articles, function ($a, $b) {
    return strtotime($b['date']) - strtotime($a['date']);
});
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100">

    <!-- Header -->
    <header class="bg-white shadow p-4 flex justify-between items-center">
        <h1 class="text-2xl font-bold text-green-700">📚 My Blog</h1>
        <a href="add_article.php" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition">+ Add New Article</a>
    </header>

    <!-- Articles -->
    <main class="max-w-6xl mx-auto p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <?php if (count($articles) === 0): ?>
            <p class="col-span-3 text-center text-gray-500">No articles yet. Add one!</p>
        <?php endif; ?>

        <?php foreach ($articles as $article): ?>
            <div class="bg-white rounded shadow hover:shadow-lg transition overflow-hidden">
                <a href="article.php?id=<?= $article['id'] ?>">
                    <img src="<?= htmlspecialchars($article['image']) ?>" alt="Article image" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h2 class="text-xl font-bold text-gray-800"><?= htmlspecialchars($article['title']) ?></h2>
                        <p class="text-sm text-gray-500 mb-2">By <?= htmlspecialchars($article['author']) ?> on <?= htmlspecialchars($article['date']) ?></p>
                        <p class="text-gray-700 mb-3"><?= nl2br(htmlspecialchars(substr($article['content'], 0, 150))) ?>...</p>
                        <span class="text-green-700 font-semibold hover:underline">Read More</span>
                    </div>
                </a>

                <!-- Edit button (visible under each tile) -->
                <div class="p-4 pt-0">
                    <a href="add_article.php?edit=<?= $article['id'] ?>" class="text-sm text-blue-600 hover:underline">✏️ Edit</a>
                </div>
            </div>
        <?php endforeach; ?>
    </main>

    <!-- Footer -->
    <footer class="text-center text-sm text-gray-400 mt-10 mb-4">
        &copy; <?= date('Y') ?> My Blog. All rights reserved.
    </footer>

</body>

</html>