Merge remote-tracking branch 'origin/main' into feat/add-post-body-pr…

…eview-to-desktop * origin/main: (40 commits) Adding jsit to codeowners. Cleanup, only check for /u/ if /c/ and /m/ checks fail Rename function to be more generic, since it parses users Typescript linter fixes bandaid fix our video embeds Remove pipe from community link regex Add missing classes Use shorter regex in community link parser Move regex pattern to config Update community link markdown parsing Fix avatar alignment issue (LemmyNet#1475) Omit user-scalable to use default Update getHttpBase dependency reference Enable users to zoom on mobile rethink it a bit rethink it a bit add fallback style tag move env utils into folder fix capitalization (LemmyNet#1467) Fix buildThemeList() function to ensure no duplicates (LemmyNet#1466) ...
jsit · Jun 22, 2023 · a9bcf05 · a9bcf05
2 parents bf0f80e + a274629
commit a9bcf05
Show file tree

Hide file tree

Showing 97 changed files with 1,477 additions and 1,120 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1 +1 @@
-* @dessalines @SleeplessOne1917 @alectrocute
+* @dessalines @SleeplessOne1917 @alectrocute @jsit
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.0-rc.4",
+  "version": "0.18.0-rc.6",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",
@@ -22,9 +22,16 @@
     "translations:update": "git submodule update --remote --recursive"
   },
   "lint-staged": {
-    "*.{ts,tsx,js}": ["prettier --write", "eslint --fix"],
-    "*.{css, scss}": ["prettier --write"],
-    "package.json": ["sortpack"]
+    "*.{ts,tsx,js}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{css, scss}": [
+      "prettier --write"
+    ],
+    "package.json": [
+      "sortpack"
+    ]
   },
   "dependencies": {
     "@babel/plugin-proposal-decorators": "^7.21.0",

diff --git a/src/client/index.tsx b/src/client/index.tsx
@@ -2,7 +2,7 @@ import { initializeSite } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
 import { Router } from "inferno-router";
 import { App } from "../shared/components/app/app";
-import { HistoryService } from "../shared/services/HistoryService";
+import { HistoryService } from "../shared/services";
 
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";

diff --git a/src/server/handlers/catch-all-handler.tsx b/src/server/handlers/catch-all-handler.tsx
@@ -1,12 +1,13 @@
 import { initializeSite, isAuthPath } from "@utils/app";
+import { getHttpBaseInternal } from "@utils/env";
 import { ErrorPageData } from "@utils/types";
+import fetch from "cross-fetch";
 import type { Request, Response } from "express";
 import { StaticRouter, matchPath } from "inferno-router";
 import { renderToString } from "inferno-server";
 import IsomorphicCookie from "isomorphic-cookie";
 import { GetSite, GetSiteResponse, LemmyHttp } from "lemmy-js-client";
 import { App } from "../../shared/components/app/app";
-import { getHttpBaseInternal } from "../../shared/env";
 import {
   InitialFetchRequest,
   IsoDataOptionalSite,

diff --git a/src/server/handlers/manifest-handler.ts b/src/server/handlers/manifest-handler.ts
@@ -1,6 +1,7 @@
+import { getHttpBaseExternal, getHttpBaseInternal } from "@utils/env";
+import fetch from "cross-fetch";
 import type { Request, Response } from "express";
 import { LemmyHttp } from "lemmy-js-client";
-import { getHttpBaseInternal } from "../../shared/env";
 import { wrapClient } from "../../shared/services/HttpService";
 import generateManifestJson from "../utils/generate-manifest-json";
 import { setForwardedHeaders } from "../utils/set-forwarded-headers";
@@ -9,7 +10,7 @@ let manifest: Awaited<ReturnType<typeof generateManifestJson>> | undefined =
   undefined;
 
 export default async (req: Request, res: Response) => {
-  if (!manifest) {
+  if (!manifest || manifest.start_url !== getHttpBaseExternal()) {
     const headers = setForwardedHeaders(req.headers);
     const client = wrapClient(
       new LemmyHttp(getHttpBaseInternal(), { fetchFunction: fetch, headers })

diff --git a/src/server/index.tsx b/src/server/index.tsx
@@ -25,7 +25,7 @@ if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) {
 
 server.get("/robots.txt", RobotsHandler);
 server.get("/service-worker.js", ServiceWorkerHandler);
-server.get("/manifest", ManifestHandler);
+server.get("/manifest.webmanifest", ManifestHandler);
 server.get("/css/themes/:name", ThemeHandler);
 server.get("/css/themelist", ThemesListHandler);
 server.get("/*", CatchAllHandler);

diff --git a/src/server/utils/build-themes-list.ts b/src/server/utils/build-themes-list.ts
@@ -4,15 +4,20 @@ import { readdir } from "fs/promises";
 const extraThemesFolder =
   process.env["LEMMY_UI_EXTRA_THEMES_FOLDER"] || "./extra_themes";
 
-const themes = ["darkly", "darkly-red", "litely", "litely-red"];
+const themes: ReadonlyArray<string> = [
+  "darkly",
+  "darkly-red",
+  "litely",
+  "litely-red",
+];
 
-export async function buildThemeList(): Promise<string[]> {
+export async function buildThemeList(): Promise<ReadonlyArray<string>> {
   if (existsSync(extraThemesFolder)) {
     const dirThemes = await readdir(extraThemesFolder);
     const cssThemes = dirThemes
       .filter(d => d.endsWith(".css"))
       .map(d => d.replace(".css", ""));
-    themes.push(...cssThemes);
+    return themes.concat(cssThemes);
   }
   return themes;
 }
diff --git a/src/server/utils/create-ssr-html.tsx b/src/server/utils/create-ssr-html.tsx
@@ -4,6 +4,7 @@ import serialize from "serialize-javascript";
 import sharp from "sharp";
 import { favIconPngUrl, favIconUrl } from "../../shared/config";
 import { ILemmyConfig, IsoDataOptionalSite } from "../../shared/interfaces";
+import { buildThemeList } from "./build-themes-list";
 import { fetchIconPng } from "./fetch-icon-png";
 
 const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || "";
@@ -16,6 +17,10 @@ export async function createSsrHtml(
 ) {
   const site = isoData.site_res;
 
+  const fallbackTheme = `<link rel="stylesheet" type="text/css" href="/css/themes/${
+    (await buildThemeList())[0]
+  }.css" />`;
+
   if (!appleTouchIcon) {
     appleTouchIcon = site?.site_view.site.icon
       ? `data:image/png;base64,${sharp(
@@ -68,7 +73,7 @@ export async function createSsrHtml(
     <!-- Required meta tags -->
     <meta name="Description" content="Lemmy">
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link
        id="favicon"
        rel="shortcut icon"
@@ -77,15 +82,15 @@ export async function createSsrHtml(
      />
   
     <!-- Web app manifest -->
-    <link rel="manifest" href="/manifest" />
+    <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="apple-touch-icon" href=${appleTouchIcon} />
     <link rel="apple-touch-startup-image" href=${appleTouchIcon} />
   
     <!-- Styles -->
     <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
   
     <!-- Current theme and more -->
-    ${helmet.link.toString()}
+    ${helmet.link.toString() || fallbackTheme}
     
     </head>
   

diff --git a/src/server/utils/fetch-icon-png.ts b/src/server/utils/fetch-icon-png.ts
@@ -1,3 +1,5 @@
+import fetch from "cross-fetch";
+
 export async function fetchIconPng(iconUrl: string) {
   return await fetch(iconUrl)
     .then(res => res.blob())

diff --git a/src/server/utils/generate-manifest-json.ts b/src/server/utils/generate-manifest-json.ts
@@ -1,8 +1,8 @@
+import { getHttpBaseExternal } from "@utils/env";
 import { readFile } from "fs/promises";
 import { GetSiteResponse } from "lemmy-js-client";
 import path from "path";
 import sharp from "sharp";
-import { getHttpBaseExternal } from "../../shared/env";
 import { fetchIconPng } from "./fetch-icon-png";
 
 const iconSizes = [72, 96, 128, 144, 152, 192, 384, 512];

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
@@ -2,9 +2,9 @@ import { isAuthPath, setIsoData } from "@utils/app";
 import { Component, RefObject, createRef, linkEvent } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
-import { i18n } from "../../i18next";
 import { IsoDataOptionalSite } from "../../interfaces";
 import { routes } from "../../routes";
+import { I18NextService } from "../../services";
 import AuthGuard from "../common/auth-guard";
 import ErrorGuard from "../common/error-guard";
 import { ErrorPage } from "./error-page";
@@ -31,13 +31,13 @@ export class App extends Component<any, any> {
 
     return (
       <>
-        <Provider i18next={i18n}>
+        <Provider i18next={I18NextService.i18n}>
           <div id="app" className="lemmy-site">
             <a
               className="skip-link bg-light text-dark p-2 text-decoration-none position-absolute start-0 z-3"
               onClick={linkEvent(this, this.handleJumpToContent)}
             >
-              ${i18n.t("jump_to_content", "Jump to content")}
+              ${I18NextService.i18n.t("jump_to_content", "Jump to content")}
             </a>
             {siteView && (
               <Theme defaultTheme={siteView.local_site.default_theme} />

diff --git a/src/shared/components/app/error-page.tsx b/src/shared/components/app/error-page.tsx
@@ -2,8 +2,8 @@ import { setIsoData } from "@utils/app";
 import { Component } from "inferno";
 import { T } from "inferno-i18next-dess";
 import { Link } from "inferno-router";
-import { i18n } from "../../i18next";
 import { IsoDataOptionalSite } from "../../interfaces";
+import { I18NextService } from "../../services";
 
 export class ErrorPage extends Component<any, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
@@ -19,27 +19,27 @@ export class ErrorPage extends Component<any, any> {
       <div className="error-page container-lg text-center">
         <h1>
           {errorPageData
-            ? i18n.t("error_page_title")
-            : i18n.t("not_found_page_title")}
+            ? I18NextService.i18n.t("error_page_title")
+            : I18NextService.i18n.t("not_found_page_title")}
         </h1>
         {errorPageData ? (
           <T i18nKey="error_page_paragraph" className="p-4" parent="p">
             #<a href="https://lemmy.ml/c/lemmy_support">#</a>#
             <a href="https://matrix.to/#/#lemmy-space:matrix.org">#</a>#
           </T>
         ) : (
-          <p>{i18n.t("not_found_page_message")}</p>
+          <p>{I18NextService.i18n.t("not_found_page_message")}</p>
         )}
         {!errorPageData && (
           <Link to="/" replace>
-            {i18n.t("not_found_return_home_button")}
+            {I18NextService.i18n.t("not_found_return_home_button")}
           </Link>
         )}
         {errorPageData?.adminMatrixIds &&
           errorPageData.adminMatrixIds.length > 0 && (
             <>
               <div>
-                {i18n.t("error_page_admin_matrix", {
+                {I18NextService.i18n.t("error_page_admin_matrix", {
                   instance:
                     this.isoData.site_res?.site_view.site.name ??
                     "this instance",

diff --git a/src/shared/components/app/footer.tsx b/src/shared/components/app/footer.tsx
@@ -2,7 +2,7 @@ import { Component } from "inferno";
 import { NavLink } from "inferno-router";
 import { GetSiteResponse } from "lemmy-js-client";
 import { docsUrl, joinLemmyUrl, repoUrl } from "../../config";
-import { i18n } from "../../i18next";
+import { I18NextService } from "../../services";
 import { VERSION } from "../../version";
 
 interface FooterProps {
@@ -29,36 +29,36 @@ export class Footer extends Component<FooterProps, any> {
             </li>
             <li className="nav-item">
               <NavLink className="nav-link" to="/modlog">
-                {i18n.t("modlog")}
+                {I18NextService.i18n.t("modlog")}
               </NavLink>
             </li>
             {this.props.site?.site_view.local_site.legal_information && (
               <li className="nav-item">
                 <NavLink className="nav-link" to="/legal">
-                  {i18n.t("legal_information")}
+                  {I18NextService.i18n.t("legal_information")}
                 </NavLink>
               </li>
             )}
             {this.props.site?.site_view.local_site.federation_enabled && (
               <li className="nav-item">
                 <NavLink className="nav-link" to="/instances">
-                  {i18n.t("instances")}
+                  {I18NextService.i18n.t("instances")}
                 </NavLink>
               </li>
             )}
             <li className="nav-item">
               <a className="nav-link" href={docsUrl}>
-                {i18n.t("docs")}
+                {I18NextService.i18n.t("docs")}
               </a>
             </li>
             <li className="nav-item">
               <a className="nav-link" href={repoUrl}>
-                {i18n.t("code")}
+                {I18NextService.i18n.t("code")}
               </a>
             </li>
             <li className="nav-item">
               <a className="nav-link" href={joinLemmyUrl}>
-                {i18n.t("join_lemmy")}
+                {I18NextService.i18n.t("join_lemmy")}
               </a>
             </li>
           </ul>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		* @dessalines @SleeplessOne1917 @alectrocute
		* @dessalines @SleeplessOne1917 @alectrocute @jsit