commit 0615274a9e0996cd73a5f9bb170fc94790bc3f4a
parent ee8f2deeb37b97ff66effe9c9964fa82a6c864d5
Author: MTRNord <mtrnord1@gmail.com>
Date: Mon, 31 Jan 2022 02:40:44 +0100
Add more strings
Diffstat:
9 files changed, 123 insertions(+), 65 deletions(-)
diff --git a/components/submit_page/main.tsx b/components/submit_page/main.tsx
@@ -12,6 +12,7 @@ import { ImageEventContent, ThumbnailData } from "../../helpers/event_types";
import { toast } from "react-toastify";
// @ts-ignore This has no types
import extractPngChunks from "png-chunks-extract";
+import { i18n } from "next-i18next";
type ThumbnailableElement = HTMLImageElement | HTMLVideoElement;
type ThumbnailTransmissionData = {
@@ -150,7 +151,7 @@ class MainSubmissionForm extends PureComponent<Props, State> {
if (this.context.client.isGuest) {
- toast.error(() => <div><h2 className="text-xl text-white">Error</h2><br />You are not logged in!</div>, {
+ toast.error(() => <div><h2 className="text-xl text-white">{i18n?.t("Error")}</h2><br />{i18n?.t("You are not logged in!")}</div>, {
autoClose: false
});
this.setState({ submit_in_process: false });
@@ -161,7 +162,7 @@ class MainSubmissionForm extends PureComponent<Props, State> {
for (const index of range) {
const valid = this.state[`${index}_valid`];
if (!valid) {
- toast.error(() => <div><h2 className="text-xl text-white">Error</h2><br />You did not fill the required fields for all images. Please fix this!</div>, {
+ toast.error(() => <div><h2 className="text-xl text-white">{i18n?.t("Error")}</h2><br />{i18n?.t("You did not fill the required fields for all images. Please fix this!")}</div>, {
autoClose: false
});
this.setState({ submit_in_process: false });
@@ -184,7 +185,7 @@ class MainSubmissionForm extends PureComponent<Props, State> {
const file = this.props.files[index];
if (!this.context.client.profileRoomId) {
- toast.error(() => <div><h2 className="text-xl text-white">Error</h2><br />Unable to find your profile Room. Please log in again!</div>, {
+ toast.error(() => <div><h2 className="text-xl text-white">{i18n?.t("Error")}</h2><br />{i18n?.t("Unable to find your profile Room. Please log in again!")}</div>, {
autoClose: false
});
this.setState({ submit_in_process: false });
@@ -450,7 +451,7 @@ class MainSubmissionForm extends PureComponent<Props, State> {
return (
<main className="max-h-full max-w-full lg:pt-20 pt-56">
<div className="mx-auto w-full">
- <div className="loader">Loading...</div>
+ <div className="loader">{i18n?.t('Loading')}...</div>
</div>
</main>
);
@@ -464,30 +465,30 @@ class MainSubmissionForm extends PureComponent<Props, State> {
<div className="flex flex-row w-full mb-4">
<form className="flex flex-col w-full">
<label className="inner-flex flex-col">
- <span className="text-xl text-gray-900 dark:text-gray-200 font-bold">Image Title</span>
- <input required name="title" value={this.state[`${this.state.currentFileIndex}_title`] || ""} type="text" placeholder="Set an image title" className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)} />
+ <span className="text-xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t('Image Title')}</span>
+ <input required name="title" value={this.state[`${this.state.currentFileIndex}_title`] || ""} type="text" placeholder={i18n?.t("Set an image title")} className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)} />
</label>
<span className="h-4"></span>
<label className="inner-flex flex-col">
- <span className="text-xl text-gray-900 dark:text-gray-200 font-bold">Description</span>
- <textarea name="description" value={this.state[`${this.state.currentFileIndex}_description`] || ""} placeholder="Description Text of the current image" className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)} />
+ <span className="text-xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("Description")}</span>
+ <textarea name="description" value={this.state[`${this.state.currentFileIndex}_description`] || ""} placeholder={i18n?.t("Description Text of the current image")} className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)} />
</label>
<span className="h-4"></span>
<label className="inner-flex flex-col">
- <span className="text-xl text-gray-900 dark:text-gray-200 font-bold">Image Tags</span>
- <input name="tags" type="text" value={this.state[`${this.state.currentFileIndex}_tags`] || ""} placeholder="Enter tags (Separate with a comma)" className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)} />
+ <span className="text-xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("Image Tags")}</span>
+ <input name="tags" type="text" value={this.state[`${this.state.currentFileIndex}_tags`] || ""} placeholder={i18n?.t("Enter tags (Separate with a comma)")} className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)} />
</label>
<span className="h-4"></span>
<label className="inner-flex flex-col">
- <span className="text-xl text-gray-900 dark:text-gray-200 font-bold">License</span>
- <select defaultValue="" required name="license" value={this.state[`${this.state.currentFileIndex}_license`] || ""} placeholder="Enter tags (Confirm by pressing enter)" className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)}>
- <option value="" disabled>Select an Creative Commons License</option>
+ <span className="text-xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("License")}</span>
+ <select defaultValue="" required name="license" value={this.state[`${this.state.currentFileIndex}_license`] || ""} className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)}>
+ <option value="" disabled>{i18n?.t("Select an Creative Commons License")}</option>
<option value="cc-by-4.0">Attribution 4.0 International (CC BY 4.0)</option>
<option value="cc-by-sa-4.0">Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</option>
<option value="cc-by-nc-4.0">Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)</option>
@@ -501,11 +502,11 @@ class MainSubmissionForm extends PureComponent<Props, State> {
<span className="h-4"></span>
<label className="inner-flex flex-col">
- <span className="text-xl text-gray-900 dark:text-gray-200 font-bold">Mature/NSFW Content?</span>
- <select defaultValue="" required name="nsfw" value={this.state[`${this.state.currentFileIndex}_nsfw`] || ""} placeholder="Enter tags (Confirm by pressing enter)" className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)}>
- <option value="" disabled>Select Yes or No</option>
- <option value="no">No</option>
- <option value="yes">Yes</option>
+ <span className="text-xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("Mature/NSFW Content?")}</span>
+ <select defaultValue="" required name="nsfw" value={this.state[`${this.state.currentFileIndex}_nsfw`] || ""} className="min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)}>
+ <option value="" disabled>{i18n?.t("Select Yes or No")}</option>
+ <option value="no">{i18n?.t("No")}</option>
+ <option value="yes">{i18n?.t("Yes")}</option>
</select>
</label>
</form>
@@ -513,11 +514,11 @@ class MainSubmissionForm extends PureComponent<Props, State> {
<div className="flex justify-between w-full flex-row-reverse">
{
this.state.hasSubmit ?
- <button className="text-base text-gray-900 dark:text-gray-200" onClick={this.handleSubmit.bind(this)}>Submit Posts</button>
+ <button className="text-base text-gray-900 dark:text-gray-200" onClick={this.handleSubmit.bind(this)}>{i18n?.t("Submit Posts")}</button>
:
- <button className="text-base text-gray-900 dark:text-gray-200" onClick={this.onNext.bind(this)}>Next Image</button>
+ <button className="text-base text-gray-900 dark:text-gray-200" onClick={this.onNext.bind(this)}>{i18n?.t("Next Image")}</button>
}
- {this.state.hasBack ? <button className="text-base text-gray-900 dark:text-gray-200" onClick={this.onPrev.bind(this)}>Prev Image</button> : undefined}
+ {this.state.hasBack ? <button className="text-base text-gray-900 dark:text-gray-200" onClick={this.onPrev.bind(this)}>{i18n?.t("Previous Image")}</button> : undefined}
</div>
</section>
{/* Warning for further readers. This css is easy to explode. Reasons are unknown. Dont touch it unless you know the fix! */}
diff --git a/components/submit_page/start.tsx b/components/submit_page/start.tsx
@@ -1,6 +1,7 @@
import { PureComponent } from "react";
import Dropzone, { FileRejection } from "react-dropzone";
import PropTypes from 'prop-types';
+import { i18n } from "next-i18next";
export interface DropCallbacks {
onDrop: (files: File[]) => void;
@@ -24,7 +25,7 @@ export class StartSubmit extends PureComponent<Props> {
<section className="flex flex-col">
<div className="dark:bg-[#fefefe]/[.25] bg-[#14181E]/[.25] min-h-[11.5rem] min-w-[39.5rem] flex-[1] flex flex-col items-center justify-center p-5 border-2 rounded-sm border-[#eeeeee] border-dashed outline-none hover:border-[#2196f3] duration-[24ms] transition" {...getRootProps()}>
<input {...getInputProps()} />
- <p className="text-base text-gray-900 dark:text-gray-200">Drag 'n' drop some images here, or click to select images</p>
+ <p className="text-base text-gray-900 dark:text-gray-200">{i18n?.t("Drag 'n' drop some images here, or click to select images")}</p>
</div>
</section>
)}
diff --git a/i18next-parser.config.js b/i18next-parser.config.js
@@ -2,5 +2,7 @@ module.exports = {
locales: ['en'],
defaultNamespace: 'common',
output: 'public/locales/$LOCALE/$NAMESPACE.json',
- indentation: 4
+ indentation: 4,
+ namespaceSeparator: false,
+ keySeparator: false
}
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -9,7 +9,7 @@ import { GetServerSideProps, InferGetServerSidePropsType, } from 'next';
import { get_data } from './api/directory';
import { constMatrixArtServer } from '../helpers/matrix_client';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { WithTranslation } from 'next-i18next';
+import { i18n, WithTranslation } from 'next-i18next';
type Props = InferGetServerSidePropsType<typeof getServerSideProps> & WithTranslation & {
};
@@ -97,7 +97,7 @@ class Home extends PureComponent<Props, State>{
return (
<div className='min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
- <title key="title">Matrix Art | Home</title>
+ <title key="title">Matrix Art | {i18n?.t("Home")}</title>
<meta property="og:title" content="Matrix Art | Home" key="og-title" />
<meta property="og:type" content="website" key="og-type" />
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(metadata) }} />
@@ -107,7 +107,7 @@ class Home extends PureComponent<Props, State>{
<main className='mb-auto lg:pt-20 pt-52 z-0'>
<div className='z-[100] sticky lg:top-20 top-[12.5rem] bg-[#fefefe]/[.95] dark:bg-[#12161D]'>
<div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
- <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>Home</h1>
+ <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Home")}</h1>
</div>
</div>
<div className='m-10'>
diff --git a/pages/login.tsx b/pages/login.tsx
@@ -1,4 +1,5 @@
import { GetServerSideProps } from "next";
+import { i18n } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Head from "next/head";
import Link from "next/link";
@@ -104,7 +105,7 @@ class Login extends PureComponent<Props, State> {
<>
<div className='min-h-full bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
- <title key="title">Matrix Art | Login</title>
+ <title key="title">Matrix Art | {i18n?.t("Login")}</title>
<meta property="og:title" content="Matrix Art | Login" key="og-title" />
<meta property="og:type" content="website" key="og-type" />
</Head>
@@ -112,11 +113,11 @@ class Login extends PureComponent<Props, State> {
<main className="min-h-full lg:pt-20 pt-56">
<div className='z-[100] sticky lg:top-20 top-56 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
<div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
- <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>Log In</h1>
+ <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Log In")}</h1>
</div>
</div>
<div className="mx-auto w-full">
- <div className="loader">Loading...</div>
+ <div className="loader">{i18n?.t("Loading")}...</div>
</div>
</main>
<Footer></Footer>
@@ -129,7 +130,7 @@ class Login extends PureComponent<Props, State> {
<>
<div className='min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
- <title key="title">Matrix Art | Login</title>
+ <title key="title">Matrix Art | {i18n?.t("Login")}</title>
<meta property="og:title" content="Matrix Art | Login" key="og-title" />
<meta property="og:type" content="website" key="og-type" />
</Head>
@@ -138,7 +139,7 @@ class Login extends PureComponent<Props, State> {
<main className='mb-auto lg:pt-20 pt-56'>
<div className='z-[100] sticky lg:top-20 top-56 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
<div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
- <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>Log In</h1>
+ <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Log In")}</h1>
</div>
</div>
<div className="flex items-center justify-center m-10">
@@ -147,9 +148,9 @@ class Login extends PureComponent<Props, State> {
<div className="mt-2 flex justify-between items-center">
<label className="inline-flex items-center">
<input className="cursor-pointer h-4 w-4" type="checkbox" name="showServerField" checked={showServerField} onChange={this.handleInputChange} />
- <span className="ml-2 text-gray-700 dark:text-gray-400">Use custom Server</span>
+ <span className="ml-2 text-gray-700 dark:text-gray-400">{i18n?.t("Use custom Server")}</span>
</label>
- <Link href="/resetPassword"><a className="text-gray-900 dark:text-gray-200 hover:text-teal-400">Forgot Password</a></Link>
+ <Link href="/resetPassword"><a className="text-gray-900 dark:text-gray-200 hover:text-teal-400">{i18n?.t("Forgot Password")}</a></Link>
</div>
</div>
@@ -158,22 +159,22 @@ class Login extends PureComponent<Props, State> {
opacity: showServerField ? 1 : 0,
display: showServerField ? 'block' : 'none'
}} id="homeserverField">
- <span className="text-gray-900 dark:text-gray-200 visually-hidden">Homeserver:</span>
+ <span className="text-gray-900 dark:text-gray-200 visually-hidden">{i18n?.t("Homeserver:")}</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text">
- <input placeholder="Homeserver" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-9000" type="text" name="serverUrl" value={serverUrl} onChange={this.handleInputChange} />
+ <input placeholder={i18n?.t("Homeserver")} className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-9000" type="text" name="serverUrl" value={serverUrl} onChange={this.handleInputChange} />
</div>
</label>
<label className="block">
- <span className="text-gray-900 dark:text-gray-200 visually-hidden">Username:</span>
+ <span className="text-gray-900 dark:text-gray-200 visually-hidden">{i18n?.t("Username:")}</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300">
- <input placeholder="Username" autoComplete="username" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="mxid" value={mxid} onChange={this.handleInputChange} />
+ <input placeholder={i18n?.t("Username")} autoComplete="username" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="mxid" value={mxid} onChange={this.handleInputChange} />
</div>
</label>
<label className="block">
- <span className="text-gray-900 dark:text-gray-200 visually-hidden">Password:</span>
+ <span className="text-gray-900 dark:text-gray-200 visually-hidden">{i18n?.t("Password:")}</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300">
- <input placeholder="Password" autoComplete="current-password" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="password" name="password" value={password} onChange={this.handleInputChange} />
+ <input placeholder={i18n?.t("Password")} autoComplete="current-password" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="password" name="password" value={password} onChange={this.handleInputChange} />
</div>
</label>
@@ -181,7 +182,7 @@ class Login extends PureComponent<Props, State> {
<div className="mt-2 flex justify-between items-center">
<label className="inline-flex items-center">
<input className="cursor-pointer h-4 w-4" type="checkbox" name="generateProfile" checked={generateProfile} onChange={this.handleInputChange} />
- <span className="ml-2 text-gray-700 dark:text-gray-400">Create a full profile? (Cant be done later currently. This is WIP)</span>
+ <span className="ml-2 text-gray-700 dark:text-gray-400">{i18n?.t("Create a full profile? (Cant be done later currently. This is WIP)")}</span>
</label>
</div>
</div>
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -19,6 +19,7 @@ import Footer from '../../components/Footer';
import { Blurhash } from 'react-blurhash';
import User from '../../helpers/db/Users';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { i18n } from 'next-i18next';
type Props = InferGetServerSidePropsType<typeof getServerSideProps> & {
router: NextRouter;
@@ -170,7 +171,7 @@ class Post extends PureComponent<Props, State> {
return (
<div className='min-h-full bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]'>
<Head>
- <title key="title">Matrix Art | Post not Found</title>
+ <title key="title">Matrix Art | {i18n?.t("Post not Found")}</title>
<meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
<meta name="twitter:card" content="summary_large_image" key="og-twitter" />
<meta name="twitter:title" content="Matrix Art | Post not Found" key="og-twitter-title" />
@@ -179,7 +180,7 @@ class Post extends PureComponent<Props, State> {
<Header></Header>
<main className='w-full lg:pt-20 pt-52 z-0'>
<div className="m-0 w-full">
- <div className="loader">Loading...</div>
+ <div className="loader">{i18n?.t("Loading")}...</div>
</div>
</main>
</div>
@@ -190,7 +191,7 @@ class Post extends PureComponent<Props, State> {
return (
<div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
- <title key="title">Matrix Art | Post not Found</title>
+ <title key="title">Matrix Art | {i18n?.t("Post not Found")}</title>
<meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
<meta name="twitter:card" content="summary_large_image" key="og-twitter" />
<meta name="twitter:title" content="Matrix Art | Post not Found" key="og-twitter-title" />
@@ -198,7 +199,7 @@ class Post extends PureComponent<Props, State> {
</Head>
<Header></Header>
<main className='mb-auto lg:pt-20 pt-56 z-0 flex items-center justify-center'>
- <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">The Post you wanted does not exist!</h1>
+ <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("The Post you wanted does not exist!")}</h1>
</main>
<Footer></Footer>
</div>
@@ -238,7 +239,7 @@ class Post extends PureComponent<Props, State> {
{avatar_url ? <span className="block object-cover rounded-full mr-4"> <img className="object-cover rounded-full" src={this.context.client.downloadLink(avatar_url)!} height="24" width="24" alt={displayname} title={displayname} /> </span> : undefined}
<Link href={"/profile/" + encodeURIComponent(image_event.sender)} passHref><span className='hover:text-teal-400'>{displayname}</span></Link>
</h3>
- {isImageEvent(image_event) ? (image_event.content['matrixart.license'] ? <h3 className='cursor-pointer mt-0 mb-4 text-l text-gray-600 dark:text-gray-400 font-normal'>License: <a href={this.getLicenseUrl(image_event.content['matrixart.license'])} title={this.getLicenseName(image_event.content['matrixart.license'])}>{this.getLicenseName(image_event.content['matrixart.license'])}</a></h3> : undefined) : undefined}
+ {isImageEvent(image_event) ? (image_event.content['matrixart.license'] ? <h3 className='cursor-pointer mt-0 mb-4 text-l text-gray-600 dark:text-gray-400 font-normal'>{i18n?.t("License: {{license_link}}", { license_link: <a href={this.getLicenseUrl(image_event.content['matrixart.license'])} title={this.getLicenseName(image_event.content['matrixart.license'])}>{this.getLicenseName(image_event.content['matrixart.license'])}</a> })}</h3> : undefined) : undefined}
{isImageGalleryEvent(image_event) ? this.renderImageGalleryTags(image_event) : (isImageEvent(image_event) ? this.renderSingleImageTags(image_event) : <div key={(image_event as MatrixEventBase).event_id + "tags"}></div>)}
</div>
</div>
@@ -254,7 +255,7 @@ class Post extends PureComponent<Props, State> {
return (
<div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
- <title key="title">Matrix Art | Post not Found</title>
+ <title key="title">Matrix Art | {i18n?.t("Post not Found")}</title>
<meta property="og:title" content="Matrix Art | Post not Found" key="og-title" />
<meta name="twitter:card" content="summary_large_image" key="og-twitter" />
<meta name="twitter:title" content="Matrix Art | Post not Found" key="og-twitter-title" />
@@ -262,7 +263,7 @@ class Post extends PureComponent<Props, State> {
</Head>
<Header></Header>
<main className='mb-auto lg:pt-20 pt-56 z-0 flex items-center justify-center'>
- <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">The Post you wanted does not exist!</h1>
+ <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("The Post you wanted does not exist!")}</h1>
</main>
<Footer></Footer>
</div>
diff --git a/pages/profile/[userid].tsx b/pages/profile/[userid].tsx
@@ -1,4 +1,5 @@
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import { i18n } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Head from "next/head";
import Link from "next/link";
@@ -134,7 +135,7 @@ class Profile extends PureComponent<Props, State> {
return (
<div className="min-h-full flex flex-col justify-between bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
<Head>
- <title key="title">Matrix Art | User not Found</title>
+ <title key="title">Matrix Art | {i18n?.t("User not Found")}</title>
<meta property="og:title" content="Matrix Art | User not Found" key="og-title" />
<meta name="twitter:card" content="summary_large_image" key="og-twitter" />
<meta name="twitter:title" content="Matrix Art | User not Found" key="og-twitter-title" />
@@ -142,7 +143,7 @@ class Profile extends PureComponent<Props, State> {
</Head>
<Header></Header>
<main className='mb-auto lg:pt-20 pt-56 z-0 flex items-center justify-center'>
- <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">The User you wanted does not exist!</h1>
+ <h1 className="text-6xl text-gray-900 dark:text-gray-200 font-bold">{i18n?.t("The User you wanted does not exist!")}</h1>
</main>
</div>
);
@@ -245,7 +246,7 @@ class Profile extends PureComponent<Props, State> {
</div>
</span>
<div className="ml-5 flex flex-col justify-center">
- <h1 className="font-extrabold text-3xl lg:text-5xl text-gray-200 mt-[-1rem] flex items-center gap-1">{editingUsername ? <input onChange={this.handleUsernameInputChange.bind(this)} className="placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" type="text" placeholder="Set a displayname" value={displayname}></input> : <span>{displayname}</span>}{isLoggedInUser ? <EditIcon className="cursor-pointer" onClick={this.onClickEditUsername.bind(this)} /> : undefined}</h1>
+ <h1 className="font-extrabold text-3xl lg:text-5xl text-gray-200 mt-[-1rem] flex items-center gap-1">{editingUsername ? <input onChange={this.handleUsernameInputChange.bind(this)} className="placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" type="text" placeholder={i18n?.t("Set a displayname")} value={displayname}></input> : <span>{displayname}</span>}{isLoggedInUser ? <EditIcon className="cursor-pointer" onClick={this.onClickEditUsername.bind(this)} /> : undefined}</h1>
</div>
</div>
</div>
@@ -254,15 +255,15 @@ class Profile extends PureComponent<Props, State> {
<nav className="w-full h-14 box-border flex items-center bg-[#f8f8f8] dark:bg-[#06070D] overflow-scroll lg:overflow-hidden">
<span id="magic-spacer"></span>
<div className="flex items-center w-full h-full overflow-hidden whitespace-nowrap box-border min-w-fit">
- <Link href={`/profile/${encodeURIComponent(mxid)}`} passHref><a className={`text-base font-bold text-gray-900 dark:text-gray-200 capitalize ml-2 px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Home</a></Link>
- <Link href={`/profile/${encodeURIComponent(mxid)}/gallery`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>Gallery</a></Link>
- <Link href={`/profile/${encodeURIComponent(mxid)}/about`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>About</a></Link>
+ <Link href={`/profile/${encodeURIComponent(mxid)}`} passHref><a className={`text-base font-bold text-gray-900 dark:text-gray-200 capitalize ml-2 px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>{i18n?.t("Home")}</a></Link>
+ <Link href={`/profile/${encodeURIComponent(mxid)}/gallery`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>{i18n?.t("Gallery")}</a></Link>
+ <Link href={`/profile/${encodeURIComponent(mxid)}/about`} passHref><a className={`text-base font-bold text-gray-900 dark:text-[#b1b1b9] capitalize px-8 relative box-border inline-flex grow-0 shrink-[1] basis-auto items-center h-full decoration-[none]`}>{i18n?.t("About")}</a></Link>
</div>
<div className="pr-4">
{/*TODO Share menu here*/}
</div>
<div>
- <button id="reflection" className="min-w-[7.75rem] h-14 min-h-[2.5rem] box-border m-0 shadow-none rounded-none relative overflow-hidden z-0 border-none outline-none px-5 flex items-center justify-center cursor-pointer bg-teal-400 text-gray-900 text-sm font-bold">Follow</button>
+ <button id="reflection" className="min-w-[7.75rem] h-14 min-h-[2.5rem] box-border m-0 shadow-none rounded-none relative overflow-hidden z-0 border-none outline-none px-5 flex items-center justify-center cursor-pointer bg-teal-400 text-gray-900 text-sm font-bold">{i18n?.t("Follow")}</button>
</div>
</nav>
</div>
@@ -274,7 +275,7 @@ class Profile extends PureComponent<Props, State> {
<div>
<section className="pb-4 block">
<div className="w-full flex items-center mt-8 mb-4">
- <h2 className="font-bold text-lg tracking-[.3px] leading-[1.22] text-gray-900 dark:text-gray-200">Gallery</h2>
+ <h2 className="font-bold text-lg tracking-[.3px] leading-[1.22] text-gray-900 dark:text-gray-200">{i18n?.t("Gallery")}</h2>
<div className="ml-4 flex flex-[1] items-center relative justify-end">
<Link href={`/profile/${encodeURIComponent(mxid)}/gallery`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-6 uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>See All</a></Link>
</div>
@@ -291,9 +292,9 @@ class Profile extends PureComponent<Props, State> {
<div>
<section className="pb-4 block">
<div className="w-full flex items-center mt-8 mb-4">
- <h2 className="font-bold text-gray-900 dark:text-gray-200 text-lg tracking--[.3px] leading-[1.22] max-w-[90%] mr-auto overflow-hidden text-ellipsis whitespace-nowrap">{`About ${displayname}`}</h2>
+ <h2 className="font-bold text-gray-900 dark:text-gray-200 text-lg tracking--[.3px] leading-[1.22] max-w-[90%] mr-auto overflow-hidden text-ellipsis whitespace-nowrap">{i18n?.t("About {{displayname}}", { displayname: displayname })}</h2>
<div className="ml-4 flex flex-[1] items-center relative justify-end">
- <Link href={`/profile/${encodeURIComponent(mxid)}/about`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-6 uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>More</a></Link>
+ <Link href={`/profile/${encodeURIComponent(mxid)}/about`} passHref><a className={`font-regular text-xs tracking-[1.3px] leading-[1.22] ml-6 uppercase whitespace-nowrap text-gray-900 dark:text-gray-200 hover:opacity-100 opacity-0 transition-opacity duration-[25ms]`}>{i18n?.t("More")}</a></Link>
</div>
</div>
<div className="bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95] pt-7 w-ull flex flex-col box-border tracking--[.3px] text-gray-900 dark:text-gray-200">
@@ -304,19 +305,19 @@ class Profile extends PureComponent<Props, State> {
</div> : undefined}
{profile_event?.content["matrixart.profile.pronouns"] ? <div className="px-8">
<div className="mb-8 flex items-start justify-between flex-wrap w-full">
- <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">Pronouns</div>
+ <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">{i18n?.t("Pronouns")}</div>
<div className="w-full justify-items-end">{profile_event ? profile_event.content["matrixart.profile.pronouns"] : undefined}</div>
</div>
</div> : undefined}
{profile_event?.content["matrixart.profile.links"] ? <div className="px-8">
<div className="mb-8 flex items-start justify-between flex-wrap w-full">
- <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">Follow me on</div>
+ <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">{i18n?.t("Follow me on")}</div>
<div className="w-full max-w-[21.5rem] grid gap-4 auto-cols-[2.75rem] auto-rows-[2.75rem] grid-flow-col justify-items-end">{/*TODO Social Icons */}</div>
</div>
</div> : undefined}
{profile_event?.content["matrixart.profile.biography"] ? <div className="px-8">
<div className="mb-8 font-regular text-base leading-[1.22] whitespace-pre-wrap">
- <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">My Bio</div>
+ <div className="h-11 mb-0 text-xs flex items-center uppercase text-gray-700 dark:text-gray-400">{i18n?.t("My Bio")}</div>
<div className="text-base font-regular">{profile_event ? profile_event.content["matrixart.profile.biography"] : undefined}</div>
</div>
</div> : undefined}
diff --git a/pages/submit.tsx b/pages/submit.tsx
@@ -1,4 +1,5 @@
import { GetServerSideProps } from "next";
+import { i18n } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Head from "next/head";
import { NextRouter, withRouter } from "next/router";
@@ -85,7 +86,7 @@ class Submit extends PureComponent<Props, State> implements DropCallbacks {
}
componentDidUpdate(prevProps: Props, prevState: State) {
if (this.state.error && this.state.error !== prevState.error) {
- toast(() => <div><h2 className="text-xl text-white">Error</h2><br />{this.state.error}</div>, {
+ toast(() => <div><h2 className="text-xl text-white">{i18n?.t("Error")}</h2><br />{this.state.error}</div>, {
autoClose: false
});
}
@@ -95,7 +96,7 @@ class Submit extends PureComponent<Props, State> implements DropCallbacks {
return (
<div className='min-h-full flex flex-col bg-[#f8f8f8] dark:bg-[#06070D]'>
<Head>
- <title key="title">Matrix Art | Submit Post</title>
+ <title key="title">Matrix Art | {i18n?.t("Submit Post")}</title>
<meta property="og:title" content="Matrix Art | Submit Post" key="og-title" />
<meta name="twitter:card" content="summary_large_image" key="og-twitter" />
<meta name="twitter:title" content="Matrix Art | Submit Post" key="og-twitter-title" />
@@ -104,7 +105,7 @@ class Submit extends PureComponent<Props, State> implements DropCallbacks {
<Header></Header>
<div className='z-[100] sticky lg:top-[4.9rem] top-[12.5rem] bg-[#fefefe]/[.95] dark:bg-[#12161D]'>
<div className='h-16 px-10 w-full relative grid grid-cols-[1fr_auto_1fr] items-center' id='section-grid'>
- <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>Submit Image</h1>
+ <h1 className='text-xl text-gray-900 dark:text-gray-200 font-bold'>{i18n?.t("Submit Image")}</h1>
</div>
</div>
{this.renderStage()}
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -8,5 +8,54 @@
"Profile": "Profile",
"Logout": "Logout",
"Submit": "Submit",
- "Setup Account": "Setup Account"
-}
+ "Setup Account": "Setup Account",
+ "Error": "Error",
+ "You are not logged in!": "You are not logged in!",
+ "You did not fill the required fields for all images. Please fix this!": "You did not fill the required fields for all images. Please fix this!",
+ "Unable to find your profile Room. Please log in again!": "Unable to find your profile Room. Please log in again!",
+ "Loading": "Loading",
+ "Image Title": "Image Title",
+ "Set an image title": "Set an image title",
+ "Description": "Description",
+ "Description Text of the current image": "Description Text of the current image",
+ "Image Tags": "Image Tags",
+ "Enter tags (Separate with a comma)": "Enter tags (Separate with a comma)",
+ "License": "License",
+ "Select an Creative Commons License": "Select an Creative Commons License",
+ "Mature/NSFW Content?": "Mature/NSFW Content?",
+ "Select Yes or No": "Select Yes or No",
+ "No": "No",
+ "Yes": "Yes",
+ "Submit Posts": "Submit Posts",
+ "Next Image": "Next Image",
+ "Previous Image": "Previous Image",
+ "Drag 'n' drop some images here, or click to select images": "Drag 'n' drop some images here, or click to select images",
+ "Home": "Home",
+ "Login": "Login",
+ "Log In": "Log In",
+ "Use custom Server": "Use custom Server",
+ "Forgot Password": "Forgot Password",
+ "Homeserver:": "Homeserver:",
+ "Homeserver": "Homeserver",
+ "Username:": "Username:",
+ "Username": "Username",
+ "Password:": "Password:",
+ "Password": "Password",
+ "Create a full profile? (Cant be done later currently. This is WIP)": "Create a full profile? (Cant be done later currently. This is WIP)",
+ "Post not Found": "Post not Found",
+ "The Post you wanted does not exist!": "The Post you wanted does not exist!",
+ "License: {{license_link}}": "License: {{license_link}}",
+ "User not Found": "User not Found",
+ "The User you wanted does not exist!": "The User you wanted does not exist!",
+ "Set a displayname": "Set a displayname",
+ "Gallery": "Gallery",
+ "About": "About",
+ "Follow": "Follow",
+ "About {{displayname}}": "About {{displayname}}",
+ "More": "More",
+ "Pronouns": "Pronouns",
+ "Follow me on": "Follow me on",
+ "My Bio": "My Bio",
+ "Submit Post": "Submit Post",
+ "Submit Image": "Submit Image"
+}
+\ No newline at end of file
