Skip to content

Commit ee3ee37

Browse files
neuromechanistneuromechanist
authored
Add OG meta tags, logo, dark mode, and branded footer (#208)
* Add OG meta tags to demo and dashboard pages Add Open Graph and Twitter Card meta tags so sharing links on Slack, Discord, Twitter, etc. shows a proper preview card with the OSA branding image from osc.earth. * Add OSA logo, dark mode, and branded footer - Inline SVG OSA logo in header (uses currentColor for dark mode compatibility) - Dark mode CSS via prefers-color-scheme on demo page - Footer with dynamic year, heart, and OSC link - Consistent deep blue color palette across both pages * Reorder footer: copyright holder first, then made with love * Fix review issues: dark mode, meta tags, broken links - Add dark mode to dashboard (matching frontend theme) - Add <meta name="description"> to both pages for SEO - Remove redundant twitter:title/description/image tags - Fix broken GitHub links (osc-em -> OpenScience-Collective) - Standardize org name to "OpenScience Collective" - Move dashboard inline styles to CSS classes - Rename .footer to .site-footer for consistency
1 parent f3d3309 commit ee3ee37

File tree

2 files changed

+201
-16
lines changed

2 files changed

+201
-16
lines changed

‎dashboard/osa/index.html‎

Lines changed: 90 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,20 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Open Science Assistant - Dashboard</title>
7+
8+
<!-- Open Graph -->
9+
<meta property="og:type" content="website">
10+
<meta property="og:url" content="https://status.osc.earth/osa/">
11+
<meta property="og:title" content="Open Science Assistant - Dashboard">
12+
<meta property="og:description" content="Real-time status and analytics for the Open Science Assistant. Monitor uptime, response times, and usage across research communities.">
13+
<meta property="og:image" content="https://osc.earth/og-image-osa.png">
14+
<meta property="og:site_name" content="OpenScience Collective">
15+
16+
<!-- Twitter Card -->
17+
<meta name="twitter:card" content="summary_large_image">
18+
19+
<meta name="description" content="Real-time status and analytics for the Open Science Assistant. Monitor uptime, response times, and usage across research communities.">
20+
721
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
822
<style>
923
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -383,7 +397,7 @@
383397
}
384398

385399
/* Footer */
386-
.footer {
400+
.site-footer {
387401
max-width: 1200px;
388402
margin: 0 auto;
389403
padding: 1.5rem 2rem;
@@ -392,20 +406,87 @@
392406
font-size: 0.8rem;
393407
border-top: 1px solid #e2e8f0;
394408
}
395-
.footer a { color: #64748b; text-decoration: none; }
396-
.footer a:hover { color: #2563eb; }
409+
.site-footer a { color: #64748b; text-decoration: none; }
410+
.site-footer a:hover { color: #2563eb; }
411+
412+
/* Logo */
413+
.top-bar-logo {
414+
display: flex;
415+
align-items: center;
416+
gap: 10px;
417+
}
418+
.top-bar-logo svg { color: #3d5a80; }
419+
420+
/* Dark mode */
421+
@media (prefers-color-scheme: dark) {
422+
body { background: #0d1117; color: #c8d6e8; }
423+
.top-bar { background: #161b22; border-color: #30363d; }
424+
.top-bar h1 { color: #c8d6e8; }
425+
.top-bar h1 span { color: #8a9bb5; }
426+
.top-bar-logo svg { color: #7ba3d4; }
427+
.top-bar-links a { color: #8a9bb5; }
428+
.top-bar-links a:hover { color: #7ba3d4; }
429+
.tab-bar { background: #161b22; border-color: #30363d; }
430+
.tab-link { color: #8a9bb5; }
431+
.tab-link:hover { background: #1c2128; color: #c8d6e8; }
432+
.tab-link.active { background: #7ba3d4; color: #0d1117; }
433+
.card { background: #161b22; border-color: #30363d; box-shadow: none; }
434+
.card h2 { color: #c8d6e8; border-color: #30363d; }
435+
.metric { background: #1c2128; border-color: #30363d; }
436+
.metric-value { color: #c8d6e8; }
437+
.metric-label { color: #8a9bb5; }
438+
.community-card { background: #1c2128; border-color: #30363d; }
439+
.community-card:hover { border-color: #8a9bb5; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
440+
.community-card h3 { color: #c8d6e8; }
441+
.community-card h3 a { color: #c8d6e8; }
442+
.community-card h3 a:hover { color: #7ba3d4; }
443+
.community-card .description { color: #8a9bb5; }
444+
.community-card .stats { color: #8a9bb5; }
445+
.community-card .stats strong { color: #c8d6e8; }
446+
.community-card-links a { color: #8a9bb5; background: #0d1117; border-color: #30363d; }
447+
.community-card-links a:hover { border-color: #7ba3d4; color: #7ba3d4; }
448+
.status-healthy { background: #0d2818; color: #4ade80; }
449+
.status-degraded { background: #2d1f04; color: #fbbf24; }
450+
.status-error { background: #3b1219; color: #f87171; }
451+
.status-unknown { background: #1c2128; color: #8a9bb5; }
452+
.period-btn { border-color: #30363d; background: #161b22; color: #8a9bb5; }
453+
.period-btn:hover { border-color: #7ba3d4; color: #7ba3d4; }
454+
.period-btn.active { background: #7ba3d4; color: #0d1117; border-color: #7ba3d4; }
455+
.sync-item { background: #1c2128; border-color: #30363d; }
456+
.sync-item-label { color: #c8d6e8; }
457+
.sync-item-value { color: #8a9bb5; }
458+
.community-header h2 { color: #c8d6e8; }
459+
.community-detail-links a { color: #8a9bb5; border-color: #30363d; }
460+
.community-detail-links a:hover { border-color: #7ba3d4; color: #7ba3d4; }
461+
.admin-section { border-color: #30363d; }
462+
.admin-section h3 { color: #c8d6e8; }
463+
.admin-input { background: #0d1117; border-color: #30363d; color: #c8d6e8; }
464+
.admin-input:focus { border-color: #7ba3d4; }
465+
.admin-btn { background: #7ba3d4; color: #0d1117; }
466+
.admin-btn:hover { background: #93b8de; }
467+
.loading { color: #8a9bb5; }
468+
.error-msg { color: #f87171; background: #3b1219; border-color: #5c1d2a; }
469+
.site-footer { color: #6b7b92; border-color: #30363d; }
470+
.site-footer a { color: #7ba3d4; }
471+
}
397472
</style>
398473
</head>
399474
<body>
400475
<div class="top-bar">
401476
<div class="top-bar-inner">
402-
<h1>Open Science Assistant <span>Dashboard</span></h1>
477+
<div class="top-bar-logo">
478+
<svg width="48" height="32" viewBox="0 0 120 80" aria-hidden="true">
479+
<rect x="2" y="2" width="116" height="76" rx="3" fill="none" stroke="currentColor" stroke-width="3.5" opacity="0.5"/>
480+
<text x="60" y="40" font-family="Inter, -apple-system, sans-serif" font-size="42" font-weight="700" fill="currentColor" text-anchor="middle" dominant-baseline="central" letter-spacing="-1">OSA</text>
481+
</svg>
482+
<h1>Open Science Assistant <span>Dashboard</span></h1>
483+
</div>
403484
<div class="top-bar-links">
404485
<a href="https://docs.osc.earth/osa/" target="_blank" rel="noopener">
405486
<svg viewBox="0 0 20 20" fill="currentColor"><path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"/></svg>
406487
Docs
407488
</a>
408-
<a href="https://github.com/osc-em/osa" target="_blank" rel="noopener">
489+
<a href="https://github.com/OpenScience-Collective/osa" target="_blank" rel="noopener">
409490
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
410491
GitHub
411492
</a>
@@ -436,13 +517,14 @@ <h2>Admin Access</h2>
436517
</div>
437518
</div>
438519

439-
<div class="footer">
520+
<div class="site-footer">
440521
&copy; <script>document.write(new Date().getFullYear())</script>
441-
<a href="https://osc.earth" target="_blank" rel="noopener">Open Science Collective</a>
522+
<a href="https://osc.earth" target="_blank" rel="noopener">OpenScience Collective</a>
523+
&middot; Made with ❤️
442524
&middot;
443525
<a href="https://docs.osc.earth/osa/" target="_blank" rel="noopener">Documentation</a>
444526
&middot;
445-
<a href="https://github.com/osc-em/osa" target="_blank" rel="noopener">Source</a>
527+
<a href="https://github.com/OpenScience-Collective/osa" target="_blank" rel="noopener">Source</a>
446528
</div>
447529

448530
<script>

‎frontend/index.html‎

Lines changed: 111 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,109 @@
1616
})();
1717
</script>
1818
<title>OSA Chat Widget Demo</title>
19+
20+
<!-- Open Graph -->
21+
<meta property="og:type" content="website">
22+
<meta property="og:url" content="https://demo.osc.earth/">
23+
<meta property="og:title" content="Open Science Assistant - Demo">
24+
<meta property="og:description" content="AI-powered assistants for research communities. Try HED, BIDS, EEGLAB, and NEMAR assistants with domain expertise and documentation.">
25+
<meta property="og:image" content="https://osc.earth/og-image-osa.png">
26+
<meta property="og:site_name" content="OpenScience Collective">
27+
28+
<!-- Twitter Card -->
29+
<meta name="twitter:card" content="summary_large_image">
30+
31+
<meta name="description" content="AI-powered assistants for research communities. Try HED, BIDS, EEGLAB, and NEMAR assistants with domain expertise and documentation.">
32+
1933
<style>
2034
body {
2135
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
22-
max-width: 800px;
23-
margin: 0 auto;
24-
padding: 40px 20px;
36+
margin: 0;
37+
padding: 0;
2538
background: #f9fafb;
2639
min-height: 100vh;
40+
color: #2c4a6e;
41+
}
42+
.top-bar {
43+
background: white;
44+
border-bottom: 1px solid #e5e7eb;
45+
padding: 0.9rem 2rem;
46+
position: sticky;
47+
top: 0;
48+
z-index: 100;
49+
}
50+
.top-bar-inner {
51+
max-width: 800px;
52+
margin: 0 auto;
53+
display: flex;
54+
align-items: center;
55+
gap: 12px;
2756
}
57+
.top-bar-logo {
58+
display: flex;
59+
align-items: center;
60+
gap: 10px;
61+
text-decoration: none;
62+
color: #2c4a6e;
63+
font-weight: 700;
64+
font-size: 1.1rem;
65+
}
66+
.top-bar-logo:hover { color: #3d5a80; }
67+
.top-bar-logo svg { color: #3d5a80; }
68+
.page-content {
69+
max-width: 800px;
70+
margin: 0 auto;
71+
padding: 32px 20px;
72+
}
73+
.site-footer {
74+
max-width: 800px;
75+
margin: 0 auto;
76+
padding: 24px 20px;
77+
text-align: center;
78+
color: #6b8db5;
79+
font-size: 13px;
80+
border-top: 1px solid #e5e7eb;
81+
}
82+
.site-footer a { color: #3d5a80; text-decoration: none; }
83+
.site-footer a:hover { color: #2c4a6e; text-decoration: underline; }
2884
h1 {
29-
color: #1f2937;
85+
color: #2c4a6e;
3086
margin-bottom: 16px;
3187
}
3288
p {
33-
color: #6b7280;
89+
color: #3d5a80;
3490
line-height: 1.6;
3591
}
92+
93+
/* Dark mode */
94+
@media (prefers-color-scheme: dark) {
95+
body { background: #0d1117; color: #c8d6e8; }
96+
.top-bar { background: #161b22; border-color: #30363d; }
97+
.top-bar-logo { color: #c8d6e8; }
98+
.top-bar-logo:hover { color: #7ba3d4; }
99+
.top-bar-logo svg { color: #7ba3d4; }
100+
h1 { color: #c8d6e8; }
101+
h2 { color: #c8d6e8; }
102+
h3 { color: #c8d6e8; }
103+
p { color: #8a9bb5; }
104+
.info-box { background: #161b22; border: 1px solid #30363d; box-shadow: none; }
105+
.info-box h2 { color: #c8d6e8; }
106+
.community-card { background: #161b22; border: 1px solid #30363d; box-shadow: none; }
107+
.community-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
108+
.community-card h3 { color: #c8d6e8; }
109+
.community-card p { color: #8a9bb5; }
110+
code { background: #30363d; color: #c8d6e8; }
111+
pre { background: #0d1117; border: 1px solid #30363d; }
112+
ul { color: #8a9bb5; }
113+
.feature-item { background: #1c2128; color: #8a9bb5; }
114+
.feature-item strong { color: #c8d6e8; }
115+
.badge { background: #1c3a5f; color: #7ba3d4; }
116+
.links a { color: #7ba3d4; }
117+
.status-active { background: #0d2818; color: #4ade80; }
118+
.status-soon { background: #2d1f04; color: #fbbf24; }
119+
.site-footer { border-color: #30363d; color: #6b7b92; }
120+
.site-footer a { color: #7ba3d4; }
121+
}
36122
.info-box {
37123
background: white;
38124
border-radius: 12px;
@@ -161,7 +247,18 @@
161247
</style>
162248
</head>
163249
<body>
164-
<div id="page-content"></div>
250+
<div class="top-bar">
251+
<div class="top-bar-inner">
252+
<a href="/" class="top-bar-logo">
253+
<svg width="48" height="32" viewBox="0 0 120 80" aria-hidden="true">
254+
<rect x="2" y="2" width="116" height="76" rx="3" fill="none" stroke="currentColor" stroke-width="3.5" opacity="0.5"/>
255+
<text x="60" y="40" font-family="Inter, -apple-system, sans-serif" font-size="42" font-weight="700" fill="currentColor" text-anchor="middle" dominant-baseline="central" letter-spacing="-1">OSA</text>
256+
</svg>
257+
Open Science Assistant
258+
</a>
259+
</div>
260+
</div>
261+
<div class="page-content" id="page-content"></div>
165262

166263
<!-- Load the OSA Chat Widget (no-auto-init: we init after loading community config) -->
167264
<script src="osa-chat-widget.js" data-no-auto-init></script>
@@ -346,7 +443,7 @@ <h2>Learn More</h2>
346443
<div class="links">
347444
<a href="https://docs.osc.earth/osa/" target="_blank" rel="noopener">Documentation</a>
348445
<a href="https://github.com/OpenScience-Collective/osa" target="_blank" rel="noopener">GitHub Repository</a>
349-
<a href="https://osc.earth" target="_blank" rel="noopener">Open Science Collective</a>
446+
<a href="https://osc.earth" target="_blank" rel="noopener">OpenScience Collective</a>
350447
</div>
351448
</div>
352449
`;
@@ -413,7 +510,7 @@ <h2>Learn More</h2>
413510
<div class="links">
414511
<a href="https://docs.osc.earth/osa/" target="_blank" rel="noopener">Documentation</a>
415512
<a href="https://github.com/OpenScience-Collective/osa" target="_blank" rel="noopener">GitHub Repository</a>
416-
<a href="https://osc.earth" target="_blank" rel="noopener">Open Science Collective</a>
513+
<a href="https://osc.earth" target="_blank" rel="noopener">OpenScience Collective</a>
417514
</div>
418515
</div>
419516
`;
@@ -427,5 +524,11 @@ <h2>Learn More</h2>
427524
// Load communities from API and then route
428525
loadCommunities();
429526
</script>
527+
528+
<div class="site-footer">
529+
&copy; <script>document.write(new Date().getFullYear())</script>
530+
<a href="https://osc.earth" target="_blank" rel="noopener">OpenScience Collective</a>
531+
&middot; Made with ❤️
532+
</div>
430533
</body>
431534
</html>

0 commit comments

Comments
 (0)