Content Studio — Written Posts

Written Posts
Complete Guide

Content Studio-র Written Posts section — Markdown rendering, GitHub Cloud sync, Quick Post Creator integration, এবং language filter।

Posts Bangla/English filter, localStorage Quick Post Creator, GitHub API দিয়ে cloud sync — সব feature বিস্তারিত।

Language Filter (বাংলা/English) GitHub Cloud Sync Markdown Renderer Quick Post Creator
Page Flow

3-Page Navigation

Page 01
Content Hub
hub.html
Page 02
Post Listing
post-listing.html
Page 03
Post Reader
post-reader.html?id=X
Two Post Sources — Important!
Written Posts has two distinct sources merged in the listing:
1. GitHub Cloud Posts — synced from GitHub via API (github_api_token in localStorage). Permanent, visible to all viewers.
2. Quick Post Creator Posts — created locally in a3km_posts localStorage key (Only-Boss panel). Marked with _source: 'localStorage'. Device-only unless synced.
GitHub cloud posts (সবার জন্য) + localStorage Quick Posts (শুধু এই device-এ) — দুটো separate source একসাথে দেখায়।
Page 2

Post Listing

post-listing.html — language filter tips, GitHub sync badge, post cards with source indicator।

Studio
Synced with GitHub · 3 cloud posts · 2 local posts
All
বাংলা
English
সীতাকুণ্ড ভ্রমণের অভিজ্ঞতা
Cloud
চন্দ্রনাথ পাহাড়, গুলিয়াখালি সমুদ্র সৈকত আর ঝরনা...
বাংলা
Mar 2024
Quick Thoughts on Arduino PWM
Local
PWM frequency and duty cycle relationship in...
English
Apr 2024
1
GitHub Sync Status Badge
Green badge when GitHub API token is set and sync is successful. Shows count: "X cloud posts · Y local posts". Tap the GitHub icon in header to configure token.
GitHub sync success হলে green badge দেখায়। Cloud + local post count।
2
Language Filter Tabs
3 tabs: All, বাংলা, English. Filters by the language field. Mixed-language posts appear in All only.
Language filter — বাংলা / English। Mixed শুধু All-এ দেখায়।
3
Source Badge (Cloud / Local)
Each post card shows source: Cloud (green, GitHub icon) or Local (blue, mobile icon). Determined by _source === 'localStorage' flag.
Cloud post (green GitHub badge) আর local Quick Post (blue mobile badge) আলাদাভাবে দেখা যায়।
4
Post Excerpt
First ~100 chars of post body stripped of Markdown syntax, shown as readable preview.
Page 3

Markdown Post Reader

post-reader.html — full Markdown→HTML rendering with heading, code, blockquote, list support।

Posts
সীতাকুণ্ড ভ্রমণের অভিজ্ঞতা
March 2024 · বাংলা · ☁ Cloud
চন্দ্রনাথ পাহাড়
চট্টগ্রাম থেকে সীতাকুণ্ড মাত্র ৩৭ কিমি দূরে। ভোরবেলায় রওনা দিলে...
"পাহাড়ের চূড়া থেকে সমুদ্র দেখা যায়।"
ঝরনার পথ
ট্রেক করে ঝরনায় পৌঁছাতে ৪৫ মিনিট লাগে...
GPS: 22.6185° N, 91.6637° E
1
Markdown → HTML Renderer
Full Markdown renderer built in post-reader.js. Converts raw Markdown to styled HTML. No external library. Handles: H1-H4, bold, italic, code, code blocks, lists, blockquotes, horizontal rules, links.
Custom Markdown renderer — H1-H4, code, list, blockquote সব support করে।
2
Post Meta Row
Below H1 title: publish date, language badge, source badge (☁ Cloud or 📱 Local).
3
Heading Styles
H1 = large white with bottom border. H2 = smaller with red color. H3 = medium dim. H4 = small dim uppercase-ish.
4
Code Blocks
Inline code: `code` → red monospace span. Code blocks: triple-backtick → dark box with Fira Code font, syntax-highlighted color.
Inline code (red span) এবং code block (dark box, Fira Code font)।
5
Blockquotes
> text → red left-border blockquote with italic styling.
Markdown Elements Supported

Renderer Capabilities

# Heading 1
## Heading 2
### Heading 3
→ Large white / Red / Dim heading styles
**bold** *italic*
`inline code`
→ Bold, italic, red monospace code
```
code block
```
→ Dark box, Fira Code font, full-width
> blockquote text
→ Red left-border, italic, dim text
- item one
- item two
1. numbered
→ Unordered + ordered lists with spacing
---
[link text](url)
→ Horizontal rule + clickable links (red)
All Features

Posts System — Every Feature

GitHub Cloud Sync
Posts fetched from GitHub via API token (github_api_token in localStorage). Token set via header GitHub icon. Cloud posts available to any visitor.
GitHub API token localStorage-এ store। Cloud posts সবার জন্য available।
Quick Post Creator Integration
Posts created in Only-Boss panel via Quick Post Creator saved to a3km_posts localStorage key. Appear in listing as "Local" posts. _source: 'localStorage' flag distinguishes them.
Only-Boss panel-এর Quick Post Creator-এর posts এখানে দেখা যায়। _source: 'localStorage' flag দিয়ে চেনা যায়।
Full Markdown Renderer
Custom post-reader.js renderer — no external library. H1-H4, bold, italic, inline code, code blocks, lists, blockquotes, links, horizontal rules.
External library ছাড়া custom Markdown renderer।
Language Filter
3 tabs: All / বাংলা / English. Filters by language field. Merges cloud + local posts before filtering.
Cloud + local posts merge করার পরে language filter apply হয়।
Source Indicators
Each card shows Cloud (☁) or Local (📱) badge. Determined by _source field. Helps distinguish permanent vs device-only posts.
Search
Header search icon. Searches title, body excerpt, tags across both cloud and local posts simultaneously.
Share Post
Web Share API with post title + URL. Cloud posts get a shareable URL; local-only posts share the app URL with ID param.
Bookmark (localStorage)
Same localStorage bookmark pattern as all other sections. Yellow icon when saved.
Data Schema

Post Object Fields

FieldTypeDescription
idStringUnique post ID. For Quick Posts: auto-generated timestamp-based.
titleStringPost title (shown as H1 in reader)
bodyStringFull Markdown content — rendered by post-reader.js
languageStringbn | en | mixed — language filter key
publishDateStringISO date string
tags[]ArraySearchable tags
_sourceString'localStorage' for Quick Post Creator posts. Absent = cloud post.
githubPathStringFor cloud posts: path in GitHub repo (optional)
File Map
FileLocationRole
hub.htmlmobile/content-studio/Entry hub for all 5 content types
post-listing.htmlmobile/content-studio/written-posts/Language filter + post cards (cloud + local)
post-listing.jsmobile/content-studio/written-posts/GitHub sync, a3km_posts merge, filter+search
post-reader.htmlmobile/content-studio/written-posts/Full Markdown reader page
post-reader.jsmobile/content-studio/written-posts/Custom Markdown→HTML renderer
localStorage Keys Reference
a3km_posts — array of Quick Post Creator posts (Only-Boss panel)
github_api_token — GitHub personal access token for cloud sync
savedPosts — bookmarked post IDs array
Courses Guide Content Studio Hub Guide All Guides