blogger_theme

pub package pub points Licence GitHub Issues Sponsor

A lightweight, standalone Dart library to programmatically design and compile structured Blogger (Blogspot) themes using a clean, declarative, Jaspr-like component syntax.

Instead of manually editing massive, error-prone XML files spanning thousands of lines, blogger_theme empowers you to author type-safe, modular Dart components that instantly compile into valid, production-ready Blogger layout templates.

Features

  • Jaspr-Inspired Syntax: Construct layouts smoothly using a declarative, component-driven architecture (Component, DomComponent, Text).
  • Strict XML-Safe Renderer: Auto-escapes standard XML characters (&, <, >, ", ') and cleanly sanitizes unsafe XML 1.0 control characters.
  • Zero Heavy Web Dependencies: Built entirely using pure Dart core constructs—no browser runtime engines or heavy UI shells required.
  • Blogger Layout Optimization: Native semantic wrappers for structured Blogger syntax components (<b:section>, <b:widget>, <b:loop>, <b:if>) configured with modern version-3 schema defaults.
  • AOT Script Compilation Support: Compiles local companion frontend Dart files into layout-embedded minified JavaScript inline structures smoothly.

Architecture Blueprint

The package keeps your UI declaration and build pipeline layers strictly separated:

src/
├── core.dart               # Fundamental Component contract, Text elements, and Renderer
├── blogger_components.dart  # Native Blogger markup tags (b:section, b:widget, b:loop, b:if, etc.)
├── html_components.dart     # Web elements (Html, Head, Body, Div, Script) with automatic XML namespace defaults
├── client_script.dart      # Optimized AOT Javascript compilation pipeline
└── theme_utility.dart      # Root theme orchestrator and compilation configuration surface

Getting Started

Add blogger_theme to your project's pubspec.yaml:

dependencies:
  blogger_theme: ^2.0.0

Comprehensive Usage Guide

1. Structure Your Layout Components

Compose your theme layout using structured components matching the modern web paradigm:

import 'package:blogger_theme/blogger_theme.dart';

class BlogLayout extends Component {
  const BlogLayout();

  @override
  Iterable<Component> build() => [
    Div(
      attributes: {'class': 'wrapper-pane'},
      children: [
        // Using native Blogger components safely mapped inside Dart
        BSection(
          id: 'header-area',
          className: 'header-section',
          maxwidgets: '1',
          showaddelement: 'yes',
          children: [
            BWidget(
              id: 'Header1',
              type: 'Header',
              title: 'Blog Header Title',
              locked: true,
            ),
          ],
        ),
        // Simple declarative logical flow blocks
        BIf(
          cond: 'data:view.isPost',
          children: [
            Div(
              attributes: {'class': 'post-item'},
              children: [
                BData(value: 'post.body'),
              ],
            ),
          ],
        ),
      ],
    ),
  ];
}

2. Compile to Standalone Blogger XML

Pass your structural headers and components straight to the orchestration model to finalize production code generation:

import 'package:blogger_theme/blogger_theme.dart';

void main() {
  // 1. Setup your main target layout configurations
  final theme = BloggerTheme(
    attributes: {
      'b:responsive': 'true',
      'b:defaultwidgetversion': '2',
    },
    head: [
      Title(children: [Text('Custom Generated Space')]),
      BSkin('body { background: #f4f4f4; color: #333; }'),
    ],
    body: [
      const BlogLayout(),
      // Injects automatically compiled javascript code instantly
      const BClientScript('web/interactivity.dart'),
    ],
  );

  // 2. Compile layout directly down into standard target output XML string
  final String productionXml = theme.generate();

  print(productionXml);
 // <!-- or if dart:io -->

  // File('build/blogger/theme.xml').writeAsStringSync(theme.generate());
}

Deep Dive: Core API Ecosystem

BloggerTheme

The entry model point used to wrap document metadata properties. Calling .generate() packages standard structural boilerplate definitions together along with XML declarations (<?xml version="1.0" encoding="UTF-8" ?>).

Html

Generates the base <html ...> element node tree and seeds it automatically with mandatory core engine namespace structures (xmlns:b, xmlns:data, xmlns:expr) to satisfy Blogger configuration rules without cluttering user files.

BClientScript

Compiles your target browser scripts via an integrated dart compile js automated workflow. The resultant compiled client assets are cleanly injected directly into target standard output <script> container layouts while strictly preserving structural JavaScript code strings.

Bugs and Feature Requests

Please file system issues, feature enhancements, and community tracking requests inside our official GitHub Issues Tracker.

Support and Funding

If this tool makes designing and managing complex Blogger platforms easier for you, consider sponsoring the ongoing open-source ecosystem tracking:

License

This project is licensed under the terms of the MIT License. See the LICENSE file for the full text.

Libraries

blogger_theme