blogger_theme 4.0.0 copy "blogger_theme: ^4.0.0" to clipboard
blogger_theme: ^4.0.0 copied to clipboard

Published 15 days ago • verified publisherhireflutter.uk• Latest: 6.0.0
retracted
→

Metadata

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

More...

🚀 blogger_theme #

pub package pub points License GitHub Issues Sponsor

What is blogger_theme? #

blogger_theme is a lightweight Dart library for generating Blogger (Blogspot) theme XML using a clean, declarative component API inspired by Jaspr.

It removes the need to write raw Blogger template XML by hand and provides reusable Dart components for common Blogger template elements such as b:section, b:widget, b:if, b:loop, and b:skin.

Features #

  • Declarative theme authoring in Dart using Component, DomComponent, and Text.
  • Pure Dart implementation with zero runtime dependencies.
  • Safe XML rendering for Blogger templates, including escaping special characters and filtering XML 1.0 control characters.
  • Blogger-native helpers for sections, widgets, conditionals, loops, includes, and template fragments.
  • Client script support with BClientScript for Dart-to-JS inline script injection.
  • Flexible theme export using BloggerTheme.generate().

Installation #

Add blogger_theme to your pubspec.yaml:

dependencies:
  blogger_theme: ^4.0.0

Or add it directly with:

dart pub add blogger_theme

Run:

dart pub get

References #

Quick Start #

1. Define your layout component #

import 'package:blogger_theme/blogger_theme.dart';

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,
                ),
              ],
            ),
            BIf(
              cond: 'data:view.isPost',
              children: [
                Div(
                  attributes: {'class': 'post-item'},
                  children: [BData(value: 'post.body')],
                ),
              ],
            ),
          ],
        ),
      ];
}

2. Generate Blogger theme XML (with AMP-compliant overrides) #

import 'package:blogger_theme/blogger_theme.dart';

void main() {
  final theme = BloggerTheme(
    attributes: {
      'b:responsive': 'true',
      'b:defaultwidgetversion': '2',
      'b:layoutsversion': '3',
      'b:css': 'false',
      'xmlns': 'http://www.w3.org/1999/xhtml',
      'xmlns:b': 'http://www.google.com/2005/gml/b',
      'xmlns:data': 'http://www.google.com/2005/gml/data',
      'xmlns:expr': 'http://www.google.com/2005/gml/expr',
    },
    // Reset attributes to clean XML output for strict AMP validation
    children: [
      BAttr(name: 'xmlns', value: ''),
      BAttr(name: 'xmlns:b', value: ''),
      BAttr(name: 'xmlns:expr', value: ''),
      BAttr(name: 'xmlns:data', value: ''),
      // Conditionally adds class="amp" to <html> when ?amp=1 is in the URL
      BClass(cond: 'data:view.url.params.amp == "1"', name: 'amp'),
    ],
    head: [
      Title(children: [Text('Generated Blogger Theme')]),
      BSkin('body { font-family: Arial, sans-serif; }'),
    ],
    body: [const BlogLayout()],
  );

  final xml = theme.generate();
  print(xml);
}

API Overview #

Core building blocks #

  • Component
  • DomComponent
  • Text
  • RawText
  • Fragment
  • Renderer

Blogger-specific components #

  • BSection, BWidget, BWidgetSettings, BWidgetSetting
  • BIf, BElseIf, BElse
  • BLoop, BData, BArg, BAttr, BClass
  • BInclude, BIncludable, BTag, BEval
  • BSkin
  • BClientScript

HTML helper components #

  • Standard HTML wrappers like Div plus other helpers in html_components.dart

AMP (Accelerated Mobile Pages) components #

  • Full-featured AMP HTML support under lib/src/amp/ category files.
  • 80+ AMP elements covered, including basic media (AmpImg, AmpVideo, AmpAudio), layouts (AmpCarousel, AmpBaseCarousel, AmpSidebar, AmpAccordion, AmpLightbox), social embeds (AmpYoutube, AmpInstagram), web stories (AmpStory, AmpStoryPage, AmpStoryGridLayer), dynamic bindings (AmpState, AmpList, AmpMustache), and paywalls (AmpAccess).
  • Core document layouts: AmpHtml, AmpCharset, AmpViewport, AmpCanonical.
  • Mandatory boilerplate loader elements: AmpBoilerplate, AmpRuntimeScript, AmpExtensionScript.
  • Pre-compilation Static Analysis: Integrated AmpValidator utility to audit and validate your rendered theme pages against standard AMP specifications.

Project Structure #

  • lib/blogger_theme.dart — public exports
  • lib/src/core.dart — component model and renderer
  • lib/src/blogger_components.dart — Blogger template helpers
  • lib/src/html_components.dart — HTML helper components
  • lib/src/client_script.dart — Dart-to-JS script support
  • lib/src/theme_utility.dart — theme generation utilities
  • example/main.dart — sample theme generation entrypoint

Contributing #

Contributions are welcome!

License #

blogger_theme is licensed under the MIT License. See LICENSE for details.

← Metadata

1
likes
0
points
215
downloads

Documentation

Documentation

Publisher

verified publisherhireflutter.uk

Weekly Downloads

Metadata

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

Repository (GitHub)
View/report issues

Topics

#html-generation #web #templates #blogger

Funding

Consider supporting this project:

github.com

License

unknown (license)

Dependencies

path, web

More

Packages that depend on blogger_theme

Back