Opensophy Hub: SSG/SPA for Markdown documentation

# Opensophy Hub: Static SSG/SPA Platform for Advanced Markdown Documentation

Opensophy Hub is a hybrid SSG and SPA platform designed for publishing technical documentation, articles, and manuals. It solves the challenge of storing content with advanced Markdown capabilities without needing MDX or additional plugins. The project structure is generated directly from the file system in the Docs/ directory, where folders define navigation: sidebar, breadcrumbs, and URLs are created automatically.

Example structure:

Docs/
├── welcome.md
├── [N][brain]Articles{article}/
│   ├── [C][folder-code]Development{development}/
│   │   └── [A][layers]Stack Selection{webrendering}.md
│   └── [C][signal]Tools{tools}/
│       └── [A][container]Dokploy Overview{dokploy}.md

Three levels of hierarchy—sections ([N]), categories ([C]), articles ([A])—provide slugs, icons, and titles without manual routing setup. This simplifies maintenance and scaling of content for middle/senior developers.

Advanced Markdown Without Dependencies

Hub introduces rich blocks directly into standard .md files: alerts, cards, columns, steppers, diagrams, KaTeX formulas, and charts from tables. Instead of HTML markup with classes, it uses simple syntactic constructs.

Example alert in HTML:

<div class="alert alert-warning" role="alert">
  <strong>Ostorozhno!</strong> Udalyonnye cherez <code>rm</code> files not popadayut in korzinu.
</div>

In Hub:

:::caution
Files deleted with `rm` don't go to the trash.
:::

Step-by-step instruction (stepper):

:::steps
:::step[status=done] Installation
`npm install`
:::
:::step[status=active] Setup
Fill out `.env`.
:::
:::step[status=pending] Launch
`npm run dev`
:::
:::

These blocks render natively without external libraries, reducing build complexity and boosting performance in SPA mode.

Interactive Tables and UI Playgrounds

Standard Markdown tables turn into interactive components with column filters (multiselect), search with highlighting, column hiding, fullscreen, drag-to-scroll, and export to Markdown/Excel.

It also supports embedding live UI library components with one line:

[uic:blur-text]

Users can dynamically tweak parameters—scale, color, animation, speed—and see results in real time. Perfect for demoing components in docs without a separate playground.

CMS Panel for Editing

The built-in content management panel lets you edit Markdown with live preview. Create pages, categories, and sections right in the interface—no need to restart npm run dev or run scripts. Full block format support delivers a workflow like a full CMS, but powered by static generation.

Advantages for Developers:

• Automatic navigation from file structure.
• Advanced Markdown without plugins or MDX.
• Interactive tables with filters and export.
• Live playgrounds for UI components.
• CMS-like editor with preview.

What Matters

• File Structure as Navigation: Full automation of routing, breadcrumbs, and sidebar from prefixes [N], [C], [A].
• Native Markdown Blocks: Alerts, steppers, columns, KaTeX, charts—without dependencies.
• Table Interactivity: Filters, search, fullscreen, export to MD/Excel.
• UI Playgrounds: One line for live component demos with parameters.
• CMS Interface: Editing with preview, no build required.

— Editorial Team