Sample Blog: Every Feature in One Post

Use this file to test Import Markdown in the TipTap editor, or paste it into a blog draft. Legacy markdown posts render through EnhancedMarkdown; after import, content is stored as HTML.

Introduction

This paragraph has bold, italic, ~~strikethrough~~ (if your renderer supports it), and inline code. Here is a link to TipTap and an external GitHub repo.

A classic blockquote for pull quotes or asides.

Headings & Lists

Unordered list

First item
Second item with emphasis
- Nested item
- Another nested item
Third item

Ordered list

Plan the post
Write in the editor
Preview with Ctrl+Shift+P
Publish

Task list (GFM)

Copy sample-blog.md from project root
Open AURA → Content → Blogs
Import markdown via toolbar
Toggle preview and verify mermaid

Code

Inline: const answer = 42

Fenced block with language:

interface BlogDraft {
  id: string
  title: string
  content: string // HTML after TipTap, or Markdown for legacy posts
}

export function estimateReadTime(content: string): number {
  const words = content.trim().split(/\s+/).filter(Boolean).length
  return Math.max(1, Math.ceil(words / 200))
}

Plain fence without language:

+------------------+
|  Hello, AURA!    |
+------------------+

Mermaid diagrams

Flowchart

graph TD A[Start writing] --> B{Preview OK?} B -->|Yes| C[Save draft] B -->|No| D[Edit in TipTap] D --> B C --> E[Publish]

Sequence diagram

sequenceDiagram participant Author participant AURA participant Store Author->>AURA: Edit blog in SimpleEditor AURA->>AURA: getHTML() AURA->>Store: updateBlog (Zustand persist) Store-->>Author: Saved locally

Pie chart

pie title Content format in AURA "HTML (TipTap)" : 70 "Legacy Markdown" : 30

GitHub-style callouts

[!NOTE] Notes are for neutral context. Import Markdown preserves these as callout blocks.

[!TIP] Use Import Markdown in the toolbar to load this entire file at once.

[!INFO] Preview uses the same BlogContent pipeline as the public blog website.

[!WARNING] Very large images in thumbnails are stored as base64 — keep thumbnails under 5MB.

[!SUCCESS] Mermaid, code blocks, and tables all render in preview mode.

[!DANGER] Deleting a blog from the sidebar is permanent unless you have a JSON backup.

Table

Feature	Editor (TipTap)	Preview (BlogContent)
Bold / Italic	Yes	Yes
Mermaid	Yes	Yes
Callouts	Via MD import	Yes
Tables	Resizable	GFM
Images	Upload / URL	Yes
Code highlight	Yes	Prism

Image

Caption: Sample remote image — replace with your thumbnail or aura-media:// URL after upload.

Horizontal rule

Content above the rule.

Content below the rule.

Mixed section (good for paste tests)

Here's a checklist before you ship:

Run npm run dev in AURA
Create a new blog
Import this file
Confirm mermaid renders
Copy HTML with the toolbar Copy button if needed

graph LR MD[sample-blog.md] --> Import[Import Markdown] Import --> HTML[Stored HTML] HTML --> Preview[BlogPostPreview]

[!TIP] For the Blog Website CMS, the same TipTap extensions apply; only image upload differs (Supabase vs Electron save-media).

Closing

That covers headings, lists, tasks, links, code, mermaid, callouts, tables, images, blockquotes, and dividers. Edit this file in the repo root and re-import anytime you change preview behavior.

Happy writing.

Testing

smaple