📺 {title}
{note}
{videos.map((item, idx) => {
const { title: itemTitle, meta, url: image } = item;
return (
);
})}
{/* Matn formatlash */}
{ uploadAndInsert(e.target.files?.[0]); e.target.value=""; }}
/>
{ uploadAndInsert(e.target.files?.[0]); e.target.value=""; }}
/>
Rasm yuklanmoqda...
)}
{
if (e.target.tagName === 'IMG') {
if (window.confirm("Ushbu rasmni o'chirib tashlashni xohlaysizmi?")) {
e.target.remove();
syncContent();
}
}
}}
onKeyDown={handleKeyDown}
onPaste={handlePaste}
onDrop={handleDrop}
onDragOver={e => e.preventDefault()}
onCompositionStart={() => { isComposing.current = true; }}
onCompositionEnd={() => { isComposing.current = false; syncContent(); }}
data-placeholder="To'liq maqola matni. Paragraflarni Enter bilan ajrating..."
/>
{showMediaModal && (
setShowMediaModal(false)}
onSelect={(url) => {
let html = '';
const lowerUrl = url.toLowerCase();
if (lowerUrl.endsWith('.pdf')) {
html = `📄 Hujjatni yuklab olish`;
} else if (lowerUrl.match(/\.(mp4|webm|ogg)$/)) {
html = ``;
} else {
html = `
`;
}
exec('insertHTML', html);
setShowMediaModal(false);
}}
/>
)}
);
}
function withIds(stories) {
return {
uz: stories.uz.map((story, index) => ({ id: story.id || `uz-seed-${index}`, status: story.status || "published", ...story })),
en: stories.en.map((story, index) => ({ id: story.id || `ru-seed-${index}`, status: story.status || "published", ...story })),
uzk: stories.uz.map((story, index) => ({ id: story.id || `uzk-seed-${index}`, status: story.status || "published", ...story })),
};
}
// Лотин <-> Кирилл о'гириш
const latToCyr = {
'a':'а','b':'б','d':'д','e':'е','f':'ф','g':'г','h':'ҳ','i':'и','j':'ж','k':'к','l':'л','m':'м','n':'н',
'o':'о','p':'п','q':'қ','r':'р','s':'с','t':'т','u':'у','v':'в','x':'х','y':'й','z':'з',
// о'збек апостроф турлари
"o'":'ў',"oʻ":'ў',"o`":'ў',"oʻ":'ў',"oʼ":'ў',
"g'":'ғ',"gʻ":'ғ',"g`":'ғ',"gʻ":'ғ',"gʼ":'ғ',
// икки ҳарфли комбинациялар
'sh':'ш','ch':'ч','ng':'нг','ts':'ц','yo':'ё','yu':'ю','ya':'я','ye':'е','yo\'':'йў',
'ʼ':'ъ','"':'ъ',
'A':'А','B':'Б','D':'Д','E':'Е','F':'Ф','G':'Г','H':'Ҳ','I':'И','J':'Ж','K':'К','L':'Л','M':'М','N':'Н',
'O':'О','P':'П','Q':'Қ','R':'Р','S':'С','T':'Т','U':'У','V':'В','X':'Х','Y':'Й','Z':'З',
"O'":'Ў',"Oʻ":'Ў',"O`":'Ў',"Oʻ":'Ў',"Oʼ":'Ў',
"G'":'Ғ',"Gʻ":'Ғ',"G`":'Ғ',"Gʻ":'Ғ',"Gʼ":'Ғ',
'Sh':'Ш','Ch':'Ч','Ng':'Нг','Ts':'Ц','Yo':'Ё','Yu':'Ю','Ya':'Я','Ye':'Е'
};
// 2-harfli tezkor qidiruv uchun kesh
const lat2Char = {};
for (let k in latToCyr) { if (k.length === 2) lat2Char[k.toLowerCase()] = latToCyr[k]; }
const cyrToLat = {
'а':'a','б':'b','в':'v','г':'g','д':'d','е':'e','ё':'yo','ж':'j','з':'z',
'и':'i','й':'y','к':'k','л':'l','м':'m','н':'n','о':'o','п':'p',
'р':'r','с':'s','т':'t','у':'u','ф':'f','х':'x','ц':'ts','ч':'ch',
'ш':'sh','ъ':'ʼ','ь':'','э':'e','ю':'yu','я':'ya',
'ў':'oʻ','қ':'q','ғ':'gʻ','ҳ':'h','ң':'ng',
'А':'A','Б':'B','В':'V','Г':'G','Д':'D','Е':'E','Ё':'Yo','Ж':'J','З':'Z',
'И':'I','Й':'Y','К':'K','Л':'L','М':'M','Н':'N','О':'O','П':'P',
'Р':'R','С':'S','Т':'T','У':'U','Ф':'F','Х':'X','Ц':'Ts','Ч':'Ch',
'Ш':'Sh','Э':'E','Ю':'Yu','Я':'Ya',
'Ў':'Oʻ','Қ':'Q','Ғ':'Gʻ','Ҳ':'H','Ң':'Ng'
};
const cyr2Char = {};
for (let k in cyrToLat) { if (k.length === 2) cyr2Char[k.toLowerCase()] = cyrToLat[k]; }
const uiEn = {
"Bosh sahifa": "Home",
"Maqolalar": "Articles",
"Barcha yangiliklar": "All news",
"Qidiruv natijalari": "Search results",
"Siz uchun tavsiyalar": "Recommendations for you",
"Ko'p o'qiysiz: ": "You read often: ",
"Ko'proq yangiliklar": "More news",
"Video": "Video",
"Foto": "Photo",
"Tomosha qilish →": "Watch →",
"Ko'rish →": "Watch →",
"Kunning eng muhim videolari": "Main videos of the day",
"Fotoreportajlar va vizual materiallar": "Photo reports and visual materials",
"Tezkor yangiliklar": "Fast news",
"Mustaqil tahlil": "Independent analysis",
"Ikki tilda": "Bilingual",
"Ishonchli manba": "Reliable source",
"Monitoring": "Monitoring",
"Bo'lim": "Sections",
"Til": "Languages",
"Maqola": "Articles",
"Bu bo'limda hozircha maqola yo'q.": "No articles in this section yet.",
"Saqlash": "Save",
"Saqlangandan olib tashlash": "Remove from saved",
"★ Saqlangan": "★ Saved",
"☆ Saqlash": "☆ Save",
"Izohlar": "Comments",
"Hozircha izoh yo'q. Birinchi bo'ling!": "No comments yet. Be the first!",
"Vatanuz.uz tahririyati": "Vatanuz.uz Editorial",
"Jonli tahririyat": "Live Newsroom"
};
function T(str) {
if (!str) return str;
const lang = window.__currentLang || "uz";
if (lang === "en") return uiEn[str] || str;
if (lang === "uzk") return convertText(str, true);
return str;
}
function convertText(text, toCyrillic) {
if (!text) return text;
if (toCyrillic) {
text = text
.replace(/yo'/g, 'йў').replace(/Yo'/g, 'Йў')
.replace(/yoʻ/g, 'йў').replace(/Yoʻ/g, 'Йў')
.replace(/yoʼ/g, 'йў').replace(/Yoʼ/g, 'Йў')
.replace(/yo`/g, 'йў').replace(/Yo`/g, 'Йў');
}
const map = toCyrillic ? latToCyr : cyrToLat;
const twoCharMap = toCyrillic ? lat2Char : cyr2Char;
let result = '';
let i = 0;
const len = text.length;
let inTag = false;
while (i < len) {
const ch = text[i];
if (ch === '<') {
inTag = true;
result += ch;
i++;
continue;
}
if (inTag) {
result += ch;
if (ch === '>') inTag = false;
i++;
continue;
}
if (ch === '&') {
let j = i + 1;
let isEntity = false;
while (j < len && j < i + 10) {
if (text[j] === ';') {
isEntity = true;
break;
}
if (!/^[a-zA-Z#0-9]$/.test(text[j])) break;
j++;
}
if (isEntity) {
result += text.substring(i, j + 1);
i = j + 1;
continue;
}
}
if (i < len - 1) {
const two = text[i] + text[i+1];
const twoLower = two.toLowerCase();
let mapped = map[two];
if (mapped === undefined && twoCharMap[twoLower] !== undefined) {
mapped = twoCharMap[twoLower];
if (two[0] === two[0].toUpperCase()) {
mapped = mapped.toUpperCase();
}
}
if (mapped !== undefined) {
result += mapped;
i += 2;
continue;
}
}
if (toCyrillic && (ch === "'" || ch === "ʼ" || ch === "ʻ" || ch === "`")) {
const prev = i > 0 ? text[i-1] : '';
const next = i < len - 1 ? text[i+1] : '';
if (/[a-zA-Z]/.test(prev) && /[a-zA-Z]/.test(next)) {
result += 'ъ';
} else {
result += ch;
}
} else {
result += map[ch] || ch;
}
i++;
}
return result;
}
function VideosPage({ lang, t, mediaItems, onOpen, setPage }) {
const isUz = lang !== "en";
const videos = mediaItems.filter(item => item.type === "video");
const title = lang === "uz" ? "Videolar" : (lang === "uzk" ? "Видеолар" : "Video");
const note = lang === "uz" ? "Kunning eng muhim videolari" : (lang === "uzk" ? "Куннинг энг муҳим видеолари" : "Main videos of the day");
return (
📷 {title}
{note}
{photos.map((item, idx) => {
const { title: itemTitle, meta, url: image } = item;
return (
);
})}
Sahifa topilmadi
{title}
{page !== "admin" && (<>
{/* 📱 Mobile Drawer Menu */}
);
}
function MediaSection({ lang, items, onOpen, setPage }) {
const isUz = lang !== "en";
const safeItems = items || [];
const videos = safeItems.filter((item) => item.type === "video");
const photos = safeItems.filter((item) => item.type === "photo");
const videoLabel = T(isUz ? "Video" : "Video");
const photoLabel = T(isUz ? "Foto" : "Photo");
const videoNote = lang === "uz" ? "Kunning eng muhim videolari" : (lang === "uzk" ? "Куннинг энг муҳим видеолари" : "Main videos of the day");
const photoNote = lang === "uz" ? "Fotoreportajlar va vizual materiallar" : (lang === "uzk" ? "Фоторепортажлар ва визуал материаллар" : "Photo reports and visual materials");
const watchLabel = T(isUz ? "Tomosha qilish →" : "Watch →");
const viewLabel = T(isUz ? "Ko'rish →" : "View →");
function MediaBlock({ type, blockItems, title, note, onOpen }) {
const handleOpen = (item) => {
if (!onOpen) return;
const { type, title: itemTitle, meta, url: image } = item;
onOpen({
id: `media-${Date.now()}-${Math.random()}`,
title: itemTitle,
category: meta ? meta.split(' | ')[0] : type,
time: meta ? meta.split(' | ')[1] : "",
image: type === "video" ? null : image,
images: item.images || (image ? [image] : []),
body: type === "video"
? `
${item.body || ""}`
: (item.body || "")
});
};
if (!blockItems.length) return null;
const featured = blockItems[0];
const rest = blockItems.slice(1);
return (
);
}
function WeatherBar({ lang }) {
const [weather, setWeather] = useState(null);
const [time, setTime] = useState(new Date());
useEffect(() => {
const timer = setInterval(() => setTime(new Date()), 1000);
return () => clearInterval(timer);
}, []);
useEffect(() => {
fetch("https://api.open-meteo.com/v1/forecast?latitude=41.2995&longitude=69.2401¤t=temperature_2m,weathercode,windspeed_10m&timezone=Asia%2FTashkent")
.then(r => r.json())
.then(data => {
const code = data.current.weathercode;
const temp = Math.round(data.current.temperature_2m);
const wind = Math.round(data.current.windspeed_10m);
const icons = {
0:"☀️", 1:"🌤", 2:"⛅", 3:"в˜ЃпёЏ",
45:"🌫", 48:"🌫", 51:"🌦", 53:"🌦", 55:"🌧",
61:"🌧", 63:"🌧", 65:"🌧", 71:"🌨", 73:"🌨",
75:"🌨", 80:"🌦", 81:"🌧", 82:"⛈", 95:"⛈", 96:"⛈", 99:"⛈"
};
const descs = {
uz: { 0:"Ochiq", 1:"Asosan ochiq", 2:"Qisman bulutli", 3:"Bulutli", 45:"Tuman", 48:"Tuman",
51:"Yengil yomg'ir", 53:"Yomg'ir", 55:"Kuchli yomg'ir", 61:"Yomg'ir", 63:"Yomg'ir",
65:"Kuchli yomg'ir", 71:"Qor", 73:"Qor", 75:"Kuchli qor", 80:"Yomg'ir", 81:"Yomg'ir",
82:"Momaqaldiroq", 95:"Momaqaldiroq", 96:"Do'l", 99:"Do'l" },
uzk: { 0:"Очиқ", 1:"Асосан очиқ", 2:"Қисман булутли", 3:"Булутли", 45:"Туман", 48:"Туман",
51:"Енгил ёмғир", 53:"Ёмғир", 55:"Кучли ёмғир", 61:"Ёмғир", 63:"Ёмғир",
65:"Кучли ёмғир", 71:"Қор", 73:"Қор", 75:"Кучли қор", 80:"Ёмғир", 81:"Ёмғир",
82:"Момақалдироқ", 95:"Момақалдироқ", 96:"Дўл", 99:"Дўл" },
en: { 0:"Clear", 1:"Mostly clear", 2:"Partly cloudy", 3:"Overcast", 45:"Fog", 48:"Fog", 51:"Light rain", 53:"Rain", 55:"Heavy rain", 61:"Rain", 63:"Rain", 65:"Heavy rain", 71:"Snow", 73:"Snow", 75:"Heavy snow", 80:"Rain", 81:"Rain", 82:"Thunderstorm", 95:"Thunderstorm", 96:"Hail", 99:"Hail" }
};
const langKey = lang === "en" ? "en" : lang === "uzk" ? "uzk" : "uz";
const fallback = lang === "en" ? "Weather" : lang === "uzk" ? "Об-ҳаво" : "Ob-havo";
const desc = (descs[langKey] || descs.uz)[code] || fallback;
setWeather({ temp, wind, icon: icons[code] || "🌡", desc });
})
.catch(() => {});
}, [lang]);
const isUz = lang !== "en";
const locale = lang === "en" ? "en-US" : "uz-UZ";
const dd = String(time.getDate()).padStart(2, "0");
const mm = String(time.getMonth() + 1).padStart(2, "0");
const yyyy = time.getFullYear();
const timeStr = time.toLocaleTimeString(locale, { hour:"2-digit", minute:"2-digit", second:"2-digit" });
return (
);
}
function Hero({ t, lang, hero, gridStories, latestStories, getDisplayCat, openStory, onLoadMore }) {
const getStoryTime = (s) => {
if (!s) return "";
return s.time || s.date || "";
};
return (
{hero && (
{ e.preventDefault(); window.history.pushState(null, "", "/?story=" + hero.id); openStory(hero); }} style={{ cursor: "pointer", textDecoration: "none", color: "inherit" }}>
{hero.image && (
)}
)}
{gridStories && gridStories.length > 0 && (
)}
);
}
function StoryBadge({ story }) {
if (!story) return null;
if (story.isBreaking) return 🔴 TEZKOR;
if (story.isFeatured) return ⭐ ASOSIY;
if (story.isEditorChoice || story.isEditorPick) return ⭐ MUHARRIR;
if ((story.views || 0) > 50) return 🔥 TREND;
return null;
}
function getStoryTime(story) {
if (!story) return "";
if (story.createdAt) {
try {
const d = new Date(story.createdAt);
if (!isNaN(d.getTime())) {
const hh = String(d.getHours()).padStart(2, '0');
const mm = String(d.getMinutes()).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
const mon = String(d.getMonth() + 1).padStart(2, '0');
const yr = d.getFullYear();
return `${hh}:${mm} / ${day}.${mon}.${yr}`;
}
} catch(e) {}
}
return story.time || "Bugun";
}
function calcReadTime(text, lang) {
if (!text) return null;
const words = text.replace(/<[^>]+>/g,"").split(/\s+/).filter(Boolean).length;
const mins = Math.max(1, Math.round(words / 200));
return lang === "en" ? `${mins} min` : `${mins} daq`;
}
function StoryCard({ story, onOpen, featured = false, savedIds = [], onToggleSave, isCategory = false }) {
const isSaved = savedIds.includes(story.id);
const storyUrl = `/p/${story.slug || story.numId || story.id}`;
let formattedTime = story.time || "";
if (story.createdAt) {
try {
const d = new Date(story.createdAt);
if (!isNaN(d.getTime())) {
const hh = String(d.getHours()).padStart(2, '0');
const mm = String(d.getMinutes()).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
const mon = String(d.getMonth() + 1).padStart(2, '0');
const yr = d.getFullYear();
formattedTime = `${hh}:${mm} / ${day}.${mon}.${yr}`;
}
} catch(e) {}
}
if (!formattedTime) formattedTime = "Bugun";
return (
{story.videoUrl && (
);
}
function Sidebar({ t, stories, onOpen, ads }) {
const [email, setEmail] = React.useState("");
const [subscribed, setSubscribed] = React.useState(false);
const [history] = React.useState(() => JSON.parse(localStorage.getItem("yk-history") || "[]"));
async function handleSubscribe(e) {
e.preventDefault();
if (!email.includes("@")) return;
try {
await fetch('/api/subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email })
});
setSubscribed(true);
setEmail("");
setTimeout(() => setSubscribed(false), 4000);
} catch (error) {
}
}
return (
);
}
function useCountUp(target, duration = 1500) {
const [count, setCount] = useState(0);
const ref = useRef(null);
useEffect(() => {
const num = parseInt(target);
if (isNaN(num)) { setCount(target); return; }
const obs = new IntersectionObserver(([entry]) => {
if (!entry.isIntersecting) return;
obs.disconnect();
let start = 0;
const step = Math.ceil(num / (duration / 16));
const timer = setInterval(() => {
start += step;
if (start >= num) { setCount(target); clearInterval(timer); }
else setCount(start + (target.includes("+") ? "+" : ""));
}, 16);
}, { threshold: 0.5 });
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, [target]);
return [count, ref];
}
function StatNum({ value }) {
const [count, ref] = useCountUp(String(value));
return {count || value};
}
function Special({ t, siteConfig }) {
const currentLang = window.__currentLang || "uz";
const isUz = currentLang !== "en";
const sp = (siteConfig && siteConfig.specialProject) ? siteConfig.specialProject : {};
if (sp.isActive === false) return null;
const design = sp.design || "classic";
const kicker = sp.kicker || t.specialKicker || T(isUz ? "Maxsus loyiha" : "Special Project");
const title = sp.title || t.specialTitle || T(isUz ? "Ma'lumotga tayangan jurnalistika: voqeani shovqindan ajratamiz" : "Data journalism: separating events from noise");
const text = sp.text || t.specialText || T(isUz ? "Vatanuz.uz tahririyati siyosat, iqtisod, texnologiya, sport va madaniyatdagi muhim jarayonlarni ravon tilda tushuntiradi." : "Vatanuz.uz explains important processes in clear language.");
const badge = sp.badge || t.specialBadge || T(isUz ? "Jonli tahririyat" : "Live Newsroom");
const imgSrc = sp.image || images.newsroom;
const featuresStr = sp.features || t.specialFeatures || (isUz ? "Tezkor yangiliklar, Mustaqil tahlil, Ikki tilda, Ishonchli manba" : "Fast news, Independent analysis, Bilingual, Reliable source");
const features = featuresStr.split(",").map(f => f.trim()).filter(Boolean);
const stats = [
{ num: sp.stat1Num || t.stat1Num || "24/7", label: sp.stat1Label || t.stat1Label || T(isUz ? "Monitoring" : "Monitoring") },
{ num: sp.stat2Num || t.stat2Num || "7", label: sp.stat2Label || t.stat2Label || T(isUz ? "Bo'lim" : "Sections") },
{ num: sp.stat3Num || t.stat3Num || "2", label: sp.stat3Label || t.stat3Label || T(isUz ? "Til" : "Languages") },
{ num: sp.stat4Num || t.stat4Num || "100+", label: sp.stat4Label || t.stat4Label || T(isUz ? "Maqola" : "Articles") },
];
return (
);
}
function ContactPage({ t, page, siteConfig }) {
const contactEmail = siteConfig?.contact?.email || siteConfig?.email || "vatankont@gmail.com";
return (
);
}
function HeroSkeleton() {
return (
);
}
function SkeletonCard() {
return (
);
}
function AuthorPage({ author, stories, lang, onOpen, onBack, savedIds, onToggleSave }) {
const authorStories = stories.filter(s => (s.author || "Vatanuz.uz tahririyati") === author);
const initials = author.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase();
const isUz = lang !== "en";
return (
);
}
function TagPage({ tag, stories, lang, onOpen, onBack, savedIds, onToggleSave }) {
const cleanStr = (str) => (str || "").replace(/^[#\s]+|[#\s]+$/g, "").toLowerCase().trim();
const targetTag = cleanStr(tag);
const tagStories = (stories || []).filter(s => {
if (!s || !s.tags) return false;
const sTags = (Array.isArray(s.tags) ? s.tags : s.tags.split(/[,;\n]+/))
.map(cleanStr)
.filter(Boolean);
return sTags.some(t => t === targetTag || t.includes(targetTag) || targetTag.includes(t));
});
const isUz = lang === "uz";
const isUzk = lang === "uzk";
const backText = isUz ? "Orqaga" : (isUzk ? "Орқага" : "Back");
const countText = isUz ? "ta maqola" : (isUzk ? "та мақола" : "articles");
const emptyText = isUz ? "Ushbu teg bo'yicha maqolalar topilmadi" : (isUzk ? "Ушбу тег бўйича мақолалар топилмади" : "No articles found for this tag");
return (
);
}
function ArticlePage({ lang, t, story, stories = [], ads, getDisplayCat, savedIds, onToggleSave, copiedShare, setCopiedShare, onClose, onOpen, onView, reactions, addReaction, onAuthorClick, onTagClick }) {
if (!story || typeof story !== 'object' || !story.id) {
return (
);
}
const authorName = String(story.author || "YK").trim();
const initials = authorName.split(/\s+/).filter(Boolean).map(w => w[0]).filter(Boolean).join("").slice(0, 2).toUpperCase() || "YK";
const isHtml = Boolean(story.body && /<[a-z]/i.test(story.body));
const paragraphs = isHtml ? [] : (story.body || story.summary || "").split("\n\n").filter(Boolean);
const storyList = Array.isArray(stories) ? stories : [];
const related = storyList.filter(s => s && s.id !== story.id && s.category === story.category).slice(0, 3);
const more = storyList.filter(s => s && s.id !== story.id && s.category !== story.category).slice(0, 3);
const readMore = related.length ? related : more;
const parseTags = (str) => {
if (!str) return [];
if (Array.isArray(str)) return str.map(t => String(t).replace(/^[#\s]+|[#\s]+$/g, '').trim()).filter(Boolean);
return String(str)
.split(/[,;\n]+/)
.map(t => t.replace(/^[#\s]+|[#\s]+$/g, '').trim())
.filter(Boolean);
};
const tags = parseTags(story.tags);
const [readProgress, setReadProgress] = useState(0);
const [comments, setComments] = useState([]);
const [localViews, setLocalViews] = useState(story.views || 0);
useEffect(() => {
fetch(`/api/comments/${story.id}`)
.then(res => res.json())
.then(data => {
if (data && data.data) {
// Sort latest first
setComments(data.data.sort((a,b) => new Date(b.createdAt) - new Date(a.createdAt)));
}
})
.catch(console.error);
// Increment views
const viewedKey = `viewed_${story.id}`;
if (!localStorage.getItem(viewedKey)) {
localStorage.setItem(viewedKey, "true");
fetch(`/api/${lang}/${story.id}/view`, {
method: 'POST',
headers: { 'Cache-Control': 'no-cache', 'Pragma': 'no-cache' }
})
.then(res => {
if (res.ok) {
setLocalViews(prev => prev + 1);
if (typeof onView === 'function') onView(story.id);
} else {
localStorage.removeItem(viewedKey);
}
})
.catch(err => {
console.error(err);
localStorage.removeItem(viewedKey);
});
}
}, [story.id, lang]);
const [commentName, setCommentName] = useState("");
const [commentText, setCommentText] = useState("");
const [commentSent, setCommentSent] = useState(false);
const isUz = lang !== "en";
const [cleanRead, setCleanRead] = useState(false);
const [lightboxIndex, setLightboxIndex] = useState(null);
const readTime = calcReadTime((story.body || story.summary || ""), t.close !== "Yopish" ? "ru" : "uz");
// Table of contents (h2 headings dan)
const headings = isHtml ? Array.from(new DOMParser().parseFromString(story.body,"text/html").querySelectorAll("h2")).map(h=>h.textContent) : [];
// Swipe navigation
const storyIndex = stories.findIndex(s => s.id === story.id);
const prevStory = storyIndex > 0 ? stories[storyIndex - 1] : null;
const nextStory = storyIndex < stories.length - 1 ? stories[storyIndex + 1] : null;
const touchRef = useRef(null);
useEffect(() => {
function onTouchStart(e) { touchRef.current = e.touches[0].clientX; }
function onTouchEnd(e) {
if (touchRef.current === null) return;
const diff = touchRef.current - e.changedTouches[0].clientX;
if (Math.abs(diff) > 60) {
if (diff > 0 && nextStory) { onOpen(nextStory); window.scrollTo({top:0,behavior:"instant"}); }
if (diff < 0 && prevStory) { onOpen(prevStory); window.scrollTo({top:0,behavior:"instant"}); }
}
touchRef.current = null;
}
document.addEventListener("touchstart", onTouchStart, { passive: true });
document.addEventListener("touchend", onTouchEnd, { passive: true });
return () => { document.removeEventListener("touchstart", onTouchStart); document.removeEventListener("touchend", onTouchEnd); };
}, [nextStory, prevStory]);
useEffect(() => {
if (onView) onView(story.id);
const history = JSON.parse(localStorage.getItem("yk-history") || "[]");
const filtered = history.filter(h => h.id !== story.id);
const updated = [{ id: story.id, title: story.title, image: story.image, category: story.category, time: story.time }, ...filtered].slice(0, 15);
localStorage.setItem("yk-history", JSON.stringify(updated));
}, [story.id]);
useEffect(() => {
document.title = `${story.title} — Vatanuz.uz`;
let meta = document.querySelector('meta[name="description"]');
if (!meta) { meta = document.createElement('meta'); meta.name = "description"; document.head.appendChild(meta); }
meta.content = story.summary || "";
let og = document.querySelector('meta[property="og:title"]');
if (!og) { og = document.createElement('meta'); og.setAttribute('property','og:title'); document.head.appendChild(og); }
og.content = story.title;
let ogImg = document.querySelector('meta[property="og:image"]');
if (!ogImg) { ogImg = document.createElement('meta'); ogImg.setAttribute('property','og:image'); document.head.appendChild(ogImg); }
ogImg.content = story.image || "";
return () => { document.title = "Vatanuz.uz"; };
}, [story.id]);
useEffect(() => {
function onScroll() {
const el = document.documentElement;
const scrolled = el.scrollTop || document.body.scrollTop;
const total = el.scrollHeight - el.clientHeight;
setReadProgress(total > 0 ? Math.min(100, Math.round((scrolled / total) * 100)) : 0);
}
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
async function submitComment(e) {
e.preventDefault();
if (!commentText.trim()) return;
try {
const res = await fetch(`/api/comments/${story.id}`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
name: commentName.trim() || (isUz ? "Mehmon" : "Guest"),
text: commentText.trim()
})
});
const data = await res.json();
if (res.ok && data.data) {
setComments([data.data, ...comments]);
} else {
throw new Error(data.message || "Failed to post comment");
}
} catch(err) {
// Fallback update UI anyway in case of network issue
const newComment = {
id: Date.now(),
name: commentName.trim() || (isUz ? "Mehmon" : "Guest"),
text: commentText.trim(),
createdAt: new Date().toISOString()
};
setComments([newComment, ...comments]);
}
setCommentText("");
setCommentName("");
setCommentSent(true);
setTimeout(() => setCommentSent(false), 3000);
}
return (
)}
{pages.map((item) => (
))}
{!searchOpen ? (
) : (
setQuery(event.target.value)}
placeholder={t.search}
aria-label={t.search}
autoFocus
onBlur={(e) => {
if (!e.target.value) {
setSearchOpen(false);
}
}}
style={{ width: "200px", padding: "8px 14px", borderRadius: "8px", border: "1px solid var(--line)", background: "var(--fill)", color: "var(--ink)", fontSize: "14px", outline: "none", transition: "width 0.2s" }}
/>
)}
{languages.filter(l => l.isActive !== false).map(l => (
))}
{savedIds.length > 0 && (
)}
setMenuOpen(false)} />
)}
{serverMessage && page !== "admin" &&
) : activeStory ? (
{ setActiveStory(null); window.scrollTo({ top: 0, behavior: "smooth" }); }}
onOpen={(s) => { setActiveStory(s); window.scrollTo({ top: 0, behavior: "instant" }); }}
onView={handleView}
reactions={reactions} addReaction={addReaction}
onAuthorClick={(author) => { setActiveAuthor(author); setActiveStory(null); window.scrollTo({top:0,behavior:"smooth"}); }}
onTagClick={(tag) => { setActiveTag(tag); setActiveStory(null); window.scrollTo({top:0,behavior:"smooth"}); }}
/>
) : activeAuthor ? (
{ setActiveStory(s); window.scrollTo({top:0,behavior:"instant"}); }}
onBack={() => setActiveAuthor(null)}
savedIds={savedIds} onToggleSave={toggleSave}
/>
) : activeTag ? (
{ setActiveStory(s); window.scrollTo({top:0,behavior:"instant"}); }}
onBack={() => setActiveTag(null)}
savedIds={savedIds} onToggleSave={toggleSave}
/>
) : (
<>
{page === "home" && !query && (
loading ? (
{ setActiveStory(s); window.scrollTo({ top: 0, behavior: "instant" }); }} pinnedHeroId={pinnedHeroId} onLoadMore={() => { setPage("barcha-yangiliklar"); window.scrollTo({ top: 0, behavior: "instant" }); }} />
)
)}
{page !== "admin" && page !== "__saved__" &&
{savedIds.length > 0 && (
)}
{savedIds.length === 0 ? (
{ setActiveStory(s); window.scrollTo({ top: 0, behavior: "instant" }); }} ads={ads} />
)}
) : page === "Aloqa" ? (
{
setActiveStory(video);
window.scrollTo({ top: 0, behavior: "instant" });
}}
setPage={setPage}
/>
) : (page === "Fotolar" || page === "Фотолар" || page === "Photo") ? (
{
setActiveStory(photo);
window.scrollTo({ top: 0, behavior: "instant" });
}}
setPage={setPage}
/>
) : page !== "home" ? (
) : (
{ setActiveStory(s); window.scrollTo({ top: 0, behavior: "instant" }); }} ads={ads} />
)}
{page === "home" && { setActiveStory(s); window.scrollTo({ top: 0, behavior: "instant" }); }} />}
{page === "home" && { setActiveStory(story); window.scrollTo({ top: 0, behavior: "instant" }); }} setPage={setPage} />}
{page === "home" &&
);
}
function BreakingBanner({ t, lang, stories, onOpen }) {
const isUz = lang !== "en";
const label = t.breakingLabel || T(isUz ? "TEZKOR" : "BREAKING");
const title = t.breakingTitle || T(isUz ? "Haftaning eng dolzarb xabarlari" : "Top news of the week");
const sub = t.breakingSub || T(isUz ? "Tahririyat tanlovi" : "Editor's Choice");
const btnLabel = t.breakingBtn || T(isUz ? "Barchasini o'qish" : "Read all");
const picks = stories.filter(s => s.isBreaking).slice(0, 3);
if (picks.length === 0) return null;
return (
VATAN
setQuery(event.target.value)}
placeholder={t.search}
aria-label={t.search}
/>
{languages.filter(l => l.isActive !== false).map(l => (
))}
{serverMessage}
}
{siteConfig?.maintenanceMode && page !== "admin" ? (
Sayt ta'mirlanmoqda
Keltirilgan noqulayliklar uchun uzr so'raymiz. Tez orada sayt o'z ishini davom ettiradi.
🔖 {lang !== "en" ? "Saqlangan maqolalar" : "Saved articles"}
{savedIds.length} ta maqola saqlangan
🔖
) : (
{lang !== "en" ? "Hozircha hech narsa saqlanmagan" : "Nothing saved yet"}
{lang !== "en" ? "Maqolalardagi в˜… tugmasini bosing" : "Нажмите в˜… в статье"}
{stories.filter(s => savedIds.includes(s.id)).map(story => (
{ setActiveStory(story); window.scrollTo({ top: 0, behavior: "instant" }); }} />
))}
{getDisplayCat(page)}
{loading ? (
{Array.from({length: 6}).map((_, i) =>
) : visibleStories.length ? (
<>
{/* Top Featured Hero Story */}
{visibleStories[0] && (
)}
{/* 3-Column Grid for remaining stories */}
{visibleStories.length > 1 && (
{visibleStories.slice(1).map((story, index) => (
{ e.preventDefault(); setActiveStory(story); window.scrollTo({ top: 0, behavior: "instant" }); }}
className="cat-card"
>
{story.videoUrl && (
)}
) : (
▶
)}
{getStoryTime(story)}
{story.title}
))}{T("Bu bo'limda hozircha maqola yo'q.")}
)}
{query ? T("Qidiruv natijalari") : (t.articlesTitle || T("Maqolalar"))}
{filterCategories.map((cat) => (
))}
{t.latestNote}
{loading
? Array.from({length: 6}).map((_, i) => { setActiveStory(story); window.scrollTo({ top: 0, behavior: "instant" }); }}
/>
)) :
{T("Bu bo'limda hozircha maqola yo'q.")}
}
{label}
{title}
{sub}
{picks.map((story) => (
))}
{/* DEBUG: type={type}, blockItems={blockItems.length} */}
handleOpen(featured)} style={{cursor: "pointer"}}>
})
▶
) : (
);
}
return (
{type === "photo" ? (
) : (
)}
{type === "video" ? (
{note}
{title}
{featured.meta}
{featured.title}
{rest.slice(0, 5).map((item, idx) => {
const { title: itemTitle, meta, url: image } = item;
return (
)})}
{blockItems.slice(0, 8).map((item, idx) => {
const { title: itemTitle, meta, url: image } = item;
return (
)})}
)}
{weather ? (
<>
{weather.icon}
{lang === "en" ? "Tashkent" : lang === "uzk" ? "Тошкент" : "Toshkent"}
{weather.temp}°C
{weather.desc}
💨 {weather.wind} km/h
) : (
🌡 {isUz ? "Yuklanmoqda..." : "Loading..."}
)}
{dd}
.
{mm}
.
{yyyy}
{timeStr}
{t.home || "Bosh sahifa"}
{getDisplayCat ? getDisplayCat(hero.category) : hero.category}
{hero.isBreaking && 🔴 TEZKOR}
{calcReadTime(hero.body || hero.summary, lang) && (
{calcReadTime(hero.body || hero.summary, lang)}
)}
{hero.title}
{hero.summary}
{getStoryTime(hero) && (
{getStoryTime(hero)}
)}
{(hero.views || 0) > 0 && (
{hero.views}
)}
{t.latest || 'So\'nggi yangiliklar'}
{latestStories && latestStories.length > 0 ? (
latestStories.map((story, idx) => (
{ e.preventDefault(); window.history.pushState(null, "", "/?story=" + story.id); openStory(story); }}
style={{ textDecoration: "none", color: "inherit", display: "flex", border: "none", background: "transparent", textAlign: "left", cursor: "pointer" }}
>
)}
))
) : (
{getDisplayCat ? getDisplayCat(story.category) : story.category}
{getStoryTime(story) && (
{getStoryTime(story)}
)}
{story.title}
{story.image && ({t.empty || "Hozircha yangiliklar yo'q"}
)}
▶
)}
{!isCategory && story.category && {story.category}}
{isCategory && !featured && (
{onToggleSave && (
)}
{formattedTime}
)}
{story.title}
{(featured || !isCategory) && story.summary &&{story.summary}
} {featured && (
{formattedTime}
)}
{!isCategory && (story.views || 0) > 0 && (
👁 {story.views}
)}
{kicker}
{title}
{text}
{features.map((f) => (
{f}
))}
{badge}
{stats.map((s) => (
{page}
{t.pageNotes[page]}
{t.contact.map(([title, text], i) => (
{title}
))}
{text}{i === 0 ? contactEmail : ""}
{Array.from({ length: 6 }).map((_, idx) => (
))}
{Array.from({ length: 8 }).map((_, idx) => (
))}
{initials}
{author}
{authorStories.length} {isUz ? "ta maqola" : "articles"}
{authorStories.length === 0 ? (
onOpen(story)} />
))}
{isUz ? "Maqolalar topilmadi" : "No articles found"}
) : authorStories.map(story => (🏷️ #{tag ? tag.replace(/^[#\s]+/, '') : ''}
{tagStories.length} {countText}
{tagStories.length === 0 ? (
onOpen(story)} />
))}
{emptyText}
) : tagStories.map(story => ({lang === "uz" ? "Kechirasiz, maqola topilmadi" : (lang === "uzk" ? "Кечирасиз, мақола топилмади" : "Article not found")}
{/* Title */}
)}
{story.title}
{/* Lead / Subtitle */} {story.summary && ({story.summary}
)} {/* Meta Bar */}
{getDisplayCat(story.category)} | {story.time && story.time.toLowerCase() !== "bugun" && story.time.toLowerCase() !== "бугун" ? story.time + " / " : ""}{story.date || "07.07.2026"}
{/* Inline Hero Image */}
{story.image && (
{localViews || 0}
{(!story.category || (!story.category.toLowerCase().includes("video") && !story.category.toLowerCase().includes("видео"))) && !story.videoUrl && (
{lang === "uz" ? `${story.read || 3} daqiqada o'qiladi` : (lang === "uzk" ? `${story.read || 3} дақиқада ўқилади` : `${story.read || 3} min read`)}
)}
{headings.length > 1 && (
)}
{story.videoUrl && (
<>
{story.videoUrl.includes('youtu') && (
)}
)}
{isHtml
?
: paragraphs.length > 1
? paragraphs.map((para, i) =>
{/* Fotogalereya (Photo Gallery) */}
{story.category === "photo" && story.images && story.images.length > 0 && (
{para}
) :{story.body || story.summary}
}{lang === "en" ? "Photo Gallery" : "Fotogalereya"}
{story.images.length} {lang === "en" ? "photos" : "ta rasm"}
{story.images.map((img, i) => {
const isFeatured = (i % 5 === 0) && story.images.length > 2;
return (
setLightboxIndex(i)}
style={{
gridColumn: isFeatured ? "1 / -1" : "auto",
gridRow: isFeatured ? "span 2" : "span 1",
borderRadius: "16px",
overflow: "hidden",
cursor: "pointer",
position: "relative",
boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
background: "#000"
}}
>
{ e.currentTarget.style.transform = "scale(1.08)"; e.currentTarget.style.opacity = "0.9"; }}
onMouseOut={e => { e.currentTarget.style.transform = "scale(1)"; e.currentTarget.style.opacity = "1"; }}
/>
)
})}
⛶
{lang === "uz" ? "Fikr bildiring:" : (lang === "uzk" ? "Фикр билдиринг:" : "Reaction:")}
{emojis.map(emoji => (
))}
);
})()}
{tags && tags.length > 0 && (
{lang === "uz" ? "Teglar:" : (lang === "uzk" ? "Теглар:" : "Tags:")}
{tags.map((tag, i) => (
))}
)}
{lang === "uz" ? "Ulashish:" : (lang === "uzk" ? "Улашиш:" : "Share:")}
{(() => {
const shareUrl = `${window.location.origin}/p/${story.slug || story.numId || story.id}`;
return (
<>
✈️ Telegram
);
})()}
{lang === "uz" ? "O'xshash maqolalar" : (lang === "uzk" ? "Ўхшаш мақолалар" : "Related articles")}
{readMore.map(s => (
))}