feat(projects): add single-projects detail template
This commit is contained in:
Keith Solomon
@@ -9,6 +9,7 @@ testimonials.class.php
|
|||||||
resource-filter/
|
resource-filter/
|
||||||
phpcs-results.txt
|
phpcs-results.txt
|
||||||
.claude/
|
.claude/
|
||||||
|
notes/
|
||||||
|
|
||||||
# Playwright
|
# Playwright
|
||||||
/test-results/
|
/test-results/
|
||||||
|
|||||||
@@ -0,0 +1,168 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Single Project Template
|
||||||
|
*
|
||||||
|
* Renders the project detail page: Carbon Blue hero with provider,
|
||||||
|
* title, and version; Download / View Repo CTAs; two-column body with
|
||||||
|
* main content and a sidebar of owner, repository details, and stat
|
||||||
|
* cards.
|
||||||
|
*
|
||||||
|
* @package KsPortfolio
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace KsPortfolio;
|
||||||
|
|
||||||
|
get_header();
|
||||||
|
|
||||||
|
while ( have_posts() ) :
|
||||||
|
the_post();
|
||||||
|
$project_id = (int) get_the_ID();
|
||||||
|
$provider = Projects::get_provider_label( $project_id );
|
||||||
|
$version = Projects::get_latest_version( $project_id );
|
||||||
|
$release = Projects::get_release_url( $project_id );
|
||||||
|
$repo = Projects::get_repo_browse_url( $project_id );
|
||||||
|
$repo_data = Projects::get_repo_data( $project_id );
|
||||||
|
$owner = Projects::get_owner_data( $project_id );
|
||||||
|
$type_terms = get_the_terms( $project_id, 'project-type' );
|
||||||
|
$type_label = ! empty( $type_terms ) && ! is_wp_error( $type_terms ) ? strtoupper( $type_terms[0]->name ) : '';
|
||||||
|
$excerpt = has_excerpt( $project_id ) ? get_the_excerpt( $project_id ) : '';
|
||||||
|
?>
|
||||||
|
<article class="single-project aura-bg">
|
||||||
|
<div class="aura-bg__content">
|
||||||
|
<div class="container mx-auto my-section">
|
||||||
|
|
||||||
|
<header class="single-project__hero">
|
||||||
|
<p class="single-project__meta">
|
||||||
|
<span class="single-project__provider"><?php echo esc_html( $provider ); ?></span>
|
||||||
|
<?php if ( $type_label ) : ?>
|
||||||
|
<span class="single-project__type"><?php echo esc_html( $type_label ); ?></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</p>
|
||||||
|
<h1 class="single-project__title">
|
||||||
|
<?php echo esc_html( get_the_title( $project_id ) ); ?>
|
||||||
|
<?php if ( 'Unknown' !== $version ) : ?>
|
||||||
|
<span class="single-project__version">v<?php echo esc_html( $version ); ?></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</h1>
|
||||||
|
<?php if ( $excerpt ) : ?>
|
||||||
|
<p class="single-project__excerpt"><?php echo esc_html( $excerpt ); ?></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<div class="single-project__actions">
|
||||||
|
<?php if ( $release ) : ?>
|
||||||
|
<a class="button button--primary" href="<?php echo esc_url( Projects::get_download_url( $project_id ) ); ?>" rel="nofollow">
|
||||||
|
<?php echo esc_html__( 'Download', 'ks-portfolio' ); ?>
|
||||||
|
<?php if ( 'Unknown' !== $version ) : ?>
|
||||||
|
v<?php echo esc_html( $version ); ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ( $repo ) : ?>
|
||||||
|
<a class="button button--outline" href="<?php echo esc_url( $repo ); ?>" target="_blank" rel="noopener noreferrer">
|
||||||
|
<?php echo esc_html__( 'View Repo', 'ks-portfolio' ); ?>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="single-project__layout">
|
||||||
|
<div class="single-project__body">
|
||||||
|
<?php if ( has_post_thumbnail( $project_id ) ) : ?>
|
||||||
|
<figure class="single-project__featured">
|
||||||
|
<?php echo get_the_post_thumbnail( $project_id, 'large' ); ?>
|
||||||
|
</figure>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<section class="single-project__content" aria-label="<?php echo esc_attr__( 'Architecture and Implementation', 'ks-portfolio' ); ?>">
|
||||||
|
<h2><?php echo esc_html__( 'Architecture & Implementation', 'ks-portfolio' ); ?></h2>
|
||||||
|
<?php the_content(); ?>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="single-project__sidebar" aria-label="<?php echo esc_attr__( 'Repository details', 'ks-portfolio' ); ?>">
|
||||||
|
<?php if ( $owner ) : ?>
|
||||||
|
<section class="single-project__maintainer">
|
||||||
|
<h3><?php echo esc_html__( 'Maintainer', 'ks-portfolio' ); ?></h3>
|
||||||
|
<div class="single-project__owner">
|
||||||
|
<?php if ( ! empty( $owner['avatar_url'] ) ) : ?>
|
||||||
|
<span class="single-project__owner-avatar" style="background-image: url('<?php echo esc_url( $owner['avatar_url'] ); ?>');" aria-hidden="true"></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
<a class="single-project__owner-link" href="<?php echo esc_url( ! empty( $owner['html_url'] ) ? $owner['html_url'] : ( 'https://github.com/' . $owner['login'] ) ); ?>" target="_blank" rel="noopener noreferrer">
|
||||||
|
<?php echo esc_html( $owner['login'] ); ?>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<section class="single-project__details">
|
||||||
|
<h3><?php echo esc_html__( 'Repository Details', 'ks-portfolio' ); ?></h3>
|
||||||
|
<?php
|
||||||
|
$updated_at = is_array( $repo_data ) && ! empty( $repo_data['updated_at'] )
|
||||||
|
? human_time_diff( strtotime( $repo_data['updated_at'] ) ) . ' ' . __( 'ago', 'ks-portfolio' )
|
||||||
|
: '—';
|
||||||
|
$license = is_array( $repo_data ) && ! empty( $repo_data['license']['name'] ) ? $repo_data['license']['name'] : __( 'None', 'ks-portfolio' );
|
||||||
|
$language = is_array( $repo_data ) && ! empty( $repo_data['language'] ) ? $repo_data['language'] : '—';
|
||||||
|
|
||||||
|
$rows = array();
|
||||||
|
$rows[] = array(
|
||||||
|
'label' => __( 'Version', 'ks-portfolio' ),
|
||||||
|
'value' => 'Unknown' !== $version ? 'v' . $version : __( 'Unknown', 'ks-portfolio' ),
|
||||||
|
);
|
||||||
|
$rows[] = array(
|
||||||
|
'label' => __( 'Last Updated', 'ks-portfolio' ),
|
||||||
|
'value' => $updated_at,
|
||||||
|
);
|
||||||
|
$rows[] = array(
|
||||||
|
'label' => __( 'License', 'ks-portfolio' ),
|
||||||
|
'value' => $license,
|
||||||
|
);
|
||||||
|
$rows[] = array(
|
||||||
|
'label' => __( 'Language', 'ks-portfolio' ),
|
||||||
|
'value' => $language,
|
||||||
|
);
|
||||||
|
|
||||||
|
foreach ( $rows as $row ) :
|
||||||
|
set_query_var( 'label', $row['label'] );
|
||||||
|
set_query_var( 'value', $row['value'] );
|
||||||
|
get_template_part( 'views/components/project-meta-row' );
|
||||||
|
endforeach;
|
||||||
|
?>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="single-project__stats" aria-label="<?php echo esc_attr__( 'Repository statistics', 'ks-portfolio' ); ?>">
|
||||||
|
<?php
|
||||||
|
$stats = array();
|
||||||
|
$stats[] = array(
|
||||||
|
'label' => __( 'Downloads', 'ks-portfolio' ),
|
||||||
|
'value' => Projects::format_stat( get_post_meta( $project_id, '_projects_portfolio_download_count', true ) ),
|
||||||
|
);
|
||||||
|
$stats[] = array(
|
||||||
|
'label' => __( 'Stars', 'ks-portfolio' ),
|
||||||
|
'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['stargazers_count'] ?? 0 ) : 0 ),
|
||||||
|
);
|
||||||
|
$stats[] = array(
|
||||||
|
'label' => __( 'Forks', 'ks-portfolio' ),
|
||||||
|
'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['forks_count'] ?? 0 ) : 0 ),
|
||||||
|
);
|
||||||
|
$stats[] = array(
|
||||||
|
'label' => __( 'Issues', 'ks-portfolio' ),
|
||||||
|
'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['open_issues_count'] ?? 0 ) : 0 ),
|
||||||
|
);
|
||||||
|
|
||||||
|
foreach ( $stats as $stat ) :
|
||||||
|
set_query_var( 'label', $stat['label'] );
|
||||||
|
set_query_var( 'value', $stat['value'] );
|
||||||
|
get_template_part( 'views/components/project-stat-card' );
|
||||||
|
endforeach;
|
||||||
|
?>
|
||||||
|
</section>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<?php
|
||||||
|
endwhile;
|
||||||
|
|
||||||
|
get_template_part( 'views/partials/aura-bg' );
|
||||||
|
get_footer();
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
* Theme Name: Portfolio 2026
|
* Theme Name: Portfolio 2026
|
||||||
* Description: A clean and modern portfolio theme for showcasing your work.
|
* Description: A clean and modern portfolio theme for showcasing my work.
|
||||||
* Version: 1.0
|
* Version: 1.0
|
||||||
* Author: Keith Solomon
|
* Author: Keith Solomon
|
||||||
* Text Domain: sf-evo
|
* Text Domain: ks-portfolio
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -213,3 +213,89 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.archive-projects__back-link:hover { text-decoration: underline; }
|
.archive-projects__back-link:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
.single-project__hero {
|
||||||
|
background: var(--color-surface-container-low, #1a1b21);
|
||||||
|
border: 1px solid var(--color-outline-variant, #444651);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.single-project__meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
color: var(--color-on-surface-variant, #c5c5d3);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.single-project__title {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 2.25rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: var(--color-on-surface, #e3e1e9);
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.single-project__version { color: var(--color-on-surface-variant, #c5c5d3); font-weight: 400; font-size: 1.5rem; margin-left: 0.5rem; }
|
||||||
|
|
||||||
|
.single-project__excerpt {
|
||||||
|
color: var(--color-on-surface-variant, #c5c5d3);
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
max-width: 70ch;
|
||||||
|
margin: 0 0 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.single-project__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
|
||||||
|
|
||||||
|
.single-project__layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.single-project__layout {
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
gap: 4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.single-project__body h2,
|
||||||
|
.single-project__sidebar h3 { color: var(--color-on-surface, #e3e1e9); font-family: var(--font-sans); font-weight: 700; }
|
||||||
|
|
||||||
|
.single-project__maintainer,
|
||||||
|
.single-project__details,
|
||||||
|
.single-project__stats {
|
||||||
|
background: var(--color-surface-container, #1e1f25);
|
||||||
|
border: 1px solid var(--color-outline-variant, #444651);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 1.25rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.single-project__owner { display: flex; align-items: center; gap: 0.75rem; }
|
||||||
|
.single-project__owner-avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-size: 40px 40px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: var(--color-surface-container-high, #292a2f);
|
||||||
|
}
|
||||||
|
|
||||||
|
.single-project__owner-link { color: var(--color-on-surface, #e3e1e9); font-weight: 600; text-decoration: none; }
|
||||||
|
.single-project__owner-link:hover { color: var(--color-primary, #b6c4ff); }
|
||||||
|
|
||||||
|
.single-project__stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|||||||
@@ -3,23 +3,29 @@
|
|||||||
* Project Meta Row Component
|
* Project Meta Row Component
|
||||||
*
|
*
|
||||||
* Renders one row of the Repository Details table on the project detail
|
* Renders one row of the Repository Details table on the project detail
|
||||||
* page. Expects $label, $value, and $icon (optional decorative SVG) in
|
* page. Reads $label, $value, and optional $icon from get_query_var(),
|
||||||
* scope.
|
* because get_template_part() does not forward its $args parameter into
|
||||||
|
* the partial's local scope.
|
||||||
*
|
*
|
||||||
* @package KsPortfolio
|
* @package KsPortfolio
|
||||||
*/
|
*/
|
||||||
|
|
||||||
namespace KsPortfolio;
|
namespace KsPortfolio;
|
||||||
|
|
||||||
if ( ! isset( $label ) || ! isset( $value ) ) {
|
$row_label = get_query_var( 'label' );
|
||||||
|
$row_value = get_query_var( 'value' );
|
||||||
|
$icon = get_query_var( 'icon' );
|
||||||
|
|
||||||
|
if ( ! isset( $row_label ) || ! isset( $row_value ) ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$row_label = (string) $label;
|
|
||||||
$row_value = (string) $value;
|
$row_label = (string) $row_label;
|
||||||
|
$row_value = (string) $row_value;
|
||||||
?>
|
?>
|
||||||
<div class="meta-row">
|
<div class="meta-row">
|
||||||
<span class="meta-row__label">
|
<span class="meta-row__label">
|
||||||
<?php if ( isset( $icon ) && $icon ) : ?>
|
<?php if ( ! empty( $icon ) ) : ?>
|
||||||
<span class="meta-row__icon" aria-hidden="true"><?php echo $icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- icon is hardcoded decorative SVG in callers. ?></span>
|
<span class="meta-row__icon" aria-hidden="true"><?php echo $icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- icon is hardcoded decorative SVG in callers. ?></span>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php echo esc_html( $row_label ); ?>
|
<?php echo esc_html( $row_label ); ?>
|
||||||
|
|||||||
@@ -2,23 +2,29 @@
|
|||||||
/**
|
/**
|
||||||
* Project Stat Card Component
|
* Project Stat Card Component
|
||||||
*
|
*
|
||||||
* Renders one stat tile. Expects $label, $value, and $icon (optional SVG
|
* Renders one stat tile. Reads $label, $value, and optional $icon from
|
||||||
* markup) in scope. $icon MUST be aria-hidden decorative markup; the label
|
* get_query_var(), because get_template_part() does not forward its $args
|
||||||
* is the accessible name.
|
* parameter into the partial's local scope. $icon MUST be aria-hidden
|
||||||
|
* decorative markup; the label is the accessible name.
|
||||||
*
|
*
|
||||||
* @package KsPortfolio
|
* @package KsPortfolio
|
||||||
*/
|
*/
|
||||||
|
|
||||||
namespace KsPortfolio;
|
namespace KsPortfolio;
|
||||||
|
|
||||||
if ( ! isset( $label ) || ! isset( $value ) ) {
|
$stat_label = get_query_var( 'label' );
|
||||||
|
$stat_value = get_query_var( 'value' );
|
||||||
|
$icon = get_query_var( 'icon' );
|
||||||
|
|
||||||
|
if ( ! isset( $stat_label ) || ! isset( $stat_value ) ) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$stat_label = (string) $label;
|
|
||||||
$stat_value = (string) $value;
|
$stat_label = (string) $stat_label;
|
||||||
|
$stat_value = (string) $stat_value;
|
||||||
?>
|
?>
|
||||||
<div class="stat-card" role="group" aria-label="<?php echo esc_attr( $stat_label ); ?>">
|
<div class="stat-card" role="group" aria-label="<?php echo esc_attr( $stat_label ); ?>">
|
||||||
<?php if ( isset( $icon ) && $icon ) : ?>
|
<?php if ( ! empty( $icon ) ) : ?>
|
||||||
<span class="stat-card__icon" aria-hidden="true"><?php echo $icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- icon is hardcoded decorative SVG in callers. ?></span>
|
<span class="stat-card__icon" aria-hidden="true"><?php echo $icon; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- icon is hardcoded decorative SVG in callers. ?></span>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<span class="stat-card__value"><?php echo esc_html( $stat_value ); ?></span>
|
<span class="stat-card__value"><?php echo esc_html( $stat_value ); ?></span>
|
||||||
|
|||||||
Reference in New Issue
Block a user