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

pl-fe: only use logo if provided

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-09-12 11:16:53 +02:00
parent 6c208a5b91
commit d62e11a1dc
7 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/pl-fe/src/components/site-error-boundary.tsx
View File

@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
import { NODE_ENV } from 'pl-fe/build-config';
import { HStack, Text, Stack, Textarea } from 'pl-fe/components/ui';
import { usePlFeConfig } from 'pl-fe/hooks';
import { useLogo, usePlFeConfig } from 'pl-fe/hooks';
import { captureSentryException } from 'pl-fe/sentry';
import KVStore from 'pl-fe/storage/kv-store';
import sourceCode from 'pl-fe/utils/code';
@ -20,6 +20,7 @@ interface ISiteErrorBoundary {
/** Application-level error boundary. Fills the whole screen. */
const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
const { links, sentryDsn } = usePlFeConfig();
const logoSrc = useLogo();
const textarea = useRef<HTMLTextAreaElement>(null);
const [error, setError] = useState<unknown>();
@ -76,11 +77,13 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
const fallback = (
<div className='flex h-screen flex-col bg-white pb-12 pt-16 black:bg-black dark:bg-primary-900'>
<main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
<div className='flex shrink-0 justify-center'>
<a href='/' className='inline-flex'>
<SiteLogo alt='Logo' className='h-12 w-auto cursor-pointer' />
</a>
</div>
{logoSrc && (
<div className='flex shrink-0 justify-center'>
<a href='/' className='inline-flex'>
<SiteLogo alt='Logo' className='h-12 w-auto cursor-pointer' />
</a>
</div>
)}
<div className='py-8'>
<div className='mx-auto max-w-xl space-y-2 text-center'>

25
packages/pl-fe/src/components/site-logo.tsx
View File

@ -1,7 +1,7 @@
import clsx from 'clsx';
import React from 'react';
import { usePlFeConfig, useSettings, useTheme } from 'pl-fe/hooks';
import { useLogo } from 'pl-fe/hooks';
interface ISiteLogo extends React.ComponentProps<'img'> {
/** Extra class names for the <img> element. */
@ -12,32 +12,15 @@ interface ISiteLogo extends React.ComponentProps<'img'> {
/** Display the most appropriate site logo based on the theme and configuration. */
const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
const { logo, logoDarkMode } = usePlFeConfig();
const { demo } = useSettings();
const logoSrc = useLogo();
let darkMode = ['dark', 'black'].includes(useTheme());
if (theme === 'dark') darkMode = true;
/** pl-fe logo. */
const plFeLogo = darkMode
? require('pl-fe/assets/images/soapbox-logo-white.svg')
: require('pl-fe/assets/images/soapbox-logo.svg');
// Use the right logo if provided, then use fallbacks.
const getSrc = () => {
// In demo mode, use the pl-fe logo.
if (demo) return plFeLogo;
return (darkMode && logoDarkMode)
? logoDarkMode
: logo || logoDarkMode || plFeLogo;
};
if (!logoSrc) return null;
return (
// eslint-disable-next-line jsx-a11y/alt-text
<img
className={clsx('object-contain', className)}
src={getSrc()}
src={logoSrc}
{...rest}
/>
);