Merge branch 'LemmyNet:main' into added-darkly-compact-552

.github/CODEOWNERS

@@ -1 +1 @@
-* @dessalines @SleeplessOne1917 @alectrocute
+* @dessalines @SleeplessOne1917 @alectrocute @jsit

.github/ISSUE_TEMPLATE/BUG_REPORT.yml

@@ -1,32 +1,29 @@
-name: "\U0001F41E Bug Report"
+name: "\U0001F41E Bug report"
-description: Create a report to help us improve lemmy-ui
+description: Report a bug to help us improve Lemmy-UI.
-title: "[Bug]: "
 labels: ["bug", "triage"]
 body:
   - type: markdown
     attributes:
       value: |
-        Found a bug? Please fill out the sections below. 👍
+        Thanks for taking the time to help improve Lemmy-UI by reporting a bug!
-        Thanks for taking the time to fill out this bug report!
-        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
   - type: checkboxes
     attributes:
       label: Requirements
-      description: Before you create a bug report please do the following.
+      description: Before you create a bug report, please carefully check the following –
       options:
-        - label: Is this a bug report? For questions or discussions use https://lemmy.ml/c/lemmy_support
+        - label: This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
           required: true
-        - label: Did you check to see if this issue already exists?
+        - label: Please [check](https://github.com/LemmyNet/lemmy-ui/issues) to see if this issue already exists.
           required: true
-        - label: Is this only a single bug? Do not put multiple bugs in one issue.
+        - label: It's a single bug. Do not report multiple bugs in one issue.
+          required: true
+        - label: It's a frontend issue, not a backend issue; Otherwise please create an issue on the [backend repo](https://github.com/LemmyNet/lemmy) instead.
           required: true
-        - label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
-          required: false
   - type: textarea
     id: summary
     attributes:
       label: Summary
-      description: A summary of the bug.
+      description: Explain the bug and upload images, screenshots or videos if possible.
     validations:
       required: true
   - type: textarea
@@ -34,12 +31,13 @@ body:
     attributes:
       label: Steps to Reproduce
       description: |
-        Describe the steps to reproduce the bug.
+        In a numbered list, walk us through the steps needed to reproduce the bug.
-        The better your description is _(go 'here', click 'there'...)_ the fastest you'll get an _(accurate)_ resolution.
+        The better your description is _(go 'here', click 'there'...)_, the quicker we can fix it.
       value: |
         1.
         2.
         3.
+        4.
     validations:
       required: true
   - type: textarea
@@ -47,20 +45,21 @@ body:
     attributes:
       label: Technical Details
       description: |
-        - Any browser console errors?
+        Describe your environment (OS, browser, model of smartphone, etc)
+        If relevant, also share any console errors and/or screenshots here.
     validations:
       required: true
   - type: input
     id: lemmy-ui-version
     attributes:
-      label: Version
+      label: Lemmy Instance Version
-      description: Which Lemmy UI version do you use? Displayed in the footer.
+      description: What's the version of the Lemmy instance where the bug can be reproduced?
-      placeholder: ex. 0.17.4-rc.4
+      placeholder: ex. 0.18-rc.6
     validations:
       required: true
   - type: input
     id: lemmy-instance
     attributes:
       label: Lemmy Instance URL
-      description: Which Lemmy instance do you use? The address
+      description: What's the URL of the Lemmy instance where the bug can be reproduced?
-      placeholder: lemmy.ml, lemmy.world, etc
+      placeholder: https://lemmy.ml

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml

@@ -1,54 +1,27 @@
 name: "\U0001F680 Feature request"
-description: Suggest an idea for improving Lemmy's UI
+description: Suggest an idea for Lemmy-UI.
 labels: ["enhancement"]
 body:
   - type: markdown
     attributes:
       value: |
-        Have a suggestion about Lemmy's UI?
+        Thanks for taking the time to help improve Lemmy-UI by suggesting a feature!
-        For backend issues, use [lemmy](https://github.com/LemmyNet/lemmy/issues/new/choose)
   - type: checkboxes
     attributes:
       label: Requirements
-      description: Before you create a feature request please do the following.
+      description: Before you create a feature request, please carefully check the following –
       options:
-        - label: Is this a feature request? For questions or discussions use https://lemmy.ml/c/lemmy_support
+        - label: This is a feature request and not a bug report. Otherwise, please create a new [bug report](https://github.com/LemmyNet/lemmy-ui/issues/new?assignees=&labels=bug%2Ctriage&projects=&template=BUG_REPORT.yml) instead.
           required: true
-        - label: Did you check to see if this issue already exists?
+        - label: Please [check](https://github.com/LemmyNet/lemmy-ui/issues) to see if this request (or a similar one) already exists.
           required: true
-        - label: Is this only a feature request? Do not put multiple feature requests in one issue.
+        - label: It's a single feature. Please don't request multiple features in one issue.
           required: true
-        - label: Is this a server side (not related to the UI) issue? Use the [Lemmy back end](https://github.com/LemmyNet/lemmy) repo.
-          required: false
-  - type: textarea
-    id: problem
-    attributes:
-      label: Is your proposal related to a problem?
-      description: |
-        Provide a clear and concise description of what the problem is.
-        For example, "I'm always frustrated when..."
-    validations:
-      required: true
   - type: textarea
     id: solution
     attributes:
-      label: Describe the solution you'd like.
+      label: Describe the feature you'd like
       description: |
-        Provide a clear and concise description of what you want to happen.
+        Provide a clear and concise description of the feature. Explain why it's needed.
     validations:
       required: true
-  - type: textarea
-    id: alternatives
-    attributes:
-      label: Describe alternatives you've considered.
-      description: |
-        Let us know about other solutions you've tried or researched.
-    validations:
-      required: true
-  - type: textarea
-    id: context
-    attributes:
-      label: Additional context
-      description: |
-        Is there anything else you can add about the proposal?
-        You might want to link to related issues here, if you haven't already.

.github/ISSUE_TEMPLATE/QUESTION.yml

@@ -1,17 +0,0 @@
-name: "? Question"
-description: General questions about Lemmy
-title: "Question: "
-labels: ["question", "triage"]
-body:
-  - type: markdown
-    attributes:
-      value: |
-        Have a question about Lemmy's UI?
-        Please check the docs first: https://join-lemmy.org/docs/en/index.html
-  - type: textarea
-    id: question
-    attributes:
-      label: Question
-      description: What's the question you have about Lemmy's UI?
-    validations:
-      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Question
+    url: https://lemmy.ml/c/lemmy_support
+    about: Please ask and answer general questions here.
+  - name: Technical Discussion
+    url: https://github.com/LemmyNet/lemmy-ui/discussions
+    about: Please discuss technical topics with other contributors here.

.github/ISSUE_TEMPLATE/hexbear.yml

@@ -1,11 +0,0 @@
-name: "Hexbear"
-description: For hexbear issues
-labels: ["hexbear", "triage"]
-body:
-  - type: textarea
-    id: question
-    attributes:
-      label: Question
-      description: What's the question you have about hexbear?
-    validations:
-      required: true

.gitignore

@@ -27,3 +27,5 @@ package-lock.json
 
 src/shared/translations
 
+stats.json
+

.prettierignore

@@ -1,3 +1,4 @@
 src/shared/translations
 lemmy-translations
 src/assets/css/themes/*.css
+stats.json

package.json

@@ -1,20 +1,20 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.0-rc.6",
+  "version": "0.18.0",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",
   "author": "Dessalines <tyhou13@gmx.com>",
   "scripts": {
+    "analyze": "webpack --mode=none",
     "prebuild:dev": "yarn clean && node generate_translations.js",
     "build:dev": "webpack --mode=development",
     "prebuild:prod": "yarn clean && node generate_translations.js",
     "build:prod": "webpack --mode=production",
     "clean": "yarn run rimraf dist",
-    "dev": "yarn start",
+    "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}\"",
     "prepare": "husky install",
-    "start": "yarn build:dev --watch",
     "themes:build": "sass src/assets/css/themes/:src/assets/css/themes",
     "themes:watch": "sass --watch src/assets/css/themes/:src/assets/css/themes",
     "translations:generate": "node generate_translations.js",
@@ -51,6 +51,7 @@
     "copy-webpack-plugin": "^11.0.0",
     "cross-fetch": "^3.1.5",
     "css-loader": "^6.7.3",
+    "date-fns": "^2.30.0",
     "emoji-mart": "^5.4.0",
     "emoji-short-name": "^2.0.0",
     "express": "~4.18.2",
@@ -76,7 +77,6 @@
     "markdown-it-sub": "^1.0.0",
     "markdown-it-sup": "^1.0.0",
     "mini-css-extract-plugin": "^2.7.5",
-    "moment": "^2.29.4",
     "register-service-worker": "^1.7.2",
     "run-node-webpack-plugin": "^1.3.0",
     "sanitize-html": "^2.10.0",
@@ -101,6 +101,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-container": "^2.0.5",
     "@types/node": "^20.1.2",
+    "@types/path-browserify": "^1.0.0",
     "@types/sanitize-html": "^2.9.0",
     "@types/serialize-javascript": "^5.0.1",
     "@types/toastify-js": "^1.11.1",
@@ -122,6 +123,7 @@
     "style-loader": "^3.3.2",
     "terser": "^5.17.3",
     "typescript": "^5.0.4",
+    "webpack-bundle-analyzer": "^4.9.0",
     "webpack-dev-server": "4.15.0"
   },
   "packageManager": "yarn@1.22.19",

src/client/index.tsx

@@ -1,4 +1,4 @@
-import { initializeSite } from "@utils/app";
+import { initializeSite, setupDateFns } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
 import { Router } from "inferno-router";
 import { App } from "../shared/components/app/app";
@@ -7,16 +7,22 @@ import { HistoryService } from "../shared/services";
 import "bootstrap/js/dist/collapse";
 import "bootstrap/js/dist/dropdown";
 
-initializeSite(window.isoData.site_res);
+async function startClient() {
+  initializeSite(window.isoData.site_res);
 
-const wrapper = (
+  await setupDateFns();
-  <Router history={HistoryService.history}>
-    <App />
-  </Router>
-);
 
-const root = document.getElementById("root");
+  const wrapper = (
+    <Router history={HistoryService.history}>
+      <App />
+    </Router>
+  );
 
-if (root) {
+  const root = document.getElementById("root");
-  hydrate(wrapper, root);
+
+  if (root) {
+    hydrate(wrapper, root);
+  }
 }
+
+startClient();

src/server/index.tsx

@@ -1,3 +1,4 @@
+import { setupDateFns } from "@utils/app";
 import express from "express";
 import path from "path";
 import process from "process";
@@ -31,6 +32,7 @@ server.get("/css/themelist", ThemesListHandler);
 server.get("/*", CatchAllHandler);
 
 server.listen(Number(port), hostname, () => {
+  setupDateFns();
   console.log(`http://${hostname}:${port}`);
 });
 

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"
@@ -85,7 +90,7 @@ export async function createSsrHtml(
     <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
   
     <!-- Current theme and more -->
-    ${helmet.link.toString()}
+    ${helmet.link.toString() || fallbackTheme}
     
     </head>
   

src/shared/components/comment/comment-node.tsx

@@ -16,6 +16,9 @@ import {
   isMod,
 } from "@utils/roles";
 import classNames from "classnames";
+import isBefore from "date-fns/isBefore";
+import parseISO from "date-fns/parseISO";
+import subMinutes from "date-fns/subMinutes";
 import { Component, InfernoNode, linkEvent } from "inferno";
 import { Link } from "inferno-router";
 import {
@@ -46,7 +49,6 @@ import {
   SaveComment,
   TransferCommunity,
 } from "lemmy-js-client";
-import moment from "moment";
 import { commentTreeMaxDepth } from "../../config";
 import {
   BanType,
@@ -1451,9 +1453,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   }
 
   get isCommentNew(): boolean {
-    const now = moment.utc().subtract(10, "minutes");
+    const now = subMinutes(new Date(), 10);
-    const then = moment.utc(this.commentView.comment.published);
+    const then = parseISO(this.commentView.comment.published);
-    return now.isBefore(then);
+    return isBefore(now, then);
   }
 
   handleCommentCollapse(i: CommentNode) {

src/shared/components/common/moment-time.tsx

@@ -1,6 +1,7 @@
-import { capitalizeFirstLetter } from "@utils/helpers";
+import { capitalizeFirstLetter, formatPastDate } from "@utils/helpers";
+import format from "date-fns/format";
+import parseISO from "date-fns/parseISO";
 import { Component } from "inferno";
-import moment from "moment";
 import { I18NextService } from "../../services";
 import { Icon } from "./icon";
 
@@ -11,22 +12,24 @@ interface MomentTimeProps {
   ignoreUpdated?: boolean;
 }
 
+function formatDate(input: string) {
+  return format(parseISO(input), "PPPPpppp");
+}
+
 export class MomentTime extends Component<MomentTimeProps, any> {
   constructor(props: any, context: any) {
     super(props, context);
-
-    moment.locale([...I18NextService.i18n.languages]);
   }
 
   createdAndModifiedTimes() {
     const updated = this.props.updated;
     let line = `${capitalizeFirstLetter(
       I18NextService.i18n.t("created")
-    )}: ${this.format(this.props.published)}`;
+    )}: ${formatDate(this.props.published)}`;
     if (updated) {
       line += `\n\n\n${capitalizeFirstLetter(
         I18NextService.i18n.t("modified")
-      )} ${this.format(updated)}`;
+      )} ${formatDate(updated)}`;
     }
     return line;
   }
@@ -39,7 +42,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
           className="moment-time font-italics pointer unselectable"
         >
           <Icon icon="edit-2" classes="icon-inline me-1" />
-          {moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
+          {formatPastDate(this.props.updated)}
         </span>
       );
     } else {
@@ -47,15 +50,11 @@ export class MomentTime extends Component<MomentTimeProps, any> {
       return (
         <span
           className="moment-time pointer unselectable"
-          data-tippy-content={this.format(published)}
+          data-tippy-content={formatDate(published)}
         >
-          {moment.utc(published).fromNow(!this.props.showAgo)}
+          {formatPastDate(published)}
         </span>
       );
     }
   }
-
-  format(input: string): string {
-    return moment.utc(input).local().format("LLLL");
-  }
 }

src/shared/components/common/pictrs-image.tsx

@@ -22,7 +22,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
 
   render() {
     return (
-      <picture className="pictrs-image d-inline-block overflow-hidden">
+      <picture>
         <source srcSet={this.src("webp")} type="image/webp" />
         <source srcSet={this.props.src} />
         <source srcSet={this.src("jpg")} type="image/jpeg" />
@@ -31,7 +31,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> {
           alt={this.alt()}
           title={this.alt()}
           loading="lazy"
-          className={classNames({
+          className={classNames("overflow-hidden pictrs-image", {
             "img-fluid": !this.props.icon && !this.props.iconOverlay,
             banner: this.props.banner,
             "thumbnail rounded":

src/shared/components/common/sort-select.tsx

@@ -67,6 +67,13 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
           <option disabled aria-hidden="true">
             ─────
           </option>
+          <option value={"TopHour"}>{I18NextService.i18n.t("top_hour")}</option>
+          <option value={"TopSixHour"}>
+            {I18NextService.i18n.t("top_six_hours")}
+          </option>
+          <option value={"TopTwelveHour"}>
+            {I18NextService.i18n.t("top_twelve_hours")}
+          </option>
           <option value={"TopDay"}>{I18NextService.i18n.t("top_day")}</option>
           <option value={"TopWeek"}>{I18NextService.i18n.t("top_week")}</option>
           <option value={"TopMonth"}>

src/shared/components/community/community.tsx

@@ -15,7 +15,6 @@ import {
   updateCommunityBlock,
   updatePersonBlock,
 } from "@utils/app";
-import { restoreScrollPosition, saveScrollPosition } from "@utils/browser";
 import {
   getPageFromString,
   getQueryParams,
@@ -229,10 +228,6 @@ export class Community extends Component<
     setupTippy();
   }
 
-  componentWillUnmount() {
-    saveScrollPosition(this.context);
-  }
-
   static async fetchInitialData({
     client,
     path,
@@ -609,7 +604,6 @@ export class Community extends Component<
       });
     }
 
-    restoreScrollPosition(this.context);
     setupTippy();
   }
 

src/shared/components/community/create-community.tsx

@@ -4,7 +4,7 @@ import {
   CreateCommunity as CreateCommunityI,
   GetSiteResponse,
 } from "lemmy-js-client";
-import { HttpService, I18NextService } from "../../services";
+import { FirstLoadService, HttpService, I18NextService } from "../../services";
 import { HtmlTags } from "../common/html-tags";
 import { CommunityForm } from "./community-form";
 
@@ -22,6 +22,8 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
   constructor(props: any, context: any) {
     super(props, context);
     this.handleCommunityCreate = this.handleCommunityCreate.bind(this);
+
+    FirstLoadService.isFirstLoad;
   }
 
   get documentTitle(): string {

src/shared/components/home/home.tsx

@@ -13,7 +13,6 @@ import {
   showLocal,
   updatePersonBlock,
 } from "@utils/app";
-import { restoreScrollPosition, saveScrollPosition } from "@utils/browser";
 import {
   getPageFromString,
   getQueryParams,
@@ -79,7 +78,12 @@ import {
   InitialFetchRequest,
 } from "../../interfaces";
 import { mdToHtml } from "../../markdown";
-import { FirstLoadService, I18NextService, UserService } from "../../services";
+import {
+  FirstLoadService,
+  HomeCacheService,
+  I18NextService,
+  UserService,
+} from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import { setupTippy } from "../../tippy";
 import { toast } from "../../toast";
@@ -102,6 +106,7 @@ interface HomeState {
   showTrendingMobile: boolean;
   showSidebarMobile: boolean;
   subscribedCollapsed: boolean;
+  scrolled: boolean;
   tagline?: string;
   siteRes: GetSiteResponse;
   finished: Map<CommentId, boolean | undefined>;
@@ -218,6 +223,7 @@ export class Home extends Component<any, HomeState> {
     postsRes: { state: "empty" },
     commentsRes: { state: "empty" },
     trendingCommunitiesRes: { state: "empty" },
+    scrolled: true,
     siteRes: this.isoData.site_res,
     showSubscribedMobile: false,
     showTrendingMobile: false,
@@ -277,9 +283,15 @@ export class Home extends Component<any, HomeState> {
           ?.content,
         isIsomorphic: true,
       };
+
+      HomeCacheService.postsRes = postsRes;
     }
   }
 
+  componentWillUnmount() {
+    HomeCacheService.activate();
+  }
+
   async componentDidMount() {
     if (
       !this.state.isIsomorphic ||
@@ -293,10 +305,6 @@ export class Home extends Component<any, HomeState> {
     setupTippy();
   }
 
-  componentWillUnmount() {
-    saveScrollPosition(this.context);
-  }
-
   static async fetchInitialData({
     client,
     auth,
@@ -625,6 +633,11 @@ export class Home extends Component<any, HomeState> {
       search: getQueryString(queryParams),
     });
 
+    if (!this.state.scrolled) {
+      this.setState({ scrolled: true });
+      setTimeout(() => window.scrollTo(0, 0), 0);
+    }
+
     await this.fetchData();
   }
 
@@ -647,7 +660,9 @@ export class Home extends Component<any, HomeState> {
     const siteRes = this.state.siteRes;
 
     if (dataType === DataType.Post) {
-      switch (this.state.postsRes.state) {
+      switch (this.state.postsRes?.state) {
+        case "empty":
+          return <div style="min-height: 20000px;"></div>;
         case "loading":
           return (
             <h5>
@@ -775,17 +790,30 @@ export class Home extends Component<any, HomeState> {
     const { dataType, page, listingType, sort } = getHomeQueryParams();
 
     if (dataType === DataType.Post) {
-      this.setState({ postsRes: { state: "loading" } });
+      if (HomeCacheService.active) {
-      this.setState({
+        const { postsRes, scrollY } = HomeCacheService;
-        postsRes: await HttpService.client.getPosts({
+        HomeCacheService.deactivate();
-          page,
+        this.setState({ postsRes });
-          limit: fetchLimit,
+        window.scrollTo({
-          sort,
+          left: 0,
-          saved_only: false,
+          top: scrollY,
-          type_: listingType,
+          behavior: "instant",
-          auth,
+        });
-        }),
+      } else {
-      });
+        this.setState({ postsRes: { state: "loading" } });
+        this.setState({
+          postsRes: await HttpService.client.getPosts({
+            page,
+            limit: fetchLimit,
+            sort,
+            saved_only: false,
+            type_: listingType,
+            auth,
+          }),
+        });
+
+        HomeCacheService.postsRes = this.state.postsRes;
+      }
     } else {
       this.setState({ commentsRes: { state: "loading" } });
       this.setState({
@@ -800,7 +828,6 @@ export class Home extends Component<any, HomeState> {
       });
     }
 
-    restoreScrollPosition(this.context);
     setupTippy();
   }
 
@@ -821,23 +848,23 @@ export class Home extends Component<any, HomeState> {
   }
 
   handlePageChange(page: number) {
+    this.setState({ scrolled: false });
     this.updateUrl({ page });
-    window.scrollTo(0, 0);
   }
 
   handleSortChange(val: SortType) {
+    this.setState({ scrolled: false });
     this.updateUrl({ sort: val, page: 1 });
-    window.scrollTo(0, 0);
   }
 
   handleListingTypeChange(val: ListingType) {
+    this.setState({ scrolled: false });
     this.updateUrl({ listingType: val, page: 1 });
-    window.scrollTo(0, 0);
   }
 
   handleDataTypeChange(val: DataType) {
+    this.setState({ scrolled: false });
     this.updateUrl({ dataType: val, page: 1 });
-    window.scrollTo(0, 0);
   }
 
   async handleAddModToCommunity(form: AddModToCommunity) {

src/shared/components/home/legal.tsx

@@ -2,7 +2,7 @@ import { setIsoData } from "@utils/app";
 import { Component } from "inferno";
 import { GetSiteResponse } from "lemmy-js-client";
 import { mdToHtml } from "../../markdown";
-import { I18NextService } from "../../services";
+import { FirstLoadService, I18NextService } from "../../services";
 import { HtmlTags } from "../common/html-tags";
 
 interface LegalState {
@@ -17,6 +17,8 @@ export class Legal extends Component<any, LegalState> {
 
   constructor(props: any, context: any) {
     super(props, context);
+
+    FirstLoadService.isFirstLoad;
   }
 
   get documentTitle(): string {

src/shared/components/home/login.tsx

@@ -3,7 +3,7 @@ import { isBrowser } from "@utils/browser";
 import { validEmail } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
 import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
-import { I18NextService, UserService } from "../../services";
+import { FirstLoadService, I18NextService, UserService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
@@ -32,6 +32,8 @@ export class Login extends Component<any, State> {
 
   constructor(props: any, context: any) {
     super(props, context);
+
+    FirstLoadService.isFirstLoad;
   }
 
   componentDidMount() {

src/shared/components/home/setup.tsx

@@ -7,7 +7,7 @@ import {
   LoginResponse,
   Register,
 } from "lemmy-js-client";
-import { I18NextService, UserService } from "../../services";
+import { FirstLoadService, I18NextService, UserService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import { Spinner } from "../common/icon";
 import { SiteForm } from "./site-form";
@@ -47,6 +47,8 @@ export class Setup extends Component<any, State> {
     super(props, context);
 
     this.handleCreateSite = this.handleCreateSite.bind(this);
+
+    FirstLoadService.isFirstLoad;
   }
 
   async componentDidMount() {

src/shared/components/home/signup.tsx

@@ -14,7 +14,7 @@ import {
 } from "lemmy-js-client";
 import { joinLemmyUrl } from "../../config";
 import { mdToHtml } from "../../markdown";
-import { I18NextService, UserService } from "../../services";
+import { FirstLoadService, I18NextService, UserService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
@@ -84,6 +84,8 @@ export class Signup extends Component<any, State> {
     super(props, context);
 
     this.handleAnswerChange = this.handleAnswerChange.bind(this);
+
+    FirstLoadService.isFirstLoad;
   }
 
   async componentDidMount() {

src/shared/components/modlog.tsx

@@ -7,6 +7,7 @@ import {
 } from "@utils/app";
 import {
   debounce,
+  formatPastDate,
   getIdFromString,
   getPageFromString,
   getQueryParams,
@@ -44,7 +45,6 @@ import {
   ModlogActionType,
   Person,
 } from "lemmy-js-client";
-import moment from "moment";
 import { fetchLimit } from "../config";
 import { InitialFetchRequest } from "../interfaces";
 import { FirstLoadService, I18NextService } from "../services";
@@ -371,7 +371,7 @@ function renderModlogType({ type_, view }: ModlogType) {
           )}
           {expires && (
             <span>
-              <div>expires: {moment.utc(expires).fromNow()}</div>
+              <div>expires: {formatPastDate(expires)}</div>
             </span>
           )}
         </>
@@ -403,7 +403,7 @@ function renderModlogType({ type_, view }: ModlogType) {
           )}
           {expires && (
             <span>
-              <div>expires: {moment.utc(expires).fromNow()}</div>
+              <div>expires: {formatPastDate(expires)}</div>
             </span>
           )}
         </>
@@ -467,7 +467,7 @@ function renderModlogType({ type_, view }: ModlogType) {
           )}
           {expires && (
             <span>
-              <div>expires: {moment.utc(expires).fromNow()}</div>
+              <div>expires: {formatPastDate(expires)}</div>
             </span>
           )}
         </>
@@ -686,6 +686,10 @@ export class Modlog extends Component<
     }
   }
 
+  async componentDidMount() {
+    await this.refetch();
+  }
+
   get combined() {
     const res = this.state.res;
     const combined = res.state == "success" ? buildCombined(res.data) : [];

src/shared/components/person/inbox.tsx

@@ -449,7 +449,6 @@ export class Inbox extends Component<any, InboxState> {
             ]}
             viewType={CommentViewType.Flat}
             finished={this.state.finished}
-            noIndent
             markable
             showCommunity
             showContext
@@ -489,7 +488,6 @@ export class Inbox extends Component<any, InboxState> {
             ]}
             finished={this.state.finished}
             viewType={CommentViewType.Flat}
-            noIndent
             markable
             showCommunity
             showContext
@@ -567,7 +565,6 @@ export class Inbox extends Component<any, InboxState> {
               nodes={commentsToFlatNodes(replies)}
               viewType={CommentViewType.Flat}
               finished={this.state.finished}
-              noIndent
               markable
               showCommunity
               showContext
@@ -617,7 +614,6 @@ export class Inbox extends Component<any, InboxState> {
                 nodes={[{ comment_view: umv, children: [], depth: 0 }]}
                 viewType={CommentViewType.Flat}
                 finished={this.state.finished}
-                noIndent
                 markable
                 showCommunity
                 showContext

src/shared/components/person/password-change.tsx

@@ -2,7 +2,12 @@ import { myAuth, setIsoData } from "@utils/app";
 import { capitalizeFirstLetter } from "@utils/helpers";
 import { Component, linkEvent } from "inferno";
 import { GetSiteResponse, LoginResponse } from "lemmy-js-client";
-import { HttpService, I18NextService, UserService } from "../../services";
+import {
+  FirstLoadService,
+  HttpService,
+  I18NextService,
+  UserService,
+} from "../../services";
 import { RequestState } from "../../services/HttpService";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
@@ -30,6 +35,8 @@ export class PasswordChange extends Component<any, State> {
 
   constructor(props: any, context: any) {
     super(props, context);
+
+    FirstLoadService.isFirstLoad;
   }
 
   get documentTitle(): string {

src/shared/components/person/person-details.tsx

@@ -145,7 +145,6 @@ export class PersonDetails extends Component<PersonDetailsProps, any> {
             finished={this.props.finished}
             admins={this.props.admins}
             noBorder
-            noIndent
             showCommunity
             showContext
             enableDownvotes={this.props.enableDownvotes}

src/shared/components/person/profile.tsx

@@ -23,6 +23,8 @@ import { canMod, isAdmin, isBanned } from "@utils/roles";
 import type { QueryParams } from "@utils/types";
 import { RouteDataResponse } from "@utils/types";
 import classNames from "classnames";
+import format from "date-fns/format";
+import parseISO from "date-fns/parseISO";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { Link } from "inferno-router";
@@ -70,7 +72,6 @@ import {
   SortType,
   TransferCommunity,
 } from "lemmy-js-client";
-import moment from "moment";
 import { fetchLimit, relTags } from "../../config";
 import { InitialFetchRequest, PersonDetailsView } from "../../interfaces";
 import { mdToHtml } from "../../markdown";
@@ -613,10 +614,7 @@ export class Profile extends Component<
                 <Icon icon="cake" />
                 <span className="ms-2">
                   {I18NextService.i18n.t("cake_day_title")}{" "}
-                  {moment
+                  {format(parseISO(pv.person.published), "PPP")}
-                    .utc(pv.person.published)
-                    .local()
-                    .format("MMM DD, YYYY")}
                 </span>
               </div>
               {!UserService.Instance.myUserInfo && (

src/shared/components/person/settings.tsx

@@ -29,7 +29,7 @@ import {
   SortType,
 } from "lemmy-js-client";
 import { elementUrl, emDash, relTags } from "../../config";
-import { UserService } from "../../services";
+import { FirstLoadService, UserService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import { I18NextService, languages } from "../../services/I18NextService";
 import { setupTippy } from "../../tippy";
@@ -170,6 +170,8 @@ export class Settings extends Component<any, SettingsState> {
     this.handleBlockPerson = this.handleBlockPerson.bind(this);
     this.handleBlockCommunity = this.handleBlockCommunity.bind(this);
 
+    FirstLoadService.isFirstLoad;
+
     const mui = UserService.Instance.myUserInfo;
     if (mui) {
       const {
@@ -1177,7 +1179,6 @@ export class Settings extends Component<any, SettingsState> {
     });
     if (saveRes.state === "success") {
       UserService.Instance.login(saveRes.data);
-      location.reload();
       toast(I18NextService.i18n.t("saved"));
       window.scrollTo(0, 0);
     }

src/shared/components/person/verify-email.tsx

@@ -1,7 +1,7 @@
 import { setIsoData } from "@utils/app";
 import { Component } from "inferno";
 import { GetSiteResponse, VerifyEmailResponse } from "lemmy-js-client";
-import { I18NextService } from "../../services";
+import { FirstLoadService, I18NextService } from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import { toast } from "../../toast";
 import { HtmlTags } from "../common/html-tags";
@@ -22,6 +22,8 @@ export class VerifyEmail extends Component<any, State> {
 
   constructor(props: any, context: any) {
     super(props, context);
+
+    FirstLoadService.isFirstLoad;
   }
 
   async verify() {

src/shared/components/post/post-listing.tsx

@@ -239,25 +239,40 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   }
 
   get img() {
-    return this.imageSrc ? (
+    if (this.imageSrc) {
-      <>
+      return (
-        <div className="offset-sm-3 my-2 d-none d-sm-block">
+        <>
-          <a href={this.imageSrc} className="d-inline-block">
+          <div className="offset-sm-3 my-2 d-none d-sm-block">
-            <PictrsImage src={this.imageSrc} />
+            <a href={this.imageSrc} className="d-inline-block">
-          </a>
+              <PictrsImage src={this.imageSrc} />
+            </a>
+          </div>
+          <div className="my-2 d-block d-sm-none">
+            <a
+              className="d-inline-block"
+              onClick={linkEvent(this, this.handleImageExpandClick)}
+            >
+              <PictrsImage src={this.imageSrc} />
+            </a>
+          </div>
+        </>
+      );
+    }
+
+    const { post } = this.postView;
+    const { url } = post;
+
+    if (url && isVideo(url)) {
+      return (
+        <div className="embed-responsive mt-3">
+          <video muted controls className="embed-responsive-item col-12">
+            <source src={url} type="video/mp4" />
+          </video>
         </div>
-        <div className="my-2 d-block d-sm-none">
+      );
-          <a
+    }
-            className="d-inline-block"
+
-            onClick={linkEvent(this, this.handleImageExpandClick)}
+    return <></>;
-          >
-            <PictrsImage src={this.imageSrc} />
-          </a>
-        </div>
-      </>
-    ) : (
-      <></>
-    );
   }
 
   imgThumb(src: string) {
@@ -325,17 +340,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     } else if (url) {
       if (!this.props.hideImage && isVideo(url)) {
         return (
-          <div className="embed-responsive embed-responsive-16by9">
+          <a
-            <video
+            className="text-body"
-              playsInline
+            href={url}
-              muted
+            title={url}
-              loop
+            rel={relTags}
-              controls
+            data-tippy-content={I18NextService.i18n.t("expand_here")}
-              className="embed-responsive-item"
+            onClick={linkEvent(this, this.handleImageExpandClick)}
-            >
+            aria-label={I18NextService.i18n.t("expand_here")}
-              <source src={url} type="video/mp4" />
+          >
-            </video>
+            <div className="thumbnail rounded bg-light d-flex justify-content-center">
-          </div>
+              <Icon icon="play" classes="d-flex align-items-center" />
+            </div>
+          </a>
         );
       } else {
         return (
@@ -364,33 +381,30 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   createdLine() {
     const post_view = this.postView;
     return (
-      <ul className="list-inline mb-1 text-muted small mt-2">
+      <span className="small">
-        <li className="list-inline-item">
+        <PersonListing person={post_view.creator} />
-          <PersonListing person={post_view.creator} />
+        {this.creatorIsMod_ && (
-
+          <span className="mx-1 badge text-bg-light">
-          {this.creatorIsMod_ && (
+            {I18NextService.i18n.t("mod")}
-            <span className="mx-1 badge text-bg-light">
+          </span>
-              {I18NextService.i18n.t("mod")}
+        )}
-            </span>
+        {this.creatorIsAdmin_ && (
-          )}
+          <span className="mx-1 badge text-bg-light">
-          {this.creatorIsAdmin_ && (
+            {I18NextService.i18n.t("admin")}
-            <span className="mx-1 badge text-bg-light">
+          </span>
-              {I18NextService.i18n.t("admin")}
+        )}
-            </span>
+        {post_view.creator.bot_account && (
-          )}
+          <span className="mx-1 badge text-bg-light">
-          {post_view.creator.bot_account && (
+            {I18NextService.i18n.t("bot_account").toLowerCase()}
-            <span className="mx-1 badge text-bg-light">
+          </span>
-              {I18NextService.i18n.t("bot_account").toLowerCase()}
+        )}
-            </span>
+        {this.props.showCommunity && (
-          )}
+          <>
-          {this.props.showCommunity && (
+            {" "}
-            <>
+            {I18NextService.i18n.t("to")}{" "}
-              {" "}
+            <CommunityLink community={post_view.community} />
-              {I18NextService.i18n.t("to")}{" "}
+          </>
-              <CommunityLink community={post_view.community} />
+        )}
-            </>
-          )}
-        </li>
         {post_view.post.language_id !== 0 && (
           <span className="mx-1 badge text-bg-light">
             {
@@ -399,17 +413,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               )?.name
             }
           </span>
-        )}
+        )}{" "}
-        <li className="list-inline-item">•</li>
+        •{" "}
-        <li className="list-inline-item">
+        <MomentTime
-          <span>
+          published={post_view.post.published}
-            <MomentTime
+          updated={post_view.post.updated}
-              published={post_view.post.published}
+        />
-              updated={post_view.post.updated}
+      </span>
-            />
-          </span>
-        </li>
-      </ul>
     );
   }
 
@@ -750,10 +760,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         to={`/post/${post_view.post.id}?scrollToComments=true`}
         data-tippy-content={title}
       >
-        <span className="me-1">
+        <Icon icon="message-square" classes="me-1" inline />
-          <Icon icon="message-square" classes="me-1" inline />
+        {post_view.counts.comments}
-          {post_view.counts.comments}
-        </span>
         {this.unreadCount && (
           <span className="text-muted fst-italic">
             ({this.unreadCount} {I18NextService.i18n.t("new")})
@@ -1087,7 +1095,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post_view = this.postView;
     return (
       this.state.showAdvanced && (
-        <>
+        <div className="mt-3">
           {this.canMod_ && (
             <>
               {!this.creatorIsMod_ &&
@@ -1248,7 +1256,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               )}
             </>
           )}
-        </>
+        </div>
       )
     );
   }
@@ -1443,11 +1451,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     );
   }
 
-  showMobilePreview() {
+  showBodyPreview() {
     const { body, id } = this.postView.post;
 
     return !this.showBody && body ? (
-      <Link className="text-body" to={`/post/${id}`}>
+      <Link className="text-body mt-2 d-block" to={`/post/${id}`}>
         <div className="md-div mb-1 preview-lines">{body}</div>
       </Link>
     ) : (
@@ -1468,7 +1476,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {this.mobileThumbnail()}
 
               {/* Show a preview of the post body */}
-              {this.showMobilePreview()}
+              {this.showBodyPreview()}
 
               {this.commentsLine(true)}
               {this.userActionsLine()}
@@ -1490,6 +1498,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                 <div className="col-12">
                   {this.postTitleLine()}
                   {this.createdLine()}
+                  {this.showBodyPreview()}
                   {this.commentsLine()}
                   {this.duplicatesLine()}
                   {this.userActionsLine()}

src/shared/config.ts

@@ -25,4 +25,14 @@ export const fetchLimit = 40;
 export const relTags = "noopener nofollow";
 export const emDash = "\u2014";
 
+/**
+ * Accepted formats:
+ * !community@server.com
+ * /c/community@server.com
+ * /m/community@server.com
+ * /u/username@server.com
+ */
+export const instanceLinkRegex =
+  /(\/[cmu]\/|!)[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
+
 export const testHost = "0.0.0.0:8536";

src/shared/markdown.ts

@@ -14,6 +14,7 @@ import markdown_it_sub from "markdown-it-sub";
 import markdown_it_sup from "markdown-it-sup";
 import Renderer from "markdown-it/lib/renderer";
 import Token from "markdown-it/lib/token";
+import { instanceLinkRegex } from "./config";
 
 export let Tribute: any;
 
@@ -72,6 +73,75 @@ const html5EmbedConfig = {
   },
 };
 
+function localInstanceLinkParser(md: MarkdownIt) {
+  md.core.ruler.push("replace-text", state => {
+    for (let i = 0; i < state.tokens.length; i++) {
+      if (state.tokens[i].type !== "inline") {
+        continue;
+      }
+      const inlineTokens: Token[] = state.tokens[i].children || [];
+      for (let j = inlineTokens.length - 1; j >= 0; j--) {
+        if (
+          inlineTokens[j].type === "text" &&
+          new RegExp(instanceLinkRegex).test(inlineTokens[j].content)
+        ) {
+          const text = inlineTokens[j].content;
+          const matches = Array.from(text.matchAll(instanceLinkRegex));
+
+          let lastIndex = 0;
+          const newTokens: Token[] = [];
+
+          let linkClass = "community-link";
+
+          for (const match of matches) {
+            // If there is plain text before the match, add it as a separate token
+            if (match.index !== undefined && match.index > lastIndex) {
+              const textToken = new state.Token("text", "", 0);
+              textToken.content = text.slice(lastIndex, match.index);
+              newTokens.push(textToken);
+            }
+
+            let href;
+            if (match[0].startsWith("!")) {
+              href = "/c/" + match[0].substring(1);
+            } else if (match[0].startsWith("/m/")) {
+              href = "/c/" + match[0].substring(3);
+            } else {
+              href = match[0];
+              if (match[0].startsWith("/u/")) {
+                linkClass = "user-link";
+              }
+            }
+
+            const linkOpenToken = new state.Token("link_open", "a", 1);
+            linkOpenToken.attrs = [
+              ["href", href],
+              ["class", linkClass],
+            ];
+            const textToken = new state.Token("text", "", 0);
+            textToken.content = match[0];
+            const linkCloseToken = new state.Token("link_close", "a", -1);
+
+            newTokens.push(linkOpenToken, textToken, linkCloseToken);
+
+            lastIndex =
+              (match.index !== undefined ? match.index : 0) + match[0].length;
+          }
+
+          // If there is plain text after the last match, add it as a separate token
+          if (lastIndex < text.length) {
+            const textToken = new state.Token("text", "", 0);
+            textToken.content = text.slice(lastIndex);
+            newTokens.push(textToken);
+          }
+
+          inlineTokens.splice(j, 1, ...newTokens);
+        }
+      }
+    }
+  });
+}
+
 export function setupMarkdown() {
   const markdownItConfig: MarkdownIt.Options = {
     html: false,
@@ -88,7 +158,8 @@ export function setupMarkdown() {
     .use(markdown_it_sup)
     .use(markdown_it_footnote)
     .use(markdown_it_html5_embed, html5EmbedConfig)
-    .use(markdown_it_container, "spoiler", spoilerConfig);
+    .use(markdown_it_container, "spoiler", spoilerConfig)
+    .use(localInstanceLinkParser);
   // .use(markdown_it_emoji, {
   //   defs: emojiDefs,
   // });
@@ -99,6 +170,7 @@ export function setupMarkdown() {
     .use(markdown_it_footnote)
     .use(markdown_it_html5_embed, html5EmbedConfig)
     .use(markdown_it_container, "spoiler", spoilerConfig)
+    .use(localInstanceLinkParser)
     // .use(markdown_it_emoji, {
     //   defs: emojiDefs,
     // })

src/shared/services/FirstLoadService.ts

@@ -1,3 +1,5 @@
+import { isBrowser } from "@utils/browser";
+
 export class FirstLoadService {
   #isFirstLoad: boolean;
   static #instance: FirstLoadService;
@@ -20,6 +22,6 @@ export class FirstLoadService {
   }
 
   static get isFirstLoad() {
-    return this.#Instance.isFirstLoad;
+    return !isBrowser() || this.#Instance.isFirstLoad;
   }
 }

src/shared/services/HomeCacheService.ts

@@ -0,0 +1,60 @@
+import { GetPostsResponse } from "lemmy-js-client";
+import { RequestState } from "./HttpService.js";
+
+/**
+ * Service to cache home post listings and restore home state when user uses the browser back buttons.
+ */
+export class HomeCacheService {
+  static #_instance: HomeCacheService;
+  historyIdx = 0;
+  scrollY = 0;
+  posts: RequestState<GetPostsResponse> = { state: "empty" };
+
+  get active() {
+    return (
+      this.historyIdx === window.history.state.idx + 1 &&
+      this.posts.state === "success"
+    );
+  }
+
+  deactivate() {
+    this.historyIdx = 0;
+  }
+
+  activate() {
+    this.scrollY = window.scrollY;
+    this.historyIdx = window.history.state.idx;
+  }
+
+  static get #Instance() {
+    return this.#_instance ?? (this.#_instance = new this());
+  }
+
+  public static get scrollY() {
+    return this.#Instance.scrollY;
+  }
+
+  public static get historyIdx() {
+    return this.#Instance.historyIdx;
+  }
+
+  public static set postsRes(posts: RequestState<GetPostsResponse>) {
+    this.#Instance.posts = posts;
+  }
+
+  public static get postsRes() {
+    return this.#Instance.posts;
+  }
+
+  public static get active() {
+    return this.#Instance.active;
+  }
+
+  public static deactivate() {
+    this.#Instance.deactivate();
+  }
+
+  public static activate() {
+    this.#Instance.activate();
+  }
+}

src/shared/services/index.ts

@@ -1,5 +1,6 @@
 export { FirstLoadService } from "./FirstLoadService";
 export { HistoryService } from "./HistoryService";
+export { HomeCacheService } from "./HomeCacheService";
 export { HttpService } from "./HttpService";
 export { I18NextService } from "./I18NextService";
 export { UserService } from "./UserService";

src/shared/utils/app/convert-comment-sort-type.ts

@@ -5,6 +5,9 @@ export default function convertCommentSortType(
 ): CommentSortType {
   switch (sort) {
     case "TopAll":
+    case "TopHour":
+    case "TopSixHour":
+    case "TopTwelveHour":
     case "TopDay":
     case "TopWeek":
     case "TopMonth":

src/shared/utils/app/index.ts

@@ -46,6 +46,7 @@ import searchCommentTree from "./search-comment-tree";
 import selectableLanguages from "./selectable-languages";
 import setIsoData from "./set-iso-data";
 import setTheme from "./set-theme";
+import setupDateFns from "./setup-date-fns";
 import showAvatars from "./show-avatars";
 import showLocal from "./show-local";
 import showScores from "./show-scores";
@@ -102,6 +103,7 @@ export {
   selectableLanguages,
   setIsoData,
   setTheme,
+  setupDateFns,
   showAvatars,
   showLocal,
   showScores,

src/shared/utils/app/setup-date-fns.ts

@@ -0,0 +1,19 @@
+import setDefaultOptions from "date-fns/setDefaultOptions";
+import { I18NextService } from "../../services";
+
+export default async function () {
+  let lang = I18NextService.i18n.language;
+  if (lang === "en") {
+    lang = "en-US";
+  }
+
+  const locale = (
+    await import(
+      /* webpackExclude: /\.js\.flow$/ */
+      `date-fns/locale/${lang}`
+    )
+  ).default;
+  setDefaultOptions({
+    locale,
+  });
+}

src/shared/utils/browser/restore-scroll-position.ts

@@ -1,5 +1,6 @@
 export default function restoreScrollPosition(context: any) {
   const path: string = context.router.route.location.pathname;
   const y = Number(sessionStorage.getItem(`scrollPosition_${path}`));
+
   window.scrollTo(0, y);
 }

src/shared/utils/browser/save-scroll-position.ts

@@ -1,5 +1,6 @@
 export default function saveScrollPosition(context: any) {
   const path: string = context.router.route.location.pathname;
   const y = window.scrollY;
+
   sessionStorage.setItem(`scrollPosition_${path}`, y.toString());
 }

src/shared/utils/helpers/format-past-date.ts

@@ -0,0 +1,12 @@
+import formatDistanceStrict from "date-fns/formatDistanceStrict";
+import parseISO from "date-fns/parseISO";
+
+export default function (dateString?: string) {
+  return formatDistanceStrict(
+    parseISO(dateString ?? Date.now().toString()),
+    new Date(),
+    {
+      addSuffix: true,
+    }
+  );
+}

src/shared/utils/helpers/index.ts

@@ -1,6 +1,7 @@
 import capitalizeFirstLetter from "./capitalize-first-letter";
 import debounce from "./debounce";
 import editListImmutable from "./edit-list-immutable";
+import formatPastDate from "./format-past-date";
 import futureDaysToUnixTime from "./future-days-to-unix-time";
 import getIdFromString from "./get-id-from-string";
 import getPageFromString from "./get-page-from-string";
@@ -26,6 +27,7 @@ export {
   capitalizeFirstLetter,
   debounce,
   editListImmutable,
+  formatPastDate,
   futureDaysToUnixTime,
   getIdFromString,
   getPageFromString,

src/shared/utils/helpers/is-cake-day.ts

@@ -1,33 +1,13 @@
-import moment from "moment";
+import getDayOfYear from "date-fns/getDayOfYear";
-
+import getYear from "date-fns/getYear";
-moment.updateLocale("en", {
+import parseISO from "date-fns/parseISO";
-  relativeTime: {
-    future: "in %s",
-    past: "%s ago",
-    s: "<1m",
-    ss: "%ds",
-    m: "1m",
-    mm: "%dm",
-    h: "1h",
-    hh: "%dh",
-    d: "1d",
-    dd: "%dd",
-    w: "1w",
-    ww: "%dw",
-    M: "1M",
-    MM: "%dM",
-    y: "1Y",
-    yy: "%dY",
-  },
-});
 
 export default function isCakeDay(published: string): boolean {
-  const createDate = moment.utc(published).local();
+  const createDate = parseISO(published);
-  const currentDate = moment(new Date());
+  const currentDate = new Date();
 
   return (
-    createDate.date() === currentDate.date() &&
+    getDayOfYear(createDate) === getDayOfYear(currentDate) &&
-    createDate.month() === currentDate.month() &&
+    getYear(createDate) !== getYear(currentDate)
-    createDate.year() !== currentDate.year()
   );
 }

webpack.config.js

@@ -6,6 +6,8 @@ const CopyPlugin = require("copy-webpack-plugin");
 const RunNodeWebpackPlugin = require("run-node-webpack-plugin");
 const merge = require("lodash/merge");
 const { ServiceWorkerPlugin } = require("service-worker-webpack");
+const BundleAnalyzerPlugin =
+  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 const banner = `
   hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file]
   Source code: https://github.com/LemmyNet/lemmy-ui
@@ -153,11 +155,8 @@ const createClientConfig = (_env, mode) => {
     ],
   });
 
-  if (mode === "development") {
+  if (mode === "none") {
-    // config.cache = {
+    config.plugins.push(new BundleAnalyzerPlugin());
-    //   type: "filesystem",
-    //   name: "client",
-    // };
   }
 
   return config;

yarn.lock

@@ -1202,7 +1202,7 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.20.7":
+"@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.5.tgz#8564dd588182ce0047d55d7a75e93921107b57ec"
   integrity sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==
@@ -1243,7 +1243,7 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@discoveryjs/json-ext@^0.5.0":
+"@discoveryjs/json-ext@0.5.7", "@discoveryjs/json-ext@^0.5.0":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
@@ -1412,6 +1412,11 @@
     picocolors "^1.0.0"
     tslib "^2.5.0"
 
+"@polka/url@^1.0.0-next.20":
+  version "1.0.0-next.21"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
+  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
+
 "@popperjs/core@^2.9.0", "@popperjs/core@^2.9.2":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -1630,6 +1635,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.2.5.tgz#26d295f3570323b2837d322180dfbf1ba156fefb"
   integrity sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==
 
+"@types/path-browserify@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/path-browserify/-/path-browserify-1.0.0.tgz#294ec6e88b6b0d340a3897b7120e5b393f16690e"
+  integrity sha512-XMCcyhSvxcch8b7rZAtFAaierBYdeHXVvg2iYnxOV0MCQHmPuRRmGZPFDRzPayxcGiiSL1Te9UIO+f3cuj0tfw==
+
 "@types/qs@*":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
@@ -1977,6 +1987,16 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+acorn-walk@^8.0.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
+acorn@^8.0.4:
+  version "8.9.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.9.0.tgz#78a16e3b2bcc198c10822786fa6679e245db5b59"
+  integrity sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==
+
 acorn@^8.7.1, acorn@^8.8.0, acorn@^8.8.2:
   version "8.8.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
@@ -2714,7 +2734,7 @@ chalk@^2.0.0, chalk@^2.0.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.0.2:
+chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -2959,6 +2979,11 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 common-tags@^1.8.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
@@ -3200,6 +3225,13 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3481,6 +3513,11 @@ duplexer3@^0.1.4:
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.5.tgz#0b5e4d7bad5de8901ea4440624c8e1d20099217e"
   integrity sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==
 
+duplexer@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
+
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
@@ -4576,6 +4613,13 @@ graphemer@^1.4.0:
   resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -6302,11 +6346,6 @@ mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   dependencies:
     minimist "^1.2.6"
 
-moment@^2.29.4:
-  version "2.29.4"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
-  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -6319,6 +6358,11 @@ move-concurrently@^1.0.1:
     rimraf "^2.5.4"
     run-queue "^1.0.3"
 
+mrmime@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
+  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -6916,6 +6960,11 @@ opencollective-postinstall@^2.0.3:
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
   integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
 
+opener@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
+
 opener@~1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
@@ -8247,6 +8296,15 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+sirv@^1.0.7:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
+  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+  dependencies:
+    "@polka/url" "^1.0.0-next.20"
+    mrmime "^1.0.0"
+    totalist "^1.0.0"
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -8913,6 +8971,11 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+
 tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -9258,6 +9321,22 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webpack-bundle-analyzer@^4.9.0:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.0.tgz#fc093c4ab174fd3dcbd1c30b763f56d10141209d"
+  integrity sha512-+bXGmO1LyiNx0i9enBu3H8mv42sj/BJWhZNFwjz92tVnBa9J3JMGo2an2IXlEleoDOPn/Hofl5hr/xCpObUDtw==
+  dependencies:
+    "@discoveryjs/json-ext" "0.5.7"
+    acorn "^8.0.4"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    commander "^7.2.0"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    opener "^1.5.2"
+    sirv "^1.0.7"
+    ws "^7.3.1"
+
 webpack-cli@^5.1.1:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.1.3.tgz#6b6186270efec62394f6fefeebed0872a779f345"
@@ -9710,6 +9789,11 @@ write-file-atomic@^2.0.0, write-file-atomic@^2.3.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
+ws@^7.3.1:
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
+  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+
 ws@^8.13.0:
   version "8.13.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"