File: /var/www/laracopilot.stgviitor.com/laracopilot-wp/wp-content/themes/laracopilot-v2/single.php
<?php
get_header(); ?>
<?php while (have_posts()) : the_post();
$cats = get_the_category();
$c_name = !empty($cats) ? $cats[0]->name : 'Tutorial';
$c_slug = !empty($cats) ? $cats[0]->slug : 'tutorial';
$post_author_id = get_the_author_meta('ID');
$author_name = get_the_author_meta('display_name');
$author_bio = get_the_author_meta('description');
$author_init = strtoupper(substr(get_the_author_meta('first_name'), 0, 1) . substr(get_the_author_meta('last_name'), 0, 1));
if (empty($author_init)) $author_init = strtoupper(substr($author_name, 0, 2));
$custom_avatar_url = get_user_meta($post_author_id, 'upload_profile_picture', true);
$author_avatar = '';
if ($custom_avatar_url) {
$author_avatar = '<img src="' . esc_url($custom_avatar_url) . '" style="width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;" alt="' . esc_attr($author_name) . '"/>';
$header_avatar = '<img src="' . esc_url($custom_avatar_url) . '" style="width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;" alt="' . esc_attr($author_name) . '"/>';
} else {
$author_avatar = '<div style="width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#4f46e5);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0;">' . esc_html($author_init) . '</div>';
$header_avatar = '<div style="width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#4f46e5);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;">' . esc_html($author_init) . '</div>';
}
$author_social_links = [
'twitter' => get_user_meta($post_author_id, 'twitter', true),
'linkedin' => get_user_meta($post_author_id, 'linkedin', true),
'website' => get_the_author_meta('user_url', $post_author_id),
];
$social_icons = [
'twitter' => '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>',
'linkedin' => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>',
'website' => '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" x2="22" y1="12" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>',
];
$read_time = laracopilot_v2_estimate_reading_time(get_the_content());
?>
<!-- Article Header -->
<div style="padding:110px 0 0;">
<div class="article-wrap">
<a href="<?php echo esc_url(home_url('/blog')); ?>" style="display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#6b7280;margin-bottom:28px;transition:color .15s;" onmouseover="this.style.color='#111827'" onmouseout="this.style.color='#6b7280'">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M19 12H5" />
<path d="M12 19l-7-7 7-7" />
</svg>
Back to Blog
</a>
<?php if ($cats) : ?>
<div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;">
<?php foreach ($cats as $cat) : ?>
<span class="cat-badge cat-<?php echo esc_attr($cat->slug); ?>"><?php echo esc_html($cat->name); ?></span>
<?php endforeach; ?>
</div>
<?php endif; ?>
<h1 style="font-size:clamp(28px,4vw,44px);font-weight:700;color:#111827;letter-spacing:-.03em;line-height:1.15;margin:16px 0 20px;"><?php the_title(); ?></h1>
<?php if (has_excerpt()) : ?>
<p style="font-size:18px;color:#6b7280;line-height:1.7;margin-bottom:32px;"><?php echo get_the_excerpt(); ?></p>
<?php endif; ?>
<div style="display:flex;align-items:center;gap:12px;padding-bottom:32px;border-bottom:1px solid #f3f4f6;margin-bottom:40px;">
<?php echo $header_avatar; ?>
<div>
<div style="font-size:15px;font-weight:600;color:#111827;"><?php echo esc_html($author_name); ?></div>
<div style="font-size:13px;color:#9ca3af;"><?php echo get_the_date('F j, Y'); ?> · <?php echo $read_time; ?> min read</div>
</div>
</div>
</div>
</div>
<!-- Article Body -->
<div class="article-wrap" style="padding-bottom:80px;">
<div class="article-body">
<?php the_content(); ?>
<?php
/**
* User-Friendly Dynamic Blocks (ACF Flexible Content)
* Layouts: app_card, builder_card
*/
if (have_rows('post_blocks')) :
while (have_rows('post_blocks')) : the_row();
if (get_row_layout() == 'app_card') :
$title = get_sub_field('title');
$subtitle = get_sub_field('subtitle');
$num = get_sub_field('number');
$time = get_sub_field('time');
$desc = get_sub_field('description');
$prompt = get_sub_field('prompt');
$result = get_sub_field('result');
?>
<div class="app-card" data-reveal>
<div class="app-card-header">
<div style="display:flex;align-items:center;gap:14px;">
<div class="app-num"><?php echo esc_html($num); ?></div>
<div>
<div style="font-size:19px;font-weight:700;color:#111827;"><?php echo esc_html($title); ?></div>
<div style="font-size:13px;color:#9ca3af;"><?php echo esc_html($subtitle); ?></div>
</div>
</div>
<div class="time-badge">
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" />
</svg>
<?php echo esc_html($time); ?>
</div>
</div>
<p><?php echo $desc; ?></p>
<?php if ($prompt) : ?>
<span class="code-label">The Prompt</span>
<div class="code-block"><code><?php echo esc_html($prompt); ?></code></div>
<?php endif; ?>
<?php if ($result) : ?>
<p><strong>What got built:</strong> <?php echo $result; ?></p>
<?php endif; ?>
</div>
<?php elseif (get_row_layout() == 'builder_card') :
$num = get_sub_field('number');
$app_name = get_sub_field('app_name');
$builder_name = get_sub_field('builder_name');
$desc = get_sub_field('description');
$tag = get_sub_field('impressive_tag');
?>
<div class="builder-card" data-reveal>
<div class="builder-header">
<div class="builder-num"><?php echo esc_html($num); ?></div>
<div>
<div class="app-name"><?php echo esc_html($app_name); ?></div>
<div class="builder-name"><?php echo esc_html($builder_name); ?></div>
</div>
</div>
<p><?php echo $desc; ?></p>
<?php if ($tag) : ?>
<div class="impressive-tag">
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
</svg>
<?php echo esc_html($tag); ?>
</div>
<?php endif; ?>
</div>
<?php
endif;
endwhile;
endif;
?>
</div>
<div class="author-box-card" data-reveal>
<div style="flex-shrink:0;">
<?php echo $author_avatar; ?>
</div>
<div style="flex-grow:1;">
<div style="font-size:18px;font-weight:700;color:#111827;margin-bottom:2px;"><?php echo esc_html($author_name); ?></div>
<div style="font-size:14px;color:#dc2626;font-weight:600;margin-bottom:12px;">LaraCopilot Team</div>
<p style="font-size:15px;color:#4b5563;line-height:1.7;margin:0;"><?php echo $author_bio ?: 'Building the future of Laravel development with AI.'; ?></p>
<?php if (array_filter($author_social_links)) : ?>
<div style="display:flex;gap:10px;margin-top:20px;">
<?php foreach ($author_social_links as $platform => $url) : if ($url) : ?>
<a href="<?php echo esc_url($url); ?>" target="_blank" rel="noopener" style="width:36px;height:36px;border-radius:10px;background:#f9fafb;color:#4b5563;display:flex;align-items:center;justify-content:center;transition:all .2s;text-decoration:none;" onmouseover="this.style.background='#111827';this.style.color='#fff';this.style.transform='translateY(-2px)'" onmouseout="this.style.background='#f9fafb';this.style.color='#4b5563';this.style.transform='none'" title="<?php echo esc_attr(ucfirst($platform === 'twitter' ? 'X' : $platform)); ?>">
<?php echo $social_icons[$platform]; ?>
</a>
<?php endif;
endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Related Articles -->
<?php
$related_args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'post__not_in' => array(get_the_ID()),
'category__in' => wp_get_post_categories(get_the_ID()),
);
$related_query = new WP_Query($related_args);
if ($related_query->have_posts()) :
?>
<section style="padding:64px 0;background:#f9fafb;border-top:1px solid #f3f4f6;">
<div class="container">
<h2 style="font-size:22px;font-weight:700;color:#111827;margin-bottom:32px;">More from the blog</h2>
<div class="related-grid">
<?php while ($related_query->have_posts()) : $related_query->the_post();
$rcats = get_the_category();
$rc_name = !empty($rcats) ? $rcats[0]->name : 'Tutorial';
$rc_slug = !empty($rcats) ? $rcats[0]->slug : 'tutorial';
?>
<a href="<?php the_permalink(); ?>" class="related-card">
<span class="cat-badge cat-<?php echo esc_attr($rc_slug); ?>" style="margin-bottom:14px;"><?php echo esc_html($rc_name); ?></span>
<div style="font-size:17px;font-weight:700;color:#111827;line-height:1.4;margin-bottom:10px;"><?php the_title(); ?></div>
<p style="font-size:14px;color:#6b7280;line-height:1.6;margin:0 0 16px;"><?php echo wp_trim_words(get_the_excerpt(), 15); ?></p>
<div style="font-size:13px;color:#9ca3af;"><?php echo get_the_author(); ?> · <?php echo get_the_date('F j, Y'); ?></div>
</a>
<?php endwhile;
wp_reset_postdata(); ?>
</div>
</div>
</section>
<?php endif; ?>
<!-- CTA Banner -->
<section style="padding:80px 0;background:#fef2f2;text-align:center;">
<div class="container">
<div style="margin:0 auto;">
<div style="font-size:13px;font-weight:700;color:#dc2626;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;">Build with AI</div>
<h2 style="font-size:clamp(24px,3.5vw,36px);font-weight:700;color:#111827;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px;">Ready to ship your next app?</h2>
<p style="font-size:16px;color:#6b7280;line-height:1.7;margin-bottom:32px;">Join thousands of developers shipping faster with LaraCopilot. Free to start.</p>
<a href="https://builder.laracopilot.com/register" class="btn-red-lg" style="display:inline-flex;align-items:center;gap:8px;text-decoration:none;">
Get started free
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12h14" />
<path d="M12 5l7 7-7 7" />
</svg>
</a>
</div>
</div>
</section>
<?php endwhile; ?>
<?php get_footer(); ?>