Add environment variable of custom lemmy server(s) for self-hosted de…

…ployments (aeharding#51)

README.md

@@ -37,11 +37,12 @@ wefwef is an [Apollo-like](https://apolloapp.io/) open source web client for [Le
 - Comment thread collapsing
 - A bunch of swipe gestures
 - Messaging, mentions and replies
+- Creating new posts (url/photo/text)
 
 **What is on the roadmap?**
 
-- Creating posts
 - Android theme
+- Deleting/editing posts/comments
 - Native notifications and badging
 - ...and more!
 
@@ -66,6 +67,10 @@ The wefwef team maintains a deployment at:
 In order to host wefwef yourself you can use the provided Dockerfile to build a container with wefwef. The Docker container itself does not provide any SSL/TLS handling. You'll have to add this bit yourself.
 One could put wefwef behind popular reverse proxies with SSL Handling like Traefik, NGINX etc.
 
+#### Environment variables
+
+- `CUSTOM_LEMMY_SERVERS` (optional) e.g. `lemmy.world,lemmy.ml,sh.itjust.works` - a comma separated list of suggested servers. The first will be used as default view for logged out users. You can specify only one if you want.
+
 #### From source
 
 1. checkout source `git clone https://github.com/aeharding/wefwef.git`

index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <title>wefwef for lemmy</title>
 
+    <!-- runtime_config -->
+
     <meta
       name="description"
       content="wefwef is a beautiful mobile web client for lemmy. Enjoy a seamless experience browsing the fediverse."

server.mjs

@@ -2,9 +2,13 @@ import express from "express";
 import ViteExpress from "vite-express";
 import { createProxyMiddleware } from "http-proxy-middleware";
 
+const CUSTOM_LEMMY_SERVERS = process.env.CUSTOM_LEMMY_SERVERS
+  ? process.env.CUSTOM_LEMMY_SERVERS.split(",").map((s) => s.trim())
+  : [];
+
 // avoid issues where popular servers are flakey
 // and get blacklisted for a few minutes
-const LEMMY_WHITELIST = [
+const INITIAL_VALID_LEMMY_SERVERS = [
   "lemmy.ml",
   "lemmy.world",
   "lemmy.one",
@@ -17,12 +21,14 @@ const LEMMY_WHITELIST = [
   "lemmynsfw.com",
   "lemmy.ca",
   "lemmy.sdf.org",
-];
+].concat(CUSTOM_LEMMY_SERVERS);
 
 const validLemmyServers = {};
 const badLemmyServers = {};
 
-LEMMY_WHITELIST.forEach((server) => (validLemmyServers[server] = true));
+INITIAL_VALID_LEMMY_SERVERS.forEach(
+  (server) => (validLemmyServers[server] = true)
+);
 
 const app = express();
 
@@ -122,6 +128,23 @@ app.use(
   })
 );
 
+function transformer(html) {
+  return html.replace(
+    "<!-- runtime_config -->",
+    `<script>${
+      CUSTOM_LEMMY_SERVERS.length
+        ? `window.CUSTOM_LEMMY_SERVERS = ${JSON.stringify(
+            CUSTOM_LEMMY_SERVERS
+          )}`
+        : ""
+    }</script>`
+  );
+}
+
+ViteExpress.config({
+  transformer,
+});
+
 const PORT = process.env.PORT || 5173;
 
 ViteExpress.listen(app, PORT, () =>

src/TabbedRoutes.tsx

@@ -21,7 +21,6 @@ import CommunitiesPage from "./pages/posts/CommunitiesPage";
 import CommunityPage from "./pages/shared/CommunityPage";
 import { useAppSelector } from "./store";
 import { jwtIssSelector, jwtSelector } from "./features/auth/authSlice";
-import { POPULAR_SERVERS } from "./helpers/lemmy";
 import ActorRedirect from "./ActorRedirect";
 import SpecialFeedPage from "./pages/shared/SpecialFeedPage";
 import styled from "@emotion/styled";
@@ -49,14 +48,15 @@ import InboxAuthRequired from "./pages/inbox/InboxAuthRequired";
 import UpdateAppPage from "./pages/settings/UpdateAppPage";
 import useShouldInstall from "./features/pwa/useShouldInstall";
 import { UpdateContext } from "./pages/settings/update/UpdateContext";
+import { LEMMY_SERVERS } from "./helpers/lemmy";
 
 const Interceptor = styled.div`
   position: absolute;
   inset: 0;
   pointer-events: all;
 `;
 
-export const DEFAULT_ACTOR = POPULAR_SERVERS[0];
+export const DEFAULT_ACTOR = LEMMY_SERVERS[0];
 
 export default function TabbedRoutes() {
   const { activePage } = useContext(AppContext);

src/features/auth/Login.tsx

@@ -19,13 +19,13 @@ import {
   useIonModal,
 } from "@ionic/react";
 import styled from "@emotion/styled";
-import { POPULAR_SERVERS } from "../../helpers/lemmy";
 import { useAppDispatch } from "../../store";
 import { login } from "./authSlice";
 import { LemmyHttp } from "lemmy-js-client";
 import { getClient } from "../../services/lemmy";
 import { IonInputCustomEvent } from "@ionic/core";
 import TermsSheet from "../settings/terms/TermsSheet";
+import { LEMMY_SERVERS } from "../../helpers/lemmy";
 
 export const Spinner = styled(IonSpinner)`
   width: 1.5rem;
@@ -50,7 +50,7 @@ export default function Login({
 }) {
   const [present] = useIonToast();
   const dispatch = useAppDispatch();
-  const [server, setServer] = useState(POPULAR_SERVERS[0]);
+  const [server, setServer] = useState(LEMMY_SERVERS[0]);
   const [customServer, setCustomServer] = useState("");
   const [serverConfirmed, setServerConfirmed] = useState(false);
   const [username, setUsername] = useState("");
@@ -248,7 +248,7 @@ export default function Login({
                 onIonChange={(e) => setServer(e.target.value)}
               >
                 <IonList inset>
-                  {POPULAR_SERVERS.map((server) => (
+                  {LEMMY_SERVERS.slice(0, 3).map((server) => (
                     <IonItem disabled={loading} key={server}>
                       <IonRadio value={server} key={server}>
                         {server}

src/helpers/lemmy.ts

@@ -1,6 +1,9 @@
 import { Comment, CommentView, Community } from "lemmy-js-client";
 
-export const POPULAR_SERVERS = ["lemmy.world", "lemmy.ml", "beehaw.org"];
+export const LEMMY_SERVERS =
+  "CUSTOM_LEMMY_SERVERS" in window
+    ? (window.CUSTOM_LEMMY_SERVERS as string[])
+    : ["lemmy.world", "lemmy.ml", "beehaw.org", "sh.itjust.works"];
 
 export interface LemmyJWT {
   sub: number;

src/pages/profile/ProfilePage.tsx

@@ -29,6 +29,7 @@ import { swapHorizontalOutline } from "ionicons/icons";
 import { css } from "@emotion/react";
 import AccountSwitcher from "../../features/auth/AccountSwitcher";
 import { PageContext } from "../../features/auth/PageContext";
+import { LEMMY_SERVERS } from "../../helpers/lemmy";
 
 const Incognito = styled(IncognitoSvg)`
   opacity: 0.1;
@@ -127,12 +128,10 @@ export default function ProfilePage() {
           columns={[
             {
               name: "server",
-              options: [
-                "lemmy.ml",
-                "lemmy.world",
-                "beehaw.org",
-                "sh.itjust.works",
-              ].map((server) => ({ text: server, value: server })),
+              options: LEMMY_SERVERS.map((server) => ({
+                text: server,
+                value: server,
+              })),
             },
           ]}
           buttons={[