BloggerEasy

BloggerEasy turns a website URL or a design image into an importable Blogger XML theme — layout, CSS skin, sections, and widgets ready for Blogger → Theme → Backup/Restore → Upload.

Product: mergeos-bounties/BloggerEasy

URL  ──┐
       ├──► parse / palette ──► Blogger XML theme ──► upload to Blogger
Image ─┘

---

Table of contents

• Highlights
• Desktop GUI (Qt)
• Screenshots
• Quick start
• CLI reference
• Templates & samples
• Import into Blogger
• Diagrams
• Repository layout
• Development
• MergeOS bounties
• License

---

Highlights

Capability	Description
URL → theme	Fetch a public page → structure → validated Blogger XML
Image → theme	Sample palette from a mockup/screenshot → theme skin
HTML file	Offline local HTML samples or your own page
Templates	simple, portfolio, news, dark, magazine, docs, from-image
Desktop GUI	Modern PySide6 app (bloggereasy-gui)
Validate	Check theme XML before upload
Offline demo	bloggereasy demo batch-generates all bundled samples

---

Desktop GUI (Qt)

Beautiful dark PySide6 app for the main product flow: paste URL or pick design image → choose style template → export .xml → import in Blogger.

pip install -e ".[gui]"
bloggereasy-gui
# or: bloggereasy gui

Tab	Purpose
Create theme	Mode: Website URL · Design image · Local HTML
Output	Path, validation, XML preview, open file/folder
Templates	Pick preset style
Import to Blogger	Step-by-step restore instructions
Sample demo	Offline batch from data/samples/html

Create theme from a public website URL

Create theme from a design image (palette → skin)

Generated Blogger XML ready to upload

How to restore the theme in Blogger

---

Screenshots

CLI / offline demo captures:

Batch	Portfolio	News
Demo batch table	Portfolio sample	News portal

---

Quick start

cd BloggerEasy
python -m venv .venv
.\.venv\Scripts\activate
pip install -e ".[dev,gui]"

bloggereasy version
bloggereasy-gui                 # recommended: URL or image → XML
bloggereasy demo                # offline sample batch

CLI one-shots

# From a public URL
bloggereasy gen url -u "https://example.com/" -t portfolio -o data/out/from_url.xml

# From a design image (Pillow via [gui] or [vision])
bloggereasy gen image -i path\to\mockup.png --title "My Blog" -o data/out/from_image.xml

# From local HTML
bloggereasy gen html -i data/samples/html/portfolio.html -t portfolio

# From the bundled magazine card-grid template, fully offline
bloggereasy gen --template magazine --out data/out/magazine.xml

# From the bundled SaaS landing template with hero, CTA, and feature sections
bloggereasy gen --template landing --out data/out/landing.xml

# From a public HTML page through the html command
bloggereasy gen html --url "https://example.com/" --timeout 10 -t portfolio -o data/out/from_url.xml

Respect robots.txt, site Terms of Service, and rate limits when fetching public URLs.

---

Hướng dẫn nhanh tiếng Việt

BloggerEasy có thể tạo theme Blogger từ HTML cục bộ, URL công khai hoặc ảnh thiết kế. Mẫu tiếng Việt nằm tại data/samples/html/vietnamese_blog.html và dùng để kiểm tra tiêu đề, dấu tiếng Việt, màu sắc và liên kết điều hướng.

bloggereasy gen html -i data/samples/html/vietnamese_blog.html -t simple -o data/out/vietnamese_blog.xml
bloggereasy validate -f data/out/vietnamese_blog.xml

Sau khi xuất XML, mở Blogger → Theme → Backup/Restore → Upload để nhập theme. Luôn sao lưu theme hiện tại trước khi upload.

---

CLI reference

Command	Purpose
bloggereasy version	Version + template names
bloggereasy gui / bloggereasy-gui	Qt app (needs .[gui])
bloggereasy demo	Themes for all data/samples/html/*.html
bloggereasy templates list	Built-in presets
bloggereasy gen --template magazine	Bundled sample → magazine card-grid XML
bloggereasy gen --template landing	Bundled sample → landing-page XML
bloggereasy gen url -u …	URL → XML
bloggereasy gen image -i …	Image → XML
bloggereasy gen html -i …	HTML file → XML
bloggereasy validate -f …	Validate theme XML
bloggereasy serve	Optional FastAPI

---

Templates & samples

Template	Best for
simple	Clean default blog
portfolio	Portfolio / personal brand
news	Dense editorial
magazine	Magazine-style card grid with left rail, main posts, and right sidebar
docs	Documentation-style sidebar + article layout
landing	Single-column hero, CTA, and feature cards
dark	Dark developer look
from-image	Image palette (auto for image mode)

Bundled HTML samples: data/samples/html/ (portfolio, news_portal, dark_dev, magazine, …).

Respect site Terms of Service when fetching live URLs.

---

Import into Blogger

1. Open Blogger → your blog → Theme.
2. ⋮ → Backup (save current theme first).
3. Restore / Upload the generated .xml (default under data/out/).
4. Confirm — layout, CSS, and widgets apply.
5. Preview and fine-tune under Theme customize if needed.

---

SEO defaults

Generated themes include safe Blogger head placeholders for common search and social previews:

• description uses data:blog.metaDescription
• Open Graph site/title/description/url tags use Blogger data expressions
• Twitter summary card title and description mirror the Blogger page metadata

These snippets do not hard-code a domain, image, or author profile. Edit the generated XML after export if a blog needs custom preview images or verification tokens.

---

Mobile CSS notes

Generated themes include Blogger-safe responsive CSS:

• media queries at 800px and 480px
• single-column mobile content layout
• fluid img, iframe, and video elements
• tighter header, post, sidebar, nav, and footer spacing on small screens
• long-word wrapping for URLs and imported content

The generated CSS avoids JavaScript-dependent layout behavior and keeps the rules inside Blogger's normal b:skin block. For AMP-style constraints, keep custom edits declarative: prefer media queries, fluid widths, and static spacing over script-driven resizing.

---

Diagrams

System architecture and workflow — full width. Open HTML for dark/light theme.

Architecture

Open interactive diagram

Workflow

Open interactive diagram

Generated with archify.

---

Repository layout

src/bloggereasy/
  cli.py              # Typer CLI
  gui/                # PySide6 desktop (URL / image / HTML → XML)
  parse/              # HTML parse + URL fetch
  vision/palette.py   # Image → colors
  theme/              # presets, builder, validate
  integrations/sdk.py # generate_from_url / image / html
data/samples/html/
data/out/             # generated themes
docs/screenshots/
docs/diagrams/

---

Development

pytest -q
ruff check src tests
bloggereasy demo
python scripts/capture_gui_shots.py   # refresh GUI screenshots

---

MergeOS bounties

Star → claim bounty → PR to master with theme XML evidence → MRG 25–200.
See mergeos · docs/BOUNTY.md.

---

Export HTML normalization

Messy exported HTML (Figma / site exporters) is cleaned automatically before theme generation via bloggereasy.parse.normalize.normalize_export_html(), wired into parse_html_string() so every entry point (CLI, GUI, API, SDK) benefits. It strips <script> tags, caps oversized inline <style> blocks, and rewrites absolute file:// / localhost / 127.0.0.1 paths — while leaving already-clean HTML untouched (idempotent). See issue #14.

---

License

MIT · MergeOS / ThanhTrucSolutions