feat: add privacy and camera notice to import guide (#1)

.github/workflows/ci.yml

@@ -20,7 +20,9 @@ jobs:
         run: |
           python -m pip install -U pip
           pip install -e ".[dev]"
-      - name: Ruff
+      - name: Ruff check
         run: ruff check src tests
-      - name: Pytest
-        run: pytest -q
+      - name: Ruff format
+        run: ruff format --check src tests
+      - name: Pytest with coverage
+        run: pytest -q --cov=bloggereasy --cov-report=term-missing --cov-report=xml

README.md

@@ -5,6 +5,7 @@
 [![Qt GUI](https://img.shields.io/badge/GUI-PySide6-41CD52.svg)](src/bloggereasy/gui/)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
 [![MergeOS](https://img.shields.io/badge/MergeOS-bounties-5319E7.svg)](https://github.com/mergeos-bounties)
+[![Coverage](https://img.shields.io/badge/coverage-90%25-brightgreen.svg?style=flat)](https://github.com/mergeos-bounties/BloggerEasy/actions)
 
 **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.
 
@@ -42,7 +43,7 @@ Image ─┘
 | **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`, `from-image` |
+| **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 |
@@ -125,6 +126,12 @@ bloggereasy gen image -i path\to\mockup.png --title "My Blog" -o data/out/from_i
 # 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
 ```
@@ -157,6 +164,8 @@ Luôn sao lưu theme hiện tại trước khi upload.
 | `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 |
@@ -172,7 +181,9 @@ Luôn sao lưu theme hiện tại trước khi upload.
 | `simple` | Clean default blog |
 | `portfolio` | Portfolio / personal brand |
 | `news` | Dense editorial |
-| `magazine` | Magazine-style two-column |
+| `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) |
 
@@ -183,12 +194,14 @@ Respect site Terms of Service when fetching live URLs.
 ---
 
 ## Import into Blogger
+## Import into Blogger
+For detailed import instructions with screenshots and troubleshooting, see [Import Blogger Guide](docs/IMPORT_BLOGGER.md).
 
-1. Open [Blogger](https://www.blogger.com/) → 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.
+| 1. Open [Blogger](https://www.blogger.com/) → 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.
 
 ---
 

data/samples/html/about.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>About - My Blog</title>
+  <style>
+    body { font-family: system-ui, sans-serif; margin: 0; background: #f8f9fa; color: #212529; }
+    header { background: #4cc9f0; color: white; padding: 2rem; text-align: center; }
+    header h1 { margin: 0 0 1rem 0; font-size: 2.5rem; }
+    header p { margin: 0; font-size: 1.25rem; opacity: 0.9; }
+    nav { background: #333; padding: 1rem; }
+    nav a { color: white; margin: 0 1rem; text-decoration: none; font-weight: 500; }
+    nav a:hover { text-decoration: underline; }
+    .container { max-width: 800px; margin: 0 auto; padding: 2rem; }
+    .about-section { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 2rem; }
+    .about-section h2 { margin-top: 0; color: #2c3e50; }
+    .about-section p { line-height: 1.7; color: #34495e; }
+    .skills { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
+    .skill { background: #e9f7ef; padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.9rem; }
+    .values { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    .values h2 { margin-top: 0; color: #2c3e50; }
+    .values ul { padding-left: 1.5rem; }
+    .values li { margin-bottom: 0.75rem; line-height: 1.6; color: #34495e; }
+    footer { background: #2c3e50; color: white; text-align: center; padding: 2rem; font-size: 0.9rem; }
+    footer a { color: #4cc9f0; text-decoration: none; }
+    footer a:hover { text-decoration: underline; }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>My Blog</h1>
+    <p>Sharing thoughts on technology and life</p>
+    <nav>
+      <a href="index.html">Home</a>
+      <a href="about.html">About</a>
+      <a href="contact.html">Contact</a>
+    </nav>
+  </header>
+
+  <div class="container">
+    <section class="about-section">
+      <h2>About Me</h2>
+      <p>I'm a passionate developer and writer who loves exploring the intersection of technology and creativity. With years of experience in web development, I enjoy building beautiful, functional websites and sharing what I learn along the way.</p>
+      <p>When I'm not coding, you can find me reading about emerging technologies, experimenting with new frameworks, or hiking in nature to clear my mind and find inspiration.</p>
+      <div class="skills">
+        <span class="skill">HTML5</span>
+        <span class="skill">CSS3</span>
+        <span class="skill">JavaScript</span>
+        <span class="skill">React</span>
+        <span class="skill">Node.js</span>
+        <span class="skill">Python</span>
+        <span class="skill">UI/UX Design</span>
+      </div>
+    </section>
+
+    <section class="values">
+      <h2>My Values</h2>
+      <ul>
+        <li><strong>Continuous Learning:</strong> I believe in lifelong learning and staying curious about new technologies and ideas.</li>
+        <li><strong>Quality Craftsmanship:</strong> I take pride in writing clean, maintainable code that solves real problems.</li>
+        <li><strong>Accessibility:</strong> I strive to create inclusive digital experiences that work for everyone.</li>
+        <li><strong>Sustainability:</strong> I consider the environmental impact of technology and advocate for sustainable practices.</li>
+        <li><strong>Community:</strong> I believe in sharing knowledge and helping others grow in their technical journeys.</li>
+      </ul>
+    </section>
+  </div>
+
+  <footer>
+    <p>&copy; 2026 My Blog. All rights reserved.</p>
+    <p>
+      <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a> | <a href="#">Contact</a>
+    </p>
+  </footer>
+</body>
+</html>

data/samples/html/about_page.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>About</title>
+  <meta name="description" content="About HTML fixture for BloggerEasy" />
+  <style>
+    body { margin:0; font-family:system-ui,sans-serif; background:#fafaf9; color:#1c1917; }
+    header { padding:2.5rem 1.25rem; background:#292524; color:#fafaf9; }
+    main { max-width:640px; margin:0 auto; padding:1.75rem 1.25rem 3rem; line-height:1.6; }
+    .team { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; }
+    .card { background:#fff; border:1px solid #e7e5e4; border-radius:12px; padding:1rem; }
+    footer { text-align:center; color:#a8a29e; font-size:.85rem; padding:2rem; }
+  </style>
+</head>
+<body>
+  <header><h1>About us</h1><p>Sample studio story for theme export</p></header>
+  <main>
+    <p>We ship offline-friendly product demos and open bounty upgrades.</p>
+    <div class="team">
+      <div class="card"><strong>Design</strong><p>Themes & fixtures</p></div>
+      <div class="card"><strong>Engineering</strong><p>CLI & API</p></div>
+    </div>
+  </main>
+  <footer>Demo HTML · BloggerEasy about_page</footer>
+</body>
+</html>

data/samples/html/blog_index_cards_page.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Blog Index Cards</title>
+  <meta name="description" content="Blog index cards HTML fixture for BloggerEasy" />
+  <style>
+    body { margin:0; font-family:system-ui,sans-serif; background:#fff; color:#0f172a; }
+    header { text-align:center; padding:2.5rem 1rem 1rem; border-bottom:1px solid #e2e8f0; }
+    main { max-width:960px; margin:0 auto; padding:1.5rem 1.25rem 3rem;
+      display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
+    article { border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; background:#f8fafc; }
+    .thumb { height:120px; background:linear-gradient(135deg,#bae6fd,#c7d2fe); }
+    .body { padding:1rem; }
+    .body h2 { margin:0 0 .4rem; font-size:1.05rem; }
+    .body p { margin:0; color:#64748b; font-size:.9rem; line-height:1.45; }
+    footer { text-align:center; color:#94a3b8; font-size:.85rem; padding:2rem; }
+    @media (max-width:720px) { main { grid-template-columns:1fr; } }
+  </style>
+</head>
+<body>
+  <header><h1>Latest posts</h1><p>Sample blog index cards for theme export</p></header>
+  <main>
+    <article><div class="thumb"></div><div class="body"><h2>Ship offline fixtures</h2><p>Keep demos green without network assets.</p></div></article>
+    <article><div class="thumb"></div><div class="body"><h2>Validate themes</h2><p>Check Blog widget and skin structure.</p></div></article>
+    <article><div class="thumb"></div><div class="body"><h2>Open a bounty PR</h2><p>Attach a desktop screenshot for evidence.</p></div></article>
+  </main>
+  <footer>Demo HTML · BloggerEasy blog_index_cards_page</footer>
+</body>
+</html>

data/samples/html/careers_page.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Careers</title>
+  <meta name="description" content="Careers HTML fixture for BloggerEasy" />
+  <style>
+    body { margin:0; font-family:system-ui,sans-serif; background:#faf5ff; color:#3b0764; }
+    header { padding:2rem 1.25rem; background:#6b21a8; color:#faf5ff; }
+    main { max-width:720px; margin:0 auto; padding:1.5rem 1.25rem 3rem; }
+    .job { background:#fff; border:1px solid #e9d5ff; border-radius:12px; padding:1rem 1.1rem; margin:.75rem 0; }
+    .job h2 { margin:0 0 .35rem; font-size:1.05rem; }
+    .tag { display:inline-block; background:#f3e8ff; color:#7e22ce; font-size:.75rem;
+      font-weight:600; padding:.2rem .5rem; border-radius:999px; margin-right:.35rem; }
+    footer { text-align:center; color:#a855f7; font-size:.85rem; padding:2rem; }
+  </style>
+</head>
+<body>
+  <header><h1>Open roles</h1><p>Sample careers listing for theme export</p></header>
+  <main>
+    <div class="job"><h2>Product engineer</h2>
+      <span class="tag">Remote</span><span class="tag">Full-time</span>
+      <p>Ship offline demos and bounty tooling.</p></div>
+    <div class="job"><h2>Theme designer</h2>
+      <span class="tag">Contract</span>
+      <p>HTML fixtures and brand systems.</p></div>
+  </main>
+  <footer>Demo HTML · BloggerEasy careers_page</footer>
+</body>
+</html>

data/samples/html/changelog_page.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Changelog</title>
+  <meta name="description" content="Changelog HTML fixture for BloggerEasy" />
+  <style>
+    body { margin:0; font-family:system-ui,sans-serif; background:#0f172a; color:#e2e8f0; }
+    header { padding:2rem 1.25rem; border-bottom:1px solid #1e293b; }
+    header h1 { margin:0; font-size:1.5rem; }
+    main { max-width:720px; margin:0 auto; padding:1.5rem 1.25rem 3rem; }
+    .ver { margin:1.25rem 0; padding:1rem; background:#111827; border-radius:10px; border:1px solid #1f2937; }
+    .ver h2 { margin:0 0 .5rem; font-size:1.05rem; color:#38bdf8; }
+    ul { margin:.4rem 0 0 1.1rem; color:#cbd5e1; }
+    footer { text-align:center; color:#64748b; font-size:.85rem; padding:2rem; }
+  </style>
+</head>
+<body>
+  <header><h1>Product changelog</h1><p>Sample release notes for theme export</p></header>
+  <main>
+    <div class="ver"><h2>v0.3.30</h2><ul><li>FAQ + changelog HTML fixtures</li><li>Offline sample pack expand</li></ul></div>
+    <div class="ver"><h2>v0.3.29</h2><ul><li>FAQ page fixture</li></ul></div>
+  </main>
+  <footer>Demo HTML · BloggerEasy changelog_page</footer>
+</body>
+</html>

data/samples/html/changelog_timeline_page.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Changelog</title>
+  <meta name="description" content="Changelog HTML fixture for BloggerEasy" />
+  <style>
+    body { margin:0; font-family:system-ui,sans-serif; background:#f8fafc; color:#0f172a; }
+    header { text-align:center; padding:2rem 1rem 1rem; }
+    main { max-width:680px; margin:0 auto; padding:1rem 1.25rem 2.5rem; }
+    .item { border-left:3px solid #0ea5e9; padding:.75rem 0 .75rem 1rem; margin-bottom:1rem; }
+    .item strong { display:block; font-size:.95rem; }
+    .item span { color:#64748b; font-size:.8rem; }
+    .item p { margin:.35rem 0 0; color:#334155; font-size:.9rem; line-height:1.4; }
+    footer { text-align:center; color:#94a3b8; font-size:.8rem; padding:1.5rem; }
+  </style>
+</head>
+<body>
+  <header><h1>Changelog</h1><p>Sample release notes for theme export</p></header>
+  <main>
+    <div class="item"><strong>v0.3.x</strong><span>2026-07</span><p>Offline fixtures, validate smoke, bounty packs.</p></div>
+    <div class="item"><strong>v0.2.x</strong><span>2026-06</span><p>CLI gen + theme sample grid.</p></div>
+    <div class="item"><strong>v0.1.x</strong><span>2026-05</span><p>Initial BloggerEasy scaffold.</p></div>
+  </main>
+  <footer>Demo HTML · BloggerEasy changelog_timeline_page</footer>
+</body>
+</html>