Post Reader — Full Feature Set
The Written Posts section uses a custom Markdown-to-HTML engine built in post-reader.js. No markdown library dependency — fully owned and customized.
generateTOC: true option. Scans all H2/H3 headings and builds a clickable TOC. Smooth scroll on click.syntaxHighlight: true option. Code blocks get language-specific coloring. Copy button on each block.sanitize: true escapes dangerous HTML before rendering. Prevents XSS in user-written content.a3km_posts), it merges and takes priority._source: 'localStorage' flag are local drafts — shown with a green "Local" badge. Not on GitHub yet.Article UI Breakdown
sensor.begin(0x48);
Note: Pull-up resistors (4.7kΩ) required on SDA and SCL lines.
Article Header
Category badge, title, language + reading time meta, and a source badge (cloud vs local draft).
Auto Table of Contents
Generated by generateTOC(). All H2/H3 headings become clickable anchors. Smooth scroll animation.
Rendered Markdown Body
Custom renderMarkdown() converts Markdown: headings, bold, italic, code blocks, blockquotes, links, lists, tables.
Code Blocks
Fenced code with language tag (```js, ```cpp etc.) renders with syntax highlighting and a Copy button via copyButton: true.
Local Draft Badge
Green "? Local" badge shown when _source === 'localStorage'. Indicates the post exists in your device, not yet on GitHub.
Share Buttons
Copy-link, WhatsApp, Twitter. On mobile uses Web Share API if available, falls back to clipboard copy.
Supported Markdown Elements
Everything the custom renderer handles — no external library.
| Element | Markdown | Output |
|---|---|---|
| Heading H1-H3 | # Title | Bold section title |
| Bold | **text** | text |
| Italic | *text* | text |
| Code (inline) | `code` | code |
| Code block | ```lang\ncode\n``` | Highlighted block + Copy button |
| Blockquote | > text | Red-left-border quote block |
| Link | [text](url) | Styled anchor tag |
| Unordered list | - item | Bullet list |
| Ordered list | 1. item | Numbered list |
| Horizontal rule | --- | Section divider |
GitHub Sync & Local Merge
Fetch from GitHub
Posts are fetched from GitHub repository via raw URL. Loaded into a posts array in memory.
Read localStorage (a3km_posts)
Any posts saved locally (via Quick Post Creator) are read from localStorage.getItem('a3km_posts').
Merge: local takes priority
Local posts are merged with GitHub posts. If same ID exists in both, the local version wins. Local posts get _source: 'localStorage' flag.
Render in UI
Posts show green "? Local" badge if from localStorage. GitHub posts show the cloud date.
Publish via Only-Boss
When ready, use the Posts Manager in Only-Boss to push the local post to GitHub — removing the draft badge permanently.
Lesser-Known Tricks
Unlike most sites that use marked.js or showdown.js, A3KM's renderer is entirely custom. It supports theme: 'dark-red', showLineNumbers: true, and copyButton: true — all impossible with locked libraries.
The posts listing page filters by language (English / Bengali / Arabic). Language is stored as metadata in each post's frontmatter. The filter is instant — no reload.
The Quick Post Creator in Only-Boss writes directly to a3km_posts localStorage. You can draft and preview a full article without internet — then publish when connected.
Code Reference
Other Feature Guides
More deep-dives into A3KM Studio features — shortcuts, hidden tricks, mobile vs desktop comparisons and code references.