diff --git a/lemmy-translations b/lemmy-translations index 7fc71d08..a241fe12 160000 --- a/lemmy-translations +++ b/lemmy-translations @@ -1 +1 @@ -Subproject commit 7fc71d0860bbe5c6d620ec27112350ffe5b9229c +Subproject commit a241fe1255a6363c7ae1ec5a09520c066745e6ce diff --git a/src/server/handlers/manifest-handler.ts b/src/server/handlers/manifest-handler.ts new file mode 100644 index 00000000..bdaed3f9 --- /dev/null +++ b/src/server/handlers/manifest-handler.ts @@ -0,0 +1,28 @@ +import type { Request, Response } from "express"; +import { LemmyHttp } from "lemmy-js-client"; +import { getHttpBaseInternal } from "../../shared/env"; +import { wrapClient } from "../../shared/services/HttpService"; +import generateManifestJson from "../utils/generate-manifest-json"; +import { setForwardedHeaders } from "../utils/set-forwarded-headers"; + +let manifest: Awaited> | undefined = + undefined; + +export default async (req: Request, res: Response) => { + if (!manifest) { + const headers = setForwardedHeaders(req.headers); + const client = wrapClient(new LemmyHttp(getHttpBaseInternal(), headers)); + const site = await client.getSite({}); + + if (site.state === "success") { + manifest = await generateManifestJson(site.data); + } else { + res.sendStatus(500); + return; + } + } + + res.setHeader("content-type", "application/manifest+json"); + + res.send(manifest); +}; diff --git a/src/server/index.tsx b/src/server/index.tsx index f109fc11..144b596e 100644 --- a/src/server/index.tsx +++ b/src/server/index.tsx @@ -2,6 +2,7 @@ import express from "express"; import path from "path"; import process from "process"; import CatchAllHandler from "./handlers/catch-all-handler"; +import ManifestHandler from "./handlers/manifest-handler"; import RobotsHandler from "./handlers/robots-handler"; import ServiceWorkerHandler from "./handlers/service-worker-handler"; import ThemeHandler from "./handlers/theme-handler"; @@ -24,6 +25,7 @@ if (!process.env["LEMMY_UI_DISABLE_CSP"] && !process.env["LEMMY_UI_DEBUG"]) { server.get("/robots.txt", RobotsHandler); server.get("/service-worker.js", ServiceWorkerHandler); +server.get("/manifest", ManifestHandler); server.get("/css/themes/:name", ThemeHandler); server.get("/css/themelist", ThemesListHandler); server.get("/*", CatchAllHandler); diff --git a/src/server/utils/create-ssr-html.tsx b/src/server/utils/create-ssr-html.tsx index 5cc38d7d..2c35aa29 100644 --- a/src/server/utils/create-ssr-html.tsx +++ b/src/server/utils/create-ssr-html.tsx @@ -5,32 +5,35 @@ import sharp from "sharp"; import { ILemmyConfig, IsoDataOptionalSite } from "../../shared/interfaces"; import { favIconPngUrl, favIconUrl } from "../../shared/utils"; import { fetchIconPng } from "./fetch-icon-png"; -import { generateManifestBase64 } from "./generate-manifest-base64"; const customHtmlHeader = process.env["LEMMY_UI_CUSTOM_HTML_HEADER"] || ""; +let appleTouchIcon: string | undefined = undefined; + export async function createSsrHtml( root: string, isoData: IsoDataOptionalSite ) { const site = isoData.site_res; - const appleTouchIcon = site?.site_view.site.icon - ? `data:image/png;base64,${sharp( - await fetchIconPng(site.site_view.site.icon) - ) - .resize(180, 180) - .extend({ - bottom: 20, - top: 20, - left: 20, - right: 20, - background: "#222222", - }) - .png() - .toBuffer() - .then(buf => buf.toString("base64"))}` - : favIconPngUrl; + if (!appleTouchIcon) { + appleTouchIcon = site?.site_view.site.icon + ? `data:image/png;base64,${sharp( + await fetchIconPng(site.site_view.site.icon) + ) + .resize(180, 180) + .extend({ + bottom: 20, + top: 20, + left: 20, + right: 20, + background: "#222222", + }) + .png() + .toBuffer() + .then(buf => buf.toString("base64"))}` + : favIconPngUrl; + } const erudaStr = process.env["LEMMY_UI_DEBUG"] === "true" @@ -74,15 +77,7 @@ export async function createSsrHtml( /> - ${ - site && - `` - } + diff --git a/src/server/utils/generate-manifest-base64.ts b/src/server/utils/generate-manifest-json.ts similarity index 69% rename from src/server/utils/generate-manifest-base64.ts rename to src/server/utils/generate-manifest-json.ts index e89b1559..b03fd87b 100644 --- a/src/server/utils/generate-manifest-base64.ts +++ b/src/server/utils/generate-manifest-json.ts @@ -5,7 +5,7 @@ import sharp from "sharp"; import { getHttpBaseExternal } from "../../shared/env"; import { fetchIconPng } from "./fetch-icon-png"; -const iconSizes = [72, 96, 144, 192, 512]; +const iconSizes = [72, 96, 128, 144, 152, 192, 384, 512]; const defaultLogoPathDirectory = path.join( process.cwd(), @@ -14,7 +14,7 @@ const defaultLogoPathDirectory = path.join( "icons" ); -export async function generateManifestBase64({ +export default async function ({ my_user, site_view: { site, @@ -25,7 +25,7 @@ export async function generateManifestBase64({ const icon = site.icon ? await fetchIconPng(site.icon) : null; - const manifest = { + return { name: site.name, description: site.description ?? "A link aggregator for the fediverse", start_url: url, @@ -69,31 +69,24 @@ export async function generateManifestBase64({ short_name: "Communities", description: "Browse communities", }, - ] - .concat( - my_user - ? [ - { - name: "Create Post", - url: "/create_post", - short_name: "Create Post", - description: "Create a post.", - }, - ] - : [] - ) - .concat( - my_user?.local_user_view.person.admin || !community_creation_admin_only - ? [ - { - name: "Create Community", - url: "/create_community", - short_name: "Create Community", - description: "Create a community", - }, - ] - : [] - ), + { + name: "Create Post", + url: "/create_post", + short_name: "Create Post", + description: "Create a post.", + }, + ].concat( + my_user?.local_user_view.person.admin || !community_creation_admin_only + ? [ + { + name: "Create Community", + url: "/create_community", + short_name: "Create Community", + description: "Create a community", + }, + ] + : [] + ), related_applications: [ { platform: "f-droid", @@ -102,6 +95,4 @@ export async function generateManifestBase64({ }, ], }; - - return Buffer.from(JSON.stringify(manifest)).toString("base64"); } diff --git a/src/shared/components/home/home.tsx b/src/shared/components/home/home.tsx index 765dbf03..4270bd0b 100644 --- a/src/shared/components/home/home.tsx +++ b/src/shared/components/home/home.tsx @@ -570,8 +570,6 @@ export class Home extends Component { data-tippy-content={ subscribedCollapsed ? i18n.t("expand") : i18n.t("collapse") } - data-bs-toggle="collapse" - data-bs-target="#sidebarSubscribedBody" aria-expanded="true" aria-controls="sidebarSubscribedBody" > @@ -582,24 +580,25 @@ export class Home extends Component { )} -
-
-
    - {UserService.Instance.myUserInfo?.follows.map(cfv => ( -
  • - -
    • - ))} -
+ {!subscribedCollapsed && ( +
+
+
    + {UserService.Instance.myUserInfo?.follows.map(cfv => ( +
  • + +
    • + ))} +
+
-
+ )} ); } diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx index 4caeed6b..8f8b177e 100644 --- a/src/shared/components/home/site-sidebar.tsx +++ b/src/shared/components/home/site-sidebar.tsx @@ -42,13 +42,11 @@ export class SiteSidebar extends Component { )} -
-
{this.siteInfo()}
-
+ {!this.state.collapsed && ( +
+
{this.siteInfo()}
+
+ )}
); diff --git a/src/shared/components/post/create-post.tsx b/src/shared/components/post/create-post.tsx index ff136c2f..5a9a1673 100644 --- a/src/shared/components/post/create-post.tsx +++ b/src/shared/components/post/create-post.tsx @@ -114,7 +114,7 @@ export class CreatePost extends Component< if (res.state === "success") { this.setState({ selectedCommunityChoice: { - label: res.data.community_view.community.name, + label: res.data.community_view.community.title, value: res.data.community_view.community.id.toString(), }, loading: false, diff --git a/src/shared/components/post/post-form.tsx b/src/shared/components/post/post-form.tsx index 4d58d1a7..6e47759a 100644 --- a/src/shared/components/post/post-form.tsx +++ b/src/shared/components/post/post-form.tsx @@ -79,6 +79,143 @@ interface PostFormState { submitted: boolean; } +function handlePostSubmit(i: PostForm, event: any) { + event.preventDefault(); + // Coerce empty url string to undefined + if ((i.state.form.url ?? "") === "") { + i.setState(s => ((s.form.url = undefined), s)); + } + i.setState({ loading: true, submitted: true }); + const auth = myAuthRequired(); + + const pForm = i.state.form; + const pv = i.props.post_view; + + if (pv) { + i.props.onEdit?.({ + name: pForm.name, + url: pForm.url, + body: pForm.body, + nsfw: pForm.nsfw, + post_id: pv.post.id, + language_id: pForm.language_id, + auth, + }); + } else if (pForm.name && pForm.community_id) { + i.props.onCreate?.({ + name: pForm.name, + community_id: pForm.community_id, + url: pForm.url, + body: pForm.body, + nsfw: pForm.nsfw, + language_id: pForm.language_id, + honeypot: pForm.honeypot, + auth, + }); + } +} + +function copySuggestedTitle(d: { i: PostForm; suggestedTitle?: string }) { + const sTitle = d.suggestedTitle; + if (sTitle) { + d.i.setState( + s => ((s.form.name = sTitle?.substring(0, MAX_POST_TITLE_LENGTH)), s) + ); + d.i.setState({ suggestedPostsRes: { state: "empty" } }); + setTimeout(() => { + const textarea: any = document.getElementById("post-title"); + autosize.update(textarea); + }, 10); + } +} + +function handlePostUrlChange(i: PostForm, event: any) { + const url = event.target.value; + + i.setState(prev => ({ + ...prev, + form: { + ...prev.form, + url, + }, + imageDeleteUrl: "", + })); + + i.fetchPageTitle(); +} + +function handlePostNsfwChange(i: PostForm, event: any) { + i.setState(s => ((s.form.nsfw = event.target.checked), s)); +} + +function handleHoneyPotChange(i: PostForm, event: any) { + i.setState(s => ((s.form.honeypot = event.target.value), s)); +} + +function handleCancel(i: PostForm) { + i.props.onCancel?.(); +} + +function handleImageUploadPaste(i: PostForm, event: any) { + const image = event.clipboardData.files[0]; + if (image) { + handleImageUpload(i, image); + } +} + +function handleImageUpload(i: PostForm, event: any) { + let file: any; + if (event.target) { + event.preventDefault(); + file = event.target.files[0]; + } else { + file = event; + } + + i.setState({ imageLoading: true }); + + HttpService.client.uploadImage({ image: file }).then(res => { + console.log("pictrs upload:"); + console.log(res); + if (res.state === "success") { + if (res.data.msg === "ok") { + i.state.form.url = res.data.url; + i.setState({ + imageLoading: false, + imageDeleteUrl: res.data.delete_url as string, + }); + } else { + toast(JSON.stringify(res), "danger"); + } + } else if (res.state === "failed") { + console.error(res.msg); + toast(res.msg, "danger"); + i.setState({ imageLoading: false }); + } + }); +} + +function handlePostNameChange(i: PostForm, event: any) { + i.setState(s => ((s.form.name = event.target.value), s)); + i.fetchSimilarPosts(); +} + +function handleImageDelete(i: PostForm) { + const { imageDeleteUrl } = i.state; + + fetch(imageDeleteUrl); + + i.setState(prev => ({ + ...prev, + imageDeleteUrl: "", + imageLoading: false, + form: { + ...prev.form, + url: "", + }, + })); +} + export class PostForm extends Component { state: PostFormState = { suggestedPostsRes: { state: "empty" }, @@ -123,16 +260,16 @@ export class PostForm extends Component { ...this.state.form, community_id: getIdFromString(selectedCommunityChoice.value), }, - communitySearchOptions: [selectedCommunityChoice] - .concat( + communitySearchOptions: [selectedCommunityChoice].concat( + ( this.props.initialCommunities?.map( ({ community: { id, title } }) => ({ label: title, value: id.toString(), }) ) ?? [] - ) - .filter(option => option.value !== selectedCommunityChoice.value), + ).filter(option => option.value !== selectedCommunityChoice.value) + ), }; } else { this.state = { @@ -188,15 +325,8 @@ export class PostForm extends Component { const url = this.state.form.url; - // TODO - // const promptCheck = - // !!this.state.form.name || !!this.state.form.url || !!this.state.form.body; - // return ( -
+ { type="url" id="post-url" className="form-control" - value={this.state.form.url} - onInput={linkEvent(this, this.handlePostUrlChange)} - onPaste={linkEvent(this, this.handleImageUploadPaste)} + value={url} + onInput={linkEvent(this, handlePostUrlChange)} + onPaste={linkEvent(this, handleImageUploadPaste)} /> {this.renderSuggestedTitleCopy()} @@ -237,7 +367,7 @@ export class PostForm extends Component { name="file" className="d-none" disabled={!UserService.Instance.myUserInfo} - onChange={linkEvent(this, this.handleImageUpload)} + onChange={linkEvent(this, handleImageUpload)} /> {url && validURL(url) && ( @@ -276,7 +406,7 @@ export class PostForm extends Component { {this.state.imageDeleteUrl && (