marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: improve about page navigation

Browse source
This commit is contained in:
Marco Allegretti 2026-02-02 11:54:14 +01:00
parent 2d915da2c4
commit 1843dd80c3
1 changed files with 461 additions and 440 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

901
frontend/src/pages/about.astro
View file

@ -1,440 +1,461 @@
--- ---
import PublicLayout from '../layouts/PublicLayout.astro'; import PublicLayout from '../layouts/PublicLayout.astro';
--- ---
<PublicLayout title="About" description="Learn about Likwid, a modular governance engine for distributed organizations, open source communities, and civic movements."> <PublicLayout title="About" description="Learn about Likwid, a modular governance engine for distributed organizations, open source communities, and civic movements.">
<article class="about-page"> <article class="about-page">
<header class="page-header"> <header class="page-header">
<h1>About Likwid</h1> <h1>About Likwid</h1>
<p class="lead"> <p class="lead">
Likwid is a modular governance engine designed for organizations that need Likwid is a modular governance engine designed for organizations that need
structured, transparent, and auditable decision-making processes. structured, transparent, and auditable decision-making processes.
</p> </p>
</header> <nav class="page-nav" aria-label="On this page">
<a class="ui-pill ui-pill-recommended" href="#problem">Problem</a>
<section class="content-section"> <a class="ui-pill ui-pill-core" href="#is">What it is</a>
<h2>What Problem Does Likwid Solve?</h2> <a class="ui-pill ui-pill-core" href="#is-not">What it is not</a>
<p> <a class="ui-pill ui-pill-core" href="#audience">Who it's for</a>
Most organizations—whether open source projects, political movements, or member associations—struggle <a class="ui-pill ui-pill-core" href="#principles">Principles</a>
with collective decision-making. They often rely on informal processes, ad-hoc polls, or tools designed <a class="ui-pill ui-pill-core" href="#technical">Tech</a>
for other purposes (forums, chat platforms, issue trackers). </nav>
</p> </header>
<p>
These approaches fail in predictable ways: <section class="content-section" id="problem">
</p> <h2>What Problem Does Likwid Solve?</h2>
<ul class="problem-list"> <p>
<li><strong>Lack of structure</strong> — Discussions drift without resolution. Decisions are made implicitly or by whoever speaks loudest.</li> Most organizations—whether open source projects, political movements, or member associations—struggle
<li><strong>No audit trail</strong> — When moderation happens, there's no record of why. Shadow banning and hidden decisions erode trust.</li> with collective decision-making. They often rely on informal processes, ad-hoc polls, or tools designed
<li><strong>Limited voting methods</strong> — Simple majority voting fails for complex decisions with multiple options or competing priorities.</li> for other purposes (forums, chat platforms, issue trackers).
<li><strong>Participation barriers</strong> — Members who can't attend synchronous meetings or follow high-volume discussions are effectively excluded.</li> </p>
</ul> <p>
<p> These approaches fail in predictable ways:
Likwid addresses these problems by providing governance as infrastructure: a system that structures </p>
deliberation, enforces transparency, and supports sophisticated decision-making methods. <ul class="problem-list">
</p> <li><strong>Lack of structure</strong> — Discussions drift without resolution. Decisions are made implicitly or by whoever speaks loudest.</li>
</section> <li><strong>No audit trail</strong> — When moderation happens, there's no record of why. Shadow banning and hidden decisions erode trust.</li>
<li><strong>Limited voting methods</strong> — Simple majority voting fails for complex decisions with multiple options or competing priorities.</li>
<section class="content-section"> <li><strong>Participation barriers</strong> — Members who can't attend synchronous meetings or follow high-volume discussions are effectively excluded.</li>
<h2>What Likwid Is</h2> </ul>
<div class="is-grid"> <p>
<div class="is-item ui-card ui-card-pad-lg"> Likwid addresses these problems by providing governance as infrastructure: a system that structures
<h4>A Governance Engine</h4> deliberation, enforces transparency, and supports sophisticated decision-making methods.
<p>Likwid provides the core infrastructure for collective decision-making: proposals, deliberation, voting, and implementation tracking.</p> </p>
</div> </section>
<div class="is-item ui-card ui-card-pad-lg">
<h4>Modular by Design</h4> <section class="content-section" id="is">
<p>Every component is a plugin. Communities choose their voting methods, delegation rules, moderation policies, and integrations.</p> <h2>What Likwid Is</h2>
</div> <div class="is-grid">
<div class="is-item ui-card ui-card-pad-lg"> <div class="is-item ui-card ui-card-pad-lg">
<h4>Transparent by Default</h4> <h4>A Governance Engine</h4>
<p>All moderation actions are logged with reasons. There is no shadow banning. Audit trails are cryptographically verifiable.</p> <p>Likwid provides the core infrastructure for collective decision-making: proposals, deliberation, voting, and implementation tracking.</p>
</div> </div>
<div class="is-item ui-card ui-card-pad-lg"> <div class="is-item ui-card ui-card-pad-lg">
<h4>Self-Hostable</h4> <h4>Modular by Design</h4>
<p>Organizations control their own data. Likwid runs on your infrastructure with no vendor lock-in.</p> <p>Every component is a plugin. Communities choose their voting methods, delegation rules, moderation policies, and integrations.</p>
</div> </div>
</div> <div class="is-item ui-card ui-card-pad-lg">
</section> <h4>Transparent by Default</h4>
<p>All moderation actions are logged with reasons. There is no shadow banning. Audit trails are cryptographically verifiable.</p>
<section class="content-section"> </div>
<h2>What Likwid Is Not</h2> <div class="is-item ui-card ui-card-pad-lg">
<div class="isnot-grid"> <h4>Self-Hostable</h4>
<div class="isnot-item ui-card ui-card-pad-lg"> <p>Organizations control their own data. Likwid runs on your infrastructure with no vendor lock-in.</p>
<h4>Not a Social Network</h4> </div>
<p>Likwid is not designed for casual conversation, content sharing, or social interactions. It's governance infrastructure.</p> </div>
</div> </section>
<div class="isnot-item ui-card ui-card-pad-lg">
<h4>Not a Simple Poll Tool</h4> <section class="content-section" id="is-not">
<p>While Likwid supports voting, it's designed for complex decisions with deliberation phases, multiple options, and sophisticated tallying methods.</p> <h2>What Likwid Is Not</h2>
</div> <div class="isnot-grid">
<div class="isnot-item ui-card ui-card-pad-lg"> <div class="isnot-item ui-card ui-card-pad-lg">
<h4>Not a Forum</h4> <h4>Not a Social Network</h4>
<p>Discussions in Likwid are structured and goal-oriented. They're part of a decision process, not open-ended conversation.</p> <p>Likwid is not designed for casual conversation, content sharing, or social interactions. It's governance infrastructure.</p>
</div> </div>
<div class="isnot-item ui-card ui-card-pad-lg"> <div class="isnot-item ui-card ui-card-pad-lg">
<h4>Not a CRM or Membership System</h4> <h4>Not a Simple Poll Tool</h4>
<p>Likwid handles governance, not member management, donations, or communications. It integrates with those systems.</p> <p>While Likwid supports voting, it's designed for complex decisions with deliberation phases, multiple options, and sophisticated tallying methods.</p>
</div> </div>
</div> <div class="isnot-item ui-card ui-card-pad-lg">
</section> <h4>Not a Forum</h4>
<p>Discussions in Likwid are structured and goal-oriented. They're part of a decision process, not open-ended conversation.</p>
<section class="content-section"> </div>
<h2>Who Is Likwid For?</h2> <div class="isnot-item ui-card ui-card-pad-lg">
<div class="audience-section"> <h4>Not a CRM or Membership System</h4>
<div class="audience-block ui-card ui-card-pad-lg"> <p>Likwid handles governance, not member management, donations, or communications. It integrates with those systems.</p>
<h4>Open Source & FLOSS Communities</h4> </div>
<p> </div>
Projects that need to make technical and organizational decisions collectively. </section>
Maintainers, contributors, and users participating in governance alongside code contribution.
Integration with development workflows (GitLab, Forgejo, Gitea) and documentation systems. <section class="content-section" id="audience">
</p> <h2>Who Is Likwid For?</h2>
</div> <div class="audience-section">
<div class="audience-block ui-card ui-card-pad-lg"> <div class="audience-block ui-card ui-card-pad-lg">
<h4>Associations & NGOs</h4> <h4>Open Source & FLOSS Communities</h4>
<p> <p>
Member-driven organizations requiring formal decision processes. Projects that need to make technical and organizational decisions collectively.
Annual general meetings, board decisions, and policy changes with proper record-keeping. Maintainers, contributors, and users participating in governance alongside code contribution.
Transparent moderation for community standards enforcement. Integration with development workflows (GitLab, Forgejo, Gitea) and documentation systems.
</p> </p>
</div> </div>
<div class="audience-block ui-card ui-card-pad-lg"> <div class="audience-block ui-card ui-card-pad-lg">
<h4>Political Movements & Parties</h4> <h4>Associations & NGOs</h4>
<p> <p>
Grassroots organizations, civic lists, and political parties. Member-driven organizations requiring formal decision processes.
Delegate assemblies, policy development, and candidate selection. Annual general meetings, board decisions, and policy changes with proper record-keeping.
Liquid democracy features for modern participatory politics. Transparent moderation for community standards enforcement.
</p> </p>
</div> </div>
<div class="audience-block ui-card ui-card-pad-lg"> <div class="audience-block ui-card ui-card-pad-lg">
<h4>Federated & Distributed Organizations</h4> <h4>Political Movements & Parties</h4>
<p> <p>
Networks of chapters, working groups, or autonomous units. Grassroots organizations, civic lists, and political parties.
Coordination across geographic or functional boundaries. Delegate assemblies, policy development, and candidate selection.
Federation features for inter-community governance. Liquid democracy features for modern participatory politics.
</p> </p>
</div> </div>
</div> <div class="audience-block ui-card ui-card-pad-lg">
</section> <h4>Federated & Distributed Organizations</h4>
<p>
<section class="content-section"> Networks of chapters, working groups, or autonomous units.
<h2>Core Principles</h2> Coordination across geographic or functional boundaries.
<div class="principles-grid"> Federation features for inter-community governance.
<div class="principle"> </p>
<h4>Transparency Over Convenience</h4> </div>
<p>Every moderation action is logged with a reason. Audit trails are public. There are no hidden decisions or shadow bans.</p> </div>
</div> </section>
<div class="principle">
<h4>Privacy Where It Matters</h4> <section class="content-section" id="principles">
<p>Civic identities (who you are in discussions) and voting identities (how you voted) are separated. Participate openly while voting privately.</p> <h2>Core Principles</h2>
</div> <div class="principles-grid">
<div class="principle"> <div class="principle">
<h4>Process Over Features</h4> <h4>Transparency Over Convenience</h4>
<p>Governance is a process, not a feature list. Likwid structures deliberation with clear phases: inform, discuss, decide.</p> <p>Every moderation action is logged with a reason. Audit trails are public. There are no hidden decisions or shadow bans.</p>
</div> </div>
<div class="principle"> <div class="principle">
<h4>Flexibility Over Prescription</h4> <h4>Privacy Where It Matters</h4>
<p>Organizations differ. Likwid's plugin architecture lets communities configure governance to match their needs and culture.</p> <p>Voting results visibility can be permissioned. Communities decide who can view results details while keeping participation accessible.</p>
</div> </div>
</div> <div class="principle">
</section> <h4>Process Over Features</h4>
<p>Governance is a process, not a feature list. Likwid structures deliberation with clear phases: inform, discuss, decide.</p>
<section class="content-section"> </div>
<h2>Technical Foundation</h2> <div class="principle">
<p> <h4>Flexibility Over Prescription</h4>
Likwid is free and open source software (EUPL-1.2), built with modern, auditable technology: <p>Organizations differ. Likwid's plugin architecture lets communities configure governance to match their needs and culture.</p>
</p> </div>
<div class="tech-table ui-card"> </div>
<div class="tech-row"> </section>
<span class="tech-label">Backend</span>
<span class="tech-value">Rust (Axum framework)</span> <section class="content-section" id="technical">
</div> <h2>Technical Foundation</h2>
<div class="tech-row"> <p>
<span class="tech-label">Frontend</span> Likwid is free and open source software (EUPL-1.2), built with modern, auditable technology:
<span class="tech-value">Astro + TypeScript</span> </p>
</div> <div class="tech-table ui-card">
<div class="tech-row"> <div class="tech-row">
<span class="tech-label">Database</span> <span class="tech-label">Backend</span>
<span class="tech-value">PostgreSQL</span> <span class="tech-value">Rust (Axum framework)</span>
</div> </div>
<div class="tech-row"> <div class="tech-row">
<span class="tech-label">Containers</span> <span class="tech-label">Frontend</span>
<span class="tech-value">Podman / Docker</span> <span class="tech-value">Astro + TypeScript</span>
</div> </div>
<div class="tech-row"> <div class="tech-row">
<span class="tech-label">License</span> <span class="tech-label">Database</span>
<span class="tech-value">EUPL-1.2</span> <span class="tech-value">PostgreSQL</span>
</div> </div>
</div> <div class="tech-row">
<p class="tech-note"> <span class="tech-label">Containers</span>
The choice of Rust provides memory safety and performance. PostgreSQL ensures data integrity <span class="tech-value">Podman / Docker</span>
for critical governance records. The EUPL-1.2 license guarantees that improvements to Likwid </div>
remain available to the community. <div class="tech-row">
</p> <span class="tech-label">License</span>
</section> <span class="tech-value">EUPL-1.2</span>
</div>
<section class="content-section cta-section"> </div>
<h2>Learn More</h2> <p class="tech-note">
<p> The choice of Rust provides memory safety and performance. PostgreSQL ensures data integrity
Explore Likwid's capabilities, understand our vision, or see the system in action. for critical governance records. The EUPL-1.2 license guarantees that improvements to Likwid
</p> remain available to the community.
<div class="cta-grid"> </p>
<a href="/features" class="cta-card ui-card ui-card-pad-lg ui-card-interactive"> </section>
<h4>Features</h4>
<p>Detailed explanation of voting methods, delegation, and moderation tools.</p> <section class="content-section cta-section" id="learn-more">
</a> <h2>Learn More</h2>
<a href="/manifesto" class="cta-card ui-card ui-card-pad-lg ui-card-interactive"> <p>
<h4>Manifesto</h4> Explore Likwid's capabilities, understand our vision, or see the system in action.
<p>The technical and political vision behind Likwid's design.</p> </p>
</a> <div class="cta-grid">
<a href="/demo" class="cta-card ui-card ui-card-pad-lg ui-card-interactive"> <a href="/features" class="cta-card ui-card ui-card-pad-lg ui-card-interactive">
<h4>Demo</h4> <h4>Features</h4>
<p>Explore a live instance with pre-populated governance history.</p> <p>Detailed explanation of voting methods, delegation, and moderation tools.</p>
</a> </a>
</div> <a href="/manifesto" class="cta-card ui-card ui-card-pad-lg ui-card-interactive">
</section> <h4>Manifesto</h4>
</article> <p>The technical and political vision behind Likwid's design.</p>
</PublicLayout> </a>
<a href="/demo" class="cta-card ui-card ui-card-pad-lg ui-card-interactive">
<style> <h4>Demo</h4>
.about-page { <p>Explore a live instance with pre-populated governance history.</p>
max-width: 900px; </a>
margin: 0 auto; </div>
padding: 2rem; </section>
} </article>
</PublicLayout>
.page-header {
text-align: center; <style>
padding: 3rem 0 4rem; .about-page {
border-bottom: 1px solid var(--color-border); max-width: 900px;
margin-bottom: 3rem; margin: 0 auto;
} padding: 2rem;
}
.page-header h1 {
font-size: 2.5rem; .page-header {
font-weight: 700; text-align: center;
margin-bottom: 1rem; padding: 3rem 0 4rem;
} border-bottom: 1px solid var(--color-border);
margin-bottom: 3rem;
.lead { }
font-size: 1.25rem;
color: var(--color-text-muted); .page-nav {
max-width: 700px; margin-top: 1.75rem;
margin: 0 auto; display: flex;
line-height: 1.6; gap: 0.5rem;
} justify-content: center;
flex-wrap: wrap;
.content-section { }
padding: 2.5rem 0;
border-bottom: 1px solid var(--color-border); .page-nav a {
} text-decoration: none;
}
.content-section:last-child {
border-bottom: none; .page-header h1 {
} font-size: 2.5rem;
font-weight: 700;
.content-section h2 { margin-bottom: 1rem;
font-size: 1.75rem; }
font-weight: 600;
margin-bottom: 1.5rem; .lead {
} font-size: 1.25rem;
color: var(--color-text-muted);
.content-section p { max-width: 700px;
color: var(--color-text); margin: 0 auto;
line-height: 1.7; line-height: 1.6;
margin-bottom: 1rem; }
}
.content-section {
.problem-list { padding: 2.5rem 0;
list-style: none; border-bottom: 1px solid var(--color-border);
padding: 0; scroll-margin-top: 6.5rem;
margin: 1.5rem 0; }
}
.content-section:last-child {
.problem-list li { border-bottom: none;
padding: 0.75rem 0 0.75rem 1.5rem; }
position: relative;
color: var(--color-text); .content-section h2 {
line-height: 1.6; font-size: 1.75rem;
} font-weight: 600;
margin-bottom: 1.5rem;
.problem-list li::before { }
content: "×";
position: absolute; .content-section p {
left: 0; color: var(--color-text);
color: var(--color-error); line-height: 1.7;
font-weight: 600; margin-bottom: 1rem;
} }
.problem-list li strong { .problem-list {
color: var(--color-text); list-style: none;
} padding: 0;
margin: 1.5rem 0;
/* Is/IsNot grids */ }
.is-grid, .isnot-grid {
display: grid; .problem-list li {
grid-template-columns: repeat(2, 1fr); padding: 0.75rem 0 0.75rem 1.5rem;
gap: 1.5rem; position: relative;
margin-top: 1.5rem; color: var(--color-text);
} line-height: 1.6;
}
@media (max-width: 640px) {
.is-grid, .isnot-grid { .problem-list li::before {
grid-template-columns: 1fr; content: "×";
} position: absolute;
} left: 0;
color: var(--color-error);
.is-item { font-weight: 600;
border-left: 3px solid var(--color-success); }
}
.problem-list li strong {
.isnot-item { color: var(--color-text);
border-left: 3px solid var(--color-neutral); }
}
/* Is/IsNot grids */
.is-item h4, .isnot-item h4 { .is-grid, .isnot-grid {
font-size: 1rem; display: grid;
margin-bottom: 0.5rem; grid-template-columns: repeat(2, 1fr);
} gap: 1.5rem;
margin-top: 1.5rem;
.is-item p, .isnot-item p { }
color: var(--color-text-muted);
font-size: 0.9375rem; @media (max-width: 640px) {
margin: 0; .is-grid, .isnot-grid {
} grid-template-columns: 1fr;
}
/* Audience section */ }
.audience-section {
display: grid; .is-item {
gap: 1.5rem; border-left: 3px solid var(--color-success);
margin-top: 1.5rem; }
}
.isnot-item {
.audience-block h4 { border-left: 3px solid var(--color-neutral);
font-size: 1.125rem; }
color: var(--color-primary);
margin-bottom: 0.75rem; .is-item h4, .isnot-item h4 {
} font-size: 1rem;
margin-bottom: 0.5rem;
.audience-block p { }
color: var(--color-text-muted);
font-size: 0.9375rem; .is-item p, .isnot-item p {
margin: 0; color: var(--color-text-muted);
line-height: 1.6; font-size: 0.9375rem;
} margin: 0;
}
/* Principles grid */
.principles-grid { /* Audience section */
display: grid; .audience-section {
grid-template-columns: repeat(2, 1fr); display: grid;
gap: 1.5rem; gap: 1.5rem;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@media (max-width: 640px) { .audience-block h4 {
.principles-grid { font-size: 1.125rem;
grid-template-columns: 1fr; color: var(--color-primary);
} margin-bottom: 0.75rem;
} }
.principle { .audience-block p {
padding: 1.5rem; color: var(--color-text-muted);
border-left: 3px solid var(--color-primary); font-size: 0.9375rem;
background: var(--color-bg-alt); margin: 0;
} line-height: 1.6;
}
.principle h4 {
font-size: 1rem; /* Principles grid */
margin-bottom: 0.5rem; .principles-grid {
} display: grid;
grid-template-columns: repeat(2, 1fr);
.principle p { gap: 1.5rem;
color: var(--color-text-muted); margin-top: 1.5rem;
font-size: 0.9375rem; }
margin: 0;
} @media (max-width: 640px) {
.principles-grid {
/* Tech table */ grid-template-columns: 1fr;
.tech-table { }
overflow: hidden; }
margin: 1.5rem 0;
} .principle {
padding: 1.5rem;
.tech-row { border-left: 3px solid var(--color-primary);
display: flex; background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border); }
}
.principle h4 {
.tech-row:last-child { font-size: 1rem;
border-bottom: none; margin-bottom: 0.5rem;
} }
.tech-label { .principle p {
width: 140px; color: var(--color-text-muted);
padding: 1rem; font-size: 0.9375rem;
background: var(--color-bg-alt); margin: 0;
font-weight: 500; }
font-size: 0.875rem;
color: var(--color-text-muted); /* Tech table */
} .tech-table {
overflow: hidden;
.tech-value { margin: 1.5rem 0;
flex: 1; }
padding: 1rem;
font-size: 0.9375rem; .tech-row {
} display: flex;
border-bottom: 1px solid var(--color-border);
.tech-note { }
color: var(--color-text-muted);
font-size: 0.9375rem; .tech-row:last-child {
font-style: italic; border-bottom: none;
} }
/* CTA section */ .tech-label {
.cta-section { width: 140px;
text-align: center; padding: 1rem;
} background: var(--color-bg-alt);
font-weight: 500;
.cta-section h2 { font-size: 0.875rem;
margin-bottom: 0.75rem; color: var(--color-text-muted);
} }
.cta-section > p { .tech-value {
color: var(--color-text-muted); flex: 1;
margin-bottom: 2rem; padding: 1rem;
} font-size: 0.9375rem;
}
.cta-grid {
display: grid; .tech-note {
grid-template-columns: repeat(3, 1fr); color: var(--color-text-muted);
gap: 1.5rem; font-size: 0.9375rem;
text-align: left; font-style: italic;
} }
@media (max-width: 768px) { /* CTA section */
.cta-grid { .cta-section {
grid-template-columns: 1fr; text-align: center;
} }
}
.cta-section h2 {
.cta-card { margin-bottom: 0.75rem;
display: block; }
text-decoration: none;
transition: all var(--motion-fast) var(--easing-standard); .cta-section > p {
} color: var(--color-text-muted);
margin-bottom: 2rem;
.cta-card:hover { }
border-color: var(--color-primary);
} .cta-grid {
display: grid;
.cta-card h4 { grid-template-columns: repeat(3, 1fr);
font-size: 1.125rem; gap: 1.5rem;
color: var(--color-text); text-align: left;
margin-bottom: 0.5rem; }
}
@media (max-width: 768px) {
.cta-card p { .cta-grid {
color: var(--color-text-muted); grid-template-columns: 1fr;
font-size: 0.875rem; }
margin: 0; }
}
</style> .cta-card {
display: block;
text-decoration: none;
transition: all var(--motion-fast) var(--easing-standard);
}
.cta-card:hover {
border-color: var(--color-primary);
}
.cta-card h4 {
font-size: 1.125rem;
color: var(--color-text);
margin-bottom: 0.5rem;
}
.cta-card p {
color: var(--color-text-muted);
font-size: 0.875rem;
margin: 0;
}
</style>