{ "name": "arabic-manga-reader", "version": "1.0.0", "private": true, "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "jszip": "^3.10.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.1", "@supabase/supabase-js": "^2.31.0", "slugify": "^1.6.6", "browser-image-compression": "^2.0.1" }, "devDependencies": { "vite": "^5.0.0" } } import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], server: { port: 5173 } }); مكتبة مانجا/مانهو عربية

# انسخ هذا الملف إلى .env.local واملأ القيم بعد الإنشاء في Supabase VITE_SUPABASE_URL=https://your-project-ref.supabase.co VITE_SUPABASE_ANON_KEY=your-anon-key VITE_SUPABASE_BUCKET=public-manga # مكتبة مانجا/مانهو عربية (React + Vite + Supabase) خطوات سريعة للتشغيل: 1. أنشئ مشروع على Supabase. 2. أنشئ Bucket عام باسم `public-manga` أو غيّر اسم الـ bucket في .env.local. 3. في Supabase → SQL Editor شغل ملف db/init.sql لإنشاء الجداول. 4. في Authentication أضف حساب الأدمن (email + password) يدوياً أو عبر واجهة Supabase. 5. اضبط سياسات RLS كما هو موضح في ملف init.sql (النص يحتوي على سياسات أساسية). 6. انسخ `.env.example` إلى `.env.local` وضع مفاتيحك. 7. تثبيت الحزم: npm install 8. تشغيل واجهة التطوير: npm run dev 9. للنشر على Vercel/Netlify: تأكد من وضع متغيرات البيئة (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY, VITE_SUPABASE_BUCKET) في لوحة المشروع على منصة الاستضافة. ملاحظات: - لا يوجد تسجيل للزوار، القراءة متاحة للجميع. رفع وإدارة الفصول والسلاسل يقتصر على المستخدمين المسجلين عبر Supabase (الأدمن). - رفع ملفات ZIP يتم فكها في المتصفح ثم رفع الصور إلى الـ Storage. -- إنشاء جداول قاعدة البيانات في Supabase (Postgres) -- شغّل هذا في SQL editor داخل Supabase -- جدول السلاسل (series) create table if not exists series ( id uuid primary key default gen_random_uuid(), title text not null, slug text unique not null, description text, cover_url text, status text default 'مستمر', -- 'مستمر' أو 'مكتمل' categories text[], created_at timestamptz default now() ); -- جدول الفصول المرتبط بالسلسلة create table if not exists chapters ( id uuid primary key default gen_random_uuid(), series_id uuid references series(id) on delete cascade, chapter_number integer not null, title text, slug text not null, images text[] default '{}', -- array of public URLs (in storage) created_at timestamptz default now(), unique (series_id, chapter_number) ); -- مثال: تأكد أن policies ملائمة (تعديل/حذف/إضافة للفئات والسلاسل يقتصر على مستخدمين مسجلين). -- فعّل RLS إذا أردت سطح أمان أعلى واستخدم policies للسماح للمستخدمين المسجلين فقط. import React from 'react'; import { createRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from './App'; import './styles.css'; createRoot(document.getElementById('root')).render( ); import React from 'react'; import { Routes, Route } from 'react-router-dom'; import Home from './pages/Home'; import SeriesPage from './pages/Series'; import ChapterPage from './pages/Chapter'; import AdminLogin from './pages/AdminLogin'; import AdminPanel from './pages/AdminPanel'; import Header from './components/Header'; export default function App() { return (

} /> } /> } /> } /> } />

); } import { createClient } from '@supabase/supabase-js'; const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL; const SUPABASE_ANON_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY; if (!SUPABASE_URL || !SUPABASE_ANON_KEY) { console.warn('Supabase environment variables are not set.'); } export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY); import slugify from 'slugify'; export function makeSlug(text) { return slugify(text || '', { lower: true, strict: true, locale: 'ar' }); } export function formatNumber(num) { return new Intl.NumberFormat('ar-EG').format(num); } :root{ --accent:#ff5a5f; --muted:#6b7280; --card:#fff; --bg:#f7f7fb; } * { box-sizing: border-box; } body { margin:0; background:var(--bg); color:#111; } .container { padding:16px; max-width:1100px; margin: 18px auto; } header.site-header { background: linear-gradient(90deg,#fff 0%, #fff 100%); padding: 12px 16px; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 50; } .header-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1100px; margin:0 auto; } .brand { display:flex; align-items:center; gap:12px; } .brand h1 { margin:0; font-size:18px; color:#111; } .search { flex:1; margin-right:16px; } .search input { width:100%; padding:8px 12px; border-radius:8px; border:1px solid #ddd; } .grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap:14px; } .card { background:var(--card); border-radius:8px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,0.04); } .card img { width:100%; height:240px; object-fit:cover; display:block; } .card-body { padding:10px; } .muted { color:var(--muted); font-size:13px; } .series-title { font-weight:700; font-size:15px; margin:4px 0; } .badge { display:inline-block; padding:6px 8px; background:#f1f5f9; border-radius:6px; font-size:13px; margin-left:6px; } /* Chapter list */ .chapters { display:flex; flex-direction:column; gap:8px; margin-top:12px; } .chapter-item { display:flex; justify-content:space-between; align-items:center; padding:10px; background:#fff; border-radius:8px; border:1px solid #eee; } /* Reader */ .reader { display:flex; flex-direction:column; gap:12px; align-items:center; } .reader img { max-width:100%; border-radius:6px; } /* Admin */ .admin-panel { display:flex; gap:16px; align-items:flex-start; } .admin-side { width:260px; background:#fff; padding:12px; border-radius:8px; border:1px solid #eee; height:fit-content; } .admin-main { flex:1; background:#fff; padding:12px; border-radius:8px; border:1px solid #eee; } /* Responsive */ @media (max-width: 768px){ .header-inner { flex-direction:column; align-items:stretch; gap:8px; } .brand h1 { font-size:16px; } .card img { height:200px; } } import React from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { supabase } from '../lib/supabaseClient'; export default function Header() { const navigate = useNavigate(); async function logout() { await supabase.auth.signOut(); navigate('/'); } const user = supabase.auth.getUser(); // not awaited here; used for links only return (

مكتبة المانجا العربية

لوحة الأدمن الرئيسية

); } import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { supabase } from '../lib/supabaseClient'; import { makeSlug } from '../lib/utils'; export default function Home() { const [series, setSeries] = useState([]); const [q, setQ] = useState(''); useEffect(() => { fetchSeries(); const input = document.getElementById('global-search'); if (input) { input.addEventListener('input', (e) => setQ(e.target.value)); } }, []); async function fetchSeries() { const { data, error } = await supabase.from('series').select('*').order('created_at', { ascending: false }); if (!error) setSeries(data || []); } const filtered = series.filter(s => { if (!q) return true; const t = q.trim().toLowerCase(); return (s.title || '').toLowerCase().includes(t) || (s.categories || []).join(' ').toLowerCase().includes(t); }); return (

آخر السلاسل

{filtered.map(s => (

{s.title}

{s.status}

{s.categories?.slice(0,2).join('، ')}

))}

); } import React, { useEffect, useState } from 'react'; import { useParams, Link } from 'react-router-dom'; import { supabase } from '../lib/supabaseClient'; export default function SeriesPage() { const { slug } = useParams(); const [series, setSeries] = useState(null); const [chapters, setChapters] = useState([]); useEffect(() => { if (slug) fetchSeries(); }, [slug]); async function fetchSeries() { const { data: s } = await supabase.from('series').select('*').eq('slug', slug).single(); setSeries(s || null); if (s) { const { data: ch } = await supabase.from('chapters').select('*').eq('series_id', s.id).order('chapter_number', { ascending: false }); setChapters(ch || []); } } if (!series) return

جارٍ التحميل...

; return (

{series.title}

{series.description}

{series.status} {series.categories?.join('، ')}

الفصول

{chapters.length === 0 &&

لا يوجد فصول بعد.

} {chapters.map(ch => (

الفصل {ch.chapter_number} {ch.title ? ` - ${ch.title}` : ''}

{new Date(ch.created_at).toLocaleDateString('ar-EG')}

))}

); } import React, { useEffect, useState } from 'react'; import { useParams, Link, useNavigate } from 'react-router-dom'; import { supabase } from '../lib/supabaseClient'; export default function ChapterPage(){ const { slug, chapterSlug } = useParams(); const [chapter, setChapter] = useState(null); const [series, setSeries] = useState(null); const navigate = useNavigate(); useEffect(() => { if (slug && chapterSlug) fetchData(); }, [slug, chapterSlug]); async function fetchData(){ const { data: s } = await supabase.from('series').select('*').eq('slug', slug).single(); setSeries(s); if (!s) return; const { data: ch } = await supabase.from('chapters').select('*').eq('series_id', s.id).eq('slug', chapterSlug).single(); setChapter(ch || null); } if (!chapter) return

جارٍ التحميل...

; async function downloadZip(){ // إنشاء zip ديناميكي من الصور (سيتم تحميل الصور من التخزين العام) const JSZip = (await import('jszip')).default; const zip = new JSZip(); for (let i = 0; i < chapter.images.length; i++){ const url = chapter.images[i]; const res = await fetch(url); const blob = await res.blob(); zip.file(`page-${i+1}.jpg`, blob); } const content = await zip.generateAsync({ type: 'blob' }); const a = document.createElement('a'); a.href = URL.createObjectURL(content); a.download = `${series?.slug || 'chapter' }-${chapter.chapter_number}.zip`; a.click(); } return (

{series?.title} - الفصل {chapter.chapter_number}

{chapter.title}

{chapter.images.map((img, idx) => ( {`صفحة

))}

); } import React, { useState } from 'react'; import { supabase } from '../lib/supabaseClient'; import { useNavigate } from 'react-router-dom'; export default function AdminLogin(){ const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const navigate = useNavigate(); async function handleLogin(e){ e.preventDefault(); setLoading(true); setError(''); const { error } = await supabase.auth.signInWithPassword({ email, password }); setLoading(false); if (error) setError(error.message); else navigate('/admin'); } return (

تسجيل دخول الأدمن

); } import React, { useEffect, useState } from 'react'; import { Routes, Route, Link, useNavigate } from 'react-router-dom'; import { supabase } from '../lib/supabaseClient'; import SeriesManager from './admin/SeriesManager'; import ChapterManager from './admin/ChapterManager'; export default function AdminPanel(){ const [user, setUser] = useState(null); const navigate = useNavigate(); useEffect(() => { supabase.auth.getUser().then(res => { setUser(res.data?.user || null); if (!res.data?.user) navigate('/admin/login'); }); const { data: listener } = supabase.auth.onAuthStateChange((_event, session) => { setUser(session?.user || null); if (!session?.user) navigate('/admin/login'); }); return () => listener?.subscription?.unsubscribe(); }, []); async function signOut(){ await supabase.auth.signOut(); navigate('/'); } if (!user) return

جارٍ التحقق...

; return (

لوحة التحكم

اختر خياراً من اليسار

} /> } /> } />

); } import React, { useEffect, useState } from 'react'; import { supabase } from '../../lib/supabaseClient'; import { makeSlug } from '../../lib/utils'; export default function SeriesManager(){ const [list, setList] = useState([]); const [title, setTitle] = useState(''); const [description, setDescription] = useState(''); const [status, setStatus] = useState('مستمر'); const [categories, setCategories] = useState(''); const [coverFile, setCoverFile] = useState(null); useEffect(() => { fetchList(); }, []); async function fetchList(){ const { data } = await supabase.from('series').select('*').order('created_at', { ascending: false }); setList(data || []); } async function uploadCover(file){ if (!file) return null; const bucket = import.meta.env.VITE_SUPABASE_BUCKET; const key = `covers/${Date.now()}-${file.name}`; const { data, error } = await supabase.storage.from(bucket).upload(key, file, { upsert: false }); if (error) throw error; const { publicUrl } = supabase.storage.from(bucket).getPublicUrl(data.path); return publicUrl; } async function handleCreate(e){ e.preventDefault(); try { let cover_url = null; if (coverFile) cover_url = await uploadCover(coverFile); const slug = makeSlug(title); const { error } = await supabase.from('series').insert({ title, slug, description, cover_url, status, categories: categories.split(',').map(s=>s.trim()).filter(Boolean) }); if (error) throw error; setTitle(''); setDescription(''); setCategories(''); setCoverFile(null); fetchList(); } catch (err) { alert(err.message || 'حدث خطأ'); } } async function handleDelete(id){ if (!confirm('هل تريد حذف هذه السلسلة وجميع فصولها؟')) return; await supabase.from('series').delete().eq('id', id); fetchList(); } return (

إدارة السلاسل

setTitle(e.target.value)} required />

setDescription(e.target.value)} />
            <input placeholder="التصنيفات (افصل بفاصلة)" value={categories} onChange={e=>setCategories(e.target.value)} />
            <select value={status} onChange={e=>setStatus(e.target.value)}>
              <option>مستمر</option>
              <option>مكتمل</option>
            </select>
            <input type="file" accept="image/*" onChange={e=>setCoverFile(e.target.files[0])} />
            <button type="submit">إنشاء السلسلة</button>
          </form>

<h4 style={{ marginTop:16 }}>القائمة</h4>
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {list.map(s => (
              <div key={s.id} style={{ padding:8, background:'#fff', borderRadius:8, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div style={{ display:'flex', gap:12, alignItems:'center' }}>
                  <img src={s.cover_url || '/placeholder-cover.png'} alt="" style={{ width:56, height:80, objectFit:'cover' }} />
                  <div>
                    <div style={{ fontWeight:700 }}>{s.title}</div>
                    <div className="muted">{s.categories?.join('، ')}</div>
                  </div>
                </div>
                <div style={{ display:'flex', gap:8 }}>
                  <button onClick={()=>navigator.clipboard.writeText(window.location.origin + '/series/' + s.slug)}>نسخ رابط</button>
                  <button onClick={()=>handleDelete(s.id)} style={{ color:'crimson' }}>حذف</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      );
    }
  </jitFile>

<jitFile type="file" filePath="src/pages/admin/ChapterManager.jsx">
    import React, { useEffect, useState } from 'react';
    import { supabase } from '../../lib/supabaseClient';
    import { makeSlug } from '../../lib/utils';
    import JSZip from 'jszip';
    import imageCompression from 'browser-image-compression';

export default function ChapterManager(){
      const [seriesList, setSeriesList] = useState([]);
      const [selectedSeries, setSelectedSeries] = useState(null);
      const [chapterNumber, setChapterNumber] = useState('');
      const [title, setTitle] = useState('');
      const [files, setFiles] = useState([]);
      const [zipFile, setZipFile] = useState(null);
      const bucket = import.meta.env.VITE_SUPABASE_BUCKET;

useEffect(()=>{ fetchSeries(); }, []);

async function fetchSeries(){
        const { data } = await supabase.from('series').select('*').order('created_at', { ascending:false });
        setSeriesList(data || []);
        if (data && data.length) setSelectedSeries(data[0].id);
      }

async function handleZipUpload(file){
        const zip = new JSZip();
        const content = await zip.loadAsync(file);
        const imgs = [];
        const entries = Object.keys(content.files).filter(k => !content.files[k].dir).sort();
        for (const name of entries){
          const fileData = await content.files[name].async('blob');
          imgs.push(new File([fileData], name));
        }
        return imgs;
      }

async function compressFile(file){
        // basic compression options
        const options = {
          maxSizeMB: 1.2,
          maxWidthOrHeight: 1600,
          useWebWorker: true
        };
        try {
          const compressed = await imageCompression(file, options);
          return compressed;
        } catch (err) {
          console.warn('compression failed', err);
          return file;
        }
      }

async function uploadImages(seriesId, chapterNum, imageFiles){
        // upload to storage and return public URLs array
        const uploadedUrls = [];
        for (let i=0; i<imageFiles.length; i++){
          const f = imageFiles[i];
          const compressed = await compressFile(f);
          const path = `manga/${seriesId}/chapter-${chapterNum}/${String(i+1).padStart(3,'0')}-${Date.now()}-${f.name}`;
          const { data, error } = await supabase.storage.from(bucket).upload(path, compressed, { upsert: false });
          if (error) throw error;
          const { publicUrl } = supabase.storage.from(bucket).getPublicUrl(data.path);
          uploadedUrls.push(publicUrl);
        }
        return uploadedUrls;
      }

async function handleCreateChapter(e){
        e.preventDefault();
        if (!selectedSeries || !chapterNumber) return alert('اختر السلسلة وادخل رقم الفصل');
        try {
          let imageFiles = [];
          if (zipFile){
            imageFiles = await handleZipUpload(zipFile);
          } else {
            imageFiles = Array.from(files);
          }
          if (imageFiles.length === 0) return alert('اختر صوراً أو ZIP يحتوي على الصور');
          const urls = await uploadImages(selectedSeries, chapterNumber, imageFiles);
          const slug = makeSlug(`الفصل-${chapterNumber}`);
          const payload = {
            series_id: selectedSeries,
            chapter_number: Number(chapterNumber),
            title,
            slug,
            images: urls
          };
          const { error } = await supabase.from('chapters').insert(payload);
          if (error) throw error;
          setFiles([]); setZipFile(null); setChapterNumber(''); setTitle('');
          alert('تم رفع الفصل بنجاح');
        } catch (err) {
          alert(err.message || 'حدث خطأ أثناء الرفع');
        }
      }

async function handleDeleteChapter(id){
        if (!confirm('حذف الفصل نهائياً؟')) return;
        await supabase.from('chapters').delete().eq('id', id);
        alert('تم الحذف');
      }

return (
        <div>
          <h3>إدارة الفصول</h3>
          <form onSubmit={handleCreateChapter} style={{ display:'flex', flexDirection:'column', gap:8 }}>
            <label>اختر السلسلة</label>
            <select value={selectedSeries || ''} onChange={e=>setSelectedSeries(e.target.value)}>
              {seriesList.map(s => <option key={s.id} value={s.id}>{s.title}</option>)}
            </select>

<input placeholder="رقم الفصل (مثال: 1)" value={chapterNumber} onChange={e=>setChapterNumber(e.target.value)} />
            <input placeholder="عنوان الفصل (اختياري)" value={title} onChange={e=>setTitle(e.target.value)} />

<div style={{ display:'flex', gap:8 }}>
              <div>
                <label>رفع صور متعددة</label>
                <input type="file" accept="image/*" multiple onChange={e=>setFiles(e.target.files)} />
              </div>

<div>
                <label>أو رفع ملف ZIP (سيتم فك ضغطه تلقائياً)</label>
                <input type="file" accept=".zip" onChange={e=>setZipFile(e.target.files[0])} />
              </div>
            </div>

<button type="submit">إنشاء/رفع الفصل</button>
          </form>

<hr />

<h4>الفصول الحالية</h4>
          <SeriesChapters onDelete={handleDeleteChapter} />
        </div>
      );
    }

function SeriesChapters({ onDelete }){
      const [chapters, setChapters] = useState([]);

useEffect(()=>{ fetchChapters(); }, []);

async function fetchChapters(){
        const { data } = await supabase.from('chapters').select('id,series_id,chapter_number,title,created_at').order('created_at',{ ascending:false });
        setChapters(data || []);
      }

return (
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          {chapters.map(c => (
            <div key={c.id} style={{ padding:8, background:'#fff', borderRadius:8, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <div><strong>#{c.chapter_number}</strong> - {c.title}</div>
              <div className="muted">{new Date(c.created_at).toLocaleString('ar-EG')}</div>
              <div>
                <button onClick={()=>onDelete(c.id)} style={{ color:'crimson' }}>حذف</button>
              </div>
            </div>
          ))}
        </div>
      );
    }
  </jitFile>
</jitProject></article></body></html>