Skip to content

Commit 7ac0306

Browse files
csharpfritzcsharpfritz
committed
feat: enhance analytics tracking and add markdown table styling
1 parent 92b322e commit 7ac0306

5 files changed

Lines changed: 217 additions & 44 deletions

File tree

‎Web/Pages/Shared/_Layout.cshtml‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -98,18 +98,19 @@
9898
<environment include="Development">
9999
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
100100
<link rel="stylesheet" href="~/css/layout.css" asp-append-version="true" />
101-
</environment>
102-
<link rel="stylesheet" href="~/Web.styles.css" asp-append-version="true" />
101+
</environment> <link rel="stylesheet" href="~/Web.styles.css" asp-append-version="true" />
103102
@await RenderSectionAsync("Styles", required: false)
104103

105-
<!-- Google Analytics -->
106-
<script async src="https://www.googletagmanager.com/gtag/js?id=@Configuration["GoogleAnalytics:MeasurementId"]"></script>
107-
<script>
108-
window.dataLayer = window.dataLayer || [];
109-
function gtag(){dataLayer.push(arguments);}
110-
gtag('js', new Date());
111-
gtag('config', '@Configuration["GoogleAnalytics:MeasurementId"]');
112-
</script>
104+
<!-- Google Analytics - Production Only -->
105+
<environment exclude="Development">
106+
<script async src="https://www.googletagmanager.com/gtag/js?id=@Configuration["GoogleAnalytics:MeasurementId"]"></script>
107+
<script>
108+
window.dataLayer = window.dataLayer || [];
109+
function gtag(){dataLayer.push(arguments);}
110+
gtag('js', new Date());
111+
gtag('config', '@Configuration["GoogleAnalytics:MeasurementId"]');
112+
</script>
113+
</environment>
113114
</head>
114115
<body>
115116
<header>
@@ -189,15 +190,13 @@
189190
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-powershell.min.js"></script>
190191
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
191192
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
192-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
193-
194-
<!-- Site scripts -->
193+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script> <!-- Site scripts -->
195194
<environment exclude="Development">
196195
<script src="~/js/bundle.min.js" asp-append-version="true"></script>
197196
</environment>
198197
<environment include="Development">
199198
<script src="~/js/site.js" asp-append-version="true"></script>
200-
<script src="~/js/analytics.js" asp-append-version="true"></script>
199+
<script src="~/js/analytics-stub.js" asp-append-version="true"></script>
201200
<script src="~/js/theme-switcher.js" asp-append-version="true"></script>
202201
</environment>
203202
<script>

‎Web/Pages/Tips/Details.cshtml‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -436,16 +436,10 @@ document.addEventListener('DOMContentLoaded', function() {
436436
tag.addEventListener('click', function() {
437437
Analytics.trackTagClick(this.getAttribute('asp-route-tag'));
438438
});
439-
});
440-
441-
// Track social shares
439+
}); // Track social shares
442440
document.querySelectorAll('.btn[href^="https://x.com"], .btn[href^="https://bsky.app"]').forEach(function(shareBtn) {
443441
shareBtn.addEventListener('click', function() {
444-
gtag('event', 'share', {
445-
method: this.textContent.trim(),
446-
content_type: 'tip',
447-
item_id: '@Model.ViewModel.Tip.UrlSlug'
448-
});
442+
Analytics.trackShare(this.textContent.trim(), 'tip', '@Model.ViewModel.Tip.UrlSlug');
449443
});
450444
});
451445
});

‎Web/wwwroot/css/site.css‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -550,6 +550,144 @@ html[data-theme-resolved="dark"] .philly-phillies-red {
550550
1px 1px 0 rgba(255, 255, 255, 0.7);
551551
}
552552

553+
/* Markdown Table Styling */
554+
.tip-content table {
555+
width: 100%;
556+
margin: 2rem 0;
557+
border-collapse: separate;
558+
border-spacing: 0;
559+
border: 1px solid var(--border-color);
560+
border-radius: 0.5rem;
561+
overflow: hidden;
562+
font-size: 0.95rem;
563+
line-height: 1.6;
564+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
565+
transition: border-color 0.3s ease;
566+
}
567+
568+
.tip-content table thead {
569+
background-color: var(--primary-color);
570+
color: white;
571+
}
572+
573+
.tip-content table thead th {
574+
padding: 1rem 1.5rem;
575+
text-align: left;
576+
font-weight: 600;
577+
font-size: 0.9rem;
578+
text-transform: uppercase;
579+
letter-spacing: 0.5px;
580+
border-bottom: 3px solid var(--primary-dark);
581+
position: relative;
582+
}
583+
584+
.tip-content table thead th:not(:last-child) {
585+
border-right: 1px solid rgba(255, 255, 255, 0.2);
586+
}
587+
588+
.tip-content table tbody tr {
589+
background-color: var(--bg-primary);
590+
transition: background-color 0.2s ease;
591+
}
592+
593+
.tip-content table tbody tr:nth-child(even) {
594+
background-color: var(--bg-secondary);
595+
}
596+
597+
.tip-content table tbody tr:hover {
598+
background-color: var(--bg-tertiary);
599+
transform: scale(1.01);
600+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
601+
}
602+
603+
.tip-content table tbody td {
604+
padding: 1.25rem 1.5rem;
605+
border-bottom: 1px solid var(--border-color);
606+
vertical-align: top;
607+
line-height: 1.7;
608+
}
609+
610+
.tip-content table tbody td:not(:last-child) {
611+
border-right: 1px solid var(--border-color);
612+
}
613+
614+
.tip-content table tbody tr:last-child td {
615+
border-bottom: none;
616+
}
617+
618+
/* Dark theme table adjustments */
619+
html[data-theme="dark"] .tip-content table,
620+
html[data-theme-resolved="dark"] .tip-content table {
621+
border-color: var(--border-color);
622+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
623+
}
624+
625+
html[data-theme="dark"] .tip-content table thead,
626+
html[data-theme="dark"] .tip-content table thead {
627+
background-color: var(--primary-color);
628+
}
629+
630+
html[data-theme="dark"] .tip-content table tbody tr:hover,
631+
html[data-theme="dark"] .tip-content table tbody tr:hover {
632+
background-color: var(--bg-tertiary);
633+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
634+
}
635+
636+
/* Responsive table styling */
637+
@media (max-width: 768px) {
638+
.tip-content table {
639+
font-size: 0.875rem;
640+
margin: 1.5rem 0;
641+
}
642+
643+
.tip-content table thead th,
644+
.tip-content table tbody td {
645+
padding: 0.75rem 1rem;
646+
}
647+
648+
.tip-content table thead th {
649+
font-size: 0.8rem;
650+
}
651+
}
652+
653+
/* Enhanced table for comparison tables */
654+
.tip-content table.comparison-table {
655+
margin: 2.5rem 0;
656+
}
657+
658+
.tip-content table.comparison-table thead th:first-child {
659+
background: linear-gradient(135deg, #dc3545, #c82333);
660+
color: white;
661+
}
662+
663+
.tip-content table.comparison-table thead th:last-child {
664+
background: linear-gradient(135deg, #28a745, #218838);
665+
color: white;
666+
}
667+
668+
.tip-content table.comparison-table tbody td {
669+
position: relative;
670+
}
671+
672+
.tip-content table.comparison-table tbody td:first-child {
673+
background-color: rgba(220, 53, 69, 0.05);
674+
}
675+
676+
.tip-content table.comparison-table tbody td:last-child {
677+
background-color: rgba(40, 167, 69, 0.05);
678+
}
679+
680+
/* Dark theme comparison table adjustments */
681+
html[data-theme="dark"] .tip-content table.comparison-table tbody td:first-child,
682+
html[data-theme-resolved="dark"] .tip-content table.comparison-table tbody td:first-child {
683+
background-color: rgba(220, 53, 69, 0.15);
684+
}
685+
686+
html[data-theme="dark"] .tip-content table.comparison-table tbody td:last-child,
687+
html[data-theme-resolved="dark"] .tip-content table.comparison-table tbody td:last-child {
688+
background-color: rgba(40, 167, 69, 0.15);
689+
}
690+
553691
/* Header icon styling */
554692
.header-icon {
555693
width: 300px;

‎Web/wwwroot/js/analytics-stub.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Development Analytics Stub
2+
// This file provides a stub for Analytics functions in development
3+
// to prevent errors when analytics.js is not loaded
4+
5+
if (typeof Analytics === 'undefined') {
6+
window.Analytics = {
7+
isEnabled: () => false,
8+
pageView: () => {},
9+
trackTipView: () => {},
10+
trackCategoryView: () => {},
11+
trackTagClick: () => {},
12+
trackDifficultyFilter: () => {},
13+
trackSearch: () => {},
14+
trackShare: () => {}
15+
};
16+
}

‎Web/wwwroot/js/analytics.js‎

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,73 @@
11
// Analytics event tracking
22
const Analytics = {
3+
// Check if analytics is available (only in production)
4+
isEnabled: () => {
5+
return typeof gtag !== 'undefined';
6+
},
7+
38
// Track page views (called automatically by GA4)
49
pageView: (title, path) => {
5-
gtag('event', 'page_view', {
6-
page_title: title,
7-
page_path: path
8-
});
10+
if (Analytics.isEnabled()) {
11+
gtag('event', 'page_view', {
12+
page_title: title,
13+
page_path: path
14+
});
15+
}
916
},
1017

1118
// Track tip views
1219
trackTipView: (tipTitle, category) => {
13-
gtag('event', 'tip_view', {
14-
tip_title: tipTitle,
15-
category: category
16-
});
20+
if (Analytics.isEnabled()) {
21+
gtag('event', 'tip_view', {
22+
tip_title: tipTitle,
23+
category: category
24+
});
25+
}
1726
},
1827

1928
// Track category views
2029
trackCategoryView: (category) => {
21-
gtag('event', 'category_view', {
22-
category: category
23-
});
30+
if (Analytics.isEnabled()) {
31+
gtag('event', 'category_view', {
32+
category: category
33+
});
34+
}
2435
},
2536

2637
// Track tag clicks
2738
trackTagClick: (tag) => {
28-
gtag('event', 'tag_click', {
29-
tag: tag
30-
});
39+
if (Analytics.isEnabled()) {
40+
gtag('event', 'tag_click', {
41+
tag: tag
42+
});
43+
}
3144
},
3245

3346
// Track difficulty filter usage
3447
trackDifficultyFilter: (difficulty) => {
35-
gtag('event', 'difficulty_filter', {
36-
difficulty: difficulty
37-
});
48+
if (Analytics.isEnabled()) {
49+
gtag('event', 'difficulty_filter', {
50+
difficulty: difficulty
51+
});
52+
}
53+
}, // Track search queries
54+
trackSearch: (query) => {
55+
if (Analytics.isEnabled()) {
56+
gtag('event', 'search', {
57+
search_term: query
58+
});
59+
}
3860
},
3961

40-
// Track search queries
41-
trackSearch: (query) => {
42-
gtag('event', 'search', {
43-
search_term: query
44-
});
62+
// Track social shares
63+
trackShare: (method, contentType, itemId) => {
64+
if (Analytics.isEnabled()) {
65+
gtag('event', 'share', {
66+
method: method,
67+
content_type: contentType,
68+
item_id: itemId
69+
});
70+
}
4571
}
4672
};
4773

0 commit comments

Comments
 (0)