Merge branch 'main' into error-status-codes

src/assets/css/themes/_variables.i386.scss

@@ -0,0 +1,58 @@
+@import "./variables";
+
+// Colors
+$white: #fff;
+$gray-100: #f8f9fa;
+$gray-200: #ebebeb;
+$gray-300: #bbb;
+$gray-500: #adb5bd;
+$gray-800: #303030;
+$gray-900: #222;
+
+$blue: #5555ff;
+$cyan: #55ffff;
+$green: #55ff55;
+$indigo: #ff55ff;
+$red: #ff5555;
+$yellow: #fefe54;
+$orange: #a85400;
+$pink: #fe54fe;
+$purple: #fe5454;
+
+$primary: #fefe54;
+$secondary: $gray-900;
+$success: #00aa00;
+$danger: #aa0000;
+$info: #00aaaa;
+$warning: #aa00aa;
+$light: $gray-800;
+$dark: black;
+
+$body-bg: #000084;
+$body-color: $gray-300;
+
+$link-hover-color: $white;
+
+$font-family-sans-serif: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
+$font-family-monospace: DOS, Monaco, Menlo, Consolas, "Courier New", monospace;
+
+$navbar-dark-color: $gray-300;
+$navbar-light-brand-color: $gray-300;
+$navbar-dark-active-color: $gray-100;
+$nav-tabs-link-active-color: $gray-100;
+$navbar-dark-hover-color: rgba($gray-300, 0.75);
+$navbar-light-disabled-color: $gray-800;
+$navbar-light-active-color: $gray-100;
+$navbar-light-hover-color: $gray-200;
+$navbar-light-color: $gray-300;
+
+$enable-rounded: false;
+
+$input-color: $white;
+$input-bg: rgb(102, 102, 102);
+$input-placeholder-color: $gray-500;
+$input-disabled-bg: $gray-800;
+
+$card-bg: $gray-800;
+$card-border-color: $white;
+$mark-bg: #463b00;

src/assets/css/themes/i386.scss

@@ -0,0 +1,16 @@
+@import "variables.i386";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";
+
+.btn-outline-secondary {
+  color: $gray-500;
+}
+
+.dropdown-item.active,
+.dropdown-item:hover,
+option:disabled {
+  color: $secondary;
+}
+
+.input-group-text {
+  background: $gray-500;
+}

src/server/index.tsx

@@ -8,7 +8,7 @@ import RobotsHandler from "./handlers/robots-handler";
 import ServiceWorkerHandler from "./handlers/service-worker-handler";
 import ThemeHandler from "./handlers/theme-handler";
 import ThemesListHandler from "./handlers/themes-list-handler";
-import setDefaultCsp from "./middleware/set-default-csp";
+import { setCacheControl, setDefaultCsp } from "./middleware";
 
 const server = express();
 
@@ -19,6 +19,7 @@ const [hostname, port] = process.env["LEMMY_UI_HOST"]
 server.use(express.json());
 server.use(express.urlencoded({ extended: false }));
 server.use("/static", express.static(path.resolve("./dist")));
+server.use(setCacheControl);
 
 if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
   server.use(setDefaultCsp);

src/server/middleware.ts

@@ -0,0 +1,42 @@
+import type { NextFunction, Response } from "express";
+import { UserService } from "../shared/services";
+
+export function setDefaultCsp({
+  res,
+  next,
+}: {
+  res: Response;
+  next: NextFunction;
+}) {
+  res.setHeader(
+    "Content-Security-Policy",
+    `default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src *`
+  );
+
+  next();
+}
+
+// Set cache-control headers. If user is logged in, set `private` to prevent storing data in
+// shared caches (eg nginx) and leaking of private data. If user is not logged in, allow caching
+// all responses for 60 seconds to reduce load on backend and database. The specific cache
+// interval is rather arbitrary and could be set higher (less server load) or lower (fresher data).
+//
+// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control
+export function setCacheControl({
+  res,
+  next,
+}: {
+  res: Response;
+  next: NextFunction;
+}) {
+  const user = UserService.Instance;
+  let caching;
+  if (user.auth()) {
+    caching = "private";
+  } else {
+    caching = "public, max-age=60";
+  }
+  res.setHeader("Cache-Control", caching);
+
+  next();
+}

src/server/middleware/set-default-csp.ts

@@ -1,10 +0,0 @@
-import type { NextFunction, Response } from "express";
-
-export default function ({ res, next }: { res: Response; next: NextFunction }) {
-  res.setHeader(
-    "Content-Security-Policy",
-    `default-src 'self'; manifest-src *; connect-src *; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; form-action 'self'; base-uri 'self'; frame-src *; media-src * data:`
-  );
-
-  next();
-}

src/server/utils/build-themes-list.ts

@@ -12,6 +12,7 @@ const themes: ReadonlyArray<string> = [
   "litely",
   "litely-red",
   "litely-compact",
+  "i386",
 ];
 
 export async function buildThemeList(): Promise<ReadonlyArray<string>> {

src/shared/components/community/sidebar.tsx

@@ -166,7 +166,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   communityTitle() {
     const community = this.props.community_view.community;
-    const subscribed = this.props.community_view.subscribed;
+
     return (
       <div>
         <h5 className="mb-0">
@@ -176,33 +176,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           <span className="me-2">
             <CommunityLink community={community} hideAvatar />
           </span>
-          {subscribed === "Subscribed" && (
-            <button
-              className="btn btn-secondary btn-sm me-2"
-              onClick={linkEvent(this, this.handleUnfollowCommunity)}
-            >
-              {this.state.followCommunityLoading ? (
-                <Spinner />
-              ) : (
-                <>
-                  <Icon icon="check" classes="icon-inline text-success me-1" />
-                  {I18NextService.i18n.t("joined")}
-                </>
-              )}
-            </button>
-          )}
-          {subscribed === "Pending" && (
-            <button
-              className="btn btn-warning me-2"
-              onClick={linkEvent(this, this.handleUnfollowCommunity)}
-            >
-              {this.state.followCommunityLoading ? (
-                <Spinner />
-              ) : (
-                I18NextService.i18n.t("subscribe_pending")
-              )}
-            </button>
-          )}
           {community.removed && (
             <small className="me-2 text-muted fst-italic">
               {I18NextService.i18n.t("removed")}
@@ -259,8 +232,9 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
 
   subscribe() {
     const community_view = this.props.community_view;
-    return (
-      community_view.subscribed === "NotSubscribed" && (
+
+    if (community_view.subscribed === "NotSubscribed") {
+      return (
         <button
           className="btn btn-secondary d-block mb-2 w-100"
           onClick={linkEvent(this, this.handleFollowCommunity)}
@@ -271,8 +245,41 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             I18NextService.i18n.t("subscribe")
           )}
         </button>
-      )
-    );
+      );
+    }
+
+    if (community_view.subscribed === "Subscribed") {
+      return (
+        <button
+          className="btn btn-secondary d-block mb-2 w-100"
+          onClick={linkEvent(this, this.handleUnfollowCommunity)}
+        >
+          {this.state.followCommunityLoading ? (
+            <Spinner />
+          ) : (
+            <>
+              <Icon icon="check" classes="icon-inline text-success me-1" />
+              {I18NextService.i18n.t("joined")}
+            </>
+          )}
+        </button>
+      );
+    }
+
+    if (community_view.subscribed === "Pending") {
+      return (
+        <button
+          className="btn btn-warning d-block mb-2 w-100"
+          onClick={linkEvent(this, this.handleUnfollowCommunity)}
+        >
+          {this.state.followCommunityLoading ? (
+            <Spinner />
+          ) : (
+            I18NextService.i18n.t("subscribe_pending")
+          )}
+        </button>
+      );
+    }
   }
 
   blockCommunity() {