Federation (#327)

* initial commit federation

* more federation

* more federation

* more federation

* completes follow, accept, undo

* add trail create activity

* process trail create activity

* more trail create activity

* adds missing endpoints

* adds update and delete activity

* adds comment activities

* adds activities back

* adds summit logs activities

* deletes follow counts table

* fixes migrations

* fixes migrations

* fixes migrations

* fixes migrations

* adds remote profiles

* ctd

* ctd

* we are getting closer...

* adds public summit logs

* fixes federated trails in lists

* adds remote lists

* adds list activites

* fixes lists

* adds notifications

* adds iri redirect

* fixes comments and summitlogs

* fixes follows and profiles

* adds asynchronous send

* fixes list search

* adds encryption key

* bug fixes

* fixes activity signing

* removes custon activity object types

* adds html editor

* fixes html editor

* fixes display issues on mastodon

* adds federated sharing

* finishes announcements

* fixes small summit log issues

* adds trail likes

* finalizes likes

* fixes images for komoot

* add disable federation option

* adds private profiles

* updates docs

* adds federated comments

* adds trail and comments actvitiypub routes

* adds mentions to editor

* adds mentions to trails, comments, summit logs

* updates theme

* updates theme

* update docs

* update docs

* updates docs

* fixes various frontend problems

* fixes activitypub follows api

* updates docs

* updates docs

---------

Co-authored-by: Christian Beutel <>

web/src/css/app.css

@@ -1,6 +1,49 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "@fortawesome/fontawesome-free/css/all.min.css";
+
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css";
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+    --color-primary: rgba(var(--primary));
+    --color-background: rgba(var(--background));
+    --color-background-inverse: rgba(var(--background-inverse));
+    --color-content: rgba(var(--content));
+    --color-content-inverse: rgba(var(--content-inverse));
+
+    --color-primary: rgba(var(--primary));
+    --color-primary-hover: rgba(var(--primary-hover));
+    --color-secondary-hover: rgba(var(--secondary-hover));
+    --color-input-background: rgba(var(--input-background));
+    --color-input-background-error: rgba(var(--input-background-error));
+    --color-input-border: rgba(var(--input-border));
+    --color-input-border-focus: rgba(var(--input-border-focus));
+    --color-input-ring: rgba(var(--input-ring));
+    --color-menu-background: rgba(var(--menu-background));
+    --color-menu-item-background-hover: rgba(var(--menu-item-background-hover));
+    --color-menu-item-background-focus: rgba(var(--menu-item-background-focus));
+    --color-footer-background: rgba(var(--footer-background));
+    --color-separator: rgba(var(--separator));
+
+    --font-sans: "IBMPlexSans"
+}
+
+@layer base {
+
+    button:not(:disabled),
+    [role="button"]:not(:disabled) {
+        cursor: pointer;
+    }
+
+    dialog {
+        margin: auto;
+    }
+}
 
 @font-face {
     font-family: "IBMPlexSans";

web/src/css/components.css

@@ -1,6 +1,5 @@
-@import 'tailwindcss/utilities';
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
+@import 'tailwindcss';
+@reference "./app.css";
 
 .btn-primary {
     @apply min-h-10 text-white rounded-lg px-4 py-2 bg-primary font-semibold transition-all hover:bg-primary-hover focus:ring-4 ring-input-ring
@@ -125,4 +124,9 @@
     100% {
         transform: rotate(360deg);
     }
+}
+
+.mention {
+    @apply bg-blue-100 dark:bg-slate-700 rounded-md;
+    padding: 0.1rem 0.3rem;
 }

web/src/css/theme.css

@@ -15,7 +15,6 @@
     --input-border: 209, 213, 219;
     --input-border-focus: 36, 39, 52;
     --input-ring: 148, 163, 184;
-    --input-ring-inverse: 108, 115, 150;
 
     --menu-background: 255, 255, 255;
     --menu-item-background-hover: 243, 244, 246;
@@ -31,28 +30,29 @@
 
 .dark {
     --primary: 36, 39, 52;
-    --primary-hover: 44, 48, 64;
-    --secondary-hover: 36, 39, 52;
+    --primary-hover: 55, 60, 80;
+    --secondary-hover: 55, 65, 81;
+    --secondary-hover-inverse: 243, 244, 246;
 
-    --background: 7, 10, 36;
+    --background: 18, 20, 28;
     --background-inverse: 255, 255, 255;
 
     --content: 255, 255, 255;
     --content-inverse: 0, 0, 0;
 
-    --input-background: 36, 39, 52;
-    --input-background-error: 69, 10, 10;
-    --input-border: 43, 46, 61;
-    --input-border-focus: 108, 115, 150;
-    --input-ring: 108, 115, 150;
+    --input-background: 38, 40, 49;
+    --input-background-error: 76, 17, 17;
+    --input-border: 50, 54, 64;
+    --input-border-focus: 148, 163, 184;
+    --input-ring: 148, 163, 184;
 
-    --menu-background: 33, 36, 54;
-    --menu-item-background-hover: 43, 46, 69;
-    --menu-item-background-focus: 25, 26, 41;
+    --menu-background: 30, 32, 40;
+    --menu-item-background-hover: 55, 65, 81;
+    --menu-item-background-focus: 75, 85, 99;
 
-    --footer-background: 26, 29, 51;
+    --footer-background: 24, 26, 36;
 
-    --separator: 43, 46, 61;
+    --separator: 55, 65, 81;
 
     background: rgba(var(--background));
     color: rgba(var(--content));