matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nicolium: use react-helmet in less places

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-06 16:19:45 +01:00
parent 19d4cfc004
commit 85a21f2bd3
4 changed files with 45 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/nicolium/src/features/status/components/thread.tsx
View File

@ -1,7 +1,6 @@
import { useNavigate } from '@tanstack/react-router';
import clsx from 'clsx';
import React, { useCallback, useEffect, useMemo, useRef } from 'react';
import { Helmet } from 'react-helmet-async';
import { useIntl } from 'react-intl';
import ScrollableList from '@/components/scrollable-list';
@ -346,7 +345,7 @@ const Thread = ({
const firstAttachment = status.media_attachments && status.media_attachments[0];
return (
<Helmet>
<>
{status.spoiler_text && <meta property='og:title' content={status.spoiler_text} />}
{(firstAttachment?.type === 'image' || firstAttachment?.type === 'gifv') && (
<>
@ -377,7 +376,7 @@ const Thread = ({
{status.edited_at && <meta property='article:modified_time' content={status.edited_at} />}
{status.account.local === false && <meta content='noindex, noarchive' name='robots' />}
</Helmet>
</>
);
}, [status]);

2
packages/nicolium/src/init/nicolium-head.tsx
View File

@ -90,8 +90,8 @@ const NicoliumHead = () => {
})}
/>
<body className={bodyClass} dir={direction} />
<meta name='theme-color' content={color} />
</Helmet>
<meta name='theme-color' content={color} />
<InlineStyle>{`:root { ${themeCss} }`}</InlineStyle>
{['dark', 'black'].includes(theme) && (
<InlineStyle>{':root { color-scheme: dark; }'}</InlineStyle>

83
packages/nicolium/src/layouts/event-layout.tsx
View File

@ -1,6 +1,5 @@
import { Outlet, useLocation, useNavigate } from '@tanstack/react-router';
import React, { useMemo } from 'react';
import { Helmet } from 'react-helmet-async';
import { FormattedMessage } from 'react-intl';
import Column from '@/components/ui/column';
@ -32,6 +31,47 @@ const EventLayout = () => {
const event = status?.event;
const meta = useMemo(() => {
if (!status) return null;
const firstAttachment = status.media_attachments && status.media_attachments[0];
return (
<>
{status.spoiler_text && <meta property='og:title' content={status.spoiler_text} />}
{(firstAttachment?.type === 'image' || firstAttachment?.type === 'gifv') && (
<>
<meta property='og:image' content={firstAttachment.preview_url} />
<meta property='og:image:alt' content={firstAttachment.description || ''} />
{firstAttachment.mime_type && (
<meta property='og:type' content={firstAttachment.mime_type} />
)}
{firstAttachment.meta.original && (
<meta
property='og:image:width'
content={firstAttachment.meta.original.width.toString()}
/>
)}
{firstAttachment.meta.original && (
<meta
property='og:image:height'
content={firstAttachment.meta.original.height.toString()}
/>
)}
</>
)}
<meta property='og:url' content={status.url} />
<meta name='author' content={status.account.display_name || status.account.acct} />
<meta property='article:author' content={status.account.url} />
<meta property='article:published_time' content={status.created_at} />
<meta property='fediverse.creator' name='fediverse.creator' content={status.account.acct} />
{status.edited_at && <meta property='article:modified_time' content={status.edited_at} />}
{status.account.local === false && <meta content='noindex, noarchive' name='robots' />}
</>
);
}, [status]);
if (status && !event) {
navigate({
to: '/@{$username}/posts/$statusId',
@ -64,47 +104,6 @@ const EventLayout = () => {
pathname.endsWith(path),
);
const meta = useMemo(() => {
if (!status) return null;
const firstAttachment = status.media_attachments && status.media_attachments[0];
return (
<Helmet>
{status.spoiler_text && <meta property='og:title' content={status.spoiler_text} />}
{(firstAttachment?.type === 'image' || firstAttachment?.type === 'gifv') && (
<>
<meta property='og:image' content={firstAttachment.preview_url} />
<meta property='og:image:alt' content={firstAttachment.description || ''} />
{firstAttachment.mime_type && (
<meta property='og:type' content={firstAttachment.mime_type} />
)}
{firstAttachment.meta.original && (
<meta
property='og:image:width'
content={firstAttachment.meta.original.width.toString()}
/>
)}
{firstAttachment.meta.original && (
<meta
property='og:image:height'
content={firstAttachment.meta.original.height.toString()}
/>
)}
</>
)}
<meta property='og:url' content={status.url} />
<meta name='author' content={status.account.display_name || status.account.acct} />
<meta property='article:author' content={status.account.url} />
<meta property='article:published_time' content={status.created_at} />
<meta property='fediverse.creator' name='fediverse.creator' content={status.account.acct} />
{status.edited_at && <meta property='article:modified_time' content={status.edited_at} />}
{status.account.local === false && <meta content='noindex, noarchive' name='robots' />}
</Helmet>
);
}, [status]);
return (
<>
{meta}

7
packages/nicolium/src/layouts/profile-layout.tsx
View File

@ -1,6 +1,5 @@
import { Navigate, Outlet, useLocation } from '@tanstack/react-router';
import React from 'react';
import { Helmet } from 'react-helmet-async';
import { FormattedMessage } from 'react-intl';
import Column from '@/components/ui/column';
@ -95,11 +94,7 @@ const ProfileLayout: React.FC = () => {
return (
<>
{account?.local === false && (
<Helmet>
<meta content='noindex, noarchive' name='robots' />
</Helmet>
)}
{account?.local === false && <meta content='noindex, noarchive' name='robots' />}
<Layout.Main>
<Column size='lg' label={account ? `@${acct}` : ''} withHeader={false}>
<div className='space-y-4'>