Dynamic CMS 🛠️

An overview of the technical implementation for the automated sorting and tagging system based on metadata and user interactions. 🚀

Like Integration (JSON & PHP) 📊

Interaction data is retrieved from a central likes.json file. PHP verifies the current like count for each individual post upon loading the archive page. 📁

// Reading likes from JSON file
$likes_data = json_decode(file_get_contents('../admin/likes.json'), true);

// Assigning likes to each post
foreach ($all_posts as &$post) {
    $url = "https://dervic.blog/blog/" . $post['filename'];
    $post['likes'] = isset($likes_data['pages'][$url]) ? (int)$likes_data['pages'][$url] : 0;
}

Custom Sorting Logic (usort) ⚡

The system allows for dynamic switching between chronological listing and popularity-based listing using the URL parameter ?sort=liked. 🔄

$isLikedSort = (isset($_GET['sort']) && $_GET['sort'] === 'liked');

usort($all_posts, function($a, $b) {
    if ($GLOBALS['isLikedSort']) {
        // Primary by likes, secondary by year
        if ($a['likes'] !== $b['likes']) return $b['likes'] <=> $a['likes'];
        return $b['year'] <=> $a['year'];
    }
    // Default by timestamp
    return $b['timestamp'] <=> $a['timestamp'];
});

Automated Tagging System (JavaScript) 🧠

Instead of manual tag entry, the system utilizes a keywordMap to analyze titles. A safety net is included to categorize unrecognized posts as General. 🕸️

const keywordMap = {
    'game': 'Game Dev',
    'logic': 'Engineering',
    'ai': 'AI',
    'php': 'PHP'
};

posts.forEach(post => {
    let postTags = [];
    for (let key in keywordMap) {
        if (titleText.includes(key)) {
            postTags.push(keywordMap[key]);
        }
    }
    // Safety net
    if (postTags.length === 0) postTags.push("General");
});

Dynamic UI Updates 🎯

To ensure a seamless user experience, the page title (H1) is updated on the client-side. This prevents static errors in counting filtered elements and ensures the interface matches the active view. ✨

const total = document.querySelectorAll('.post-item').length;
const heading = isLikedSort ? `${total} Most Liked Posts` : `${total} Latest Blog Posts`;
document.querySelector('.common-heading').textContent = heading;