diff --git a/src/client/ssr-view/server.tsx b/src/client/ssr-view/server.tsx index 6745130b..d7338670 100644 --- a/src/client/ssr-view/server.tsx +++ b/src/client/ssr-view/server.tsx @@ -168,9 +168,13 @@ export async function render( const safeOriginalName = stripHtml(file.originalName || ''); const safeType = stripHtml(file.type || ''); - const meta = ` - ${ - user?.view?.embedTitle && user.view.embed + const viewEnabled = !!user.view?.enabled; + const showRichOg = viewEnabled && !!user.view.embed; + const showMediaOg = viewEnabled && (!!user.view.embed || !!user.view.embedMediaOnly); + const pageUrl = `${host}${url.split('?')[0]}`; + + const richMeta = [ + showRichOg && user?.view?.embedTitle ? `` - : '' - } - ${ - user?.view?.embedDescription && user.view.embed + : '', + showRichOg && user?.view?.embedDescription ? `` - : '' - } - ${ - user?.view?.embedSiteName && user.view.embed + : '', + showRichOg && user?.view?.embedSiteName ? `` - : '' - } - ${ - user?.view?.embedColor && user.view.embed + : '', + showRichOg && user?.view?.embedColor ? `` - : '' - } + : '', + ] + .filter(Boolean) + .join('\n '); - ${ - file.type?.startsWith('image') + const imageOg = + showMediaOg && file.type?.startsWith('image') ? ` - + - + ${showRichOg ? `` : ''} ` - : '' - } + : ''; - ${ - file.type?.startsWith('video') + const videoOg = + showMediaOg && file.type?.startsWith('video') ? ` ${file.thumbnail ? `` : ''} + ` - : '' - } + : ''; - ${ - file.type?.startsWith('audio') + const audioOg = + showMediaOg && file.type?.startsWith('audio') ? ` - + ${showRichOg ? `` : ''} - + ` - : '' - } + : ''; - ${ - !file.type?.startsWith('video') && !file.type?.startsWith('image') + const otherOg = + showRichOg && !file.type?.startsWith('video') && !file.type?.startsWith('image') ? ` - + ` - : '' - } + : ''; - ${file.originalName ? safeOriginalName : safeFilename} -`; + const docTitle = `${file.originalName ? safeOriginalName : safeFilename}`; + + const includeHead = showRichOg || showMediaOg; + const headMeta = includeHead + ? [richMeta, imageOg, videoOg, audioOg, otherOg, docTitle].filter(Boolean).join('\n') + : ''; return { html, - meta: `${user.view.embed ? meta : ''}\n${createZiplineSsr(data)}`, + meta: `${headMeta ? `${headMeta}\n` : ''}${createZiplineSsr(data)}`, }; } diff --git a/src/components/pages/settings/parts/SettingsFileView.tsx b/src/components/pages/settings/parts/SettingsFileView.tsx index 7c9aae00..c2c6fb13 100644 --- a/src/components/pages/settings/parts/SettingsFileView.tsx +++ b/src/components/pages/settings/parts/SettingsFileView.tsx @@ -60,6 +60,7 @@ function Form({ user, setUser }: { user: User; setUser: (u: User) => void }) { enabled: user.view.enabled || false, content: user.view.content || '', embed: user.view.embed || false, + embedMediaOnly: user.view.embedMediaOnly || false, embedTitle: user.view.embedTitle || '', embedDescription: user.view.embedDescription || '', embedSiteName: user.view.embedSiteName || '', @@ -75,6 +76,7 @@ function Form({ user, setUser }: { user: User; setUser: (u: User) => void }) { const valuesTrimmed = { enabled: values.enabled, embed: values.embed, + embedMediaOnly: values.embed ? false : values.embedMediaOnly, content: values.content.trim() || null, embedTitle: values.embedTitle.trim() || null, embedDescription: values.embedDescription.trim() || null, @@ -186,6 +188,20 @@ function Form({ user, setUser }: { user: User; setUser: (u: User) => void }) { disabled={!form.values.enabled} my='xs' {...form.getInputProps('embed', { type: 'checkbox' })} + onChange={(event) => { + form.getInputProps('embed', { type: 'checkbox' }).onChange(event); + if (event.currentTarget.checked) { + form.setFieldValue('embedMediaOnly', false); + } + }} + /> + + diff --git a/src/lib/db/models/user.ts b/src/lib/db/models/user.ts index 1e927ac9..154db34b 100644 --- a/src/lib/db/models/user.ts +++ b/src/lib/db/models/user.ts @@ -23,6 +23,7 @@ export const userViewSchema = z showFolder: z.boolean().nullish(), content: z.string().nullish(), embed: z.boolean().nullish(), + embedMediaOnly: z.boolean().nullish(), embedTitle: z.string().nullish(), embedDescription: z.string().nullish(), embedColor: z.string().nullish(), diff --git a/src/server/routes/api/user/index.ts b/src/server/routes/api/user/index.ts index 7fc73a79..60662f77 100644 --- a/src/server/routes/api/user/index.ts +++ b/src/server/routes/api/user/index.ts @@ -52,6 +52,7 @@ export default typedPlugin( .object({ content: z.string().nullish(), embed: z.boolean().optional(), + embedMediaOnly: z.boolean().optional(), embedTitle: z.string().nullish(), embedDescription: z.string().nullish(), embedColor: z.string().nullish(), @@ -101,6 +102,14 @@ export default typedPlugin( ...(req.body.view.enabled !== undefined && { enabled: req.body.view.enabled || false }), ...(req.body.view.content !== undefined && { content: req.body.view.content || null }), ...(req.body.view.embed !== undefined && { embed: req.body.view.embed || false }), + ...(req.body.view.embedMediaOnly !== undefined && { + embedMediaOnly: (() => { + const embedOn = !!(req.body.view.embed !== undefined + ? req.body.view.embed + : (req.user.view as { embed?: boolean }).embed); + return embedOn ? false : req.body.view.embedMediaOnly || false; + })(), + }), ...(req.body.view.embedTitle !== undefined && { embedTitle: req.body.view.embedTitle || null, }),