Chapter 4: Content Management
"Hongik Ingan: Your content, your control, no platform restrictions."
4.1 Page Management
Page Structure
==============
Every page has:
- Title (displayed in tab)
- Slug (URL path)
- Content (HTML/Markdown)
- Template (optional)
- Meta (SEO information)
Create Page
===========
await home.pages.create({
title: 'About Us',
slug: 'about',
content: `
# About Happy Bakery
We've been baking fresh bread
since 2010...
`,
meta: {
description: 'Learn about Happy Bakery',
keywords: ['bakery', 'bread', 'Seoul']
}
});
Page Operations
===============
Create:
await home.pages.create(pageData)
Read:
await home.pages.get('about')
Update:
await home.pages.update('about', { content: newContent })
Delete:
await home.pages.delete('about')
List:
await home.pages.list()
Page Templates
==============
Available templates:
- default (standard page)
- landing (hero + sections)
- blog-list (blog index)
- product-list (shop catalog)
- contact (form + map)
- gallery (image grid)
4.2 Blog System
Blog Post Structure
===================
Each post includes:
- Title
- Slug (URL)
- Content (Markdown)
- Excerpt (summary)
- Featured image
- Author
- Tags and categories
- Publish date
Create Post
===========
await home.blog.createPost({
title: 'New Sourdough Recipe',
content: `
# Our New Sourdough
After months of testing,
we're excited to announce...
`,
excerpt: 'Introducing our new sourdough bread',
featuredImage: sourdoughImage,
tags: ['bread', 'sourdough', 'new'],
categories: ['announcements', 'recipes']
});
Blog Features
=============
Listing:
- Chronological order
- Category filtering
- Tag filtering
- Search
Individual post:
- Full content
- Related posts
- Share buttons
- Comments (optional)
SEO:
- Automatic meta tags
- Structured data
- RSS feed
- Sitemap
Post Operations
===============
Create:
await home.blog.createPost(postData)
Update:
await home.blog.updatePost(id, updates)
Delete:
await home.blog.deletePost(id)
List:
await home.blog.listPosts({
category: 'recipes',
limit: 10,
offset: 0
})
4.3 Media Management
Supported Media Types
=====================
Images:
- JPEG, PNG, GIF, WebP
- Auto-optimization
- Responsive versions
Videos:
- MP4, WebM
- Streaming support
- Thumbnail generation
Audio:
- MP3, WAV, OGG
- Player widget
Documents:
- PDF, Word, Excel
- Preview support
Upload Media
============
const imageRef = await home.media.upload(imageFile);
// Returns:
{
id: 'media_123',
type: 'image',
url: '/media/image_123.webp',
filename: 'bread.jpg',
mimeType: 'image/webp',
size: 45000,
width: 1200,
height: 800,
optimized: true
}
Automatic Optimization
======================
Images:
[OK] Convert to WebP (50-80% smaller)
[OK] Generate responsive sizes
[OK] Lazy loading attributes
[OK] Alt text from metadata
Example sizes generated:
- Original: 1200x800
- Large: 800x533
- Medium: 600x400
- Thumbnail: 300x200
Media Operations
================
Upload:
await home.media.upload(file)
Delete:
await home.media.delete(mediaId)
List:
await home.media.list()
Optimize:
await home.media.optimize(mediaId)
4.4 Theme Engine
Theme Structure
===============
interface Theme {
name: string;
colors: {
primary: '#3498db',
secondary: '#2ecc71',
background: '#ffffff',
text: '#333333',
...
};
fonts: {
heading: 'Noto Sans KR',
body: 'Noto Sans KR',
...
};
spacing: { xs, sm, md, lg, xl };
borderRadius: { none, sm, md, lg, full };
shadows: { none, sm, md, lg, xl };
}
Apply Theme
===========
await home.theme.apply({
name: 'Warm Bakery',
colors: {
primary: '#E8B87D',
secondary: '#D4956A',
background: '#FFF8F0'
},
fonts: {
heading: 'Nanum Gothic',
body: 'Noto Sans KR'
}
});
AI Theme Generation
===================
From description:
const theme = await home.theme.generate(
'Warm, cozy bakery feel with brown tones'
);
From image:
const palette = await home.theme.palette.fromImage(
breadImage
);
From brand:
const palette = await home.theme.palette.fromBrand(
'Starbucks'
);
Color Palette
=============
Generate harmonious colors:
const palette = await home.theme.palette.harmonize('#E8B87D');
// Returns:
{
primary: '#E8B87D',
shades: ['#F5D4A0', '#E8B87D', '#D4956A'],
complementary: ['#7DB8E8', '#6AA4D4'],
analogous: ['#E8D47D', '#E87D8B']
}
4.5 Analytics
Privacy-First Analytics
=======================
WIA-HOME analytics:
- No cookies by default
- No personal data collection
- Aggregated statistics only
- GDPR/PIPA compliant
Available Metrics
=================
Visitors:
- Total visitors
- Unique visitors
- Returning visitors
- Active now
Page Views:
- Total views
- Per page breakdown
- Average time on page
Sources:
- Direct traffic
- Search engines
- Social media
- Referral sites
Devices:
- Desktop vs mobile vs tablet
- Browsers
- Operating systems
Usage Example
=============
// Get statistics
const stats = await home.analytics.get({
period: 'last_30_days'
});
console.log('Total visitors:', stats.visitors.total);
console.log('Top pages:', stats.topPages);
console.log('Referrers:', stats.referrers);
// Real-time monitoring
home.analytics.realtime((data) => {
console.log('Active visitors:', data.activeVisitors);
console.log('Current pages:', data.currentPages);
});
No External Services
====================
[OK] All data stays on your PC
[OK] No Google Analytics
[OK] No tracking scripts
[OK] No data selling
[OK] Complete privacy
Chapter Summary
- [OK] Page management with templates and SEO support
- [OK] Full-featured blog system with categories and tags
- [OK] Media management with automatic optimization
- [OK] Theme engine with AI-powered generation
- [OK] Privacy-first analytics with no external tracking