blogger_theme 3.0.0-alpha.1

A lightweight standalone Dart library to design Blogger themes with Jaspr-like syntax.

🚀 blogger_theme

---

Declarative Blogger Theme Design in Dart.

blogger_theme is a lightweight, standalone library that lets you build structured Blogger (Blogspot) themes using a clean, Jaspr-inspired component syntax. Stop wrestling with raw XML and start building themes with the power of Dart.

Note: This library renders your component tree directly into XML. It is not an AST-based parser or transformer.

Caution: This package is currently in alpha, and some features are still experimental.

---

🛠 Features

• ✨ Jaspr-inspired Syntax: Build your theme structure using declarative Dart components (Component, DomComponent, Text).
• 🛡️ XML-Safe Rendering: Automatic escaping for &, <, >, ", ' and sanitization of XML 1.0 control characters.
• 🚀 Zero Dependencies: Pure Dart implementation—no heavy browser runtime or UI shells required.
• 📦 Blogger Native: Pre-built wrappers for standard tags like <b:section>, <b:widget>, <b:loop>, and <b:if>.
• ⚡ Script Compiler: Compile your Dart logic directly into JavaScript and inject it into your Blogger layouts seamlessly.

---

📚 Resources

• Official Documentation – Get up to speed on Blogger architecture.
• Video Tutorials – Step-by-step guides on our YouTube channel.

---

🚀 Quick Start

Add the package to your pubspec.yaml:

dependencies:
  blogger_theme: ^3.0.0-alpha.1

Note: Because this package uses Dart primary constructors while the feature is still experimental, add the following to your analysis_options.yaml until the feature reaches stable release:

analyzer:
  enable-experiment:
    - primary-constructors

1. Build your Layout

Create reusable components that map to Blogger elements:

    class BlogLayout extends Component {
      const BlogLayout();

      @override
      Iterable<Component> build() => [
        Div(
          attributes: {'class': 'wrapper-pane'},
          children: [
            BSection(
              id: 'header-area',
              className: 'header-section',
              maxwidgets: 1,
              showaddelement: true,
              children: [
                BWidget(
                  id: 'Header1',
                  type: 'Header',
                  title: 'Blog Header Title',
                  locked: true,
                ),
              ],
            ),
          ],
        ),
      ];
    }

2. Generate XML

Assemble your theme and export it:

    void main() {
      final theme = BloggerTheme(
        attributes: {'b:responsive': 'true'},
        head: [
          Title(children: [Text('My Custom Theme')]),
          BSkin('body { background: #f4f4f4; }'),
        ],
        body: [const BlogLayout()],
      );

      print(theme.generate());
    }

---

🏗 Project Structure

    src/
    ├── core.dart              # Core contracts & renderer
    ├── blogger_components.dart # Blogger tag wrappers
    ├── html_components.dart    # HTML element helpers
    ├── client_script.dart      # Dart-to-JS compilation
    └── theme_utility.dart      # Root generator

---

🤝 Support & Contribution

• Found a bug? Open an issue.
• Love the library? Consider sponsoring us.
• License: Licensed under MIT.