Add post page

src/assets/css/blog.css

@@ -1,3 +1,7 @@
+.ui.card > .image {
+    overflow: hidden;
+}
+
 .ui.card > .image img {
     display: block;
 

src/assets/css/post.css

@@ -0,0 +1,15 @@
+.ui.fitted.segment.image {
+    width: 100%;
+    height: 40vh;
+
+    overflow: hidden;
+}
+
+.ui.fitted.segment.image img {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    object-fit: cover;
+    object-position: center;
+}

src/classes/blog.php

@@ -9,6 +9,7 @@ namespace wishthis;
 class Blog
 {
     private const ENDPOINT_BASE       = 'https://wishthis.online/src/blog/wp-json/wp/v2';
+    private const ENDPOINT_POST       = self::ENDPOINT_BASE . '/posts/%d';
     private const ENDPOINT_POSTS      = self::ENDPOINT_BASE . '/posts';
     private const ENDPOINT_MEDIA      = self::ENDPOINT_BASE . '/media/%d';
     private const ENDPOINT_CATEGORIES = self::ENDPOINT_BASE . '/categories/%d';
@@ -25,6 +26,13 @@ class Blog
         return $response;
     }
 
+    public static function getPost(int $postID): \stdClass
+    {
+        $post = self::get(sprintf(self::ENDPOINT_POST, $postID));
+
+        return $post;
+    }
+
     public static function getPosts(): array
     {
         $posts = self::get(self::ENDPOINT_POSTS);

src/pages/blog.php

@@ -32,16 +32,19 @@ $posts = Blog::getPosts();
                 );
                 $mediaHTML      = isset($post->featured_media) ? Blog::getMediaHTML($post->featured_media) : '';
                 $categoriesHTML = Blog::getCategoriesHTML($post->categories);
+                $postLink       = '/?page=post&id=' . $post->id;
                 ?>
                 <div class="column">
                     <div class="ui fluid card stretch">
-                        <div class="image"><?= $mediaHTML ?></div>
+                        <div class="image"><a href="<?= $postLink ?>"><?= $mediaHTML ?></a></div>
                         <div class="content">
                             <div class="header"><?= $post->title->rendered ?></div>
                             <div class="meta">
                                 <a><?= $categoriesHTML ?></a>
                             </div>
                             <div class="description"><?= $post->excerpt->rendered ?></div>
+
+                            <a href="<?= $postLink ?>"><?= __('Read more') ?></a>
                         </div>
                         <div class="extra content">
                             <span class="right floated"><?= $dateFormatter->format(strtotime($post->date)) ?></span>

src/pages/post.php

@@ -0,0 +1,42 @@
+<?php
+
+/**
+ * post.php
+ *
+ * @author Jay Trees <github.jay@grandel.anonaddy.me>
+ */
+
+namespace wishthis;
+
+$postID        = $_SESSION['_GET']['id'];
+$post          = Blog::getPost($postID);
+$postMediaHTML = isset($post->featured_media) ? Blog::getMediaHTML($post->featured_media) : '';
+
+$page = new Page(__FILE__, 'Post');
+$page->header();
+$page->bodyStart();
+$page->navigation();
+?>
+
+<main>
+    <div class="ui text container">
+        <h1 class="ui header"><?= $page->title ?></h1>
+
+        <div class="ui segments">
+            <div class="ui fitted segment image">
+                <?= $postMediaHTML ?>
+            </div>
+
+           <div class="ui segment">
+                <h2 class="ui header"><?= $post->title->rendered ?></h2>
+
+                <div><?= $post->content->rendered ?></div>
+            </div>
+        </div>
+    </div>
+</main>
+
+<?php
+$page->footer();
+$page->bodyEnd();
+?>