@jhits/plugin-blog 0.0.5 → 0.0.7

package/src/views/CanvasEditor/hooks/usePostLoader.ts

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+import { apiToBlogPost, type APIBlogDocument } from '../../../lib/mappers/apiMapper';
+import type { BlogPost } from '../../../types/post';
+
+export function usePostLoader(
+    postId: string | undefined,
+    currentPostId: string | null,
+    loadPost: (post: BlogPost) => void,
+    resetHeroBlock: () => void
+) {
+    const [isLoadingPost, setIsLoadingPost] = useState(false);
+
+    useEffect(() => {
+        if (postId && !currentPostId) {
+            const loadPostData = async () => {
+                try {
+                    setIsLoadingPost(true);
+                    // Reset hero block before loading new post so it gets re-initialized from the new post's blocks
+                    resetHeroBlock();
+                    const response = await fetch(`/api/plugin-blog/${postId}`);
+                    if (!response.ok) {
+                        throw new Error('Failed to load post');
+                    }
+                    const apiDoc: APIBlogDocument = await response.json();
+                    const blogPost = apiToBlogPost(apiDoc);
+                    loadPost(blogPost);
+                } catch (error) {
+                    console.error('Failed to load post:', error);
+                    alert('Failed to load post. Please try again.');
+                } finally {
+                    setIsLoadingPost(false);
+                }
+            };
+            loadPostData();
+        }
+    }, [postId, currentPostId, loadPost, resetHeroBlock]);
+
+    return { isLoadingPost };
+}

package/src/views/CanvasEditor/hooks/useRegisteredBlocks.ts

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { blockRegistry } from '../../../registry/BlockRegistry';
+
+export function useRegisteredBlocks() {
+    const [registeredBlocks, setRegisteredBlocks] = useState(() => {
+        const initial = blockRegistry.getAll();
+        return initial;
+    });
+
+    // Watch for registry changes and update state
+    useEffect(() => {
+        // Check immediately
+        const checkBlocks = () => {
+            const currentBlocks = blockRegistry.getAll();
+            const hasChanged = currentBlocks.length !== registeredBlocks.length ||
+                currentBlocks.some((b, i) => b.type !== registeredBlocks[i]?.type) ||
+                registeredBlocks.some((b, i) => b.type !== currentBlocks[i]?.type);
+
+            if (hasChanged) {
+                setRegisteredBlocks([...currentBlocks]);
+            }
+        };
+
+        // Initial check
+        checkBlocks();
+
+        // Poll for registry changes (blocks are registered asynchronously in useEffect)
+        // Use a shorter interval initially, then longer
+        let pollCount = 0;
+        const interval = setInterval(() => {
+            pollCount++;
+            checkBlocks();
+            // Stop polling after 5 seconds (25 checks at 200ms)
+            if (pollCount > 25) {
+                clearInterval(interval);
+            }
+        }, 200);
+
+        // Also check after delays to catch initial registrations
+        const timeouts = [
+            setTimeout(checkBlocks, 50),
+            setTimeout(checkBlocks, 100),
+            setTimeout(checkBlocks, 300),
+            setTimeout(checkBlocks, 500),
+            setTimeout(checkBlocks, 1000),
+        ];
+
+        return () => {
+            clearInterval(interval);
+            timeouts.forEach(clearTimeout);
+        };
+    }, [registeredBlocks.length]);
+
+    return registeredBlocks;
+}

package/src/views/CanvasEditor/hooks/useUnsavedChanges.ts

@@ -0,0 +1,339 @@
+/**
+ * Hook for managing unsaved changes warnings and auto-save
+ */
+
+'use client';
+
+import { useEffect, useRef, useCallback, useState } from 'react';
+import type { EditorState } from '../../../state/types';
+import type { Block } from '../../../types/block';
+
+interface UseUnsavedChangesOptions {
+    state: EditorState;
+    isDirty: boolean;
+    onSave: (heroBlock?: Block | null) => Promise<void>;
+    heroBlock?: Block | null;
+    autoSaveEnabled?: boolean;
+    autoSaveDelay?: number; // in milliseconds
+    postId?: string | null; // Post ID to detect when a post is loaded
+}
+
+const AUTO_SAVE_STORAGE_KEY = 'blog-editor-autosave-enabled';
+const DEFAULT_AUTO_SAVE_DELAY = 10000; // 10 seconds
+
+/**
+ * Hook to manage unsaved changes warnings and auto-save
+ */
+export function useUnsavedChanges({
+    state,
+    isDirty,
+    onSave,
+    heroBlock,
+    autoSaveEnabled: propAutoSaveEnabled,
+    autoSaveDelay = DEFAULT_AUTO_SAVE_DELAY,
+    postId,
+}: UseUnsavedChangesOptions) {
+    const autoSaveTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const isSavingRef = useRef(false);
+    const lastSavedStateRef = useRef<string>('');
+    const countdownIntervalRef = useRef<NodeJS.Timeout | null>(null);
+    const [countdown, setCountdown] = useState<number | null>(null);
+    const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+    const saveStatusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+    const previousIsDirtyRef = useRef<boolean>(false);
+    const countdownStartTimeRef = useRef<number | null>(null);
+    const performAutoSaveRef = useRef<(() => Promise<void>) | null>(null);
+
+    // Get auto-save preference from localStorage
+    const getAutoSavePreference = useCallback((): boolean => {
+        if (typeof window === 'undefined') return false;
+        try {
+            const stored = localStorage.getItem(AUTO_SAVE_STORAGE_KEY);
+            if (stored !== null) {
+                return stored === 'true';
+            }
+        } catch (error) {
+            console.error('[useUnsavedChanges] Failed to read auto-save preference:', error);
+        }
+        // Default to false if not set
+        return false;
+    }, []);
+
+    // State to track auto-save enabled status (reactive)
+    const [autoSaveEnabledState, setAutoSaveEnabledState] = useState<boolean>(() => {
+        // Initialize from prop or localStorage
+        if (propAutoSaveEnabled !== undefined) {
+            return propAutoSaveEnabled;
+        }
+        return getAutoSavePreference();
+    });
+
+    // Sync with prop changes
+    useEffect(() => {
+        if (propAutoSaveEnabled !== undefined) {
+            setAutoSaveEnabledState(propAutoSaveEnabled);
+        }
+    }, [propAutoSaveEnabled]);
+
+    // Initialize from localStorage on mount (if no prop provided)
+    useEffect(() => {
+        if (propAutoSaveEnabled === undefined && typeof window !== 'undefined') {
+            const stored = getAutoSavePreference();
+            setAutoSaveEnabledState(stored);
+        }
+    }, []); // Only run on mount
+
+    // Set auto-save preference in localStorage and state
+    const setAutoSavePreference = useCallback((enabled: boolean) => {
+        if (typeof window === 'undefined') return;
+        try {
+            localStorage.setItem(AUTO_SAVE_STORAGE_KEY, enabled.toString());
+            setAutoSaveEnabledState(enabled);
+            console.log('[useUnsavedChanges] Auto-save preference updated:', enabled);
+        } catch (error) {
+            console.error('[useUnsavedChanges] Failed to save auto-save preference:', error);
+        }
+    }, []);
+
+    // Determine if auto-save is enabled (prop takes precedence over state)
+    const autoSaveEnabled = propAutoSaveEnabled !== undefined 
+        ? propAutoSaveEnabled 
+        : autoSaveEnabledState;
+
+    // Create a stable reference of the current state for comparison
+    const getStateSnapshot = useCallback(() => {
+        return JSON.stringify({
+            title: state.title,
+            slug: state.slug,
+            blocks: state.blocks,
+            seo: state.seo,
+            metadata: state.metadata,
+            status: state.status,
+        });
+    }, [state]);
+
+    // Initialize lastSavedStateRef when a post is loaded and marked as clean
+    useEffect(() => {
+        // When a post is loaded (postId exists) and isDirty is false, update the saved state reference
+        if (postId && !isDirty && lastSavedStateRef.current === '') {
+            lastSavedStateRef.current = getStateSnapshot();
+            console.log('[useUnsavedChanges] Initialized saved state reference after post load');
+        }
+        // Also update if isDirty becomes false after being true (e.g., after save or MARK_CLEAN)
+        if (!isDirty && lastSavedStateRef.current !== getStateSnapshot()) {
+            lastSavedStateRef.current = getStateSnapshot();
+        }
+    }, [postId, isDirty, getStateSnapshot]);
+
+    // Auto-save function
+    const performAutoSave = useCallback(async () => {
+        if (isSavingRef.current || !isDirty) {
+            return;
+        }
+
+        try {
+            isSavingRef.current = true;
+            setSaveStatus('saving');
+            setCountdown(null);
+            countdownStartTimeRef.current = null;
+            console.log('[useUnsavedChanges] Auto-saving...');
+            await onSave(heroBlock);
+            lastSavedStateRef.current = getStateSnapshot();
+            setSaveStatus('saved');
+            console.log('[useUnsavedChanges] Auto-save completed');
+            
+            // Clear save status after 2 seconds
+            if (saveStatusTimeoutRef.current) {
+                clearTimeout(saveStatusTimeoutRef.current);
+            }
+            saveStatusTimeoutRef.current = setTimeout(() => {
+                setSaveStatus('idle');
+            }, 2000);
+        } catch (error) {
+            console.error('[useUnsavedChanges] Auto-save failed:', error);
+            setSaveStatus('error');
+            // Clear error status after 3 seconds
+            if (saveStatusTimeoutRef.current) {
+                clearTimeout(saveStatusTimeoutRef.current);
+            }
+            saveStatusTimeoutRef.current = setTimeout(() => {
+                setSaveStatus('idle');
+            }, 3000);
+        } finally {
+            isSavingRef.current = false;
+        }
+    }, [isDirty, onSave, heroBlock, getStateSnapshot]);
+
+    // Keep ref updated with latest function
+    useEffect(() => {
+        performAutoSaveRef.current = performAutoSave;
+    }, [performAutoSave]);
+
+    // Set up auto-save timer and countdown when state changes
+    useEffect(() => {
+        // Only reset countdown if isDirty changed from false to true, or if auto-save was just disabled
+        const isDirtyChanged = previousIsDirtyRef.current !== isDirty;
+        const becameDirty = !previousIsDirtyRef.current && isDirty;
+        
+        // Update previous isDirty ref
+        previousIsDirtyRef.current = isDirty;
+
+        // Clear existing countdown interval
+        if (countdownIntervalRef.current) {
+            clearInterval(countdownIntervalRef.current);
+            countdownIntervalRef.current = null;
+        }
+
+        if (!autoSaveEnabled || !isDirty || isSavingRef.current) {
+            setCountdown(null);
+            countdownStartTimeRef.current = null;
+            // Clear timeout if auto-save is disabled or not dirty
+            if (autoSaveTimeoutRef.current) {
+                clearTimeout(autoSaveTimeoutRef.current);
+                autoSaveTimeoutRef.current = null;
+            }
+            return;
+        }
+
+        // Only reset countdown if:
+        // 1. isDirty just became true (new changes)
+        // 2. Or if there's no active countdown
+        const shouldResetCountdown = becameDirty || countdownStartTimeRef.current === null;
+
+        if (shouldResetCountdown) {
+            // Clear existing timeout
+            if (autoSaveTimeoutRef.current) {
+                clearTimeout(autoSaveTimeoutRef.current);
+            }
+
+            // Initialize countdown
+            const secondsRemaining = Math.ceil(autoSaveDelay / 1000);
+            setCountdown(secondsRemaining);
+            countdownStartTimeRef.current = Date.now();
+
+            // Set new timeout for auto-save
+            autoSaveTimeoutRef.current = setTimeout(() => {
+                if (performAutoSaveRef.current) {
+                    performAutoSaveRef.current();
+                }
+            }, autoSaveDelay);
+        } else {
+            // Countdown is already running, just update it based on elapsed time
+            if (countdownStartTimeRef.current && autoSaveTimeoutRef.current) {
+                const elapsed = Date.now() - countdownStartTimeRef.current;
+                const remaining = Math.max(0, autoSaveDelay - elapsed);
+                const secondsRemaining = Math.ceil(remaining / 1000);
+                setCountdown(secondsRemaining);
+            }
+        }
+
+        // Update countdown every second (only if we have an active countdown)
+        if (shouldResetCountdown || countdownIntervalRef.current === null) {
+            countdownIntervalRef.current = setInterval(() => {
+                if (countdownStartTimeRef.current && autoSaveTimeoutRef.current) {
+                    const elapsed = Date.now() - countdownStartTimeRef.current;
+                    const remaining = Math.max(0, autoSaveDelay - elapsed);
+                    const secondsRemaining = Math.ceil(remaining / 1000);
+                    
+                    if (secondsRemaining <= 0) {
+                        setCountdown(null);
+                        if (countdownIntervalRef.current) {
+                            clearInterval(countdownIntervalRef.current);
+                            countdownIntervalRef.current = null;
+                        }
+                    } else {
+                        setCountdown(secondsRemaining);
+                    }
+                }
+            }, 1000);
+        }
+
+        return () => {
+            if (autoSaveTimeoutRef.current) {
+                clearTimeout(autoSaveTimeoutRef.current);
+            }
+            if (countdownIntervalRef.current) {
+                clearInterval(countdownIntervalRef.current);
+            }
+        };
+    }, [autoSaveEnabled, isDirty, autoSaveDelay]);
+
+    // Handle browser beforeunload event (page refresh/close)
+    useEffect(() => {
+        if (!isDirty) {
+            return;
+        }
+
+        const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+            e.preventDefault();
+            // Modern browsers ignore custom messages, but we still need to set returnValue
+            e.returnValue = '';
+            return '';
+        };
+
+        window.addEventListener('beforeunload', handleBeforeUnload);
+
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, [isDirty]);
+
+    // Handle link clicks (for Next.js App Router)
+    useEffect(() => {
+        if (!isDirty) {
+            return;
+        }
+
+        const handleLinkClick = (e: MouseEvent) => {
+            const target = e.target as HTMLElement;
+            const link = target.closest('a');
+            
+            if (link && link.href) {
+                const url = new URL(link.href);
+                const currentPath = window.location.pathname;
+                
+                // Check if navigating away from editor
+                if (!url.pathname.includes('/blog/editor') && !url.pathname.includes('/blog/new')) {
+                    const confirmed = window.confirm(
+                        'You have unsaved changes. Are you sure you want to leave? Your changes will be lost.'
+                    );
+                    
+                    if (!confirmed) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        return false;
+                    }
+                }
+            }
+        };
+
+        // Listen for clicks on links
+        document.addEventListener('click', handleLinkClick, true);
+
+        return () => {
+            document.removeEventListener('click', handleLinkClick, true);
+        };
+    }, [isDirty]);
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (autoSaveTimeoutRef.current) {
+                clearTimeout(autoSaveTimeoutRef.current);
+            }
+            if (countdownIntervalRef.current) {
+                clearInterval(countdownIntervalRef.current);
+            }
+            if (saveStatusTimeoutRef.current) {
+                clearTimeout(saveStatusTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    return {
+        autoSaveEnabled,
+        setAutoSaveEnabled: setAutoSavePreference,
+        countdown,
+        saveStatus,
+    };
+}

package/src/views/PostManager/PostCards.tsx

@@ -129,14 +129,7 @@ export function PostCards({
                             </div>
                         )}
                         {/* Status Badge Overlay */}
-                        <div className="absolute top-4 right-4 flex items-center gap-2">
-                            {/* Owner Badge */}
-                            {isPostOwner(post) && (
-                                <span className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border backdrop-blur-sm bg-primary/10 text-primary border-primary/20">
-                                    <UserCheck size={12} />
-                                    Mijn artikel
-                                </span>
-                            )}
+                        <div className="absolute top-4 right-4">
                             <span
                                 className={`inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border backdrop-blur-sm ${getStatusBadgeColor(post.status)}`}
                             >
@@ -149,9 +142,14 @@ export function PostCards({
                     <div className="p-6">
                         {/* Title & Slug */}
                         <div className="mb-4">
-                            <h3 className="font-bold text-lg text-neutral-950 dark:text-white mb-2 line-clamp-2 group-hover:text-primary transition-colors">
-                                {post.title}
-                            </h3>
+                            <button 
+                                onClick={() => onEdit(post.id)}
+                                className="text-left w-full hover:cursor-pointer"
+                            >
+                                <h3 className="font-bold text-lg text-neutral-950 dark:text-white mb-2 line-clamp-2 group-hover:text-primary transition-colors hover:underline">
+                                    {post.title}
+                                </h3>
+                            </button>
                             <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono">
                                 /{post.slug}
                             </p>
@@ -168,9 +166,16 @@ export function PostCards({
                         <div className="space-y-3 pt-4 border-t border-neutral-200 dark:border-neutral-700">
                             {/* Author */}
                             <div className="flex items-center gap-2">
-                                <User size={14} className="text-neutral-400" />
-                                <span className="text-xs text-neutral-600 dark:text-neutral-400">
+                                {isPostOwner(post) ? (
+                                    <UserCheck size={14} className="text-primary" />
+                                ) : (
+                                    <User size={14} className="text-neutral-400" />
+                                )}
+                                <span className={`text-xs ${isPostOwner(post) ? 'text-primary font-semibold' : 'text-neutral-600 dark:text-neutral-400'}`}>
                                     {getAuthorName(post.authorId)}
+                                    {isPostOwner(post) && (
+                                        <span className="ml-1">(You)</span>
+                                    )}
                                 </span>
                             </div>
 

package/src/views/PostManager/PostFilters.tsx

@@ -32,8 +32,13 @@ export function PostFilters({
         <div className="flex flex-col sm:flex-row gap-4 mb-6">
             {/* Search Input */}
             <div className="relative flex-1">
+                <label htmlFor="blog-post-search" className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }}>
+                    Search posts by title or content
+                </label>
                 <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4" />
                 <input
+                    id="blog-post-search"
+                    name="blog-post-search"
                     type="text"
                     value={search}
                     onChange={(e) => onSearchChange(e.target.value)}
@@ -44,8 +49,13 @@ export function PostFilters({
 
             {/* Status Filter */}
             <div className="relative">
+                <label htmlFor="blog-post-status-filter" className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }}>
+                    Filter by status
+                </label>
                 <Filter className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" />
                 <select
+                    id="blog-post-status-filter"
+                    name="blog-post-status-filter"
                     value={statusFilter}
                     onChange={(e) => onStatusFilterChange(e.target.value as PostStatus | 'all')}
                     className="pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[160px]"
@@ -60,8 +70,13 @@ export function PostFilters({
 
             {/* Category Filter */}
             <div className="relative">
+                <label htmlFor="blog-post-category-filter" className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0" style={{ clip: 'rect(0, 0, 0, 0)', clipPath: 'inset(50%)' }}>
+                    Filter by category
+                </label>
                 <Tag className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 size-4 pointer-events-none" />
                 <select
+                    id="blog-post-category-filter"
+                    name="blog-post-category-filter"
                     value={categoryFilter}
                     onChange={(e) => onCategoryFilterChange(e.target.value)}
                     className="pl-11 pr-8 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary appearance-none outline-none cursor-pointer min-w-[160px]"

package/src/views/PostManager/PostManagerView.tsx

@@ -23,6 +23,8 @@ export interface PostManagerViewProps {
 
 type ViewMode = 'list' | 'cards';
 
+const STORAGE_KEY_PREFIX = 'blog-view-mode';
+
 export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
     const [posts, setPosts] = useState<PostListItem[]>([]);
     const [totalPosts, setTotalPosts] = useState<number>(0);
@@ -30,7 +32,22 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
     const [search, setSearch] = useState('');
     const [statusFilter, setStatusFilter] = useState<PostStatus | 'all'>('all');
     const [categoryFilter, setCategoryFilter] = useState<string>('all');
-    const [viewMode, setViewMode] = useState<ViewMode>('list');
+    
+    // Load view mode preference from localStorage
+    const getStoredViewMode = (): ViewMode => {
+        if (typeof window === 'undefined') return 'list';
+        const stored = localStorage.getItem(`${STORAGE_KEY_PREFIX}-${siteId}`);
+        return (stored === 'list' || stored === 'cards') ? stored : 'list';
+    };
+    
+    const [viewMode, setViewMode] = useState<ViewMode>(getStoredViewMode);
+    
+    // Save view mode preference to localStorage when it changes
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            localStorage.setItem(`${STORAGE_KEY_PREFIX}-${siteId}`, viewMode);
+        }
+    }, [viewMode, siteId]);
 
     // Fetch posts from API
     useEffect(() => {
@@ -44,20 +61,9 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
                     // Convert API format to PostListItem format
                     const postListItems: PostListItem[] = data.blogs.map((doc: APIBlogDocument) => {
                         const blogPost = apiToBlogPost(doc);
-                        // Extract image ID/filename from src URL
-                        // src can be: "/api/uploads/filename.jpg" or "filename.jpg" or a full URL
-                        let featuredImageId: string | undefined = undefined;
-                        if (blogPost.metadata.featuredImage?.src) {
-                            const src = blogPost.metadata.featuredImage.src;
-                            // If it's a URL, extract the filename
-                            if (src.includes('/')) {
-                                const parts = src.split('/');
-                                featuredImageId = parts[parts.length - 1];
-                            } else {
-                                // Already a filename/ID
-                                featuredImageId = src;
-                            }
-                        }
+                        // Use semantic ID (id) - plugin-images handles resolution
+                        // The id is the semantic ID (e.g., "blog-featured-{slug}") which plugin-images resolves
+                        const featuredImageId = blogPost.metadata.featuredImage?.id;
                         // Extract category from metadata or hero block
                         let category: string | undefined = undefined;
                         if (blogPost.metadata.categories && blogPost.metadata.categories.length > 0) {

package/src/views/PostManager/PostTable.tsx

@@ -144,12 +144,15 @@ export function PostTable({
                                             </div>
                                         )}
                                         <div className="min-w-0 flex-1">
-                                            <button onClick={() => onEdit(post.id)} className='hover:cursor-pointer'>
-                                                <h3 className="font-bold hover:underline text-neutral-950 dark:text-white mb-1 line-clamp-1">
-                                                    {post.title}
+                                            <button 
+                                                onClick={() => onEdit(post.id)} 
+                                                className="text-left w-full hover:cursor-pointer p-0 m-0 border-0 bg-transparent"
+                                            >
+                                                <h3 className="font-bold hover:underline text-neutral-950 dark:text-white mb-1 line-clamp-1 text-left">
+                                                    {post.title.trim()}
                                                 </h3>
                                             </button>
-                                            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono">
+                                            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono text-left">
                                                 /{post.slug}
                                             </p>
                                         </div>