diff --git a/.prettierignore b/.prettierignore index 004c815..c6145fd 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,3 +2,4 @@ src/shared/translations lemmy-translations src/assets/css/themes/*.css stats.json +dist diff --git a/Dockerfile b/Dockerfile index 2b36581..92b3f7e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -27,7 +27,7 @@ COPY .git .git RUN echo "export const VERSION = '$(git describe --tag)';" > "src/shared/version.ts" RUN yarn --production --prefer-offline -RUN yarn build:prod +RUN NODE_OPTIONS="--max-old-space-size=8192" yarn build:prod # Prune the image RUN node-prune /usr/src/app/node_modules diff --git a/dev.dockerfile b/dev.dockerfile index 3bfc10d..881d9bc 100644 --- a/dev.dockerfile +++ b/dev.dockerfile @@ -20,6 +20,7 @@ COPY generate_translations.js \ COPY lemmy-translations lemmy-translations COPY src src +COPY .git .git # Set UI version RUN echo "export const VERSION = 'dev';" > "src/shared/version.ts" diff --git a/package.json b/package.json index ef07b29..9acaba4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lemmy-ui", - "version": "0.18.1-rc.3", + "version": "0.18.1-rc.5", "description": "An isomorphic UI for lemmy", "repository": "https://github.com/LemmyNet/lemmy-ui", "license": "AGPL-3.0", @@ -8,9 +8,9 @@ "scripts": { "analyze": "webpack --mode=none", "prebuild:dev": "yarn clean && node generate_translations.js", - "build:dev": "webpack --mode=development", + "build:dev": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=development", "prebuild:prod": "yarn clean && node generate_translations.js", - "build:prod": "webpack --mode=production", + "build:prod": "webpack --env COMMIT_HASH=$(git rev-parse --short HEAD) --mode=production", "clean": "yarn run rimraf dist", "dev": "yarn build:dev --watch", "lint": "yarn translations:generate && tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx \"src/**\" && prettier --check \"src/**/*.{ts,tsx,js,css,scss}\"", @@ -52,7 +52,6 @@ "cross-fetch": "^3.1.5", "css-loader": "^6.7.3", "date-fns": "^2.30.0", - "date-fns-tz": "^2.0.0", "emoji-mart": "^5.4.0", "emoji-short-name": "^2.0.0", "express": "~4.18.2", diff --git a/src/server/index.tsx b/src/server/index.tsx index 270f33c..458d7f0 100644 --- a/src/server/index.tsx +++ b/src/server/index.tsx @@ -1,4 +1,5 @@ import { setupDateFns } from "@utils/app"; +import { getStaticDir } from "@utils/env"; import express from "express"; import path from "path"; import process from "process"; @@ -19,7 +20,13 @@ 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( + getStaticDir(), + express.static(path.resolve("./dist"), { + maxAge: 24 * 60 * 60 * 1000, // 1 day + immutable: true, + }) +); server.use(setCacheControl); if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) { diff --git a/src/server/middleware.ts b/src/server/middleware.ts index 9815e71..235f072 100644 --- a/src/server/middleware.ts +++ b/src/server/middleware.ts @@ -1,4 +1,4 @@ -import type { NextFunction, Response } from "express"; +import type { NextFunction, Request, Response } from "express"; import { UserService } from "../shared/services"; export function setDefaultCsp({ @@ -18,24 +18,33 @@ export function setDefaultCsp({ // 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 +// all responses for 5 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; -}) { +export function setCacheControl( + req: Request, + res: Response, + next: NextFunction +) { const user = UserService.Instance; let caching: string; - if (user.auth()) { - caching = "private"; + + if ( + process.env.NODE_ENV === "production" && + (req.path.match(/\.(js|css|txt|manifest\.webmanifest)\/?$/) || + req.path.includes("/css/themelist")) + ) { + // Static content gets cached publicly for a day + caching = "public, max-age=86400"; } else { - caching = "public, max-age=60"; + if (user.auth()) { + caching = "private"; + } else { + caching = "public, max-age=5"; + } } + res.setHeader("Cache-Control", caching); next(); diff --git a/src/server/utils/create-ssr-html.tsx b/src/server/utils/create-ssr-html.tsx index 1377598..ba85228 100644 --- a/src/server/utils/create-ssr-html.tsx +++ b/src/server/utils/create-ssr-html.tsx @@ -1,3 +1,4 @@ +import { getStaticDir } from "@utils/env"; import { Helmet } from "inferno-helmet"; import { renderToString } from "inferno-server"; import serialize from "serialize-javascript"; @@ -23,7 +24,7 @@ export async function createSsrHtml( if (!appleTouchIcon) { appleTouchIcon = site?.site_view.site.icon - ? `data:image/png;base64,${sharp( + ? `data:image/png;base64,${await sharp( await fetchIconPng(site.site_view.site.icon) ) .resize(180, 180) @@ -87,7 +88,7 @@ export async function createSsrHtml( - + ${helmet.link.toString() || fallbackTheme} @@ -102,7 +103,7 @@ export async function createSsrHtml(
${root}
- + `; diff --git a/src/shared/components/common/icon.tsx b/src/shared/components/common/icon.tsx index 5b6ddf8..92a41a3 100644 --- a/src/shared/components/common/icon.tsx +++ b/src/shared/components/common/icon.tsx @@ -1,3 +1,4 @@ +import { getStaticDir } from "@utils/env"; import classNames from "classnames"; import { Component } from "inferno"; import { I18NextService } from "../../services"; @@ -23,7 +24,9 @@ export class Icon extends Component { })} >
{this.props.icon} diff --git a/src/shared/components/common/moment-time.tsx b/src/shared/components/common/moment-time.tsx index 24bd3c7..e658695 100644 --- a/src/shared/components/common/moment-time.tsx +++ b/src/shared/components/common/moment-time.tsx @@ -1,5 +1,5 @@ import { capitalizeFirstLetter, formatPastDate } from "@utils/helpers"; -import { formatInTimeZone } from "date-fns-tz"; +import { format } from "date-fns"; import parseISO from "date-fns/parseISO"; import { Component } from "inferno"; import { I18NextService } from "../../services"; @@ -13,9 +13,8 @@ interface MomentTimeProps { } function formatDate(input: string) { - const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; const parsed = parseISO(input + "Z"); - return formatInTimeZone(parsed, tz, "PPPPpppp"); + return format(parsed, "PPPPpppp"); } export class MomentTime extends Component { diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 5ef1a87..5e73367 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -279,13 +279,15 @@ export class Home extends Component { trendingCommunitiesRes, commentsRes, postsRes, - tagline: getRandomFromList(this.state?.siteRes?.taglines ?? []) - ?.content, isIsomorphic: true, }; HomeCacheService.postsRes = postsRes; } + + this.state.tagline = getRandomFromList( + this.state?.siteRes?.taglines ?? [] + )?.content; } componentWillUnmount() { diff --git a/src/shared/components/home/tagline-form.tsx b/src/shared/components/home/tagline-form.tsx index bdbe1e6..f7cf99a 100644 --- a/src/shared/components/home/tagline-form.tsx +++ b/src/shared/components/home/tagline-form.tsx @@ -141,7 +141,7 @@ export class TaglineForm extends Component { handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) { event.preventDefault(); - if (this.state.editingRow == d.index) { + if (d.i.state.editingRow == d.index) { d.i.setState({ editingRow: undefined }); } else { d.i.setState({ editingRow: d.index }); diff --git a/src/shared/components/person/person-listing.tsx b/src/shared/components/person/person-listing.tsx index 6631a8e..dfc5d66 100644 --- a/src/shared/components/person/person-listing.tsx +++ b/src/shared/components/person/person-listing.tsx @@ -1,4 +1,5 @@ import { showAvatars } from "@utils/app"; +import { getStaticDir } from "@utils/env"; import { hostname, isCakeDay } from "@utils/helpers"; import classNames from "classnames"; import { Component } from "inferno"; @@ -88,7 +89,7 @@ export class PersonListing extends Component { !this.props.person.banned && showAvatars() && ( )} diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index ae6e2f3..5c562a4 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -333,7 +333,7 @@ export class PostListing extends Component { return (