Merge branch 'main' into tweak/thumbnail-fixed-width-height

.woodpecker.yml

@@ -32,3 +32,14 @@ pipeline:
       auto_tag: true
     when:
       event: tag
+
+  nightly_build:
+    image: woodpeckerci/plugin-docker-buildx
+    secrets: [docker_username, docker_password]
+    settings:
+      repo: dessalines/lemmy-ui
+      dockerfile: Dockerfile
+      platforms: linux/amd64
+      tag: dev
+    when:
+      event: cron

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.1-rc.1",
+  "version": "0.18.1-rc.2",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",

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/handlers/catch-all-handler.tsx

@@ -75,7 +75,12 @@ export default async (req: Request, res: Response) => {
 
         routeData = await activeRoute.fetchInitialData(initialFetchReq);
       }
+
+      if (!activeRoute) {
+        res.status(404);
+      }
     } else if (try_site.state === "failed") {
+      res.status(500);
       errorPageData = getErrorPageData(new Error(try_site.msg), site);
     }
 
@@ -89,6 +94,7 @@ export default async (req: Request, res: Response) => {
       if (error.msg === "instance_is_private") {
         return res.redirect(`/signup`);
       } else {
+        res.status(500);
         errorPageData = getErrorPageData(new Error(error.msg), site);
       }
     }

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>> {