feat: CI/CD pipeline setup complete - Ansible playbooks updated, secrets configured, workflow ready
This commit is contained in:
@@ -20,40 +20,78 @@ use App\Framework\View\RenderContext;
|
||||
* Before: <div> \n <p>text</p> \n </div>
|
||||
* After: <div><p>text</p></div>
|
||||
*
|
||||
* Preserves whitespace in whitespace-sensitive elements like <pre>, <code>, <textarea>
|
||||
*
|
||||
* Framework Pattern: readonly class, AST-based transformation
|
||||
*/
|
||||
final readonly class WhitespaceCleanupTransformer implements AstTransformer
|
||||
{
|
||||
/**
|
||||
* Tags where whitespace should be preserved
|
||||
*/
|
||||
private const WHITESPACE_SENSITIVE_TAGS = [
|
||||
'pre',
|
||||
'code',
|
||||
'textarea',
|
||||
'script',
|
||||
'style',
|
||||
];
|
||||
|
||||
public function transform(DocumentNode $document, RenderContext $context): DocumentNode
|
||||
{
|
||||
// Process all children recursively
|
||||
$this->removeEmptyTextNodes($document);
|
||||
$this->removeEmptyTextNodes($document, false);
|
||||
|
||||
return $document;
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively remove text nodes containing only whitespace
|
||||
*
|
||||
* @param bool $preserveWhitespace Whether to preserve whitespace (inside whitespace-sensitive tags)
|
||||
*/
|
||||
private function removeEmptyTextNodes(Node $node): void
|
||||
private function removeEmptyTextNodes(Node $node, bool $preserveWhitespace): void
|
||||
{
|
||||
if (! $node instanceof ElementNode && ! $node instanceof DocumentNode) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if this element is whitespace-sensitive
|
||||
// Once we're inside a whitespace-sensitive element, ALL descendants should preserve whitespace
|
||||
$isWhitespaceSensitive = $preserveWhitespace;
|
||||
if ($node instanceof ElementNode) {
|
||||
$tagName = strtolower($node->getTagName());
|
||||
|
||||
// Check if tag is in whitespace-sensitive list
|
||||
if (in_array($tagName, self::WHITESPACE_SENSITIVE_TAGS, true)) {
|
||||
$isWhitespaceSensitive = true;
|
||||
}
|
||||
|
||||
// Special case: <span class="code"> is also whitespace-sensitive (syntax highlighting)
|
||||
if ($tagName === 'span' && $node->hasAttribute('class')) {
|
||||
$classes = explode(' ', $node->getAttribute('class'));
|
||||
if (in_array('code', $classes, true)) {
|
||||
$isWhitespaceSensitive = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Get children via public API
|
||||
$children = $node->getChildren();
|
||||
|
||||
// Remove empty TextNode children
|
||||
foreach ($children as $child) {
|
||||
if ($this->isEmptyTextNode($child)) {
|
||||
$node->removeChild($child);
|
||||
// Remove empty TextNode children (but not if we're in whitespace-sensitive context)
|
||||
if (! $isWhitespaceSensitive) {
|
||||
foreach ($children as $child) {
|
||||
if ($this->isEmptyTextNode($child)) {
|
||||
$node->removeChild($child);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Recurse into remaining children
|
||||
// IMPORTANT: Pass $isWhitespaceSensitive to children so they inherit the parent's context
|
||||
foreach ($node->getChildren() as $child) {
|
||||
$this->removeEmptyTextNodes($child);
|
||||
$this->removeEmptyTextNodes($child, $isWhitespaceSensitive);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
540
src/Framework/View/templates/dashboard/analytics/index.view.php
Normal file
540
src/Framework/View/templates/dashboard/analytics/index.view.php
Normal file
@@ -0,0 +1,540 @@
|
||||
<layout name="main" />
|
||||
|
||||
<style>
|
||||
/* =========================================
|
||||
SmartLink Analytics Dashboard Styles
|
||||
ITCSS Architecture with Design Tokens
|
||||
========================================= */
|
||||
|
||||
/* Settings Layer - Design Tokens */
|
||||
:root {
|
||||
/* Color Tokens */
|
||||
--color-primary: #3b82f6;
|
||||
--color-primary-dark: #2563eb;
|
||||
--color-success: #10b981;
|
||||
--color-success-dark: #059669;
|
||||
--color-danger: #ef4444;
|
||||
--color-warning: #f59e0b;
|
||||
--color-text: #1f2937;
|
||||
--color-text-muted: #6b7280;
|
||||
--color-bg: #ffffff;
|
||||
--color-bg-secondary: #f9fafb;
|
||||
--color-border: #e5e7eb;
|
||||
--color-shadow: rgba(0, 0, 0, 0.1);
|
||||
|
||||
/* Spacing Tokens */
|
||||
--spacing-xs: 0.25rem;
|
||||
--spacing-sm: 0.5rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
|
||||
/* Typography Tokens */
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-sm: 0.875rem;
|
||||
--font-size-base: 1rem;
|
||||
--font-size-lg: 1.125rem;
|
||||
--font-size-xl: 1.25rem;
|
||||
--font-size-2xl: 1.5rem;
|
||||
--font-size-3xl: 1.875rem;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
/* Layout Tokens */
|
||||
--border-radius-sm: 0.375rem;
|
||||
--border-radius-md: 0.5rem;
|
||||
--border-radius-lg: 0.75rem;
|
||||
--shadow-sm: 0 1px 2px 0 var(--color-shadow);
|
||||
--shadow-md: 0 4px 6px -1px var(--color-shadow);
|
||||
--shadow-lg: 0 10px 15px -3px var(--color-shadow);
|
||||
|
||||
/* Animation Tokens */
|
||||
--duration-fast: 0.15s;
|
||||
--duration-default: 0.3s;
|
||||
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Components Layer - Dashboard Components */
|
||||
|
||||
/* Dashboard Container */
|
||||
.analytics-dashboard {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-xl) var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Dashboard Header */
|
||||
.dashboard-header {
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text);
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
font-size: var(--font-size-lg);
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform var(--duration-fast) var(--easing-default),
|
||||
box-shadow var(--duration-fast) var(--easing-default);
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.stat-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.stat-card__title {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stat-card__icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--border-radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-card__icon--primary {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-card__icon--success {
|
||||
background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-card__value {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-text);
|
||||
margin: 0 0 var(--spacing-xs) 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-card__change {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.stat-card__change--positive {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.stat-card__change--negative {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
/* Dashboard Grid */
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.dashboard-card--full {
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
.dashboard-card--half {
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
.dashboard-card--third {
|
||||
grid-column: span 12;
|
||||
}
|
||||
|
||||
.dashboard-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
padding-bottom: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.dashboard-card__title {
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dashboard-card__action {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-weight: var(--font-weight-medium);
|
||||
transition: color var(--duration-fast) var(--easing-default);
|
||||
}
|
||||
|
||||
.dashboard-card__action:hover {
|
||||
color: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
/* Chart Canvas */
|
||||
.chart-canvas {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* Geographic Heatmap Placeholder */
|
||||
.geo-heatmap {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
/* Device Stats */
|
||||
.device-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.device-stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.device-stat__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.device-stat__label {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.device-stat__value {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.device-stat__bar {
|
||||
height: 0.5rem;
|
||||
background: var(--color-bg-secondary);
|
||||
border-radius: var(--border-radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.device-stat__progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
|
||||
border-radius: var(--border-radius-sm);
|
||||
transition: width var(--duration-default) var(--easing-default);
|
||||
}
|
||||
|
||||
/* Top Links Table */
|
||||
.top-links-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.top-links-table thead {
|
||||
border-bottom: 2px solid var(--color-border);
|
||||
}
|
||||
|
||||
.top-links-table th {
|
||||
padding: var(--spacing-md);
|
||||
text-align: left;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.top-links-table td {
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.top-links-table tbody tr {
|
||||
transition: background-color var(--duration-fast) var(--easing-default);
|
||||
}
|
||||
|
||||
.top-links-table tbody tr:hover {
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
.link-name {
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.link-url {
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-xs);
|
||||
display: block;
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.badge--success {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--color-success-dark);
|
||||
}
|
||||
|
||||
/* Real-time Update Indicator */
|
||||
.realtime-indicator {
|
||||
position: fixed;
|
||||
bottom: var(--spacing-lg);
|
||||
right: var(--spacing-lg);
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-lg);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.realtime-indicator__pulse {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
background: var(--color-success);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.realtime-indicator__text {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* Utilities Layer - Responsive Helpers */
|
||||
@media (min-width: 768px) {
|
||||
.dashboard-card--half {
|
||||
grid-column: span 6;
|
||||
}
|
||||
|
||||
.dashboard-card--third {
|
||||
grid-column: span 4;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.analytics-dashboard {
|
||||
padding: var(--spacing-2xl) var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.loading-skeleton {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--color-bg-secondary) 25%,
|
||||
var(--color-border) 50%,
|
||||
var(--color-bg-secondary) 75%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s infinite;
|
||||
border-radius: var(--border-radius-sm);
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="analytics-dashboard">
|
||||
<!-- Dashboard Header -->
|
||||
<header class="dashboard-header">
|
||||
<h1 class="dashboard-title">SmartLink Analytics</h1>
|
||||
<p class="dashboard-subtitle">Real-time click tracking and performance metrics</p>
|
||||
</header>
|
||||
|
||||
<!-- Quick Stats Grid - Real-time updates via PollableClosure -->
|
||||
<section class="stats-grid" role="region" aria-label="Quick Statistics">
|
||||
{{ $overview_stats->render() }}
|
||||
</section>
|
||||
|
||||
<!-- Main Dashboard Grid -->
|
||||
<div class="dashboard-grid">
|
||||
<!-- Real-time Click Chart -->
|
||||
<section class="dashboard-card dashboard-card--full">
|
||||
<div class="dashboard-card__header">
|
||||
<h2 class="dashboard-card__title">Click Activity (Last 7 Days)</h2>
|
||||
<a href="#" class="dashboard-card__action">View Details →</a>
|
||||
</div>
|
||||
<canvas id="clickChart" class="chart-canvas" role="img" aria-label="Click activity chart showing last 7 days of data"></canvas>
|
||||
</section>
|
||||
|
||||
<!-- Geographic Heatmap -->
|
||||
<section class="dashboard-card dashboard-card--half">
|
||||
<div class="dashboard-card__header">
|
||||
<h2 class="dashboard-card__title">Geographic Distribution</h2>
|
||||
<a href="#" class="dashboard-card__action">Explore →</a>
|
||||
</div>
|
||||
<div class="geo-heatmap" role="img" aria-label="Geographic heatmap placeholder">
|
||||
<span>Interactive world map visualization (Chart.js integration)</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Device/Browser Stats - Real-time updates via PollableClosure -->
|
||||
<section class="dashboard-card dashboard-card--half">
|
||||
<div class="dashboard-card__header">
|
||||
<h2 class="dashboard-card__title">Device & Browser Stats</h2>
|
||||
<a href="#" class="dashboard-card__action">Full Report →</a>
|
||||
</div>
|
||||
{{ $device_stats->render() }}
|
||||
</section>
|
||||
|
||||
<!-- Top Performing Links - Real-time updates via PollableClosure -->
|
||||
<section class="dashboard-card dashboard-card--full">
|
||||
<div class="dashboard-card__header">
|
||||
<h2 class="dashboard-card__title">Top Performing Links</h2>
|
||||
<a href="#" class="dashboard-card__action">View All →</a>
|
||||
</div>
|
||||
{{ $top_links->render() }}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Real-time Update Indicator -->
|
||||
<div class="realtime-indicator" role="status" aria-live="polite">
|
||||
<div class="realtime-indicator__pulse" aria-hidden="true"></div>
|
||||
<span class="realtime-indicator__text">Live updates</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// SmartLink Analytics Dashboard JavaScript
|
||||
// Chart.js Integration Placeholder
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('SmartLink Analytics Dashboard initialized');
|
||||
|
||||
// Simulated data for Chart.js
|
||||
const clickData = {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: 'Clicks',
|
||||
data: [12543, 15234, 18234, 14567, 21345, 19234, 16789],
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true
|
||||
}]
|
||||
};
|
||||
|
||||
// Chart.js initialization would go here
|
||||
// Example:
|
||||
// const ctx = document.getElementById('clickChart').getContext('2d');
|
||||
// new Chart(ctx, {
|
||||
// type: 'line',
|
||||
// data: clickData,
|
||||
// options: { /* ... */ }
|
||||
// });
|
||||
|
||||
console.log('Chart data ready:', clickData);
|
||||
|
||||
// Simulated real-time updates
|
||||
setInterval(function() {
|
||||
console.log('Real-time data update simulation');
|
||||
// Update chart data, stats, etc.
|
||||
}, 30000); // Update every 30 seconds
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user