DevPaper - Production-Grade Content Management System

DevPaper is an SEO-first, performance-driven documentation framework built on VitePress and Vue 3. It solves common challenges faced by documentation teams—fragmented content pipelines, poor search visibility, and slow page loads—by providing a type-safe, Markdown‑based workflow that outputs fully pre-rendered HTML with rich metadata.

Designed for professionals, DevPaper enables you to author static documentation with:

Automatic SEO: metadata, Open Graph/Twitter cards, canonical links, and JSON‑LD generated from frontmatter.
Type safety & validation: content is parsed into a typed DocPage model at build time, catching errors early.
High performance: Vite-powered dev server, minimal runtime, lazy-loading, and optimized assets for excellent Core Web Vitals.

Whether you’re powering product docs, knowledge bases, or developer portals, DevPaper helps you ship content that ranks and performs. Contributions are welcome – see the Contributing section below to get started.

✨ Key Features

📊 Content Architecture (NEW)

✅ Type-Safe Content Model - Production-grade DocPage core model with TypeScript types
✅ YAML Frontmatter Parser - Automatic parsing of markdown frontmatter with validation
✅ Content Loader - Advanced markdown file loading with filtering, sorting, and pagination
✅ Multi-format Support - YAML/TOML/JSON frontmatter parsing
✅ Nested Object Parsing - Support for complex frontmatter structures

Platform Features

⚡️ Lightning-Fast Performance - Built with Vite for instant server startup and hot module replacement
📖 Modern Documentation - Clean, intuitive UI powered by VitePress 2.0
🎨 Fully Customizable - Flexible theming and layout options
🌍 Multi-language Support - Support for multiple languages with hreflang tags
📱 Responsive Design - Perfect on mobile, tablet, and desktop devices
🔍 SEO-Optimized - Comprehensive SEO features out of the box

🏗️ Architecture Overview

Core Components (Production-Grade Implementation)

1. DocPage Model ✅ (108 tests passing)

Type-safe content model with TypeScript
Core fields: id, slug, title, description, body, type, category
Metadata: author, publishedAt, updatedAt, status
SEO: robots, urlPath, breadcrumbs, table of contents
Derived: RenderedDocPage with schema.org and head tags

2. Frontmatter Parser ✅ (48 tests passing)

Parse YAML frontmatter from markdown files
Automatic URL path generation
Breadcrumb generation from paths
Table of Contents extraction
Multi-language support
Flexible author field handling

3. Content Loader ✅ (41 tests passing)

Extract YAML/TOML/JSON frontmatter from markdown
Parse and validate markdown files
Convert to DocPage objects
Filter by category, language, status, type
Sort by order, title, date
Pagination with limit/offset

Test Coverage: 197/197 Tests ✅

Section 1 (DocPage): 108 tests - Core model, generators, SEO safety
Section 4 (Frontmatter): 48 tests - YAML parsing, conversion, helpers
Section 5 (Content Loader): 41 tests - Extraction, loading, generation, filtering

🚀 SEO Features

DevPaper comes with enterprise-grade SEO optimization built in:

1. Structured HTML & Meta Tags

✅ Unique, descriptive page titles for each page
✅ Meta descriptions (120-160 characters) on all pages
✅ Canonical URLs to prevent duplicate content issues
✅ Proper charset (UTF-8) and viewport meta tags
✅ Open Graph tags for social media sharing

2. Header Structure

✅ Exactly one <h1> per page
✅ Logical heading hierarchy (h1 → h2 → h3)
✅ Proper semantic HTML heading tags

3. Clean URLs

✅ Clean, descriptive URLs without query strings
✅ Lowercase URLs following best practices
✅ 301 redirects for URL changes via _redirects file

4. Indexing & Robots Control

✅ robots.txt file for search engine guidance
✅ <meta name="robots" content="index,follow"> on all public pages
✅ index: false for draft/internal pages to prevent indexing
✅ Automatic exclusion of draft pages from sitemap

5. Sitemap & Crawlability

✅ Auto-generated XML Sitemap - Updated on every build
✅ Includes all pages except drafts
✅ Proper date stamps and change frequencies
✅ Referenced in robots.txt for search engines

6. Performance Optimization

✅ Static HTML Content - All content server-rendered, no JS required for initial content
✅ Code Splitting - Each page loads only necessary JavaScript
✅ Minimal JS Footprint - Core app JS is only 1.35 KB
✅ Image Optimization - Support for lazy loading images
✅ CSS Optimization - Efficient stylesheet delivery

7. Structured Data (Schema.org)

✅ Breadcrumb Schema - Helps search engines understand site structure

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [...]
}

✅ Article/TechArticle Schema - Rich snippets in search results

{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "...",
  "description": "...",
  "author": {...},
  "datePublished": "..."
}

📁 Project Structure

DevPaper/
├── types/                      # Production-grade type definitions
│   ├── doc-page.ts            # Core DocPage model & RenderedDocPage
│   ├── doc-page-generator.ts  # Generator functions for SEO
│   ├── frontmatter.ts         # Frontmatter types & validators
│   ├── frontmatter-parser.ts  # YAML → DocPage conversion
│   ├── content-loader.ts      # Content loader types & config
│   ├── content-loader-utils.ts# Content loading & parsing
│   ├── *.examples.ts          # Real-world usage examples
│   └── index.ts               # Main exports
├── tests/                      # Comprehensive test suite (197 tests)
│   ├── doc-page.*.test.ts     # 108 tests
│   ├── frontmatter.test.ts    # 48 tests
│   └── content-loader.test.ts # 41 tests
├── .vitepress/
│   ├── config.ts              # Main VitePress configuration
│   ├── theme/                 # Custom theme components
│   └── dist/                  # Build output
├── docs/                       # Documentation pages
│   ├── index.md
│   ├── installation.md
│   ├── configuration.md
│   ├── features.md
│   ├── examples.md
│   └── new-feature.md
├── services/                   # Service pages
├── public/
│   ├── robots.txt
│   ├── _redirects
│   └── assets/
├── package.json
├── .gitignore
└── README.md

🛠️ Setup & Installation

Prerequisites

Node.js 14+
pnpm (recommended) or npm/yarn

Installation

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Run tests (197 passing tests)
pnpm vitest run tests/

# Preview production build
pnpm serve

Verify Installation

# Check that all 197 tests pass
pnpm vitest run tests/

# Expected output:
# Test Files  5 passed (5)
# Tests  197 passed (197)

📝 Writing Documentation

Use Cases & Problems Solved

SEO headaches: eliminates manual metadata management and duplicate-content issues.
Inconsistent content structure: enforces a single frontmatter schema and type definitions.
Slow documentation sites: serves pre-rendered HTML and optimizes assets out of the box.
Integration friction: designed to be dropped into existing VitePress projects or used standalone with Docker.

Applicable for:

Product documentation teams
Open‑source projects needing polished docs
Internal knowledge bases with search/SEO requirements
Any static site where content authors require type safety and validation

Creating a New Page

Create a new markdown file with YAML frontmatter:

---
type: doc
title: Installation & Setup Guide
description: Complete step-by-step guide to install DevPaper
category: docs
order: 1
author:
  name: DevPaper Team
  url: https://DevPaper.dev
publishedAt: 2025-01-10
updatedAt: 2025-01-15
lang: en
index: true
robots: index,follow
---

# Installation & Setup Guide

Your markdown content here...

Frontmatter Fields

Field	Type	Required	Description
`type`	string	✅	`doc`, `guide`, or `service`
`title`	string	✅	50-60 characters (SEO optimized)
`description`	string	✅	120-160 characters for meta tag
`category`	string	✅	`docs` or `services`
`order`	number	✅	Display order
`author`	string \| object	✅	Author name or `{name, url}`
`publishedAt`	date	✅	ISO format date
`updatedAt`	date	✅	ISO format date
`lang`	string	⭕	Language code (default: `en`)
`index`	boolean	⭕	Include in sitemap (default: `true`)
`robots`	string	⭕	`index,follow` or other directives

Mark as Draft (Exclude from Indexing)

---
type: doc
title: Work in Progress
index: false
---

# Work in Progress

This page won't appear in sitemaps or search results...

🔍 Content Management

Using the Content Loader

import {
  loadMarkdownFile,
  loadedFileToDocPage,
  filterAndSortDocPages,
} from './types'

// Load a single markdown file
const result = loadMarkdownFile({
  id: 'docs/installation',
  path: 'docs/installation.md',
  filename: 'installation.md',
  lang: 'en',
  raw: fileContent,
})

// Query and filter DocPages
const pages = filterAndSortDocPages(allPages, {
  category: 'docs',
  status: 'published',
  sortBy: 'order',
})

Type-Safe Content Model

All content is validated against the DocPage type system:

interface DocPage {
  id: string
  slug: string
  title: string
  description: string
  body: string
  type: 'doc' | 'guide' | 'service'
  category: string
  author: { name: string; url?: string }
  publishedAt: Date
  updatedAt: Date
  status: 'published' | 'draft'
  robots: RobotsDirective
  urlPath: string
  breadcrumbs: BreadcrumbItem[]
  toc: HeadingItem[]
}

🔍 SEO Configuration

Configuration Files

`.vitepress/config.ts`

Global site settings (title, description)
Metadata for all pages
Breadcrumb and Article Schema generation
OG tags for social sharing

`public/robots.txt`

User-agent: *
Allow: /
Sitemap: https://DevPaper.dev/sitemap.xml

`public/_redirects`

/old-page  /new-page  301

📊 SEO Best Practices Implemented

Feature	Status	Details
Responsive Design	✅	Mobile-first, works on all devices
Static Content	✅	No JavaScript required to see content
Page Speed	✅	Core app JS: 1.35 KB, CSS: ~182 KB
Unique Titles	✅	Each page has unique, descriptive title
Meta Descriptions	✅	120-160 characters per page
Canonical URLs	✅	Every page has canonical URL
Structured Data	✅	Breadcrumb + Article schemas
XML Sitemap	✅	Auto-generated, updated on build
robots.txt	✅	Proper directives for crawlers
Header Structure	✅	One h1, logical h2/h3 hierarchy
URL Structure	✅	Clean, descriptive, lowercase URLs
Draft Pages	✅	Excluded from sitemap and indexing

🧪 Testing & Validation

Manual Testing

View Source - Press Ctrl+U to verify content is present without JavaScript
Check Sitemap - Visit https://DevPaper.dev/sitemap.xml
Test Redirects - Verify 301 redirects are working

Tools for Validation

Google Search Console - Monitor indexing and search performance
Google PageSpeed Insights - Check performance and SEO scores
Lighthouse - Built-in Chrome DevTools audit
Schema.org Validator - Validate structured data

🚀 Deployment

Vercel (Recommended)

Connect your GitHub repository
Vercel automatically detects VitePress
Build command: pnpm build
Output directory: .vitepress/dist
Deploy on every push to main

Other Platforms

# Build
pnpm build

# The .vitepress/dist folder is ready to deploy

📚 Documentation

📄 License

MIT License - See LICENSE file for details

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Support

For questions and issues, please visit:

Made with ❤️ by xoxxel Team

Name		Name	Last commit message	Last commit date
Latest commit History 10 Commits
.vitepress		.vitepress
docs		docs
public		public
services		services
tests		tests
types		types
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
about.md		about.md
captain-definition		captain-definition
get-started.md		get-started.md
index.md		index.md
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
setup.sh		setup.sh
task.md		task.md
vercel.json		vercel.json
vitest.config.ts		vitest.config.ts

xoxxel/devpaper

Folders and files

Latest commit

History

Repository files navigation

DevPaper - Production-Grade Content Management System

✨ Key Features

📊 Content Architecture (NEW)

Platform Features

🏗️ Architecture Overview

Core Components (Production-Grade Implementation)

1. DocPage Model ✅ (108 tests passing)

2. Frontmatter Parser ✅ (48 tests passing)

3. Content Loader ✅ (41 tests passing)

Test Coverage: 197/197 Tests ✅

🚀 SEO Features

1. Structured HTML & Meta Tags

2. Header Structure

3. Clean URLs

4. Indexing & Robots Control

5. Sitemap & Crawlability

6. Performance Optimization

7. Structured Data (Schema.org)

📁 Project Structure

🛠️ Setup & Installation

Prerequisites

Installation

Verify Installation

📝 Writing Documentation

Use Cases & Problems Solved

Creating a New Page

Frontmatter Fields

Mark as Draft (Exclude from Indexing)

🔍 Content Management

Using the Content Loader

Type-Safe Content Model

🔍 SEO Configuration

Configuration Files

.vitepress/config.ts

public/robots.txt

public/_redirects

📊 SEO Best Practices Implemented

🧪 Testing & Validation

Manual Testing

Tools for Validation

🚀 Deployment

Vercel (Recommended)

Other Platforms

📚 Documentation

📄 License

🤝 Contributing

📧 Support

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

`.vitepress/config.ts`

`public/robots.txt`

`public/_redirects`

Packages