Adding third party tools.

src/shared/components/app-definitions.ts

@@ -1,4 +1,4 @@
-export interface ApiLibrary {
+export interface ToolDetails {
   name: string;
   link: string;
   description: string;
@@ -33,7 +33,7 @@ export interface AppLink {
   icon: string;
 }
 
-export const API_LIBRARIES: ApiLibrary[] = [
+export const API_LIBRARIES: ToolDetails[] = [
   {
     name: "lemmy-js-client",
     link: "https://github.com/LemmyNet/lemmy-js-client",
@@ -67,6 +67,37 @@ export const API_LIBRARIES: ApiLibrary[] = [
   },
 ];
 
+export const THIRD_PARTY_TOOLS: ToolDetails[] = [
+  {
+    name: "lemmy-bot",
+    link: "https://github.com/SleeplessOne1917/lemmy-bot",
+    description: "A bot library for Lemmy, the fediverse link aggregator.",
+  },
+  {
+    name: "lemmy-bouncer",
+    link: "https://github.com/SleeplessOne1917/lemmy-bouncer",
+    description:
+      "Lemmy automod bot to prevent unvetted users from posting or commenting in a community.",
+  },
+  {
+    name: "Fediseer",
+    link: "https://github.com/Fediseer/fediseer",
+    description:
+      "This service provides an REST API which can be used to retrieve various information about Fediverse instances, particularly focused on detecting and countering bad actors.",
+  },
+  {
+    name: "LemmyAutomod",
+    link: "https://github.com/RikudouSage/LemmyAutomod",
+    description:
+      "LemmyAutomod is a tool for Lemmy that allows instance admins to set rules that will take action in certain scenarios.",
+  },
+  {
+    name: "threativore",
+    link: "https://github.com/db0/threativore",
+    description: "A Thrediverse bot fight against spam",
+  },
+];
+
 const VOYAGER: AppDetails = {
   name: "Voyager",
   description: "A Lemmy Client for iOS, Android and the web",

src/shared/components/apps.tsx

@@ -6,10 +6,12 @@ import { BottomSpacer, SELECT_CLASSES, TEXT_GRADIENT } from "./common";
 import {
   API_LIBRARIES,
   APP_LIST,
+  ToolDetails,
   AppDetails,
   AppLink,
   Platform,
   SourceType,
+  THIRD_PARTY_TOOLS,
 } from "./app-definitions";
 import { Icon } from "./icon";
 import { I18nKeys } from "i18next";
@@ -95,13 +97,18 @@ const AppGrid = ({ apps }: AppGridProps) => (
   </div>
 );
 
-const ApiLibrariesBlock = () => (
+interface ToolsBlockProps {
+  title: string;
+  items: ToolDetails[];
+}
+
+const ToolsBlock = ({ title, items }: ToolsBlockProps) => (
   <div>
-    <AppTitle title={i18n.t("api_libraries")} />
+    <AppTitle title={title} />
-    <div className="card card-bordered bg-neutral-900 shadow-xl md:w-1/2">
+    <div className="card card-bordered bg-neutral-900 shadow-xl">
       <div className="card-body">
         <ul>
-          {API_LIBRARIES.map(a => (
+          {items.map(a => (
             <li>
               <span className={`${TEXT_GRADIENT} mr-2`}>●</span>
               <span>
@@ -163,7 +170,13 @@ export class Apps extends Component<any, State> {
         <TitleBlock />
         {this.filterAndTitleBlock()}
         <AppGrid apps={this.state.apps} />
-        <ApiLibrariesBlock />
+        <div className="grid md:grid-cols-2 grid-cols-1 gap-4 mb-16">
+          <ToolsBlock title={i18n.t("api_libraries")} items={API_LIBRARIES} />
+          <ToolsBlock
+            title={i18n.t("third_party_tools")}
+            items={THIRD_PARTY_TOOLS}
+          />
+        </div>
         <BottomSpacer />
       </div>
     );