marcoallegretti/likwid
marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-06-25 07:27:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
likwid/frontend/src/layouts/PublicLayout.astro
Marco Allegretti ac7c69d159 frontend: modify 3 files 
Verified changes:
- modify frontend/src/layouts/Layout.astro
- modify frontend/src/layouts/PublicLayout.astro
- modify frontend/src/pages/settings.astro

Diffstat:
- 3 files changed, 59 insertions(+), 105 deletions(-)
2026-02-15 17:06:01 +01:00

510 lines
14 KiB
Text
Raw Blame History

---
interface Props {
title: string;
description?: string;
}
import { DEFAULT_THEME, themes as themeRegistry } from '../lib/themes';
import DesignSystemStyles from '../components/ui/DesignSystemStyles.astro';
function isEnabled(v: string | undefined): boolean {
if (!v) return false;
const n = v.trim().toLowerCase();
return n === '1' || n === 'true' || n === 'yes' || n === 'on';
}
const { title, description = "Likwid is a modular governance engine for distributed organizations, open source communities, and civic movements." } = Astro.props;
const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_SITE);
const themes = Object.fromEntries(
Object.entries(themeRegistry).map(([id, t]) => [id, { isDark: t.isDark, colors: t.colors }]),
);
const defaultTheme = DEFAULT_THEME;
---
<!doctype html>
<html lang="en" data-theme="neutral" data-theme-mode="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<title>{title} | Likwid</title>
<script is:inline define:vars={{ themes, defaultTheme, publicDemoSite }}>
(function() {
const saved = publicDemoSite ? defaultTheme : (localStorage.getItem('likwid-theme') || defaultTheme);
const theme = themes[saved] || themes[defaultTheme];
const root = document.documentElement;
const c = theme.colors;
root.style.setProperty('--color-bg', c.bg);
root.style.setProperty('--color-bg-alt', c.bgAlt);
root.style.setProperty('--color-surface', c.surface);
root.style.setProperty('--color-surface-hover', c.surfaceHover);
root.style.setProperty('--color-border', c.border);
root.style.setProperty('--color-border-hover', c.borderHover);
root.style.setProperty('--color-text', c.text);
root.style.setProperty('--color-text-muted', c.textMuted);
root.style.setProperty('--color-text-inverse', c.textInverse);
root.style.setProperty('--color-primary', c.primary);
root.style.setProperty('--color-primary-hover', c.primaryHover);
root.style.setProperty('--color-primary-muted', c.primaryMuted);
root.style.setProperty('--color-secondary', c.secondary);
root.style.setProperty('--color-secondary-hover', c.secondaryHover);
root.style.setProperty('--color-info', c.info);
root.style.setProperty('--color-info-hover', c.infoHover);
root.style.setProperty('--color-info-muted', c.infoMuted);
root.style.setProperty('--color-neutral', c.neutral);
root.style.setProperty('--color-neutral-hover', c.neutralHover);
root.style.setProperty('--color-neutral-muted', c.neutralMuted);
root.style.setProperty('--color-success', c.success);
root.style.setProperty('--color-success-muted', c.successMuted);
root.style.setProperty('--color-success-hover', c.successHover);
root.style.setProperty('--color-warning', c.warning);
root.style.setProperty('--color-warning-muted', c.warningMuted);
root.style.setProperty('--color-error', c.error);
root.style.setProperty('--color-error-muted', c.errorMuted);
root.style.setProperty('--color-error-hover', c.errorHover);
root.style.setProperty('--color-link', c.link);
root.style.setProperty('--color-link-visited', c.linkVisited);
root.style.setProperty('--color-overlay', c.overlay);
root.style.setProperty('--color-field-bg', c.fieldBg);
root.style.setProperty('--color-on-primary', c.onPrimary);
root.setAttribute('data-theme', saved);
root.setAttribute('data-theme-mode', theme.isDark ? 'dark' : 'light');
})();
</script>
</head>
<body>
<a class="skip-link" href="#main-content">Skip to content</a>
<div class="public-app">
<header class="public-header">
<nav class="public-nav" id="public-nav">
<a href="/" class="logo">Likwid</a>
<button
class="nav-toggle"
id="public-nav-toggle"
type="button"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="public-nav-menu"
>
<span class="nav-toggle-icon" aria-hidden="true"></span>
</button>
<div class="nav-menu" id="public-nav-menu">
<div class="nav-links">
<a href="/about">About</a>
<a href="/features">Features</a>
<a href="/manifesto">Manifesto</a>
<a href="/docs">Documentation</a>
</div>
<div class="nav-actions">
<a href="/demo" class="ui-btn ui-btn-primary">Explore Demo</a>
{!publicDemoSite ? <a href="/login" class="ui-btn ui-btn-secondary">Sign In</a> : null}
</div>
</div>
</nav>
</header>
<main class="public-main" id="main-content" tabindex="-1">
<slot />
</main>
<footer class="public-footer">
<div class="footer-content">
<div class="footer-section">
<h4>Likwid</h4>
<p>Modular governance for distributed organizations.</p>
</div>
<div class="footer-section">
<h4>Learn</h4>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/features">Features</a></li>
<li><a href="/manifesto">Manifesto</a></li>
<li><a href="/docs">Documentation</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Community</h4>
<ul>
<li><a href="https://codeberg.org/likwid/likwid" target="_blank" rel="noopener">Codeberg</a></li>
<li><a href="/contributing">Contributing</a></li>
<li><a href="/code-of-conduct">Code of Conduct</a></li>
</ul>
</div>
<div class="footer-section">
<h4>Platform</h4>
<ul>
<li><a href="/demo">Demo Instance</a></li>
{!publicDemoSite ? <li><a href="/login">Sign In</a></li> : null}
{!publicDemoSite ? <li><a href="/register">Create Account</a></li> : null}
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Likwid. Free and open source software under EUPL-1.2.</p>
</div>
</footer>
</div>
<script is:inline define:vars={{ themes, defaultTheme, publicDemoSite }}>
const nav = document.getElementById('public-nav');
const toggle = document.getElementById('public-nav-toggle');
function openNav() {
if (!nav || !toggle) return;
nav.classList.add('is-open');
toggle.setAttribute('aria-expanded', 'true');
if (window.matchMedia('(max-width: 768px)').matches) {
document.body.classList.add('is-scroll-locked');
const firstFocusable = nav.querySelector(
'#public-nav-menu a, #public-nav-menu button, #public-nav-menu input, #public-nav-menu select, #public-nav-menu textarea, #public-nav-menu summary'
);
if (firstFocusable instanceof HTMLElement) {
firstFocusable.focus();
}
}
}
function closeNav() {
if (!nav || !toggle) return;
nav.classList.remove('is-open');
toggle.setAttribute('aria-expanded', 'false');
document.body.classList.remove('is-scroll-locked');
toggle.focus();
}
function setActiveNav() {
const links = document.querySelectorAll('#public-nav-menu a');
const path = window.location.pathname.replace(/\/$/, '') || '/';
links.forEach((a) => {
if (!(a instanceof HTMLAnchorElement)) return;
const hrefPath = a.pathname.replace(/\/$/, '') || '/';
if (hrefPath === '/' || hrefPath === '') {
return;
}
const isActive = path === hrefPath || path.indexOf(hrefPath + '/') === 0;
if (isActive) {
a.setAttribute('aria-current', 'page');
}
});
}
if (nav && toggle) {
setActiveNav();
toggle.addEventListener('click', () => {
if (nav.classList.contains('is-open')) {
closeNav();
} else {
openNav();
}
});
nav.querySelectorAll('a').forEach((link) => {
link.addEventListener('click', () => {
if (window.matchMedia('(max-width: 768px)').matches) {
closeNav();
}
});
});
document.addEventListener('click', (event) => {
if (!nav.classList.contains('is-open')) return;
const target = event.target;
if (!(target instanceof Node)) return;
if (nav.contains(target)) return;
closeNav();
});
window.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
closeNav();
}
});
window.addEventListener('resize', () => {
if (window.innerWidth > 768) {
closeNav();
}
});
}
</script>
</body>
</html>
<DesignSystemStyles />
<style>
.public-app {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.public-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(24, 24, 27, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border);
}
.public-nav {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.nav-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.06);
color: var(--color-text);
cursor: pointer;
transition: background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard);
}
.nav-toggle:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--color-border-hover);
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
display: block;
width: 18px;
height: 2px;
background: currentColor;
border-radius: 999px;
transition: transform var(--motion-fast) var(--easing-standard), top var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard);
}
.nav-toggle-icon {
position: relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
content: '';
position: absolute;
left: 0;
}
.nav-toggle-icon::before {
top: -6px;
}
.nav-toggle-icon::after {
top: 6px;
}
.public-nav.is-open .nav-toggle-icon {
background: transparent;
}
.public-nav.is-open .nav-toggle-icon::before {
top: 0;
transform: rotate(45deg);
}
.public-nav.is-open .nav-toggle-icon::after {
top: 0;
transform: rotate(-45deg);
}
.logo {
font-size: 1.375rem;
font-weight: 700;
color: var(--color-text);
letter-spacing: -0.02em;
}
.logo:hover {
color: var(--color-primary);
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
color: var(--color-text-muted);
font-size: 0.9375rem;
padding: 0.5rem 0;
position: relative;
}
.nav-links a:hover {
color: var(--color-text);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--color-primary);
transition: width var(--motion-normal) var(--easing-standard);
}
.nav-links a:hover::after {
width: 100%;
}
.nav-links a[aria-current='page'] {
color: var(--color-text);
}
.nav-links a[aria-current='page']::after {
width: 100%;
}
.nav-actions {
display: flex;
gap: 1rem;
align-items: center;
}
.public-main {
flex: 1;
}
.public-footer {
background: var(--color-bg-alt);
border-top: 1px solid var(--color-border);
padding: 4rem 2rem 2rem;
margin-top: 4rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 3rem;
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
@media (max-width: 480px) {
.footer-content {
grid-template-columns: 1fr;
}
}
.footer-section h4 {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text);
margin-bottom: 1rem;
}
.footer-section p {
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.6;
}
.footer-section ul {
list-style: none;
}
.footer-section li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: var(--color-text-muted);
font-size: 0.9375rem;
}
.footer-section a:hover {
color: var(--color-primary);
}
.footer-bottom {
max-width: 1200px;
margin: 3rem auto 0;
padding-top: 2rem;
border-top: 1px solid var(--color-border);
text-align: center;
}
.footer-bottom p {
color: var(--color-text-muted);
font-size: 0.875rem;
}
@media (max-width: 768px) {
.public-nav {
flex-wrap: wrap;
gap: 1rem;
padding: 0.875rem 1rem;
}
.nav-toggle {
display: inline-flex;
}
.nav-menu {
display: none;
order: 3;
width: 100%;
flex-direction: column;
align-items: center;
gap: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
margin-top: 1rem;
}
.public-nav.is-open .nav-menu {
display: flex;
}
.nav-links {
width: 100%;
justify-content: center;
gap: 1rem;
}
.nav-actions {
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
}
</style>
Reference in a new issue View git blame Copy permalink