Skip to content

Commit 1c680a1

Browse files
marcpruxmarcprux
committed
Update country for datarights
1 parent 2c02c44 commit 1c680a1

6 files changed

Lines changed: 88 additions & 28 deletions

File tree

‎src/components/BackArrow.astro‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
/**
3+
* Subtle left-facing arrow that takes the user up one level.
4+
* Uses a relative "../" link so it works from any nested path.
5+
*/
6+
---
7+
<a href="../" class="back-arrow" aria-label="Back" title="Back">
8+
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
9+
<line x1="19" y1="12" x2="5" y2="12"></line>
10+
<polyline points="12 19 5 12 12 5"></polyline>
11+
</svg>
12+
</a>
13+
14+
<style>
15+
.back-arrow {
16+
display: inline-flex;
17+
align-items: center;
18+
justify-content: center;
19+
width: 2rem;
20+
height: 2rem;
21+
padding: 0.3rem;
22+
border-radius: 0.5rem;
23+
color: var(--pico-muted-color, #888);
24+
opacity: 0.6;
25+
text-decoration: none;
26+
transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
27+
}
28+
.back-arrow:hover {
29+
opacity: 1;
30+
transform: translateX(-2px);
31+
background-color: rgba(128, 128, 128, 0.08);
32+
color: var(--pico-color, inherit);
33+
}
34+
.back-arrow:focus-visible {
35+
outline: 2px solid currentColor;
36+
outline-offset: 2px;
37+
opacity: 1;
38+
}
39+
</style>

‎src/components/LanguagePicker.astro‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
11
---
22
/**
3-
* Dropdown language picker for the landing page.
3+
* Dropdown language picker for the landing page and CTA page.
44
* Uses a simple div-based menu (no ul/li) for maximum Safari compatibility.
55
* Client-side JS detects the browser language and promotes the match to the top.
6+
*
7+
* Props:
8+
* locale: current locale code (e.g. "en", "fr")
9+
* suffix: optional path suffix appended to each locale root
10+
* (e.g. "cta/" for CTA page so entries link to /{locale}/cta/).
11+
* For English ("en"), the root is "/" so "/cta/" is the result.
612
*/
713
import { languages } from '../i18n/config';
814
915
interface Props {
1016
locale: string;
17+
suffix?: string;
1118
}
1219
13-
const { locale } = Astro.props;
20+
const { locale, suffix = '' } = Astro.props;
1421
const currentLabel = languages[locale as keyof typeof languages]?.label ?? 'English';
1522
const entries = Object.entries(languages) as [string, { label: string; path: string }][];
23+
24+
// Build the URL for a given locale, honoring the suffix
25+
function localeHref(code: string, basePath: string): string {
26+
if (!suffix) return basePath;
27+
// basePath is e.g. "/fr/" or "/en/" — just append the suffix
28+
return basePath + suffix;
29+
}
1630
---
1731

1832
<div class="lang-picker" data-current={locale}>
@@ -23,7 +37,7 @@ const entries = Object.entries(languages) as [string, { label: string; path: str
2337
</button>
2438
<div class="lang-picker-menu">
2539
{entries.map(([code, { label, path }]) => (
26-
<a href={path} data-lang={code} class:list={['lang-picker-item', code === locale && 'lang-current']}>
40+
<a href={localeHref(code, path)} data-lang={code} class:list={['lang-picker-item', code === locale && 'lang-current']}>
2741
<span class="lang-picker-item-label">{label}</span>
2842
{code === locale && <span class="lang-picker-check">&#10003;</span>}
2943
</a>

‎src/data/signatures.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@
107107
- organization: "Data Rights"
108108
url: "datarights.ngo"
109109
poc: "Eliot Bendinelli <info@datarights.ngo>"
110-
region: "NL"
110+
region: "EU"
111111
social-mastodon: "https://eupolicy.social/@datarights"
112112
social-x: "https://x.com/dataRights_"
113113
social-linkedin: "https://linkedin.com/company/datarights-ngo"

‎src/layouts/Default.astro‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
---
2-
import { languages } from '../i18n/config';
32
import ThemeToggle from '../components/ThemeToggle.astro';
3+
import LanguagePicker from '../components/LanguagePicker.astro';
4+
import BackArrow from '../components/BackArrow.astro';
45
import Footer from '../components/Footer.astro';
56
import Base from './Base.astro';
7+
import '../styles/landing.css';
68
79
interface Props {
810
title: string;
@@ -31,39 +33,32 @@ const {
3133
site_copyright,
3234
open_letter_cta = "Read our open letter opposing the Android Developer Verification program",
3335
} = Astro.props;
34-
35-
const languageEntries = Object.entries(languages);
3636
---
37-
<Base
38-
title={title}
39-
lang={lang}
40-
description={description}
37+
<Base
38+
title={title}
39+
lang={lang}
40+
description={description}
4141
>
4242
<div id="kao-banner"></div>
4343
<script is:inline src="/banner.js?id=kao-banner&link=none&size=normal&hidebutton=off"></script>
4444
<div class="open-letter-cta">
4545
<a href="/open-letter">{open_letter_cta}</a>
4646
</div>
47+
<nav class="topbar">
48+
<div class="topbar-left">
49+
<BackArrow />
50+
<ThemeToggle />
51+
</div>
52+
<LanguagePicker locale={lang} suffix="cta/" />
53+
</nav>
4754
<header>
4855
<h1>{title}</h1>
4956
<span class="header-icons">
5057
<a href="https://techhub.social/@keepandroidopen" class="header-icon-link" aria-label="Mastodon" title="Mastodon" rel="me" target="_blank"><span class="social-icon icon-mastodon" style="width:20px;height:20px"></span></a>
5158
<a href="https://bsky.app/profile/keepandroidopen.bsky.social" class="header-icon-link" aria-label="BlueSky" title="BlueSky" target="_blank"><span class="social-icon icon-bluesky" style="width:20px;height:20px"></span></a>
5259
<a href="https://x.com/AlteredDeal" class="header-icon-link" aria-label="Twitter" title="Twitter" target="_blank"><span class="social-icon icon-x" style="width:20px;height:20px"></span></a>
5360
<a href="https://linkedin.com/company/keepandroidopen" class="header-icon-link" aria-label="LinkedIn" title="LinkedIn" target="_blank"><span class="social-icon icon-linkedin" style="width:20px;height:20px"></span></a>
54-
<ThemeToggle />
5561
</span>
56-
<div class="lang-menu">
57-
{languageEntries.map(([code, { label, path }], i) => (
58-
<>
59-
{i > 0 && ' | '}
60-
{code === lang
61-
? <strong>{label}</strong>
62-
: <a href={path}>{label}</a>
63-
}
64-
</>
65-
))}
66-
</div>
6762
</header>
6863
<main>
6964
<slot />

‎src/layouts/Letter.astro‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
---
22
import ThemeToggle from '../components/ThemeToggle.astro';
3+
import LanguagePicker from '../components/LanguagePicker.astro';
4+
import BackArrow from '../components/BackArrow.astro';
35
import Footer from '../components/Footer.astro';
46
import Base from './Base.astro';
7+
import '../styles/landing.css';
58
69
interface Props {
710
title: string;
@@ -14,19 +17,22 @@ const {
1417
lang,
1518
description,
1619
} = Astro.props;
17-
1820
---
1921

2022
<Base
2123
title={title}
2224
lang={lang}
2325
description={description}
2426
>
25-
<header>
26-
<h1><ThemeToggle /></h1>
27-
</header>
27+
<nav class="topbar">
28+
<div class="topbar-left">
29+
<BackArrow />
30+
<ThemeToggle />
31+
</div>
32+
<LanguagePicker locale={lang} />
33+
</nav>
2834
<main>
2935
<slot />
3036
</main>
3137
<Footer />
32-
</Base>
38+
</Base>

‎src/styles/landing.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@
1414
gap: 0.75rem;
1515
}
1616

17+
.topbar-left {
18+
display: inline-flex;
19+
align-items: center;
20+
gap: 0.25rem;
21+
}
22+
1723
/* ===== LANGUAGE PICKER ===== */
1824
.lang-picker {
1925
position: relative;

0 commit comments

Comments
 (0)