Desktop — Page 04
PAGE 04 / 07

Content Studio

Content Studio/hub.html + 5 content-type sub-sections

Central hub for all 5 content types — Vlogs, Books & PDFs, Written Posts, Research Papers, and Educational Videos. Auto-counts stats from all JSON files simultaneously using Promise.all.

৫ ধরনের content-এর hub। সব JSON থেকে auto-count হয়। প্রতিটি type-এর separate listing + detail + viewer।

5 Content Types Promise.all Fetch YouTube API PDF Reader 3D Book Viewer Sidebar Filters Markdown Posts
SECTION 01

Hub Overview

The hub page (hub.html) shows 5 content type cards. Each card displays a live count fetched from its JSON file. All 5 fetches run simultaneously with Promise.all — no blocking.

Hub page-এ ৫টি content card। প্রতিটি JSON থেকে count fetch হয়। Promise.all দিয়ে একসাথে।

Promise.all Fetch
Fetches all 5 JSON files simultaneously — shows counts on card load
Engineering Corner Cards
Cards with red corner accent, grid pattern bg, and white-splash hover
Deep-Links to Sub-Sections
Each card links to its dedicated content listing page
5 Content Types
Vlogs
Video blog content
12
Books & PDFs
Engineering books + docs
24
Written Posts
Blog posts (BN + EN)
8
Research Papers
Academic papers
6
Educational Videos
Tutorial content
8
SECTION 02

Books & PDF System

Books section has a sidebar filter (by category/subject), 3D flip book card hover effect, and an inline PDF reader. Password-protected PDFs open with a password dialog using pdf.js.

Books-এর sidebar filter, 3D flip card hover, inline PDF reader। Password-protected PDF-এ password dialog আসে।

3D Book Flip Card
CSS perspective flip reveals back with author + pages info
PDF Password System
Protected PDFs show password dialog — pdf.js decrypts inline
Sidebar Category Filter
Filter books by subject — Mechanical, Physics, Math, Programming...
Inline PDF Reader
Renders PDF pages inside the page — no new tab needed
Sidebar + Content Layout
SECTION 03

Video Content System

Two video sections — Vlogs and Educational. Uses YouTube Data API to sync video counts and metadata. Thumbnails load from YouTube CDN. Click opens YouTube in new tab or inline player.

Vlogs + Educational Videos — YouTube API থেকে data sync হয়। Thumbnail YouTube CDN থেকে load হয়।

YouTube API Sync
Fetches video metadata from YouTube Data API v3 — auto-updates on new uploads
Inline Player Option
Videos can open in-page iframe or external YouTube tab
Offline Sync Manager
offline-content-manager.js caches video list for offline browsing
Video Content Flow
1
YouTube Data API v3 fetch
2
Video metadata stored in JSON cache
3
Thumbnail from YouTube CDN (maxresdefault)
4
Click → embedded iframe player or YouTube link
SECTION 04

Written Blog Posts

Blog posts are bilingual (Bangla + English). Stored as markdown files, loaded and rendered using marked.js. Each post has a reading time estimate, tags, and share options.

Blog post Bangla + English-এ লেখা। Markdown file load করে marked.js দিয়ে render করে।

Markdown Rendering
marked.js converts .md files to styled HTML — inline code, headings, lists
Reading Time Estimate
Auto-calculated based on word count — shown on post card
Bilingual Posts
Some posts written in Bangla, some in English — tagged accordingly
Blog Post Card Sample
Engineering Bangla
SolidWorks দিয়ে Engine Design
৪-সিলিন্ডার ইঞ্জিন ডিজাইনের step-by-step guide...
5 min read Jan 2025

Content Studio — All JSON Files

JSON FileContent TypeStructure
Content Storage/vlogs/vlogs.jsonVlogsArray of {title, youtubeId, date, tags, description}
Content Storage/books-pdfs/books.jsonBooks & PDFsArray of {title, author, category, pages, filePath, passwordProtected}
Content Storage/written-posts/posts.jsonWritten PostsArray of {title, lang, tags, date, mdFile, readingTime}
Content Storage/research-papers/papers.jsonResearch PapersArray of {title, journal, year, abstract, filePath}
Content Storage/educational-videos/videos.jsonEducationalArray of {title, youtubeId, playlist, level, duration}