Add Help page with markdown support and routing
This commit is contained in:
@@ -27,7 +27,9 @@
|
||||
"plyr-react": "^5.3.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-router-dom": "^6.21.1",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"sonner": "^2.0.7",
|
||||
"tailwind-merge": "^2.2.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
|
||||
419
packages/frontend/public/help.md
Normal file
419
packages/frontend/public/help.md
Normal file
@@ -0,0 +1,419 @@
|
||||
# Korištenje aplikacije - Znakovni.hr
|
||||
|
||||
## Priručnik za korištenje aplikacije za hrvatski znakovni jezik
|
||||
|
||||
---
|
||||
|
||||
## 📚 Sadržaj
|
||||
|
||||
1. [Uvod](#uvod)
|
||||
2. [Prijava i autentifikacija](#prijava-i-autentifikacija)
|
||||
3. [Početna stranica](#početna-stranica)
|
||||
4. [Rječnik (Riječi)](#rječnik-riječi)
|
||||
5. [Znakopis (Graditelj rečenica)](#znakopis-graditelj-rečenica)
|
||||
6. [Oblak (Upravljanje dokumentima)](#oblak-upravljanje-dokumentima)
|
||||
7. [Video rečenica](#video-rečenica)
|
||||
8. [Portal za podršku](#portal-za-podršku)
|
||||
9. [Administracija (samo za administratore)](#administracija-samo-za-administratore)
|
||||
10. [Česta pitanja](#česta-pitanja)
|
||||
|
||||
---
|
||||
|
||||
## Uvod
|
||||
|
||||
Znakovni.hr je web aplikacija za učenje i korištenje hrvatskog znakovnog jezika (HZJ). Aplikacija omogućava:
|
||||
|
||||
- **Pretraživanje rječnika** - Video rječnik hrvatskog znakovnog jezika
|
||||
- **Gradnju rečenica** - Alat za sastavljanje rečenica pomoću znakova
|
||||
- **Spremanje dokumenata** - Pohrana vaših rečenica u oblaku
|
||||
- **Video reprodukciju** - Reprodukcija video rečenica
|
||||
- **Zajednicu** - Komentari, povratne informacije i prijava grešaka
|
||||
|
||||
---
|
||||
|
||||
## Prijava i autentifikacija
|
||||
|
||||
### Kako se prijaviti
|
||||
|
||||
1. Kliknite na **"Sign in"** u donjem dijelu bočne trake
|
||||
2. Unesite svoju **email adresu** i **lozinku**
|
||||
3. Kliknite **"Sign in"**
|
||||
|
||||
### Metode prijave
|
||||
|
||||
Aplikacija podržava sljedeće metode prijave:
|
||||
|
||||
- **Email/Lozinka** - Tradicionalna lokalna autentifikacija
|
||||
- **Google OAuth** - Prijava pomoću Google računa (u razvoju)
|
||||
- **Microsoft OAuth** - Prijava pomoću Microsoft računa (u razvoju)
|
||||
|
||||
### Odjava
|
||||
|
||||
1. Kliknite na **"Sign out"** u donjem dijelu bočne trake
|
||||
2. Bit ćete automatski odjavljeni i preusmjereni na stranicu za prijavu
|
||||
|
||||
### Napomena o pristupima
|
||||
|
||||
- **Anonimni korisnici** mogu pregledavati rječnik
|
||||
- **Prijavljeni korisnici** mogu spremati dokumente, komentirati i prijavljivati greške
|
||||
- **Administratori** imaju pristup upravljanju korisnicima i riječima
|
||||
|
||||
---
|
||||
|
||||
## Početna stranica
|
||||
|
||||
Početna stranica prikazuje pregled svih glavnih funkcionalnosti aplikacije:
|
||||
|
||||
### Dostupne funkcionalnosti
|
||||
|
||||
1. **Riječi** (Rječnik) - Pregledajte i pretražujte rječnik hrvatskog znakovnog jezika
|
||||
2. **Znakopis** - Gradite rečenice koristeći znakovni jezik
|
||||
3. **Video rečenica** - Gledajte i učite iz video rečenica
|
||||
4. **Oblak** - Spremite i upravljajte svojim dokumentima u oblaku
|
||||
|
||||
Kliknite na bilo koju karticu za pristup toj funkcionalnosti.
|
||||
|
||||
---
|
||||
|
||||
## Rječnik (Riječi)
|
||||
|
||||
Rječnik omogućava pretraživanje i pregledavanje hrvatskog znakovnog jezika.
|
||||
|
||||
### Pretraživanje riječi
|
||||
|
||||
1. Idite na **"Riječi"** u bočnoj traci
|
||||
2. Koristite **traku za pretraživanje** za unos teksta
|
||||
3. Rezultati se automatski filtriraju dok tipkate
|
||||
|
||||
### Filtriranje riječi
|
||||
|
||||
Možete filtrirati riječi prema:
|
||||
|
||||
- **Vrsta riječi** (Word Type):
|
||||
- NOUN (Imenica)
|
||||
- VERB (Glagol)
|
||||
- ADJECTIVE (Pridjev)
|
||||
- ADVERB (Prilog)
|
||||
- PRONOUN (Zamjenica)
|
||||
- PREPOSITION (Prijedlog)
|
||||
- CONJUNCTION (Veznik)
|
||||
- INTERJECTION (Uzvik)
|
||||
- NUMERAL (Broj)
|
||||
- PARTICLE (Čestica)
|
||||
- OTHER (Ostalo)
|
||||
|
||||
- **CEFR razina** (Razina složenosti):
|
||||
- A1 (Početna razina)
|
||||
- A2 (Osnovna razina)
|
||||
- B1 (Srednja razina)
|
||||
- B2 (Viša srednja razina)
|
||||
- C1 (Napredna razina)
|
||||
- C2 (Majstorska razina)
|
||||
|
||||
### Prikaz detalja riječi
|
||||
|
||||
1. Kliknite na **ikonu informacija (ℹ️)** na kartici riječi
|
||||
2. Otvara se modal s detaljima:
|
||||
- Video prikaz znaka
|
||||
- Vrsta riječi
|
||||
- CEFR razina
|
||||
- Kratki opis
|
||||
- Primjeri korištenja
|
||||
- Oznake (tags)
|
||||
|
||||
### Dodavanje riječi u rečenicu
|
||||
|
||||
1. Kliknite na **"Dodaj"** gumb na kartici riječi
|
||||
2. Riječ se automatski dodaje u trenutnu rečenicu
|
||||
3. Idite na **"Znakopis"** za uređivanje rečenice
|
||||
|
||||
### Paginacija
|
||||
|
||||
- Koristite **"Prethodna"** i **"Sljedeća"** gumbe za navigaciju kroz stranice
|
||||
- Prikazuje se trenutna stranica i ukupan broj stranica
|
||||
|
||||
---
|
||||
|
||||
## Znakopis (Graditelj rečenica)
|
||||
|
||||
Znakopis je alat za sastavljanje rečenica pomoću znakova iz rječnika.
|
||||
|
||||
### Dodavanje riječi u rečenicu
|
||||
|
||||
1. Idite na **"Riječi"** i kliknite **"Dodaj"** na željenim riječima
|
||||
2. Riječi se dodaju u **"Trenutna rečenica"** panel
|
||||
3. Idite na **"Znakopis"** za uređivanje
|
||||
|
||||
### Preuređivanje riječi (Drag & Drop)
|
||||
|
||||
1. Kliknite i držite riječ u **"Trenutna rečenica"** panelu
|
||||
2. Povucite riječ na željenu poziciju
|
||||
3. Pustite za postavljanje riječi na novu poziciju
|
||||
|
||||
### Uklanjanje riječi
|
||||
|
||||
- Kliknite na **"X"** gumb na riječi za uklanjanje pojedinačne riječi
|
||||
- Kliknite **"Očisti sve"** za uklanjanje svih riječi iz rečenice
|
||||
|
||||
### Spremanje rečenice
|
||||
|
||||
1. Kliknite **"Spremi"** gumb
|
||||
2. Ako nemate otvoren dokument, unesite:
|
||||
- **Naslov dokumenta** (obavezno)
|
||||
- **Opis dokumenta** (opcionalno)
|
||||
3. Kliknite **"Spremi dokument"**
|
||||
4. Rečenica se sprema na trenutnu stranicu dokumenta
|
||||
|
||||
### Učitavanje dokumenta
|
||||
|
||||
1. Kliknite **"Učitaj dokument"** gumb
|
||||
2. Odaberite dokument iz popisa
|
||||
3. Dokument se učitava s svim stranicama i rečenicama
|
||||
|
||||
### Upravljanje stranicama
|
||||
|
||||
- **Nova stranica** - Kliknite za dodavanje nove stranice u dokument
|
||||
- **Navigacija** - Koristite **"Prethodna"** i **"Sljedeća"** za navigaciju između stranica
|
||||
- Prikazuje se trenutna stranica i ukupan broj stranica
|
||||
|
||||
### Popis rečenica
|
||||
|
||||
- Prikazuje sve rečenice na trenutnoj stranici
|
||||
- Kliknite **"Obriši"** za brisanje rečenice
|
||||
- Rečenice su numerirane (Rečenica 1, Rečenica 2, itd.)
|
||||
|
||||
---
|
||||
|
||||
## Oblak (Upravljanje dokumentima)
|
||||
|
||||
Oblak omogućava centralizirano spremanje i upravljanje vašim dokumentima.
|
||||
|
||||
### Pregled dokumenata
|
||||
|
||||
1. Idite na **"Oblak"** u bočnoj traki
|
||||
2. Prikazuju se svi vaši spremljeni dokumenti
|
||||
3. Za svaki dokument vidite:
|
||||
- Naslov
|
||||
- Opis
|
||||
- Datum zadnje izmjene
|
||||
- Broj stranica
|
||||
- Broj rečenica
|
||||
|
||||
### Učitavanje dokumenta
|
||||
|
||||
1. Kliknite na dokument u popisu
|
||||
2. Dokument se učitava u Znakopis
|
||||
3. Možete nastaviti s uređivanjem
|
||||
|
||||
### Brisanje dokumenta
|
||||
|
||||
1. Kliknite **"Obriši"** gumb na dokumentu
|
||||
2. Potvrdite brisanje
|
||||
3. Dokument se trajno briše
|
||||
|
||||
### Uređivanje dokumenta
|
||||
|
||||
1. Kliknite **"Uredi"** gumb na dokumentu
|
||||
2. Možete promijeniti:
|
||||
- Naslov dokumenta
|
||||
- Opis dokumenta
|
||||
3. Kliknite **"Spremi"** za spremanje promjena
|
||||
|
||||
---
|
||||
|
||||
## Video rečenica
|
||||
|
||||
Video rečenica omogućava reprodukciju video zapisa rečenica sastavljenih od znakova.
|
||||
|
||||
### Reprodukcija video rečenice
|
||||
|
||||
1. Idite na **"Video rečenica"** u bočnoj traci
|
||||
2. Odaberite dokument s rečenicama
|
||||
3. Video se automatski reproducira
|
||||
4. Kontrole:
|
||||
- **Play/Pause** - Reprodukcija/Pauza
|
||||
- **Brzina reprodukcije** - Prilagodite brzinu
|
||||
- **Glasnoća** - Kontrola glasnoće
|
||||
- **Puni zaslon** - Prikaz u punom zaslonu
|
||||
|
||||
### Playlist
|
||||
|
||||
- Sve rečenice u dokumentu se reproduciraju redom
|
||||
- Možete preskočiti na sljedeću ili prethodnu rečenicu
|
||||
- Prikazuje se trenutna rečenica i ukupan broj rečenica
|
||||
|
||||
---
|
||||
|
||||
## Portal za podršku
|
||||
|
||||
### Korištenje aplikacije
|
||||
|
||||
- Ovaj priručnik s uputama za korištenje aplikacije
|
||||
|
||||
### Zajednica
|
||||
|
||||
- Pregledajte komentare i povratne informacije drugih korisnika
|
||||
- Sudjelujte u raspravi o aplikaciji
|
||||
|
||||
### Komentari
|
||||
|
||||
1. Idite na **"Komentari"** u bočnoj traci
|
||||
2. Napišite svoj komentar ili povratnu informaciju
|
||||
3. Kliknite **"Pošalji"**
|
||||
4. Vaš komentar će biti vidljiv svim korisnicima
|
||||
|
||||
### Prijavi grešku
|
||||
|
||||
1. Idite na **"Prijavi grešku"** u bočnoj traci
|
||||
2. Ispunite obrazac:
|
||||
- **Naslov** - Kratki opis greške
|
||||
- **Opis** - Detaljan opis problema
|
||||
- **Koraci za reprodukciju** - Kako reproducirati grešku
|
||||
- **Očekivano ponašanje** - Što ste očekivali
|
||||
- **Stvarno ponašanje** - Što se zapravo dogodilo
|
||||
3. Kliknite **"Pošalji prijavu"**
|
||||
4. Vaša prijava će biti pregledana od strane administratora
|
||||
|
||||
---
|
||||
|
||||
## Administracija (samo za administratore)
|
||||
|
||||
Administratorski panel je dostupan samo korisnicima s administratorskim pravima.
|
||||
|
||||
### Upravljanje korisnicima
|
||||
|
||||
1. Idite na **"Korisnici"** u sekciji Administracija
|
||||
2. Pregledajte sve korisnike u sustavu
|
||||
3. Dostupne akcije:
|
||||
- **Dodaj korisnika** - Kreirajte novog korisnika
|
||||
- **Uredi korisnika** - Promijenite podatke korisnika
|
||||
- **Obriši korisnika** - Uklonite korisnika iz sustava
|
||||
- **Aktiviraj/Deaktiviraj** - Omogućite ili onemogućite pristup
|
||||
|
||||
#### Kreiranje novog korisnika
|
||||
|
||||
1. Kliknite **"Dodaj korisnika"**
|
||||
2. Ispunite obrazac:
|
||||
- **Email** (obavezno)
|
||||
- **Ime** (opcionalno)
|
||||
- **Lozinka** (obavezno)
|
||||
- **Uloga** - USER ili ADMIN
|
||||
- **Aktivan** - Da/Ne
|
||||
3. Kliknite **"Kreiraj"**
|
||||
|
||||
#### Uređivanje korisnika
|
||||
|
||||
1. Kliknite **ikonu olovke** pored korisnika
|
||||
2. Promijenite željene podatke
|
||||
3. Kliknite **"Spremi"**
|
||||
|
||||
#### Resetiranje lozinke
|
||||
|
||||
1. Uredi korisnika
|
||||
2. Unesite novu lozinku
|
||||
3. Kliknite **"Spremi"**
|
||||
|
||||
### Upravljanje riječima
|
||||
|
||||
1. Idite na **"Upravljanje riječima"** u sekciji Administracija
|
||||
2. Pregledajte sve riječi u rječniku
|
||||
3. Dostupne akcije:
|
||||
- **Dodaj riječ** - Dodajte novu riječ u rječnik
|
||||
- **Uredi riječ** - Promijenite podatke riječi
|
||||
- **Obriši riječ** - Uklonite riječ iz rječnika
|
||||
- **Dodaj video** - Dodajte video prikaz znaka
|
||||
|
||||
#### Dodavanje nove riječi
|
||||
|
||||
1. Kliknite **"Dodaj riječ"**
|
||||
2. Ispunite obrazac:
|
||||
- **Riječ** (obavezno) - Tekst riječi
|
||||
- **Vrsta riječi** (obavezno) - NOUN, VERB, itd.
|
||||
- **CEFR razina** (obavezno) - A1, A2, B1, B2, C1, C2
|
||||
- **Kratki opis** (opcionalno)
|
||||
- **Oznake** (opcionalno) - Odvojene zarezom
|
||||
3. Kliknite **"Spremi"**
|
||||
|
||||
#### Dodavanje videa
|
||||
|
||||
1. Kliknite **ikonu videa** pored riječi
|
||||
2. Odaberite video datoteku (MP4, WebM, OGG)
|
||||
3. Kliknite **"Upload"**
|
||||
4. Video se automatski učitava i povezuje s riječju
|
||||
|
||||
#### Uređivanje riječi
|
||||
|
||||
1. Kliknite **ikonu olovke** pored riječi
|
||||
2. Promijenite željene podatke
|
||||
3. Kliknite **"Spremi"**
|
||||
|
||||
#### Brisanje riječi
|
||||
|
||||
1. Kliknite **ikonu kante** pored riječi
|
||||
2. Potvrdite brisanje
|
||||
3. Riječ i svi povezani videi se trajno brišu
|
||||
|
||||
---
|
||||
|
||||
## Česta pitanja
|
||||
|
||||
### Mogu li koristiti aplikaciju bez prijave?
|
||||
|
||||
Da, možete pregledavati rječnik bez prijave. Međutim, za spremanje dokumenata, komentiranje i prijavu grešaka potrebna je prijava.
|
||||
|
||||
### Kako mogu promijeniti svoju lozinku?
|
||||
|
||||
Trenutno možete promijeniti lozinku samo putem administratora. Kontaktirajte administratora za resetiranje lozinke.
|
||||
|
||||
### Mogu li dijeliti svoje dokumente s drugim korisnicima?
|
||||
|
||||
Trenutno su svi dokumenti privatni. Funkcionalnost dijeljenja dokumenata je u razvoju.
|
||||
|
||||
### Koliko dokumenata mogu spremiti?
|
||||
|
||||
Nema ograničenja na broj dokumenata koje možete spremiti.
|
||||
|
||||
### Koliko stranica može imati dokument?
|
||||
|
||||
Nema ograničenja na broj stranica u dokumentu.
|
||||
|
||||
### Koliko rečenica može imati stranica?
|
||||
|
||||
Nema ograničenja na broj rečenica po stranici.
|
||||
|
||||
### Koje video formate podržava aplikacija?
|
||||
|
||||
Aplikacija podržava MP4, WebM i OGG video formate.
|
||||
|
||||
### Kako mogu prijaviti grešku?
|
||||
|
||||
Idite na "Prijavi grešku" u portalu za podršku i ispunite obrazac s detaljima greške.
|
||||
|
||||
### Kako mogu kontaktirati podršku?
|
||||
|
||||
Možete ostaviti komentar u sekciji "Komentari" ili prijaviti grešku u sekciji "Prijavi grešku".
|
||||
|
||||
### Je li aplikacija dostupna na mobilnim uređajima?
|
||||
|
||||
Da, aplikacija je responzivna i radi na mobilnim uređajima, tabletima i desktop računalima.
|
||||
|
||||
---
|
||||
|
||||
## Tehnička podrška
|
||||
|
||||
Za dodatnu pomoć ili pitanja, molimo kontaktirajte:
|
||||
|
||||
- **Email**: podrska@znakovni.hr
|
||||
- **Komentari**: Koristite sekciju "Komentari" u aplikaciji
|
||||
- **Prijava grešaka**: Koristite sekciju "Prijavi grešku" u aplikaciji
|
||||
|
||||
---
|
||||
|
||||
**Verzija priručnika**: 1.0
|
||||
**Datum ažuriranja**: 2026-01-18
|
||||
**Status aplikacije**: Faza 3 dovršena (Znakopis)
|
||||
|
||||
---
|
||||
|
||||
© 2026 Znakovni.hr - Sva prava pridržana
|
||||
|
||||
@@ -7,6 +7,7 @@ import { AdminTerms } from './pages/AdminTerms';
|
||||
import Dictionary from './pages/Dictionary';
|
||||
import Znakopis from './pages/Znakopis';
|
||||
import VideoSentence from './pages/VideoSentence';
|
||||
import Help from './pages/Help';
|
||||
import { ProtectedRoute } from './components/ProtectedRoute';
|
||||
import { useAuthStore } from './stores/authStore';
|
||||
import { Toaster } from 'sonner';
|
||||
@@ -56,7 +57,7 @@ function App() {
|
||||
<Route path="/video-sentence" element={<ProtectedRoute><VideoSentence /></ProtectedRoute>} />
|
||||
{/* Placeholder routes for other pages */}
|
||||
<Route path="/cloud" element={<ProtectedRoute><div>Cloud (Coming Soon)</div></ProtectedRoute>} />
|
||||
<Route path="/help" element={<ProtectedRoute><div>Help (Coming Soon)</div></ProtectedRoute>} />
|
||||
<Route path="/help" element={<ProtectedRoute><Help /></ProtectedRoute>} />
|
||||
<Route path="/community" element={<ProtectedRoute><div>Community (Coming Soon)</div></ProtectedRoute>} />
|
||||
<Route path="/comments" element={<ProtectedRoute><div>Comments (Coming Soon)</div></ProtectedRoute>} />
|
||||
<Route path="/bug-report" element={<ProtectedRoute><div>Bug Report (Coming Soon)</div></ProtectedRoute>} />
|
||||
|
||||
142
packages/frontend/src/pages/Help.tsx
Normal file
142
packages/frontend/src/pages/Help.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Layout } from '../components/layout/Layout';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
|
||||
function Help() {
|
||||
const [content, setContent] = useState<string>('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchHelpContent = async () => {
|
||||
try {
|
||||
const response = await fetch('/help.md');
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to load help documentation');
|
||||
}
|
||||
const text = await response.text();
|
||||
setContent(text);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchHelpContent();
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">Učitavanje priručnika...</p>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<div className="text-center">
|
||||
<p className="text-red-600 mb-2">Greška pri učitavanju priručnika</p>
|
||||
<p className="text-gray-600">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-white rounded-lg shadow-sm p-8">
|
||||
<article className="prose prose-indigo max-w-none">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
h1: ({ children }) => (
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4 pb-4 border-b-2 border-indigo-200">
|
||||
{children}
|
||||
</h1>
|
||||
),
|
||||
h2: ({ children }) => (
|
||||
<h2 className="text-3xl font-bold text-gray-900 mt-8 mb-4 pb-2 border-b border-gray-200">
|
||||
{children}
|
||||
</h2>
|
||||
),
|
||||
h3: ({ children }) => (
|
||||
<h3 className="text-2xl font-semibold text-gray-800 mt-6 mb-3">
|
||||
{children}
|
||||
</h3>
|
||||
),
|
||||
h4: ({ children }) => (
|
||||
<h4 className="text-xl font-semibold text-gray-800 mt-4 mb-2">
|
||||
{children}
|
||||
</h4>
|
||||
),
|
||||
p: ({ children }) => (
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
{children}
|
||||
</p>
|
||||
),
|
||||
ul: ({ children }) => (
|
||||
<ul className="list-disc list-inside space-y-2 mb-4 text-gray-700">
|
||||
{children}
|
||||
</ul>
|
||||
),
|
||||
ol: ({ children }) => (
|
||||
<ol className="list-decimal list-inside space-y-2 mb-4 text-gray-700">
|
||||
{children}
|
||||
</ol>
|
||||
),
|
||||
li: ({ children }) => (
|
||||
<li className="ml-4">
|
||||
{children}
|
||||
</li>
|
||||
),
|
||||
a: ({ href, children }) => (
|
||||
<a
|
||||
href={href}
|
||||
className="text-indigo-600 hover:text-indigo-800 underline"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
strong: ({ children }) => (
|
||||
<strong className="font-semibold text-gray-900">
|
||||
{children}
|
||||
</strong>
|
||||
),
|
||||
code: ({ children }) => (
|
||||
<code className="bg-gray-100 text-indigo-600 px-1.5 py-0.5 rounded text-sm font-mono">
|
||||
{children}
|
||||
</code>
|
||||
),
|
||||
hr: () => (
|
||||
<hr className="my-8 border-t-2 border-gray-200" />
|
||||
),
|
||||
blockquote: ({ children }) => (
|
||||
<blockquote className="border-l-4 border-indigo-500 pl-4 italic text-gray-700 my-4">
|
||||
{children}
|
||||
</blockquote>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Help;
|
||||
|
||||
Reference in New Issue
Block a user