content for warehouse. HTML edit works ;

translations
This commit is contained in:
Dobromir Popov
2024-12-02 14:11:37 +02:00
parent c06b93f6ad
commit 269553f2ec
8 changed files with 1685 additions and 13 deletions

View File

@ -6,6 +6,9 @@ import { GetServerSideProps } from 'next';
import { Location, UserRole } from "@prisma/client";
import axiosServer from '../../../src/axiosServer';
import { useTranslations, createTranslator } from 'next-intl';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import remarkGfm from 'remark-gfm';
// import { getTranslations } from 'next-intl/server';
const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
@ -54,7 +57,7 @@ const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
className={`tab flex-1 text-lg py-2 px-4 ${activeTab === 'mainLocation' ? 'border-b-4 border-blue-500 text-blue-600 font-semibold' : 'text-gray-600 hover:text-blue-500'}`}
onClick={() => handleTabChange('mainLocation')}
>
{location.name}
{location.title || location.name}
</button>
{/* Backup Location Tab */}
{location.backupLocationId !== null && (
@ -87,8 +90,27 @@ const ViewLocationPage: React.FC<ViewLocationPageProps> = ({ location }) => {
{/* Tab Content */}
{(location.content || location.backupLocationContent) && (
<div className="tab-content mt-4">
{activeTab === 'mainLocation' && (
<div className="p-4 bg-white shadow rounded-lg" dangerouslySetInnerHTML={{ __html: location.content }} />
// <div className="p-4 bg-white shadow rounded-lg" dangerouslySetInnerHTML={{ __html: location.content }} />
<div className="p-4 bg-white shadow rounded-lg">
<ReactMarkdown
rehypePlugins={[rehypeRaw]}
remarkPlugins={[remarkGfm]}
components={{
img: ({ node, ...props }) => (
<img {...props} className="max-w-full h-auto my-4" alt="" />
),
a: ({ node, ...props }) => (
<a {...props} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline" />
)
}}
>
{location.content}
</ReactMarkdown>
</div>
)}
{activeTab === 'backupLocation' && location.backupLocationContent && (
<div className="p-4 bg-white shadow rounded-lg" dangerouslySetInnerHTML={{ __html: location.backupLocationContent }} />
@ -110,7 +132,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const messages = (await import(`../../../content/i18n/${locale}.json`)).default;
const t = createTranslator({ locale, messages });
// Function to replace placeholders in HTML content
// Function to replace placeholders in HTML content. Placeholders are in the format {key}
const replacePlaceholders = (content: string) => {
if (!content) return '';
const placeholderPattern = /{([^}]+)}/g;
@ -125,7 +147,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
return `[${locale}:${key}]`;
} catch (error) {
// Return formatted placeholder on error
return `[${locale}:${key}]`;
return `[${locale}:'content.'${key}]`;
}
});
};
@ -133,6 +155,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
const prismaClient = common.getPrismaClient();
const location = await getLocation(prismaClient, context);
location.content = replacePlaceholders(location.content);
location.title = t("content.location." + location.name + ".title");
if (location.backupLocationId !== null) {
// const { data: backupLocation } = await axios.get(