From 11c4d631a940c8d4dabc9fc9f502f8b64f2764b8 Mon Sep 17 00:00:00 2001 From: arsam Date: Fri, 18 Sep 2026 23:26:00 +0330 Subject: [PATCH] Import source: app/src/widgets/ArticleCardWidget Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality. --- app/src/widgets/ArticleCardWidget.jsx | 93 +++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 app/src/widgets/ArticleCardWidget.jsx diff --git a/app/src/widgets/ArticleCardWidget.jsx b/app/src/widgets/ArticleCardWidget.jsx new file mode 100644 index 0000000..d239989 --- /dev/null +++ b/app/src/widgets/ArticleCardWidget.jsx @@ -0,0 +1,93 @@ +// Embeddable article preview card. +import { useEffect, useRef } from 'react'; +import { TeknavData } from '../../teknav-data.js'; + +const SITE_URL = 'https://www.teknav.ir'; + +const isDark = typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches; + +const cardStyle = { + fontFamily: '\'Vazirmatn\', Tahoma, sans-serif', + direction: 'rtl', + maxWidth: 480, + border: isDark ? '1px solid rgba(255,255,255,0.1)' : '1px solid #E4DDD2', + borderRadius: 12, + overflow: 'hidden', + background: isDark ? '#0C1E22' : '#fff', +}; + +export function ArticleCardWidget({ slug }) { + const article = TeknavData.articles.find((a) => a.slug === slug); + const lastHeight = useRef(0); + + useEffect(() => { + const el = document.getElementById('widget-root'); + if (!el) return; + const observer = new ResizeObserver((entries) => { + for (const entry of entries) { + const h = entry.target.offsetHeight || 0; + if (h !== lastHeight.current) { + lastHeight.current = h; + window.parent?.postMessage({ type: 'resize', height: h }, '*'); + } + } + }); + observer.observe(el); + return () => observer.disconnect(); + }, []); + + if (!article) { + return ( +
+ مقاله یافت نشد. +
+ ); + } + + const image = article.ogImage || `/images/og/${slug}.jpg`; + + return ( +
+
+ {article.title} +
+ + {article.categoryName || ''} + +
+
+ + {article.readTime} دقیقه + +
+
+
+

{article.title}

+

+ {String(article.summary || '').slice(0, 120)}… +

+
+
+ {article.authorName} + + خواندن در تکناو ↗ + +
+
+ ); +}