Skip to content

Commit 5eb7579

Browse files
omri374claude
omri374
and
claude
authored
Icon contacts (GitHub/Discord/email) + Guardian-style footer + CC BY (#4)
* feat(site): icon contacts, Discord, email, Guardian-style footer - Replace the nav "GitHub" text link with a GitHub icon; add a Discord icon (public invite link). - Add contact@dataprivacystack.org (mailto) as a way to reach us. - Rework the footer into a 4-column layout (Brand / Navigate / Projects / Get in touch) with a social icon row (GitHub, Discord, email), based on guardianproject.info's structure. - Add a bottom bar: "© 2026 Data Privacy Stack · Site content under CC BY 4.0 · project code is licensed per repository." Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * chore: update Discord invite link Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
1 parent 2c68ff3 commit 5eb7579

1 file changed

Lines changed: 116 additions & 21 deletions

File tree

‎src/pages/index.astro‎

Lines changed: 116 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ const githubOrg = "https://github.com/data-privacy-stack";
99
const presidioDocs = "https://presidio.dataprivacystack.org";
1010
const presidioRepo = "https://github.com/data-privacy-stack/presidio";
1111
const mvgRepo = "https://github.com/data-privacy-stack/MVG";
12+
const discordUrl = "https://discord.gg/MewtBGFquB";
13+
const contactEmail = "contact@dataprivacystack.org";
14+
const ccByUrl = "https://creativecommons.org/licenses/by/4.0/";
1215
1316
const principles = [
1417
{ title: "Open", body: "Permissively licensed, community-driven, and developed in the open." },
@@ -63,7 +66,7 @@ const posts = (await getCollection("docs"))
6366
<header class="nav">
6467
<a class="brand" href="#top">
6568
<Image class="brand-mark" src={mark} alt="" width={28} height={28} aria-hidden="true" />
66-
Data Privacy Stack
69+
<span class="brand-label">Data Privacy Stack</span>
6770
</a>
6871
<nav id="nav-links" class="links">
6972
<a href="#about">About</a>
@@ -72,8 +75,13 @@ const posts = (await getCollection("docs"))
7275
<a href="#blog">Blog</a>
7376
<a href="#community">Community</a>
7477
<a href={presidioDocs}>Docs</a>
75-
<a href={githubOrg}>GitHub</a>
7678
</nav>
79+
<a class="icon-btn" href={githubOrg} aria-label="GitHub" title="GitHub">
80+
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23a11.51 11.51 0 0 1 3.003-.404c1.018.005 2.045.138 3.003.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222 0 1.606-.014 2.898-.014 3.293 0 .321.218.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
81+
</a>
82+
<a class="icon-btn" href={discordUrl} aria-label="Discord" title="Discord">
83+
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
84+
</a>
7785
<button id="theme-toggle" class="theme-toggle" type="button" aria-label="Toggle dark mode">
7886
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
7987
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
@@ -225,18 +233,58 @@ const posts = (await getCollection("docs"))
225233
</main>
226234

227235
<footer class="site-footer">
228-
<div class="foot-brand">
229-
<strong>Data Privacy Stack</strong>
230-
<p>Open, transparent tools for private data handling.</p>
236+
<div class="foot-cols">
237+
<div class="foot-brand">
238+
<div class="foot-brandline">
239+
<Image class="brand-mark" src={mark} alt="" width={28} height={28} aria-hidden="true" />
240+
<strong>Data Privacy Stack</strong>
241+
</div>
242+
<p>Open, transparent tools for private data handling.</p>
243+
</div>
244+
245+
<div class="foot-col">
246+
<h4>Navigate</h4>
247+
<a href="#about">About</a>
248+
<a href="#projects">Projects</a>
249+
<a href="#governance">Governance</a>
250+
<a href="#blog">Blog</a>
251+
<a href="#community">Community</a>
252+
<a href={presidioDocs}>Docs</a>
253+
</div>
254+
255+
<div class="foot-col">
256+
<h4>Projects</h4>
257+
<a href={presidioDocs}>Presidio docs</a>
258+
<a href={presidioRepo}>Presidio on GitHub</a>
259+
<a href="https://pypi.org/project/presidio-analyzer/">Presidio on PyPI</a>
260+
</div>
261+
262+
<div class="foot-col">
263+
<h4>Get in touch</h4>
264+
<a href={`mailto:${contactEmail}`}>{contactEmail}</a>
265+
<a href={discordUrl}>Discord</a>
266+
<a href={githubOrg}>GitHub</a>
267+
<div class="foot-social">
268+
<a class="icon-btn" href={githubOrg} aria-label="GitHub" title="GitHub">
269+
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23a11.51 11.51 0 0 1 3.003-.404c1.018.005 2.045.138 3.003.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222 0 1.606-.014 2.898-.014 3.293 0 .321.218.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
270+
</a>
271+
<a class="icon-btn" href={discordUrl} aria-label="Discord" title="Discord">
272+
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
273+
</a>
274+
<a class="icon-btn" href={`mailto:${contactEmail}`} aria-label="Email" title="Email">
275+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg>
276+
</a>
277+
</div>
278+
</div>
279+
</div>
280+
281+
<div class="foot-bottom">
282+
<span>© 2026 Data Privacy Stack</span>
283+
<span>
284+
Site content under <a href={ccByUrl}>CC&nbsp;BY&nbsp;4.0</a> ·
285+
project code is licensed per repository
286+
</span>
231287
</div>
232-
<nav class="foot-links">
233-
<a href="#about">About</a>
234-
<a href="#projects">Projects</a>
235-
<a href="#governance">Governance</a>
236-
<a href="#blog">Blog</a>
237-
<a href={presidioDocs}>Docs</a>
238-
<a href={githubOrg}>GitHub</a>
239-
</nav>
240288
</footer>
241289

242290
<script is:inline>
@@ -361,6 +409,22 @@ const posts = (await getCollection("docs"))
361409
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
362410
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
363411

412+
/* Icon links (GitHub, Discord, email) */
413+
.icon-btn {
414+
display: inline-grid;
415+
place-items: center;
416+
width: 36px; height: 36px;
417+
border-radius: 999px;
418+
color: var(--text-muted);
419+
transition: color 0.15s ease, background 0.15s ease;
420+
}
421+
.icon-btn:hover { color: var(--accent-strong); background: rgba(127, 127, 127, 0.12); }
422+
423+
/* Hide brand wordmark on very small screens to make room for icons */
424+
@media (max-width: 420px) {
425+
.brand-label { display: none; }
426+
}
427+
364428
/* Mobile hamburger (hidden on desktop) */
365429
.menu-toggle {
366430
display: none;
@@ -537,18 +601,49 @@ const posts = (await getCollection("docs"))
537601
.site-footer {
538602
background: var(--sec-foot);
539603
margin-top: 0;
540-
padding: 2.5rem clamp(1rem, 5vw, 3rem);
604+
padding: 3rem clamp(1rem, 5vw, 3rem) 1.5rem;
605+
color: var(--text-muted);
606+
}
607+
.foot-cols {
608+
display: grid;
609+
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
610+
gap: 2rem;
611+
max-width: 1040px;
612+
margin: 0 auto;
613+
}
614+
@media (max-width: 760px) {
615+
.foot-cols { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
616+
}
617+
@media (max-width: 440px) {
618+
.foot-cols { grid-template-columns: 1fr; }
619+
}
620+
.foot-brandline { display: flex; align-items: center; gap: 0.55rem; }
621+
.foot-brand strong { color: var(--text); font-family: var(--dps-font-display); }
622+
.foot-brand p { margin: 0.6rem 0 0; line-height: 1.5; max-width: 28ch; }
623+
.foot-col { display: flex; flex-direction: column; gap: 0.55rem; }
624+
.foot-col h4 {
625+
margin: 0 0 0.3rem;
626+
font-size: 0.8rem;
627+
text-transform: uppercase;
628+
letter-spacing: 0.06em;
629+
color: var(--text);
630+
}
631+
.foot-col a { text-decoration: none; color: var(--text-muted); font-size: 0.95rem; }
632+
.foot-col a:hover { color: var(--accent-strong); }
633+
.foot-social { display: flex; gap: 0.4rem; margin-top: 0.4rem; margin-left: -0.4rem; }
634+
.foot-bottom {
635+
max-width: 1040px;
636+
margin: 2.5rem auto 0;
637+
padding-top: 1.25rem;
638+
border-top: 1px solid var(--nav-border);
541639
display: flex;
542640
justify-content: space-between;
543-
gap: 1.5rem;
641+
gap: 1rem;
544642
flex-wrap: wrap;
545-
color: var(--text-muted);
643+
font-size: 0.9rem;
546644
}
547-
.foot-brand strong { color: var(--text); }
548-
.foot-brand p { margin: 0.3rem 0 0; }
549-
.foot-links { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: flex-start; }
550-
.foot-links a { text-decoration: none; font-weight: 600; color: var(--text-muted); }
551-
.foot-links a:hover { color: var(--accent-strong); }
645+
.foot-bottom a { color: var(--text-muted); }
646+
.foot-bottom a:hover { color: var(--accent-strong); }
552647
</style>
553648
</body>
554649
</html>

0 commit comments

Comments
 (0)