docs/organization: Add new organization category

.cspell-allowed-words.txt

@@ -111,6 +111,7 @@ firstpost
 flarum
 flathub
 flatpak
+flatpaks
 flicky
 flto
 fluidsynth
@@ -244,11 +245,13 @@ mygui
 nanorc
 necromancing
 nemo
+neochat
 neovim
 netgear
 newerth
 nfpath
 nghttp
+nheko
 nightlies
 nmbdoptions
 noauto

docs/organization/core-values.md

@@ -0,0 +1,41 @@
+---
+description: Organizational Core Values for the Solus Project
+title: Core Values
+---
+
+The Solus Project has a few core values that inform all of our decision-making.
+
+## Transparency
+
+As a team, we strive to be as transparent as possible with our community about the decisions that we make. We believe that it is important for our community to be able to see what we're doing and why. It builds trust between the Solus team and the community. When users understand the decision-making process, in-progress development, and reasons for our choices, they feel more confident in our direction.
+
+A part of transparency is accountability. By being open about our work, the team can take responsibility for both successes and failures, building a culture of continual improvement.
+
+To be transparent, we:
+
+- Are proactive with our communication with the community via our forum and social media.
+- Encourage discussion on our [public forum](https://discuss.getsol.us), [Matrix space](https://matrix.to/#/#solus:matrix.org), and [Mastodon](https://fosstodon.org/@solus).
+- Make all financial transactions visible via our [OpenCollective page](https://opencollective.com/getsolus#category-BUDGET).
+
+## Stability
+
+Users want to use a stable operating system, and so do we. It's never a good experience when something breaks after downloading and installing updates, and even moreso when you have to get things done. Thus, we believe it is important to provide a stable system for people to use.
+
+There are a few ways we accomplish this:
+
+- Use a "stable-rolling" model: Install once and update forever.
+- Don't update packages to new versions just for the sake of having the latest version.
+- Test all package updates before pushing them to all users.
+- Be responsive about addressing new issues.
+
+All software has bugs, and inevitably, some will slip through the cracks. However, we believe that our approach and methodology strike the best balance between having the latest software and having the greatest stability.
+
+## Community
+
+Community is the heartbeat of Solus. Our community is where users can come together to share knowledge, solve problems, and collaborate on projects. Having a strong community helps ensure that we can be responsive to the needs of our users. It enables us to evolve and improve, while keeping our users' interests in mind.
+
+When our users feel valued and supported, they are more likely to stick with us, encouraging long-term engagement. Further, having a diverse community provides more points of view about developments and issues, which is very valuable for a smaller team like ours.
+
+Lastly, a supportive community leads to faster problem-solving. Users can provide assistance to other users quickly. This improves the overall user experience and can prevent problems from escalating.
+
+The most important aspect of our community is Kindness. Being kind makes people feel welcome, and more likely to stick around, thus strengthening our community.

docs/organization/getting-involved.md

@@ -0,0 +1,44 @@
+---
+description: How to get involved with the Solus Project
+title: Getting Involved
+---
+
+There are many ways you can get involved with the Solus Project. Contributing package updates is only one way to help out the project. Some of them don't even involve any packaging or software knowledge.
+
+No matter how you wish to contribute, the best place to start is joining our [Matrix Space](https://matrix.to/#/#solus:matrix.org). There you'll find a helpful community willing to answer any questions you may have.
+
+:::info
+Matrix is an open protocol for decentralized, secure communication.
+
+You can access Matrix spaces with dedicated clients. Solus has packaged [Element](https://element.io), [Neochat](https://apps.kde.org/neochat/), and [Nheko](https://nheko-reborn.github.io). Other clients are available as Flatpaks. See [here](https://matrix.org/ecosystem/clients/) for more information on Matrix clients.
+:::
+
+## Packaging contributions
+
+One of the most visible ways of helping the project is by updating and maintaining packages. The Solus repository contains thousands of packages, which is a lot for a small team to handle. We are always welcoming and appreciative of assistance in maintaining software in the repository.
+
+Getting started with packaging is generally pretty easy. If you are looking to help with packaging, check out our [packaging documentation](/packaging).
+
+## Filing issues
+
+A great way to help out the project is by filing issues for problems that you are experiencing. This makes it much easier to track problems that people are having. They help ensure that nothing gets forgotten, and lets both you and us know when they've been resolved. Issues should be opened against our [packages repository](https://github.com/getsolus/packages/issues).
+
+:::note
+When filing an issue, please be as detailed as possible. The more details there are, the easier it is to understand the problem.
+:::
+
+Issues are also a great way to let us know that a piece of software in the repository is out-of-date. These help the team know and track what packages need to be updated, how out-of-date they are, and how to prioritize those updates. They also let us know there is demand for particular software.
+
+## Documentation
+
+Good and up-to-date documentation is a very valuable resource. Contributing to our Help Center documentation not only helps us, it helps the entire community. It's also easier than packaging. If writing help articles is something you are interested in, head on over to our [Help Center repository](https://github.com/getsolus/help-center-docs) on GitHub. The project README has all the information you need to get started.
+
+## Financial
+
+Another way to contribute to Solus without needing any technical skills or time is financially. Solus is a volunteer-run project, and we rely on donations from the community to keep the lights on. We understand that donating money can be tough, especially in these challenging times. As such, we are very grateful to everyone who contributes financially to the project. If this is something you want and are able to do, head over to our page on [Open Collective](https://opencollective.com/getsolus).
+
+:::info
+[Open Collective](https://opencollective.com) is a platform where communities can collect and disburse money transparently, to sustain and grow their projects.
+
+Solus uses the [Open Source Collective](https://www.oscollective.org) non-profit fiscal host.
+:::

docs/organization/intro.md

@@ -0,0 +1,9 @@
+---
+description: Organization documentation for Solus
+title: Welcome
+sidebar_position: -1
+---
+
+# Welcome
+
+This section contains information about the Solus Project organization.

docs/organization/teams.mdx

@@ -0,0 +1,12 @@
+---
+description: Teams within the Solus organization
+hide_title: true
+title: Teams
+---
+
+import { Administration } from "@site/src/components/Person";
+import { TeamsList } from "@site/src/components/Teams";
+
+<Administration />
+
+<TeamsList />

docusaurus.config.js

@@ -113,6 +113,12 @@ const config = {
             position: "left",
             label: "Packaging",
           },
+          {
+            type: "docSidebar",
+            sidebarId: "organizationSidebar",
+            position: "left",
+            label: "Organization",
+          },
           {
             to: "blog",
             label: "Dev Log",

sidebars.js

@@ -16,6 +16,7 @@ const sidebars = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   userSidebar: [{ type: "autogenerated", dirName: "user" }],
   packagingSidebar: [{ type: "autogenerated", dirName: "packaging" }],
+  organizationSidebar: [{ type: "autogenerated", dirName: "organization" }],
 
   // But you can create a sidebar manually
   /*

src/components/Person.tsx

@@ -0,0 +1,93 @@
+import { Avatar, Box, Stack, SxProps, useMediaQuery } from "@mui/material";
+import React from "react";
+import { Person as PersonType, WebsiteType } from "../types";
+import { SiteTheme } from "../theme";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import Link from "@docusaurus/Link";
+import { Teams } from "../data/teams";
+import { People } from "../data/people";
+import Grid2 from "@mui/material/Unstable_Grid2";
+
+type PersonProps = {
+  embeddedIn: string;
+  isBadge?: boolean;
+  onAvatarClick?: () => void;
+  person: PersonType;
+  sx?: SxProps;
+};
+
+export const Person = ({ embeddedIn, isBadge = false, onAvatarClick, person, sx = {} }: PersonProps) => {
+  const usePersonRow = useMediaQuery(SiteTheme.breakpoints.up("sm"));
+  const key = `Person-${embeddedIn}-${person.names.first}${person.names.last}`;
+  const avatar = useBaseUrl(`/img/avatars/${person.names.first}${person.names.last}.webp`);
+  const name = `${person.names.first} ${person.names.last}`;
+
+  const github = person.websites.find((w) => w.type === WebsiteType.GITHUB);
+  const primarySite = person.websites.find((w) => w.type === WebsiteType.WEBSITE) ?? github;
+
+  return (
+    <Stack
+      alignItems={!usePersonRow && !isBadge ? "center" : undefined}
+      className={`avatar ${!isBadge ? "card--bg" : ""}`}
+      direction={usePersonRow || (!usePersonRow && isBadge) ? "row" : "column"}
+      key={key}
+      spacing={!usePersonRow ? 2 : undefined}
+      sx={sx}
+    >
+      <Box onClick={isBadge && onAvatarClick ? onAvatarClick : undefined} sx={{ cursor: "pointer" }}>
+        <Link key={`Link-HeaderAvatar-${key}`} target="_blank" to={!isBadge ? primarySite?.to : undefined}>
+          <Avatar
+            alt={`${name}'s avatar`}
+            className="PersonLinkHeaderAvatar"
+            src={avatar}
+            sx={{ height: isBadge ? 40 : 64, width: isBadge ? 40 : 64 }}
+          />
+        </Link>
+      </Box>
+      <Stack
+        alignItems={!usePersonRow && !isBadge ? "center" : undefined}
+        className="avatar__intro"
+        gap={!isBadge ? 1 : 0}
+      >
+        <Stack className="avatar__name" direction="row" gap={2}>
+          {name}
+          {!isBadge &&
+            person.websites.map((w) => (
+              <Link key={`Link-Website-${key}-${w.type}`} target="_blank" to={w.to}>
+                <w.icon className="PersonWebsiteIcon" height={24} width={24} />
+              </Link>
+            ))}
+        </Stack>
+        {!isBadge && (
+          <>
+            <Box textAlign={!usePersonRow ? "center" : undefined}>
+              {person.description}
+            </Box>
+            {person.matrix && <small>Matrix: {person.matrix}</small>}
+          </>
+        )}
+      </Stack>
+    </Stack>
+  );
+};
+
+export const Administration = () => {
+  const adminTeam = Teams.find((t) => t.name === "Admin Team");
+  const administration = adminTeam?.members.map(([member]) => People[member]);
+  const useGrid = useMediaQuery(SiteTheme.breakpoints.up("xl"));
+
+  return (
+    <Stack gap={4} sx={{ marginBlockEnd: 4 }}>
+      <h1 style={{ margin: 0 }}>Administration</h1>
+      {adminTeam && adminTeam.description}
+      <Grid2 columns={useGrid ? 12 : 6} container margin={0} spacing={4} width={1}>
+        {administration &&
+          administration.map((person) => (
+            <Grid2 key={`AdministrationGridItem-${person.names.first}`} xs={6}>
+              <Person embeddedIn="Administration" person={person} sx={{ alignItems: "center", height: "100%", p: 2 }} />
+            </Grid2>
+          ))}
+      </Grid2>
+    </Stack>
+  );
+};

src/components/Teams.tsx

@@ -0,0 +1,74 @@
+import { Backdrop, Box, Stack } from "@mui/material";
+import React, { useState } from "react";
+import { Person as PersonType, Team as TeamType } from "../types";
+import { AutoColumnOnSmall } from "../utils/auto";
+import { Person } from "./Person";
+import { SiteTheme } from "../theme";
+import { People } from "../data/people";
+import { Teams } from "../data/teams";
+
+type TeamMemberProps = {
+  haveSupplementalInfo: boolean;
+  teamName: string;
+  person: PersonType;
+  supplementalInfo: string | null;
+};
+
+export const TeamMember = ({ haveSupplementalInfo, teamName, person, supplementalInfo }: TeamMemberProps) => {
+  const [showOverlay, setShowOverlay] = useState(false);
+
+  return (
+    <Stack
+      direction={AutoColumnOnSmall("row", "column", "sm")}
+      key={`Team-${teamName}-GridItem-${person.names.first}${person.names.last}`}
+    >
+      <Backdrop
+        onClick={() => setShowOverlay(false)}
+        open={showOverlay}
+        sx={{ p: 2, zIndex: SiteTheme.zIndex.tooltip }}
+      >
+        <Person embeddedIn={teamName} isBadge={false} person={person} sx={{ minWidth: 240, padding: 4 }} />
+      </Backdrop>
+      <Person
+        embeddedIn={teamName}
+        isBadge
+        onAvatarClick={() => setShowOverlay(true)}
+        person={person}
+        sx={{ minWidth: 240 }}
+      />
+      {haveSupplementalInfo && <Box sx={{ fontWeight: "bold", lineHeight: "40px" }}>{supplementalInfo}</Box>}
+    </Stack>
+  );
+};
+
+export const Team = ({ team }: { team: TeamType }) => {
+  const haveSupplementalInfo = !!team.members.find((el) => !!el[1]);
+
+  return (
+    <Stack className="card" gap={2} p={2}>
+      <h2 style={{ margin: 0 }}>{team.name}</h2>
+      <h4 style={{ fontWeight: "normal", margin: 0, marginBlockEnd: 0 }}>{team.description}</h4>
+      {team.members.map(([name, supplementalInfo]) => (
+        <TeamMember
+          haveSupplementalInfo={haveSupplementalInfo}
+          teamName={team.name}
+          person={People[name]}
+          supplementalInfo={supplementalInfo}
+        />
+      ))}
+    </Stack>
+  );
+};
+
+export const TeamsList = () => {
+  return (
+    <Stack gap={4}>
+      <h1 style={{ margin: 0 }}>Teams</h1>
+      The Solus project is made up of several teams. Each team has its own responsibilities and focuses. Because of the
+      size of the overall Solus organization, members are often on multiple teams.
+      {Teams.filter((t) => t.name !== "Admin Team").map((team) => (
+        <Team key={`TeamsList-Team-${team.name}`} team={team} />
+      ))}
+    </Stack>
+  );
+};

src/components/home/Doc.tsx

@@ -7,7 +7,7 @@ import Grid2 from "@mui/material/Unstable_Grid2";
 const Doc = ({ title, img, description, link }: DocSection) => {
   return (
     <Grid2 key={`Doc-Grid-${title}`} xs={6}>
-      <Box className="card shadow--lw" sx={{ p: 6 }}>
+      <Box className="shadow--lw" sx={{ p: 6 }}>
         <Stack alignItems="center" gap={2} textAlign="center">
           {img}
           <Link to={link}>

src/css/custom.css

@@ -6,6 +6,10 @@
 
 /* You can override the default Infima variables here. */
 :root {
+  --marble: #f1f1f1;
+  --dark: #1f1f1f;
+
+  --ifm-card-background-color: var(--marble);
   --ifm-color-primary: #2374d3;
   --ifm-color-primary-dark: #2068be;
   --ifm-color-primary-darker: #1e63b3;
@@ -21,6 +25,7 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
+  --ifm-card-background-color: var(--dark);
   --ifm-color-primary: #5294e2;
   --ifm-color-primary-dark: #3884de;
   --ifm-color-primary-darker: #2a7cdb;
@@ -30,3 +35,8 @@
   --ifm-color-primary-lightest: #a1c5ef;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.card--bg {
+  background-color: var(--ifm-card-background-color);
+  border-radius: var(--ifm-card-border-radius);
+}