From 6c6ddd5b5112afcab1641d49b2462083142bf265 Mon Sep 17 00:00:00 2001 From: Alec Armbruster <alectrocute@gmail.com> Date: Fri, 16 Jun 2023 18:56:23 -0400 Subject: [PATCH] reset, merge issues --- .github/CODEOWNERS | 2 +- .github/ISSUE_TEMPLATE/BUG_REPORT.yml | 2 +- .github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml | 2 +- Dockerfile | 2 +- dev.dockerfile | 2 +- package.json | 2 +- src/assets/css/main.css | 24 +++++ src/shared/components/common/html-tags.tsx | 6 +- .../components/common/markdown-textarea.tsx | 98 +++++++++---------- src/shared/components/common/moment-time.tsx | 6 +- src/shared/components/modlog.tsx | 2 +- src/shared/components/person/settings.tsx | 2 +- src/shared/components/post/post-form.tsx | 2 +- src/shared/components/post/post.tsx | 2 +- src/shared/components/search.tsx | 2 +- src/shared/i18next.ts | 26 +---- src/shared/utils.ts | 79 +++++---------- src/shared/utils/helpers/debounce.ts | 44 +++++++++ yarn.lock | 8 +- 19 files changed, 166 insertions(+), 147 deletions(-) create mode 100644 src/shared/utils/helpers/debounce.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 76916e6..6df17d5 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1 +1 @@ -* @dessalines @SleeplessOne1917 @alectrocute +* @dessalines @SleeplessOne1917 diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml index ae2d4e5..2273a13 100644 --- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml +++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml @@ -21,7 +21,7 @@ body: - label: Is this only a single bug? Do not put multiple bugs 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 + required: true - type: textarea id: summary attributes: diff --git a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml index 3c75050..2f6f3fc 100644 --- a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml +++ b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST.yml @@ -19,7 +19,7 @@ body: - label: Is this only a feature request? Do not put multiple feature requests 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 + required: true - type: textarea id: problem attributes: diff --git a/Dockerfile b/Dockerfile index 2b36581..3d6d621 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,4 +1,4 @@ -FROM node:20.2-alpine as builder +FROM node:alpine as builder RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache RUN curl -sf https://gobinaries.com/tj/node-prune | sh diff --git a/dev.dockerfile b/dev.dockerfile index 3bfc10d..0e925c0 100644 --- a/dev.dockerfile +++ b/dev.dockerfile @@ -1,4 +1,4 @@ -FROM node:20.2-alpine as builder +FROM node:alpine as builder RUN apk update && apk add curl yarn python3 build-base gcc wget git --no-cache WORKDIR /usr/src/app diff --git a/package.json b/package.json index b7c48c7..2298d9e 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "inferno-server": "^8.1.1", "isomorphic-cookie": "^1.2.4", "jwt-decode": "^3.1.2", - "lemmy-js-client": "0.18.0-rc.1", + "lemmy-js-client": "0.17.2-rc.24", "lodash": "^4.17.21", "markdown-it": "^13.0.1", "markdown-it-container": "^3.0.0", diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 82f8433..e1adfc5 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -80,6 +80,30 @@ overflow-x: auto; } +.md-div table { + border-collapse: collapse; + width: 100%; + margin-bottom: 1rem; + border: 1px solid var(--dark); +} + +.md-div table th, +.md-div table td { + padding: 0.3rem; + vertical-align: top; + border-top: 1px solid var(--dark); + border: 1px solid var(--dark); +} + +.md-div table thead th { + vertical-align: bottom; + border-bottom: 2px solid var(--dark); +} + +.md-div table tbody + tbody { + border-top: 2px solid var(--dark); +} + .vote-bar { margin-top: -6.5px; } diff --git a/src/shared/components/common/html-tags.tsx b/src/shared/components/common/html-tags.tsx index f32b0fc..0e6cb2d 100644 --- a/src/shared/components/common/html-tags.tsx +++ b/src/shared/components/common/html-tags.tsx @@ -2,8 +2,7 @@ import { htmlToText } from "html-to-text"; import { Component } from "inferno"; import { Helmet } from "inferno-helmet"; import { httpExternalPath } from "../../env"; -import { i18n } from "../../i18next"; -import { md } from "../../utils"; +import { getLanguages, md } from "../../utils"; interface HtmlTagsProps { title: string; @@ -18,10 +17,11 @@ export class HtmlTags extends Component<HtmlTagsProps, any> { const url = httpExternalPath(this.props.path); const desc = this.props.description; const image = this.props.image; + const lang = getLanguages()[0]; return ( <Helmet title={this.props.title}> - <html lang={i18n.resolvedLanguage} /> + <html lang={lang == "browser" ? "en" : lang} /> {["title", "og:title", "twitter:title"].map(t => ( <meta key={t} property={t} content={this.props.title} /> diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx index 4e1bca1..c1e8524 100644 --- a/src/shared/components/common/markdown-textarea.tsx +++ b/src/shared/components/common/markdown-textarea.tsx @@ -183,6 +183,53 @@ export class MarkdownTextArea extends Component< </div> <div className="row"> <div className="col-sm-12 d-flex flex-wrap"> + {this.props.buttonTitle && ( + <button + type="submit" + className="btn btn-sm btn-secondary mr-2" + disabled={this.isDisabled} + > + {this.state.loading ? ( + <Spinner /> + ) : ( + <span>{this.props.buttonTitle}</span> + )} + </button> + )} + {this.props.replyType && ( + <button + type="button" + className="btn btn-sm btn-secondary mr-2" + onClick={linkEvent(this, this.handleReplyCancel)} + > + {i18n.t("cancel")} + </button> + )} + {this.state.content && ( + <button + className={`btn btn-sm btn-secondary mr-2 ${ + this.state.previewMode && "active" + }`} + onClick={linkEvent(this, this.handlePreviewToggle)} + > + {this.state.previewMode ? i18n.t("edit") : i18n.t("preview")} + </button> + )} + {/* A flex expander */} + <div className="flex-grow-1"></div> + + {this.props.showLanguage && ( + <LanguageSelect + iconVersion + allLanguages={this.props.allLanguages} + selectedLanguageIds={ + languageId ? Array.of(languageId) : undefined + } + siteLanguages={this.props.siteLanguages} + onChange={this.handleLanguageChange} + disabled={this.isDisabled} + /> + )} {this.getFormatButton("bold", this.handleInsertBold)} {this.getFormatButton("italic", this.handleInsertItalic)} {this.getFormatButton("link", this.handleInsertLink)} @@ -235,57 +282,6 @@ export class MarkdownTextArea extends Component< <Icon icon="help-circle" classes="icon-inline" /> </a> </div> - - <div className="col-sm-12 d-flex align-items-center flex-wrap"> - {this.props.showLanguage && ( - <LanguageSelect - iconVersion - allLanguages={this.props.allLanguages} - selectedLanguageIds={ - languageId ? Array.of(languageId) : undefined - } - siteLanguages={this.props.siteLanguages} - onChange={this.handleLanguageChange} - disabled={this.isDisabled} - /> - )} - - {/* A flex expander */} - <div className="flex-grow-1"></div> - - {this.props.buttonTitle && ( - <button - type="submit" - className="btn btn-sm btn-secondary mr-2" - disabled={this.isDisabled} - > - {this.state.loading ? ( - <Spinner /> - ) : ( - <span>{this.props.buttonTitle}</span> - )} - </button> - )} - {this.props.replyType && ( - <button - type="button" - className="btn btn-sm btn-secondary mr-2" - onClick={linkEvent(this, this.handleReplyCancel)} - > - {i18n.t("cancel")} - </button> - )} - {this.state.content && ( - <button - className={`btn btn-sm btn-secondary mr-2 ${ - this.state.previewMode && "active" - }`} - onClick={linkEvent(this, this.handlePreviewToggle)} - > - {this.state.previewMode ? i18n.t("edit") : i18n.t("preview")} - </button> - )} - </div> </div> </form> ); diff --git a/src/shared/components/common/moment-time.tsx b/src/shared/components/common/moment-time.tsx index 30c1682..10714f5 100644 --- a/src/shared/components/common/moment-time.tsx +++ b/src/shared/components/common/moment-time.tsx @@ -1,7 +1,7 @@ import { Component } from "inferno"; import moment from "moment"; import { i18n } from "../../i18next"; -import { capitalizeFirstLetter } from "../../utils"; +import { capitalizeFirstLetter, getLanguages } from "../../utils"; import { Icon } from "./icon"; interface MomentTimeProps { @@ -15,7 +15,9 @@ export class MomentTime extends Component<MomentTimeProps, any> { constructor(props: any, context: any) { super(props, context); - moment.locale([...i18n.languages]); + const lang = getLanguages(); + + moment.locale(lang); } createdAndModifiedTimes() { diff --git a/src/shared/components/modlog.tsx b/src/shared/components/modlog.tsx index cd0cfcb..99f15e5 100644 --- a/src/shared/components/modlog.tsx +++ b/src/shared/components/modlog.tsx @@ -33,7 +33,6 @@ import { FirstLoadService } from "../services/FirstLoadService"; import { HttpService, RequestState } from "../services/HttpService"; import { Choice, - debounce, fetchLimit, fetchUsers, getIdFromString, @@ -43,6 +42,7 @@ import { personToChoice, setIsoData, } from "../utils"; +import { debounce } from "../utils/helpers/debounce"; import { getQueryParams } from "../utils/helpers/get-query-params"; import { getQueryString } from "../utils/helpers/get-query-string"; import { amAdmin } from "../utils/roles/am-admin"; diff --git a/src/shared/components/person/settings.tsx b/src/shared/components/person/settings.tsx index 56d57a7..3c8e9fc 100644 --- a/src/shared/components/person/settings.tsx +++ b/src/shared/components/person/settings.tsx @@ -18,7 +18,6 @@ import { Choice, capitalizeFirstLetter, communityToChoice, - debounce, elementUrl, emDash, enableNsfw, @@ -37,6 +36,7 @@ import { updateCommunityBlock, updatePersonBlock, } from "../../utils"; +import { debounce } from "../../utils/helpers/debounce"; import { HtmlTags } from "../common/html-tags"; import { Icon, Spinner } from "../common/icon"; import { ImageUploadForm } from "../common/image-upload-form"; diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx index 4640922..c21a6e2 100644 --- a/src/shared/components/post/post-form.tsx +++ b/src/shared/components/post/post-form.tsx @@ -18,7 +18,6 @@ import { archiveTodayUrl, capitalizeFirstLetter, communityToChoice, - debounce, fetchCommunities, getIdFromString, ghostArchiveUrl, @@ -33,6 +32,7 @@ import { validURL, webArchiveUrl, } from "../../utils"; +import { debounce } from "../../utils/helpers/debounce"; import { Icon, Spinner } from "../common/icon"; import { LanguageSelect } from "../common/language-select"; import { MarkdownTextArea } from "../common/markdown-textarea"; diff --git a/src/shared/components/post/post.tsx b/src/shared/components/post/post.tsx index 05e4d9b..a471e64 100644 --- a/src/shared/components/post/post.tsx +++ b/src/shared/components/post/post.tsx @@ -64,7 +64,6 @@ import { buildCommentsTree, commentsToFlatNodes, commentTreeMaxDepth, - debounce, editComment, editWith, enableDownvotes, @@ -84,6 +83,7 @@ import { updatePersonBlock, } from "../../utils"; import { isBrowser } from "../../utils/browser/is-browser"; +import { debounce } from "../../utils/helpers/debounce"; import { CommentForm } from "../comment/comment-form"; import { CommentNodes } from "../comment/comment-nodes"; import { HtmlTags } from "../common/html-tags"; diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx index 59bbf61..d32e408 100644 --- a/src/shared/components/search.tsx +++ b/src/shared/components/search.tsx @@ -29,7 +29,6 @@ import { capitalizeFirstLetter, commentsToFlatNodes, communityToChoice, - debounce, enableDownvotes, enableNsfw, fetchCommunities, @@ -46,6 +45,7 @@ import { setIsoData, showLocal, } from "../utils"; +import { debounce } from "../utils/helpers/debounce"; import { getQueryParams } from "../utils/helpers/get-query-params"; import { getQueryString } from "../utils/helpers/get-query-string"; import type { QueryParams } from "../utils/types/query-params"; diff --git a/src/shared/i18next.ts b/src/shared/i18next.ts index 47ca650..eaedbbf 100644 --- a/src/shared/i18next.ts +++ b/src/shared/i18next.ts @@ -1,5 +1,4 @@ import i18next, { i18nTyped, Resource } from "i18next"; -import { UserService } from "./services"; import { ar } from "./translations/ar"; import { bg } from "./translations/bg"; import { ca } from "./translations/ca"; @@ -31,7 +30,7 @@ import { sv } from "./translations/sv"; import { vi } from "./translations/vi"; import { zh } from "./translations/zh"; import { zh_Hant } from "./translations/zh_Hant"; -import { isBrowser } from "./utils"; +import { getLanguages } from "./utils"; export const languages = [ { resource: ar, code: "ar", name: "اÙعربÙØ©" }, @@ -74,31 +73,12 @@ function format(value: any, format: any): any { return format === "uppercase" ? value.toUpperCase() : value; } -class LanguageDetector { - static readonly type = "languageDetector"; - - detect() { - const langs: string[] = []; - - const myLang = - UserService.Instance.myUserInfo?.local_user_view.local_user - .interface_language ?? "browser"; - - if (myLang !== "browser") langs.push(myLang); - - if (isBrowser()) langs.push(...navigator.languages); - - return langs; - } -} - -i18next.use(LanguageDetector).init({ +i18next.init({ debug: false, compatibilityJSON: "v3", - supportedLngs: languages.map(l => l.code), - nonExplicitSupportedLngs: true, // load: 'languageOnly', // initImmediate: false, + lng: getLanguages()[0], fallbackLng: "en", resources, interpolation: { format }, diff --git a/src/shared/utils.ts b/src/shared/utils.ts index bc6e76f..c0caad8 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -40,10 +40,11 @@ import moment from "moment"; import tippy from "tippy.js"; import Toastify from "toastify-js"; import { getHttpBase } from "./env"; -import { i18n } from "./i18next"; +import { i18n, languages } from "./i18next"; import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces"; import { HttpService, UserService } from "./services"; import { isBrowser } from "./utils/browser/is-browser"; +import { debounce } from "./utils/helpers/debounce"; import { groupBy } from "./utils/helpers/group-by"; let Tribute: any; @@ -230,7 +231,6 @@ export function futureDaysToUnixTime(days?: number): number | undefined { const imageRegex = /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/; const videoRegex = /(http)?s?:?(\/\/[^"']*\.(?:mp4|webm))/; -const tldRegex = /([a-z0-9]+\.)*[a-z0-9]+\.[a-z]+/; export function isImage(url: string) { return imageRegex.test(url); @@ -244,10 +244,6 @@ export function validURL(str: string) { return !!new URL(str); } -export function validInstanceTLD(str: string) { - return tldRegex.test(str); -} - export function communityRSSUrl(actorId: string, sort: string): string { const url = new URL(actorId); return `${url.origin}/feeds${url.pathname}.xml?sort=${sort}`; @@ -273,49 +269,29 @@ export function getDataTypeString(dt: DataType) { return dt === DataType.Post ? "Post" : "Comment"; } -export function debounce<T extends any[], R>( - func: (...e: T) => R, - wait = 1000, - immediate = false -) { - // 'private' variable for instance - // The returned function will be able to reference this due to closure. - // Each call to the returned function will share this common timer. - let timeout: NodeJS.Timeout | null; - - // Calling debounce returns a new anonymous function - return function () { - // reference the context and args for the setTimeout function - const args = arguments; - - // Should the function be called now? If immediate is true - // and not already in a timeout then the answer is: Yes - const callNow = immediate && !timeout; - - // This is the basic debounce behavior where you can call this - // function several times, but it will only execute once - // [before or after imposing a delay]. - // Each time the returned function is called, the timer starts over. - clearTimeout(timeout ?? undefined); - - // Set the new timeout - timeout = setTimeout(function () { - // Inside the timeout function, clear the timeout variable - // which will let the next execution run when in 'immediate' mode - timeout = null; - - // Check if the function already ran with the immediate flag - if (!immediate) { - // Call the original function with apply - // apply lets you define the 'this' object as well as the arguments - // (both captured before setTimeout) - func.apply(this, args); - } - }, wait); +export function getLanguages( + override?: string, + myUserInfo = UserService.Instance.myUserInfo +): string[] { + const myLang = myUserInfo?.local_user_view.local_user.interface_language; + const lang = override || myLang || "browser"; - // Immediate mode and no wait timer? Execute the function.. - if (callNow) func.apply(this, args); - } as (...e: T) => R; + if (lang == "browser" && isBrowser()) { + return getBrowserLanguages(); + } else { + return [lang]; + } +} + +function getBrowserLanguages(): string[] { + // Intersect lemmy's langs, with the browser langs + const langs = languages ? languages.map(l => l.code) : ["en"]; + + // NOTE, mobile browsers seem to be missing this list, so append en + const allowedLangs = navigator.languages + .concat("en") + .filter(v => langs.includes(v)); + return allowedLangs; } export async function fetchThemeList(): Promise<string[]> { @@ -633,7 +609,7 @@ function setupMarkdown() { defs: emojiDefs, }) .disable("image"); - const defaultRenderer = md.renderer.rules.image; + var defaultRenderer = md.renderer.rules.image; md.renderer.rules.image = function ( tokens: Token[], idx: number, @@ -652,9 +628,6 @@ function setupMarkdown() { const alt_text = item.content; return `<img class="icon icon-emoji" src="${src}" title="${title}" alt="${alt_text}"/>`; }; - md.renderer.rules.table_open = function () { - return '<table class="table">'; - }; } export function getEmojiMart( @@ -1166,7 +1139,7 @@ export function personSelectName({ export function initializeSite(site?: GetSiteResponse) { UserService.Instance.myUserInfo = site?.my_user; - i18n.changeLanguage(); + i18n.changeLanguage(getLanguages()[0]); if (site) { setupEmojiDataModel(site.custom_emojis ?? []); } diff --git a/src/shared/utils/helpers/debounce.ts b/src/shared/utils/helpers/debounce.ts new file mode 100644 index 0000000..7a1e8b1 --- /dev/null +++ b/src/shared/utils/helpers/debounce.ts @@ -0,0 +1,44 @@ +export function debounce<T extends any[], R>( + func: (...e: T) => R, + wait = 1000, + immediate = false +) { + // 'private' variable for instance + // The returned function will be able to reference this due to closure. + // Each call to the returned function will share this common timer. + let timeout: NodeJS.Timeout | null; + + // Calling debounce returns a new anonymous function + return function () { + // reference the context and args for the setTimeout function + const args = arguments; + + // Should the function be called now? If immediate is true + // and not already in a timeout then the answer is: Yes + const callNow = immediate && !timeout; + + // This is the basic debounce behavior where you can call this + // function several times, but it will only execute once + // [before or after imposing a delay]. + // Each time the returned function is called, the timer starts over. + clearTimeout(timeout ?? undefined); + + // Set the new timeout + timeout = setTimeout(function () { + // Inside the timeout function, clear the timeout variable + // which will let the next execution run when in 'immediate' mode + timeout = null; + + // Check if the function already ran with the immediate flag + if (!immediate) { + // Call the original function with apply + // apply lets you define the 'this' object as well as the arguments + // (both captured before setTimeout) + func.apply(this, args); + } + }, wait); + + // Immediate mode and no wait timer? Execute the function.. + if (callNow) func.apply(this, args); + } as (...e: T) => R; +} diff --git a/yarn.lock b/yarn.lock index 7cd6447..f783f07 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5615,10 +5615,10 @@ leac@^0.6.0: resolved "https://registry.yarnpkg.com/leac/-/leac-0.6.0.tgz#dcf136e382e666bd2475f44a1096061b70dc0912" integrity sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg== -lemmy-js-client@0.18.0-rc.1: - version "0.18.0-rc.1" - resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.18.0-rc.1.tgz#fd0c88810572d90413696011ebaed19e3b8162d8" - integrity sha512-lQe443Nr5UCSoY+IxmT7mBe0IRF6EAZ/4PJSRoPSL+U8A+egMMBPbuxnisHzLsC+eDOWRUIgOqZlwlaRnbmuig== +lemmy-js-client@0.17.2-rc.24: + version "0.17.2-rc.24" + resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.17.2-rc.24.tgz#3b09233a6d89286e559be2e840d81c0c549562ad" + integrity sha512-aSHz7UTcwnwnNd9poY8tEXP7RA9ieZm9MAfSljcbCNU5ds9CASXYNodmraUVJiqCmT4HWnj7IeVmBC9r7nTHnw== dependencies: cross-fetch "^3.1.5" form-data "^4.0.0" -- 2.44.1