tjo.space/src/services.tsx

import { translate } from "@docusaurus/Translate";
import React from "react";

export enum ServiceSectionKind {
  PUBLIC = "PUBLIC",
  PRIVATE = "PRIVATE",
  UPCOMING = "UPCOMING",
}

export interface ServicesSection {
  title: string;
  description: string | JSX.Element;
}

export interface ServiceDescription {
  sectionKind: ServiceSectionKind;
  title: string;
  url: string;
  Svg: React.ComponentType<React.ComponentProps<"svg">>;
  description: JSX.Element;
}

export const sections: { [key in ServiceSectionKind]: ServicesSection } = {
  [ServiceSectionKind.PUBLIC]: {
    title: translate({ message: "Public Services" }),
    description: "Services that are available to everyone.",
  },
  [ServiceSectionKind.PRIVATE]: {
    title: translate({ message: "Private Services" }),
    description: (
      <>
        Services that require <b>id.tjo.space</b> account.
      </>
    ),
  },
  [ServiceSectionKind.UPCOMING]: {
    title: translate({ message: "Upcoming Services" }),
    description:
      "Services that we plan to provide in the future, but are not quite ready yet.",
  },
};

export const services: ServiceDescription[] = [
  {
    sectionKind: ServiceSectionKind.PRIVATE,
    title: "Chat",
    url: "https://chat.tjo.space",
    Svg: require("@site/static/img/undraw_chat_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://chat.tjo.space">chat.tjo.space</a> Metrix server
        which you can use to chat with other users of tjo.space or world wide
        with anyone else on the Matrix network.
      </>
    ),
  },
  {
    sectionKind: ServiceSectionKind.PRIVATE,
    title: "Cloud",
    url: "https://code.tjo.space",
    Svg: require("@site/static/img/undraw_cloud_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://cloud.tjo.space">cloud.tjo.space</a> Nextcloud
        server as a personal cloud to store your <b>Photos</b>, <b>Videos</b>,
        <b>Files</b>, <b>Calendar</b>, <b>Contacts</b> as well as share all that
        with other users of tjo.space or anyone else.
      </>
    ),
  },
  {
    sectionKind: ServiceSectionKind.PRIVATE,
    title: "Code",
    url: "https://code.tjo.space",
    Svg: require("@site/static/img/undraw_code_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://code.tjo.space">code.tjo.space</a> Gitea server as
        a Git repository and CI/CD system.
      </>
    ),
  },
  {
    sectionKind: ServiceSectionKind.PRIVATE,
    title: "Paperless",
    url: "https://paperless.tjo.space",
    Svg: require("@site/static/img/undraw_paperless_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://paperless.tjo.space">paperless.tjo.space</a>{" "}
        Paperless server to archive your documents and make them searchable. Can
        be connected to your email provider so that all attachments are
        autmatically archived.
      </>
    ),
  },
  {
    sectionKind: ServiceSectionKind.PRIVATE,
    title: "RSS",
    url: "https://rss.tjo.space",
    Svg: require("@site/static/img/undraw_rss_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://rss.tjo.space">rss.tjo.space</a> server as a RSS
        reader for all of your news, blogs and podcasts.
      </>
    ),
  },
  {
    sectionKind: ServiceSectionKind.PUBLIC,
    title: "Search",
    url: "https://search.tjo.space",
    Svg: require("@site/static/img/undraw_search_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://search.tjo.space">search.tjo.space</a> private meta
        search engine that doesn't track you.
      </>
    ),
  },
  {
    sectionKind: ServiceSectionKind.PUBLIC,
    title: "Send",
    url: "https://send.tjo.space",
    Svg: require("@site/static/img/undraw_send_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://send.tjo.space">send.tjo.space</a> to create
        private temporary link to share files up to 20GB in size.
      </>
    ),
  },
  {
    sectionKind: ServiceSectionKind.PUBLIC,
    title: "Watch",
    url: "https://yt.tjo.space",
    Svg: require("@site/static/img/undraw_yt_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://yt.tjo.space">yt.tjo.space</a> an Invidious server
        to privately watch YouTube videos.
      </>
    ),
  },
  {
    sectionKind: ServiceSectionKind.UPCOMING,
    title: "Mail",
    url: "https://mail.tjo.space",
    Svg: require("@site/static/img/undraw_mail_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://mail.tjo.space">mail.tjo.space</a> to get your
        personal <b>@tjo.space</b> email address.
      </>
    ),
  },
  {
    sectionKind: ServiceSectionKind.UPCOMING,
    title: "Vault",
    url: "https://vault.tjo.space",
    Svg: require("@site/static/img/undraw_vault_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://vault.tjo.space">vault.tjo.space</a> Bitwarden
        server to securily store your passwords.
      </>
    ),
  },
  {
    sectionKind: ServiceSectionKind.UPCOMING,
    title: "VPN",
    url: "https://vpn.tjo.space",
    Svg: require("@site/static/img/undraw_vpn_tjo_space.svg").default,
    description: (
      <>
        Use <a href="https://vpn.tjo.space">vpn.tjo.space</a> Tailscale server
        to securily connect with other tjo.space users or use one of available
        exit locations to have secure internet connection.
      </>
    ),
  },
].sort((a, b) => {
  const titleA = a.title.toUpperCase();
  const titleB = b.title.toUpperCase();

  if (titleA < titleB) return -1;
  if (titleA > titleB) return 1;
  return 0;
});