Skip to content

Restructure navigation: streamline header and integrate content #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
willwade merged 5 commits into from
Feb 25, 2026
Merged

Restructure navigation: streamline header and integrate content #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fab0f57
Restructure navigation: streamline header and integrate content
Feb 25, 2026
5301e02
Fix Prettier formatting issues
Feb 25, 2026
506f7cd
Fix Prettier formatting for docs/index.astro
Feb 25, 2026
c8bbdb2
tried to reduce some bits on home page - and style the gif in place -…
willwade Feb 25, 2026
6837724
adding yvette video
willwade Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 71 additions & 24 deletions src/layouts/BaseLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,8 @@ const currentPath = Astro.url.pathname;
const navItems = [
{ href: '/', label: 'Home' },
{ href: '/about/', label: 'About' },
{ href: '/demonstrations/', label: 'Demonstrations' },
{ href: '/downloads/', label: 'Downloads' },
{ href: '/docs/', label: 'Docs' },
{ href: '/search/', label: 'Search' },
{ href: '/community/', label: 'Community' },
{ href: '/faq/', label: 'FAQ' },
];
---
Expand Down Expand Up @@ -49,11 +46,27 @@ const navItems = [
}
<li>
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode">
<svg id="sun-icon" class="theme-icon" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
<svg
id="sun-icon"
class="theme-icon"
fill="currentColor"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
clip-rule="evenodd"></path>
</svg>
<svg id="moon-icon" class="theme-icon" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
<svg
id="moon-icon"
class="theme-icon"
fill="currentColor"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"
></path>
</svg>
</button>
</li>
Expand All @@ -68,12 +81,25 @@ const navItems = [

<footer class="site-footer">
<div class="container site-footer-inner">
<p>Dasher Project</p>
<p>
<a href="https://github.com/dasher-project" target="_blank" rel="noopener noreferrer"
>GitHub</a
>
</p>
<div class="footer-brand">
<p><strong>Dasher Project</strong></p>
</div>
<nav class="footer-nav" aria-label="Footer">
<ul class="footer-nav-list">
{
navItems.map((item) => (
<li>
<a href={item.href}>{item.label}</a>
</li>
))
}
<li>
<a href="https://github.com/dasher-project" target="_blank" rel="noopener noreferrer"
>GitHub</a
>
</li>
</ul>
</nav>
</div>
</footer>

Expand All @@ -83,7 +109,7 @@ const navItems = [
const html = document.documentElement;
const sunIcon = document.getElementById('sun-icon');
const moonIcon = document.getElementById('moon-icon');

function updateIcons() {
if (html.classList.contains('dark')) {
sunIcon.style.display = 'block';
Expand All @@ -93,21 +119,24 @@ const navItems = [
moonIcon.style.display = 'block';
}
}

function toggleTheme() {
html.classList.toggle('dark');
localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
updateIcons();
}

// Initialize theme from localStorage or system preference
if (localStorage.getItem('theme') === 'dark' ||
(!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
if (
localStorage.getItem('theme') === 'dark' ||
(!localStorage.getItem('theme') &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
html.classList.add('dark');
}

updateIcons();

themeToggle.addEventListener('click', toggleTheme);
</script>
</body>
Expand All @@ -125,7 +154,9 @@ const navItems = [
background: color-mix(in srgb, var(--color-bg-primary) 95%, transparent);
border-bottom: 1px solid var(--color-border-subtle);
backdrop-filter: blur(8px);
transition: background-color 0.3s ease, border-color 0.3s ease;
transition:
background-color 0.3s ease,
border-color 0.3s ease;
}

html.dark .site-header {
Expand Down Expand Up @@ -213,11 +244,27 @@ const navItems = [
color: var(--color-text-secondary);
}

.site-footer a {
color: var(--color-link);
.footer-brand p {
margin: 0;
color: var(--color-text-primary);
}

.footer-nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-md);
}

.footer-nav-list a {
color: var(--color-text-secondary);
text-decoration: none;
transition: var(--transition-smooth);
}

.site-footer a:hover {
.footer-nav-list a:hover {
color: var(--color-link-hover);
}

Expand Down
154 changes: 151 additions & 3 deletions src/pages/about.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,15 @@ import BaseLayout from '../layouts/BaseLayout.astro';
steering toward your target, you can enter text at speeds competitive with touch typing,
using only a single pointing device.
</p>
<div class="demo-note">
<p>
Real-world example: Yvette, a Dasher user, writes using a trackpad and reports speeds
of around 32 words per minute, faster than other techniques she has tried.
</p>
<p>
<a href="#yvette-trackpad-demo">Watch Yvette's demonstration video</a>.
</p>
</div>

<h2>Origins</h2>
<p>
Expand Down Expand Up @@ -99,8 +108,9 @@ import BaseLayout from '../layouts/BaseLayout.astro';
<ul>
<li><a href="/docs/">Documentation</a></li>
<li><a href="/faq/">FAQ</a></li>
<li><a href="/press/">Press Information</a></li>
<li><a href="/demonstrations/">Demonstrations</a></li>
<li><a href="/downloads/">Downloads</a></li>
<li><a href="#demonstrations">Video Demos</a></li>
<li><a href="#community">Community</a></li>
<li>
<a
href="https://github.com/dasher-project/dasher"
Expand All @@ -115,7 +125,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
rel="noopener noreferrer">Releases</a
>
</li>
<li><a href="/community/">Community</a></li>
</ul>
</div>
</div>
Expand Down Expand Up @@ -182,5 +191,144 @@ import BaseLayout from '../layouts/BaseLayout.astro';
</div>
</div>
</section>

<!-- Video Demonstrations -->
<section class="section" id="demonstrations">
<h2>Video Demonstrations</h2>
<p class="lead">
Watch Dasher in action with these video demonstrations showing different input methods.
</p>
<p>
<a
href="https://www.youtube.com/playlist?list=PLG22wrzFpavafCF-5u9jh6kS-UAIGkPbw"
target="_blank"
rel="noopener noreferrer"
class="btn-secondary">Open Full YouTube Playlist</a
>
</p>

<div class="video-list">
<div class="video-item" id="yvette-trackpad-demo">
<h3>Yvette: Trackpad Demo (~32 WPM)</h3>
<p>
Yvette uses Dasher with a trackpad and reports typing at around 32 words per minute.
</p>
<div class="video-player">
<iframe
src="https://www.youtube.com/embed/va1WufK864o"
title="Yvette using Dasher with a trackpad"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
>
</iframe>
</div>
</div>

<div class="video-item">
<h3>Eye-Tracking Demo (Nov 2001)</h3>
<p>Classic eye-tracking demonstration from the original project videos.</p>
<div class="video-player">
<iframe
src="https://www.youtube.com/embed/-96VfRFS7tw"
title="Eye-tracking demo (Nov 2001)"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
>
</iframe>
</div>
</div>

<div class="video-item">
<h3>Control Mode</h3>
<p>Enhanced eye-tracking mode demonstrating control mode behavior.</p>
<div class="video-player">
<iframe
src="https://www.youtube.com/embed/KwpGpCSK2Pk"
title="Dasher control mode demo"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
>
</iframe>
</div>
</div>

<div class="video-item">
<h3>Dasher Eyetracker and BreathDasher</h3>
<p>Additional legacy demos now hosted on YouTube.</p>
<div class="video-player">
<iframe
src="https://www.youtube.com/embed/qW2-Qvj_p7k"
title="Dasher Eyetracker demo"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
>
</iframe>
</div>
<p>
More videos:
<a href="https://youtu.be/Bz3OJXokFDs" target="_blank" rel="noopener noreferrer"
>EyeDasher 4800</a
>,
<a href="https://youtu.be/_tMIotLU7Co" target="_blank" rel="noopener noreferrer"
>BreathDasher</a
>.
</p>
</div>
</div>
</section>

<!-- Community -->
<section class="section" id="community">
<h2>Join the Dasher Community</h2>
<p>
Dasher is developed and maintained by a global community of users, developers, and
researchers. We welcome contributions of all kinds.
</p>

<div class="community-links">
<a
href="https://matrix.to/#/#dasher:matrix.org"
target="_blank"
rel="noopener noreferrer"
class="community-link"
>
<h3>Matrix Chat</h3>
<p>Join our real-time chat for questions and support.</p>
</a>

<a
href="https://github.com/dasher-project/dasher"
target="_blank"
rel="noopener noreferrer"
class="community-link"
>
<h3>GitHub</h3>
<p>Report bugs, request features, and contribute code.</p>
</a>

<a
href="https://github.com/dasher-project/dasher/discussions"
target="_blank"
rel="noopener noreferrer"
class="community-link"
>
<h3>Discussions</h3>
<p>Share questions and ideas with the community.</p>
</a>

<a href="/blog/" class="community-link">
<h3>Blog</h3>
<p>News, updates, and development progress.</p>
</a>
</div>
</section>
</div>
</BaseLayout>
58 changes: 0 additions & 58 deletions src/pages/community.astro
View file
Open in desktop

This file was deleted.

Loading
Loading