Skip to content

Redesign the homepage and related pages with a quieter editorial layout. #495

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

Open
nassimessaidi wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Redesign the homepage and related pages with a quieter editorial layout. #495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
54 changes: 52 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@
"validate": "html-validate 'dist/**/*.html'"
},
"dependencies": {
"@fontsource-variable/source-sans-3": "^5.3.0",
"@fontsource-variable/source-serif-4": "^5.3.0",
"@fontsource/ibm-plex-sans-arabic": "^5.3.0",
"@fontsource/ibm-plex-sans-hebrew": "^5.3.0",
"@fontsource/noto-naskh-arabic": "^5.3.0",
"astro": "^6.3.3",
"marked": "^17.0.2",
"rehype-autolink-headings": "^7.1.0",
Expand Down
17 changes: 13 additions & 4 deletions src/components/BackArrow.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,13 @@
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0.3rem;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border-radius: 0.5rem;
border: 1px solid var(--pico-muted-border-color);
color: var(--pico-muted-color, #888);
opacity: 0.6;
opacity: 0.8;
text-decoration: none;
transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}
Expand All @@ -31,6 +32,14 @@
background-color: rgba(128, 128, 128, 0.08);
color: var(--pico-color, inherit);
}

:global([dir='rtl']) .back-arrow svg {
transform: scaleX(-1);
}

:global([dir='rtl']) .back-arrow:hover {
transform: translateX(2px);
}
.back-arrow:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
Expand Down
106 changes: 84 additions & 22 deletions src/components/LanguagePicker.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* (e.g. "cta/" for CTA page so entries link to /{locale}/cta/).
* For English ("en"), the root is "/" so "/cta/" is the result.
*/
import { languages } from '../i18n/config';
import { languages, isRtl } from '../i18n/config';

interface Props {
locale: string;
Expand All @@ -20,6 +20,7 @@ interface Props {
const { locale, suffix = '' } = Astro.props;
const currentLabel = languages[locale as keyof typeof languages]?.label ?? 'English';
const entries = Object.entries(languages) as [string, { label: string; path: string }][];
const menuId = `language-picker-${locale}-${suffix || 'home'}`.replace(/[^a-zA-Z0-9_-]/g, '-');

// Build the URL for a given locale, honoring the suffix
function localeHref(code: string, basePath: string): string {
Expand All @@ -30,19 +31,31 @@ function localeHref(code: string, basePath: string): string {
---

<div class="lang-picker" data-current={locale}>
<button class="lang-picker-btn" type="button" aria-expanded="false">
<span class="lang-picker-globe">&#127760;</span>
<button class="lang-picker-btn" type="button" aria-expanded="false" aria-controls={menuId} aria-haspopup="true">
<svg class="lang-picker-globe" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<circle cx="12" cy="12" r="9"></circle>
<path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"></path>
</svg>
<span class="lang-picker-label">{currentLabel}</span>
<span class="lang-picker-caret">&#9662;</span>
<span class="lang-picker-caret" aria-hidden="true">&#9662;</span>
</button>
<div class="lang-picker-menu">
<ul id={menuId} class="lang-picker-menu" hidden>
{entries.map(([code, { label, path }]) => (
<a href={localeHref(code, path)} data-lang={code} class:list={['lang-picker-item', code === locale && 'lang-current']}>
<span class="lang-picker-item-label">{label}</span>
{code === locale && <span class="lang-picker-check">&#10003;</span>}
</a>
<li>
<a
href={localeHref(code, path)}
data-lang={code}
lang={code}
dir={isRtl(code) ? 'rtl' : 'ltr'}
aria-current={code === locale ? 'page' : undefined}
class:list={['lang-picker-item', code === locale && 'lang-current']}
>
<span class="lang-picker-item-label">{label}</span>
{code === locale && <span class="lang-picker-check" aria-hidden="true">&#10003;</span>}
</a>
</li>
))}
</div>
</ul>
</div>

<script is:inline>
Expand All @@ -54,31 +67,79 @@ function localeHref(code: string, basePath: string): string {
*/
(function() {
document.querySelectorAll('.lang-picker-btn').forEach(function(btn) {
var menu = document.getElementById(btn.getAttribute('aria-controls'));
if (!menu) return;

function closeMenu(returnFocus) {
menu.hidden = true;
btn.setAttribute('aria-expanded', 'false');
if (returnFocus) btn.focus();
}

function openMenu(focusFirst) {
document.querySelectorAll('.lang-picker-menu:not([hidden])').forEach(function(otherMenu) {
otherMenu.hidden = true;
});
document.querySelectorAll('.lang-picker-btn').forEach(function(otherButton) {
otherButton.setAttribute('aria-expanded', 'false');
});
menu.hidden = false;
btn.setAttribute('aria-expanded', 'true');
if (focusFirst) {
var current = menu.querySelector('[aria-current="page"]');
var first = menu.querySelector('.lang-picker-item');
(current || first)?.focus();
}
}

btn.addEventListener('click', function(e) {
e.stopPropagation();
var menu = btn.parentElement.querySelector('.lang-picker-menu');
var isOpen = menu.classList.contains('is-open');
// Close any other open pickers first
document.querySelectorAll('.lang-picker-menu.is-open').forEach(function(m) { m.classList.remove('is-open'); });
document.querySelectorAll('.lang-picker-btn').forEach(function(b) { b.setAttribute('aria-expanded', 'false'); });
if (!isOpen) {
menu.classList.add('is-open');
btn.setAttribute('aria-expanded', 'true');
if (menu.hidden) openMenu(false);
else closeMenu(false);
});

btn.addEventListener('keydown', function(e) {
if (e.key === 'ArrowDown') {
e.preventDefault();
openMenu(true);
}
});

menu.addEventListener('keydown', function(e) {
var items = Array.from(menu.querySelectorAll('.lang-picker-item'));
var index = items.indexOf(document.activeElement);

if (e.key === 'Escape') {
e.preventDefault();
closeMenu(true);
} else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
e.preventDefault();
var direction = e.key === 'ArrowDown' ? 1 : -1;
items[(index + direction + items.length) % items.length]?.focus();
} else if (e.key === 'Home' || e.key === 'End') {
e.preventDefault();
items[e.key === 'Home' ? 0 : items.length - 1]?.focus();
}
});
});

document.addEventListener('click', function(e) {
if (!e.target.closest('.lang-picker')) {
document.querySelectorAll('.lang-picker-menu.is-open').forEach(function(m) { m.classList.remove('is-open'); });
document.querySelectorAll('.lang-picker-menu:not([hidden])').forEach(function(m) { m.hidden = true; });
document.querySelectorAll('.lang-picker-btn').forEach(function(b) { b.setAttribute('aria-expanded', 'false'); });
}
});

document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
document.querySelectorAll('.lang-picker-menu.is-open').forEach(function(m) { m.classList.remove('is-open'); });
document.querySelectorAll('.lang-picker-btn').forEach(function(b) { b.setAttribute('aria-expanded', 'false'); });
var openMenu = document.querySelector('.lang-picker-menu:not([hidden])');
if (!openMenu) return;
openMenu.hidden = true;
var button = document.querySelector('[aria-controls="' + openMenu.id + '"]');
if (button) {
button.setAttribute('aria-expanded', 'false');
button.focus();
}
}
});

Expand Down Expand Up @@ -106,7 +167,8 @@ function localeHref(code: string, basePath: string): string {

if (match && match.getAttribute('data-lang') !== current) {
match.classList.add('lang-detected');
menu.insertBefore(match, menu.firstChild);
match.setAttribute('title', 'Suggested from browser language');
menu.insertBefore(match.parentElement, menu.firstElementChild);
}
});
})();
Expand Down
29 changes: 18 additions & 11 deletions src/components/QuoteTicker.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ const actualDuration = Math.round(jitter);
* SPDX-License-Identifier: Apache-2.0
*/
(function() {
if (window.__tickerV6) return;
window.__tickerV6 = true;
if (window.__tickerV7) return;
window.__tickerV7 = true;

var TOUCH_PAUSE_MS = 10000;
var RAMP_MS = 600;
Expand All @@ -60,7 +60,6 @@ const actualDuration = Math.round(jitter);
}
}

// Smoothly ramp playbackRate from current to target over RAMP_MS
function rampRate(anim, target, ms) {
if (!anim) return;
var start = anim.playbackRate;
Expand All @@ -69,7 +68,6 @@ const actualDuration = Math.round(jitter);
if (!startTime) startTime = ts;
var elapsed = ts - startTime;
var progress = Math.min(elapsed / ms, 1);
// Ease-in-out cubic
var ease = progress < 0.5
? 4 * progress * progress * progress
: 1 - Math.pow(-2 * progress + 2, 3) / 2;
Expand All @@ -80,7 +78,6 @@ const actualDuration = Math.round(jitter);
}

ready(function() {
// Assign per-card colors
document.querySelectorAll('.ticker-card').forEach(function(card) {
if (card.getAttribute('data-color')) {
card.style.setProperty('--tc-accent', card.getAttribute('data-color'));
Expand All @@ -100,23 +97,34 @@ const actualDuration = Math.round(jitter);
var halves = track.querySelectorAll('.ticker-half');
var touchTimer = null;

// Get the CSS animation object from the track element
function getAnim() {
var anims = track.getAnimations();
return anims.length > 0 ? anims[0] : null;
}

// Mouse hover: gently ramp to 0 on enter, back to 1 on leave
function pause() {
rampRate(getAnim(), 0, RAMP_MS);
}

function resume() {
rampRate(getAnim(), 1, RAMP_MS);
}

el.addEventListener('pointerenter', function(e) {
if (e.pointerType !== 'mouse') return;
rampRate(getAnim(), 0, RAMP_MS);
pause();
});
el.addEventListener('pointerleave', function(e) {
if (e.pointerType !== 'mouse') return;
rampRate(getAnim(), 1, RAMP_MS);
resume();
});

el.addEventListener('focusin', pause);
el.addEventListener('focusout', function(e) {
if (el.contains(e.relatedTarget)) return;
resume();
});

// Touch: instant pause, resume after timeout
el.addEventListener('touchstart', function() {
var anim = getAnim();
if (anim) anim.playbackRate = 0;
Expand All @@ -126,7 +134,6 @@ const actualDuration = Math.round(jitter);
}, TOUCH_PAUSE_MS);
}, {passive: true});

// Reshuffle on each animation cycle
track.addEventListener('animationiteration', function() {
for (var i = 0; i < halves.length; i++) {
shuffleChildren(halves[i]);
Expand Down
Loading
Loading