feat: B2 coming-soon badges on inactive tool cards (v2.1.4)

- Add 'coming_soon' key to module card definitions
- Protocol Builder, Tracker, Subject Log: coming_soon = true
- Calculator: fully active (shortcode_exists passes); no badge, no --inactive
- New .ps-module-card__badge: absolute top-right pill, --gray-200/--gray-700,
  Inter 600 10px; layers on top of --inactive dim treatment
- position: relative added to .ps-module-card to anchor the badge

CMO-approved in thread: 2026-04-site-wide-brand-adoption seq 10
This commit is contained in:
peptiderepo
2026-04-26 09:49:32 +00:00
parent 22716b4227
commit fdaea84d72
3 changed files with 46 additions and 1 deletions

View File

@@ -4,6 +4,8 @@
*
* Renders a 6-card grid of research modules (tools/sections) for the front page.
* Each card checks if the target plugin is active; inactive cards are dimmed.
* Cards with 'coming_soon' => true display a "Coming soon" badge overlaid in
* the top-right corner — layered on top of the --inactive visual treatment.
*
* @see front-page.php — includes this template part
* @see style.css — .ps-module-* classes
@@ -21,6 +23,8 @@ if ( ! defined( 'ABSPATH' ) ) {
}
// Module card definitions with shortcode checks for graceful degradation.
// 'coming_soon' => true adds a "Coming soon" badge without removing existing
// --inactive styling — the badge layers on top of the dim/no-hover treatment.
$modules = array(
array(
'title' => __( 'Peptides', 'peptide-starter' ),
@@ -28,6 +32,7 @@ $modules = array(
'url' => '/peptides',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L12 22"/><path d="M5 12C5 8.13 8.13 5 12 5s7 3.13 7 7-3.13 7-7 7-7-3.13-7-7z"/><circle cx="12" cy="8" r="1.5" fill="currentColor" stroke="none"/><circle cx="12" cy="16" r="1.5" fill="currentColor" stroke="none"/></svg>',
'available' => shortcode_exists( 'peptide_directory' ) || post_type_exists( 'peptide' ),
'coming_soon' => false,
),
array(
'title' => __( 'Calculator', 'peptide-starter' ),
@@ -35,6 +40,7 @@ $modules = array(
'url' => '/calculator',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="8" y1="10" x2="10" y2="10"/><line x1="14" y1="10" x2="16" y2="10"/><line x1="8" y1="14" x2="10" y2="14"/><line x1="14" y1="14" x2="16" y2="14"/><line x1="8" y1="18" x2="16" y2="18"/></svg>',
'available' => shortcode_exists( 'prc_calculator' ),
'coming_soon' => false,
),
array(
'title' => __( 'Protocol Builder', 'peptide-starter' ),
@@ -42,6 +48,7 @@ $modules = array(
'url' => '/protocol-builder',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><path d="M9 14l2 2 4-4"/></svg>',
'available' => shortcode_exists( 'peptide_tools_protocol_builder' ),
'coming_soon' => true,
),
array(
'title' => __( 'Tracker', 'peptide-starter' ),
@@ -49,6 +56,7 @@ $modules = array(
'url' => '/tracker',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="3" y1="20" x2="21" y2="20"/></svg>',
'available' => shortcode_exists( 'peptide_tracker' ),
'coming_soon' => true,
),
array(
'title' => __( 'Science Feed', 'peptide-starter' ),
@@ -56,6 +64,7 @@ $modules = array(
'url' => '/news',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22h16a2 2 0 002-2V4a2 2 0 00-2-2H8a2 2 0 00-2 2v16a2 2 0 01-2 2zm0 0a2 2 0 01-2-2v-9c0-1.1.9-2 2-2h2"/><line x1="10" y1="6" x2="18" y2="6"/><line x1="10" y1="10" x2="18" y2="10"/><line x1="10" y1="14" x2="14" y2="14"/></svg>',
'available' => shortcode_exists( 'peptide_news' ),
'coming_soon' => false,
),
array(
'title' => __( 'Subject Log', 'peptide-starter' ),
@@ -63,6 +72,7 @@ $modules = array(
'url' => '/subject-log',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
'available' => shortcode_exists( 'peptide_tracker_subject_log' ),
'coming_soon' => true,
),
);
?>
@@ -80,6 +90,9 @@ $modules = array(
<?php foreach ( $modules as $module ) : ?>
<a href="<?php echo esc_url( home_url( $module['url'] ) ); ?>"
class="ps-module-card <?php echo $module['available'] ? '' : 'ps-module-card--inactive'; ?>">
<?php if ( ! empty( $module['coming_soon'] ) ) : ?>
<span class="ps-module-card__badge"><?php esc_html_e( 'Coming soon', 'peptide-starter' ); ?></span>
<?php endif; ?>
<div class="ps-module-card__icon">
<?php
// SVG icons are defined in this template — safe to output directly.