Advanced Features Demo

This post demonstrates some of the more advanced features available in Krik, including image handling, complex markdown, and feed generation.

Image Support

Krik automatically copies images and other static assets to the generated site:

Image Best Practices

When adding images to your posts:

• Store images in the content/images/ directory
• Use descriptive filenames
• Include alt text for accessibility
• Optionally include title text for tooltips
• Consider using relative paths from your post location

Complex Tables

Here’s a more complex table showing Krik’s architecture:

Nested Lists and Complex Formatting

Project Structure

1. Core Engine (Rust)
   • Markdown parsing with pulldown-cmark
   • Template rendering with Tera
   • File system operations
2. Theme System
   • CSS custom properties for theming
   • JavaScript for interactive features:
     • Theme toggle functionality
     • Footnote navigation
     • Scroll-to-top behavior
   • Responsive design breakpoints
3. Content Processing
   • Front matter parsing (YAML)
   • Asset copying (images, files)
   • Language detection from filenames
   • Table of contents generation

Advanced Markdown Features

Mixed Content Types

You can combine different content types effectively:

Quote with formatting: This blockquote contains italic, bold, and inline code.

It can also contain lists:

1. First quoted item
2. Second quoted item

And even code blocks:

println!("Code in quotes!");

Code with Explanation

Here’s how the theme toggle works:

function toggleTheme() {
  // Get current theme or default to light
  const currentTheme =
    document.documentElement.getAttribute("data-theme") || "light";

  // Switch to opposite theme
  const newTheme = currentTheme === "light" ? "dark" : "light";

  // Apply new theme
  document.documentElement.setAttribute("data-theme", newTheme);

  // Save preference
  localStorage.setItem("theme", newTheme);

  // Update toggle icon
  updateThemeIcon(newTheme);
}

The key aspects of this implementation:

• Uses data-theme attribute on the root element
• Leverages localStorage for persistence
• Provides smooth CSS transitions
• Works across page reloads

SEO and Discovery Features

Krik automatically generates several files to optimize search engine discovery and indexing:

Atom Feed Generation

Automatically generates an Atom feed (feed.xml) that includes:

Feed Metadata

• Site title from site.toml
• Last updated timestamp
• Self-referencing links
• Unique feed ID

Post Entries

• Only posts (not pages) are included
• Limited to 20 most recent posts
• Full HTML content with proper escaping
• Individual post IDs and timestamps
• Tag information (when available)

Link Resolution

When base_url is configured in site.toml, Krik uses the xml:base attribute for proper link resolution:

<feed xmlns="http://www.w3.org/2005/Atom" xml:base="https://example.com">

This ensures that relative links in your posts work correctly when viewed in feed readers.

XML Sitemap Generation

Automatically generates a comprehensive XML sitemap (sitemap.xml):

Sitemap Features

• XML Schema Validation: Includes proper namespace declarations
• Multilingual Support: Uses <xhtml:link> for alternate language versions
• Canonical URLs: One entry per content piece (prefers English)
• SEO Optimization: Proper priorities and change frequencies
• Draft Exclusion: Automatically excludes draft content

Example Sitemap Entry

<url>
  <loc>https://example.com/posts/welcome.html</loc>
  <lastmod>2024-01-15</lastmod>
  <changefreq>monthly</changefreq>
  <priority>0.8</priority>
  <xhtml:link rel="alternate" hreflang="en" href="https://example.com/posts/welcome.html" />
  <xhtml:link rel="alternate" hreflang="it" href="https://example.com/posts/welcome.it.html" />
</url>

robots.txt Generation

Automatically generates SEO-optimized robots.txt:

robots.txt Features

• Sitemap Reference: Points to sitemap.xml location
• Best Practice Rules: Allows content while blocking system files
• Bot Management: Specific rules for major search engines
• Security: Blocks known problematic crawlers
• Politeness: Includes crawl delay settings

Example robots.txt

User-agent: *
Allow: /

# Disallow common non-content directories
Disallow: /.*
Disallow: /_*

# Sitemap location
Sitemap: https://example.com/sitemap.xml

# Crawl delay (optional - be nice to servers)
Crawl-delay: 1

Performance Considerations

Build Performance

Krik is designed for speed:

• Rust Performance: Native speed with zero-cost abstractions
• Parallel Processing: Multi-threaded where possible
• Incremental Building: Only processes changed files (planned feature)
• Memory Efficiency: Streaming processing for large sites

Runtime Performance

The generated sites are optimized for performance:

• Minimal CSS: No framework bloat, only necessary styles
• Progressive Enhancement: JavaScript enhances but isn’t required
• Responsive Images: Proper sizing and format recommendations
• Static Assets: Everything is static, no server-side processing

Content Quality Assurance

Krik includes powerful built-in tools for maintaining content quality:

Link Rot Scanning

Prevent broken links with the new link checking feature:

kk lint --check-links

Features

• Parallel Processing: Checks up to 10 links simultaneously for fast scanning
• Smart Detection: Bypasses bot detection with realistic browser headers
• Comprehensive Reporting: Shows file paths, line numbers, and error details
• Performance: ~8x faster than sequential checking (2 seconds vs 17 seconds)

Example Output

🔗 Checking links for validity...
Found 10 links to check across all files
Starting parallel link validation (max 10 concurrent requests)...
✅ Link OK: https://github.com/mcaserta/krik
✅ Link OK: https://www.rust-lang.org/
❌ BROKEN: https://example-broken.com from file.md:42 - HTTP 404: Not Found
Link checking completed. 9 working, 1 broken, 10 total

HTML Report Generation

Generate professional reports for content auditing:

kk lint --create-report
kk lint --check-links --create-report  # Include link validation

Report Features

• Professional Design: Beautiful, responsive HTML with gradient headers
• ISO 8601 Timestamps: Filenames like krik-report-2025-08-12T19-22-28Z.html
• Visual Indicators: Color-coded status badges (✅ SUCCESS, ⚠️ WARNING, ❌ ERROR)
• Summary Dashboard: Overview cards showing files scanned, errors, warnings, broken links
• Detailed Sections: Organized display of all issues with syntax highlighting

Use Cases

• CI/CD Integration: Automated quality checks in build pipelines
• Content Audits: Regular reviews of site quality and link health
• Team Reports: Share quality metrics with content teams
• Historical Tracking: Archive reports for trend analysis

Accessibility Features

Krik generates accessible HTML by default:

Semantic Structure

• Proper heading hierarchy (H1 → H2 → H3)
• Landmark elements (nav, main, aside)
• List structures for navigation

Interactive Elements

• ARIA labels on buttons and controls
• Focus indicators for keyboard navigation
• Skip links for screen readers (planned)

Content Accessibility

• Alt text support for images
• Table headers and captions
• High contrast color schemes

This demonstrates many of Krik’s advanced capabilities. The combination of performance, features, and accessibility makes it an excellent choice for modern static sites.