chore: add translations

This commit is contained in:
Tom (plebeius.eth)
2024-05-31 16:51:22 +02:00
parent 6223cb0b24
commit 088a887686
42 changed files with 659 additions and 55 deletions
+5 -4
View File
@@ -58,8 +58,9 @@ const useSubmitStore = create<SubmitState>((set) => ({
}));
export const LinkTypePreviewer = ({ link }: { link: string }) => {
const { t } = useTranslation();
const mediaInfo = getLinkMediaInfo(link);
return isValidURL(link) ? mediaInfo?.type : 'Invalid URL';
return isValidURL(link) ? mediaInfo?.type : t('invalid_url');
};
const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
@@ -215,8 +216,8 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
</td>
</tr>
<tr className={styles.linkType}>
<td>file type</td>
<td>{url ? <LinkTypePreviewer link={url} /> : 'No link provided'}</td>
<td>{t('file_type')}</td>
<td>{url ? <LinkTypePreviewer link={url} /> : t('no_link_provided')}</td>
</tr>
<tr className={styles.spoilerButton}>
<td>{t('options')}</td>
@@ -224,7 +225,7 @@ const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
[
<label>
<input type='checkbox' onChange={(e) => (isInPostView ? setContent.spoiler(e.target.checked) : setSubmitStore({ spoiler: e.target.checked }))} />
Spoiler?
{t('spoiler')}?
</label>
]
</td>
@@ -1,6 +1,7 @@
import { useState } from 'react';
import { createPortal } from 'react-dom';
import { useLocation, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
import { Comment, useBlock } from '@plebbit/plebbit-react-hooks';
import styles from './post-menu-desktop.module.css';
@@ -17,6 +18,7 @@ interface PostMenuDesktopProps {
}
const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuDesktopProps) => {
const { t } = useTranslation();
return (
<div
onClick={() => {
@@ -24,12 +26,13 @@ const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuDesktopProp
onClose();
}}
>
<div className={styles.postMenuItem}>Copy link</div>
<div className={styles.postMenuItem}>{t('copy_link')}</div>
</div>
);
};
const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void }) => {
const { t } = useTranslation();
const [isImageSearchMenuOpen, setIsImageSearchMenuOpen] = useState(false);
const { refs, floatingStyles } = useFloating({
@@ -45,7 +48,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
ref={refs.setReference}
onClick={onClose}
>
Image search »
{t('image_search')} »
{isImageSearchMenuOpen && (
<div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
<a href={`https://lens.google.com/uploadbyurl?url=${url}`} target='_blank' rel='noreferrer'>
@@ -64,6 +67,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void
};
const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuDesktopProps) => {
const { t } = useTranslation();
const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
@@ -80,7 +84,7 @@ const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose
ref={refs.setReference}
onClick={onClose}
>
View on »
{t('view_on')} »
{isClientRedirectMenuOpen && (
<div ref={refs.setFloating} style={floatingStyles} className={styles.dropdownMenu}>
<a href={`https://seedit.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
@@ -96,6 +100,7 @@ const ViewOnButton = ({ cid, isDescription, isRules, subplebbitAddress, onClose
};
const PostMenuDesktop = ({ post }: { post: Comment }) => {
const { t } = useTranslation();
const { cid, isDescription, isRules, link, postCid, subplebbitAddress } = post || {};
const commentMediaInfo = getCommentMediaInfo(post);
const { thumbnail, type, url } = commentMediaInfo || {};
@@ -148,7 +153,7 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
handleClose();
}}
>
{blocked ? 'Unhide' : 'Hide'} {postCid === cid ? 'thread' : 'post'}
{blocked ? (postCid === cid ? t('unhide_thread') : t('unhide_post')) : postCid === cid ? t('hide_thread') : t('hide_post')}
</div>
)}
{link && isValidURL(link) && (type === 'image' || type === 'gif' || thumbnail) && url && <ImageSearchButton url={url} onClose={handleClose} />}
@@ -22,12 +22,12 @@
padding: 0;
margin: 0;
white-space: nowrap;
outline: none;
}
.postMenu a {
text-decoration: none;
color: inherit;
outline: none;
}
.postMenuItem {
@@ -1,6 +1,7 @@
import { useState } from 'react';
import { createPortal } from 'react-dom';
import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
import { useTranslation } from 'react-i18next';
import { Comment } from '@plebbit/plebbit-react-hooks';
import styles from './post-menu-mobile.module.css';
import { getCommentMediaInfo } from '../../../../lib/utils/media-utils';
@@ -15,6 +16,7 @@ interface PostMenuMobileProps {
}
const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps) => {
const { t } = useTranslation();
return (
<div
onClick={() => {
@@ -22,37 +24,38 @@ const CopyLinkButton = ({ cid, subplebbitAddress, onClose }: PostMenuMobileProps
onClose();
}}
>
<div className={styles.postMenuItem}>Copy link</div>
<div className={styles.postMenuItem}>{t('copy_link')}</div>
</div>
);
};
const ImageSearchButtons = ({ url, onClose }: { url: string; onClose: () => void }) => {
const { t } = useTranslation();
return (
<div onClick={onClose}>
<a href={`https://lens.google.com/uploadbyurl?url=${url}`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>Search image on Google</div>
<div className={styles.postMenuItem}>{t('search_image_on_google')}</div>
</a>
<a href={`https://www.yandex.com/images/search?img_url=${url}&rpt=imageview`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>Search image on Yandex</div>
<div className={styles.postMenuItem}>{t('search_image_on_yandex')}</div>
</a>
<a href={`https://saucenao.com/search.php?url=${url}`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>Search image on SauceNAO</div>
<div className={styles.postMenuItem}>{t('search_image_on_saucenao')}</div>
</a>
</div>
);
};
const ViewOnButtons = ({ cid, isDescription, isRules, subplebbitAddress, onClose }: PostMenuMobileProps) => {
const { t } = useTranslation();
const viewOnOtherClientLink = `p/${subplebbitAddress}${isDescription || isRules ? '' : `/c/${cid}`}`;
return (
<div onClick={onClose}>
<a href={`https://seedit.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>View on Seedit</div>
<div className={styles.postMenuItem}>{t('view_on_client', { client: 'Seedit' })}</div>
</a>
<a href={`https://plebones.netlify.app/#/${viewOnOtherClientLink}`} target='_blank' rel='noreferrer'>
<div className={styles.postMenuItem}>View on Plebones</div>
<div className={styles.postMenuItem}>{t('view_on_client', { client: 'Plebones' })}</div>
</a>
</div>
);
+2 -2
View File
@@ -127,14 +127,14 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
<div className={styles.footer}>
{url && (
<>
Embed: <LinkTypePreviewer link={url} />{' '}
{t('file_type')}: <LinkTypePreviewer link={url} />{' '}
</>
)}
<span className={styles.spoilerButton}>
[
<label>
<input type='checkbox' onChange={(e) => setContent.spoiler(e.target.checked)} />
Spoiler?
{t('spoiler')}?
</label>
]
</span>
@@ -107,7 +107,7 @@ const InterfaceSettings = () => {
return (
<div className={styles.interfaceSettings}>
<div className={styles.version}>
Version:{' '}
{t('version')}:{' '}
<a href={`https://github.com/plebbit/plebchan/releases/tag/v${packageJson.version}`} target='_blank' rel='noopener noreferrer'>
{packageJson.version}
</a>
@@ -44,7 +44,7 @@ const SettingsModal = () => {
<div className={`${styles.setting} ${styles.category}`}>
<label onClick={() => setShowInterfaceSettings(!showInterfaceSettings)}>
<span className={showInterfaceSettings ? styles.hideButton : styles.showButton} />
Interface
{t('interface')}
</label>
</div>
{showInterfaceSettings && <InterfaceSettings />}