teknav-bak/app/F1-P.md

Teknav Growth Plan: Phase 15 (Viewership & Top-of-Funnel Scaling)

This document outlines the detailed architectural and implementation plan for massively scaling Teknav's viewer base and organic reach. This plan strictly adheres to the core constraints: Zero CDNs, Persian-first RTL, and native Linux deployments.

1. Google Web Stories Integration

Web Stories are full-screen, tappable visual narratives indexed by Google Discover and Search. They are extremely effective for driving mobile traffic.

1.1 Backend: Automated Story Generation

• scripts/generate-web-stories.mjs: Create a new build script that iterates through published articles in teknav-data.js (or database) and generates static AMP HTML files for each story.
• Content Chunking: Utilize the existing article structure to break content into 4-7 "slides" per article:
  • Slide 1: Cover (High-res og:image, Article Title, Author, "Swipe up to read").
  • Slide 2-N: Key headings and brief summaries.
  • Final Slide: "Read the full technical deep-dive on Teknav", with a call-to-action link to the canonical article.
• AMP Validation: The generated HTML must strictly follow the <html amp> specification, using valid <amp-story> tags and local, non-CDN assets.

1.2 Frontend & SEO Artifacts

• Sitemap Integration: Update scripts/generate-seo.mjs to include a new <urlset> specifically for /stories/* in the main sitemap.xml.
• Article Linkage: In generate-article-pages.mjs, inject <link rel="amphtml" href="https://www.teknav.ir/stories/:slug"> into the <head> of the standard article HTML so Google knows a story version exists.
• Local Assets Check: Ensure all swipe animations and video/image assets used in the stories are served from /public/images/stories and bypass external CDNs.

---

2. Social Virality & Embeddable Widgets

We want to empower readers to share snippets visually, and allow other websites to easily embed Teknav data.

2.1 Auto-Generated Quote Cards

• UI Component (QuoteSharer.jsx): A new React component that appears as a tooltip when a user highlights text on an article page (similar to Medium).
• Client-Side Rendering (Canvas): When the user clicks "Share Quote", utilize the native HTML5 <canvas> API to draw a branded quote card.
  • Background: Teknav dark-mode gradient.
  • Text: The highlighted text in Persian (RTL).
  • Footer: Teknav logo, Article Title, and a QR code/shortlink.
• Export: The user can instantly download the image (.png) or share it directly via the Web Share API.

2.2 Embeddable Teknav Widgets

• Widget Route (/embed/*): Create a standalone React entry point (embed.html -> embed.jsx) that strips away the header, footer, and sidebars, leaving only pure data presentation.
• Supported Widget Types:
  • /embed/glossary/:slug: Displays a definition card for a tech term.
  • /embed/company/:slug: Displays a company profile card with verification badges.
  • /embed/article-card/:slug: Displays a mini-preview of an article.
• Cross-Origin Configuration: Update the Nginx configuration (/etc/nginx/sites-available/teknav) to explicitly allow X-Frame-Options for /embed/* paths, while keeping the rest of the site protected against clickjacking.
• Branding & Backlinks: Every widget must contain a non-removable <a href="https://www.teknav.ir..." target="_blank"> link back to the canonical Teknav page to drive SEO value from embedded domains.

---

3. Programmatic SEO & Data Hubs

Leveraging the existing Tech Directory and Glossary models to generate thousands of high-intent search pages.

3.1 Comparison Pages Engine ("X vs Y")

• Data Model: Create a mapping system (either in teknav-data.js or via a new Prisma Comparison model) that pairs similar glossary terms or companies (e.g., "Next.js vs Remix", "PostgreSQL vs MongoDB").
• Template (ComparisonPage.jsx): A highly optimized, static layout that dynamically pulls the definitions, pros/cons, and related articles for both entities and displays them side-by-side.
• Build Generation (scripts/generate-comparisons.mjs): Loop through all valid comparison pairs and pre-render them to static HTML (dist/compare/x-vs-y/index.html) to guarantee instant load times and indexability.

3.2 Dynamic "Top Tools" Aggregation

• Category Taxonomy: Ensure CompanyProfile entries have strict industry tags (e.g., "AI", "Fintech", "Cloud").
• Listicles (TopicHub.jsx extension): Automatically generate programmatic listicle pages based on tags.
  • Route example: /directory/category/artificial-intelligence generating the SEO title: "Top Persian Artificial Intelligence Startups & Tools".
• Structured Data: Inject ItemList and CollectionPage JSON-LD schemas into these programmatic pages so Google parses them as official rankings/lists in search results.

---

4. Execution Order & Verification

1. Phase 15A: Write scripts/generate-web-stories.mjs and deploy Google Stories to establish a presence in Google Discover.
2. Phase 15B: Build the /embed/* routes and Nginx frame allowances, then deploy the Client-Side Quote Card generator.
3. Phase 15C: Extend static generation scripts for programmatic comparison pages and directory listicles.
4. Validation: Run npm run preflight:prod and ensure no external CDN scripts crept in (especially critical for AMP valid HTML). Test embed iFrames in a blank local HTML file.