ultimate-jekyll-manager 1.7.1 → 1.8.0

package/dist/assets/themes/newsflash/pages/blog/post.scss

@@ -0,0 +1,164 @@
+// Newsflash Theme — Blog post page-specific CSS
+// The editorial article treatment for
+// (_layouts/themes/newsflash/frontend/pages/blog/post.html): reading-progress
+// bar, drop cap, serif crossheads with the vermilion dash, framed in-content
+// images, and the centered pullquote. NOTE: flat file shape — the post layout
+// sets `asset_path: blog/post`, so this compiles to pages/blog/post.<id>.bundle.css.
+// Compiles standalone, so it pulls in the theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Reading progress — fixed vermilion rule across the very top
+// ============================================
+// Sits above the sticky masthead (z-index 1030); driven by pages/blog/post.js.
+.reading-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  z-index: 1040;
+  pointer-events: none;
+  background: transparent;
+
+  span {
+    display: block;
+    height: 100%;
+    background: var(--bs-primary);
+    transform: scaleX(0);
+    transform-origin: left;
+  }
+}
+
+// ============================================
+// Article hero — wide cinematic frame
+// ============================================
+.article-hero {
+  aspect-ratio: 21 / 10;
+
+  img {
+    height: 100%;
+    // Lift the framework's generic .blog-post-image cap (max-height: 480px in
+    // the main bundle) — the 21/10 frame is the size authority here, and the
+    // cap leaves a blank strip inside the frame on wide viewports.
+    max-height: none;
+  }
+}
+
+// ============================================
+// Article body — the editorial reading column
+// ============================================
+.blog-post-content {
+  font-size: 1.13rem;
+  line-height: 1.78;
+
+  p {
+    margin-bottom: 1.5em;
+  }
+
+  // Drop cap on the opening paragraph
+  > p:first-of-type::first-letter {
+    font-family: $nf-font-display;
+    font-weight: 600;
+    font-size: 4.2rem;
+    line-height: 0.82;
+    color: var(--bs-primary);
+    float: left;
+    padding: 8px 12px 0 0;
+  }
+
+  // Serif crossheads with the vermilion dash
+  h2, h3 {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    font-size: 1.7rem;
+    letter-spacing: -0.014em;
+    line-height: 1.25;
+    margin: 2em 0 0.8em;
+
+    &::before {
+      content: "";
+      width: 0.55em;
+      height: 0.18em;
+      background: var(--bs-primary);
+      border-radius: 50rem;
+      flex: none;
+    }
+  }
+
+  h3 {
+    font-size: 1.35rem;
+  }
+
+  // In-content images get the editorial frame
+  img {
+    border: var(--nf-border);
+    border-radius: $nf-radius;
+  }
+
+  figcaption {
+    font-size: 0.78rem;
+    color: var(--bs-secondary-color);
+    padding-top: 10px;
+    text-align: right;
+  }
+
+  // Pullquote — centered italic serif with the oversized quote mark
+  blockquote {
+    margin: 2.4em 0;
+    padding: 0 1em;
+    text-align: center;
+    border: 0;
+
+    &::before {
+      content: "\201C";
+      display: block;
+      font-family: $nf-font-display;
+      font-weight: 900;
+      font-size: 4rem;
+      line-height: 0.6;
+      color: var(--bs-primary);
+      margin-bottom: 0.25em;
+    }
+
+    p {
+      font-family: $nf-font-display;
+      font-style: italic;
+      font-weight: 550;
+      font-size: clamp(1.4rem, 2.6vw, 1.9rem);
+      letter-spacing: -0.01em;
+      line-height: 1.3;
+      margin: 0;
+    }
+
+    cite {
+      display: block;
+      margin-top: 1.1em;
+      font-family: $font-family-sans-serif;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 0.78rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--bs-secondary-color);
+    }
+  }
+
+  // List markers pick up the accent
+  li::marker {
+    color: var(--bs-primary);
+  }
+}
+
+// Tag row sits on a hairline rule
+.tag-row {
+  border-top: var(--nf-border);
+}
+
+@media (max-width: 767.98px) {
+  .blog-post-content {
+    font-size: 1.05rem;
+  }
+}

package/dist/assets/themes/newsflash/pages/index.scss

@@ -0,0 +1,159 @@
+// Newsflash Theme — Homepage page-specific CSS
+// Styles the editorial front-page override
+// (_layouts/themes/newsflash/frontend/pages/index.html).
+//
+// Class names are UNIVERSAL (section-hero, hero-title, feed-num, rail-title,
+// mostread, stat-num, cta-panel, Bootstrap .card/.badge …) — no theme prefix —
+// so the same markup is swappable across themes. This file gives those classes
+// the newsflash look. Compiles standalone, so it pulls in the theme tokens +
+// mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Hero — the front-page lead
+// ============================================
+.section-hero {
+  padding-top: clamp(2.5rem, 5vw, 4rem);
+}
+
+.hero-title {
+  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
+  font-weight: 550;
+  letter-spacing: -0.022em;
+  line-height: 1.04;
+}
+
+.hero-art {
+  .art-frame {
+    aspect-ratio: 4 / 3;
+    @include nf-shadow-pop();
+  }
+
+  .hero-art-chip {
+    position: absolute;
+    top: 18px;
+    left: -14px;
+    transform: rotate(-4deg);
+    z-index: 2;
+  }
+}
+
+// Decorative cover art (pre-content fallback when the site has no posts yet):
+// vermilion-to-orange wash with a blue corner glow — pure CSS, no asset.
+.cover-art {
+  background:
+    radial-gradient(110% 90% at 88% 8%, #FFB36B 0%, rgba(255, 179, 107, 0) 52%),
+    radial-gradient(120% 110% at 8% 95%, var(--nf-blue) 0%, rgba(39, 66, 245, 0) 56%),
+    linear-gradient(155deg, var(--nf-vermilion) 10%, #FF7A3D 90%);
+}
+
+// ============================================
+// The rundown — stroked step numerals on dashed rows
+// ============================================
+// (The latest feed uses .feed-item's BASE layout from _editorial.scss —
+// square art thumb + text. Only the rundown swaps the thumb for a numeral.)
+.feed-num {
+  font-family: $nf-font-display;
+  font-style: italic;
+  font-weight: 800;
+  font-size: 3.2rem;
+  line-height: 1;
+  color: transparent;
+  -webkit-text-stroke: 1.5px var(--nf-ink);
+}
+
+// On rundown rows the numeral replaces the thumbnail — shrink its column
+.feed-item .feed-num {
+  width: 5rem;
+}
+.section-rundown .feed-item {
+  grid-template-columns: 5rem 1fr;
+}
+
+// ============================================
+// The rail (sticky sidebar)
+// ============================================
+.rail-stack {
+  position: sticky;
+  top: 5.75rem; // clears the sticky masthead
+}
+
+.rail-title {
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
+  font-weight: 800;
+  font-size: 0.8rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+
+  &::after {
+    content: "";
+    flex: 1;
+    height: var(--nf-border-width);
+    background: var(--nf-border-color);
+  }
+}
+
+// Most-read list — stroked counter numerals that ink in on hover
+.mostread {
+  counter-reset: mostread;
+
+  li {
+    counter-increment: mostread;
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    padding: 0.8rem 0;
+    border-bottom: 1px solid var(--nf-line);
+
+    &:first-child { padding-top: 0; }
+    &:last-child { border-bottom: 0; padding-bottom: 0; }
+
+    &::before {
+      content: counter(mostread);
+      font-family: $nf-font-display;
+      font-style: italic;
+      font-weight: 900;
+      font-size: 2rem;
+      line-height: 1;
+      color: transparent;
+      -webkit-text-stroke: 1.3px var(--nf-ink);
+      flex: none;
+      width: 1.2em;
+      transition: $nf-transition;
+    }
+
+    &:hover::before {
+      color: var(--bs-primary);
+      -webkit-text-stroke-color: var(--bs-primary);
+    }
+  }
+
+  a {
+    font-weight: 700;
+    font-size: 0.95rem;
+    line-height: 1.35;
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      color: var(--bs-primary);
+    }
+  }
+}
+
+// Newsletter rail — the vermilion slab gets the hard offset shadow
+.rail-stack .card.bg-primary {
+  box-shadow: var(--nf-shadow-hard-hover) !important;
+}
+
+// (Feature icon chips, stats numerals + the CTA band live in the main bundle — _panels.scss —
+// because pricing/about reuse them. Reader quote-cards live in pages/about/index.scss —
+// the testimonials section moved to the about page.)
+
+@media (max-width: 991.98px) {
+  .rail-stack { position: static; }
+}

package/dist/assets/themes/newsflash/pages/pricing/index.scss

@@ -0,0 +1,194 @@
+// Newsflash Theme — Pricing page-specific CSS
+// The "subscription desk" treatment for
+// (_layouts/themes/newsflash/frontend/pages/pricing.html): pill billing
+// toggle, framed plan cards with the vermilion "Editor's pick", and the
+// enterprise strip. Compiles standalone — theme tokens + mixins via loadPaths.
+@use 'config' as *;
+@import 'css/base/mixins';
+
+// ============================================
+// Billing toggle — pill segmented control
+// ============================================
+.billing-toggle {
+  display: flex;
+  justify-content: center;
+  gap: 0.35rem;
+  width: fit-content;
+  margin: 0 auto 1.25rem;
+  padding: 0.35rem;
+  border: var(--nf-border);
+  border-radius: 50rem;
+  background: var(--bs-card-bg);
+
+  .billing-option {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    padding: 0.5rem 1.25rem;
+    border-radius: 50rem;
+    font-weight: 700;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: $nf-transition;
+
+    &:hover {
+      background: var(--nf-paper-2);
+    }
+  }
+
+  .btn-check:checked + .billing-option {
+    background: var(--nf-ink);
+    color: var(--nf-paper);
+  }
+
+  .billing-save {
+    font-size: 0.68rem;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    padding: 0.3em 0.7em;
+    border-radius: 50rem;
+    background: var(--nf-volt);
+    color: var(--nf-volt-ink);
+  }
+}
+
+// ============================================
+// Plan grid + cards
+// ============================================
+.pricing-plan-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+  align-items: start;
+  margin-bottom: 2rem;
+
+  @media (max-width: 1199.98px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 767.98px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pricing-plan {
+  position: relative;
+  padding: 1.75rem;
+
+  &--popular {
+    border-color: var(--bs-primary);
+    border-width: 2.5px;
+    box-shadow: var(--nf-shadow-hard-hover);
+  }
+}
+
+.pricing-plan-flag {
+  position: absolute;
+  top: -0.85rem;
+  left: 50%;
+  transform: translateX(-50%) rotate(-2deg);
+  white-space: nowrap;
+}
+
+.pricing-plan-name {
+  font-size: 1.4rem;
+  margin-bottom: 0.1rem;
+}
+
+.pricing-plan-tagline {
+  margin-bottom: 1.25rem;
+}
+
+.pricing-plan-price {
+  font-family: $nf-font-display;
+  margin-bottom: 0.25rem;
+
+  .pricing-plan-currency {
+    font-size: 1.4rem;
+    font-weight: 600;
+    vertical-align: super;
+  }
+
+  .pricing-plan-amount {
+    font-size: 3rem;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1;
+  }
+
+  .pricing-plan-per {
+    font-family: $font-family-sans-serif;
+    font-size: 0.95rem;
+    color: var(--bs-secondary-color);
+  }
+}
+
+.pricing-plan-ppu {
+  font-size: 0.85rem;
+  color: var(--bs-secondary-color);
+  min-height: 1.3em;
+  margin-bottom: 1.25rem;
+
+  .price-per-unit {
+    font-weight: 700;
+    color: var(--bs-primary);
+  }
+}
+
+.pricing-plan-billing,
+.pricing-plan-guarantee {
+  font-size: 0.8rem;
+  color: var(--bs-secondary-color);
+  text-align: center;
+  margin-bottom: 0.35rem;
+}
+
+.pricing-plan-rule {
+  margin: 1.25rem 0;
+}
+
+.pricing-plan-inherit {
+  font-size: 0.8rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--bs-secondary-color);
+  margin-bottom: 0.75rem;
+}
+
+.pricing-plan-features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1rem;
+
+  li {
+    display: flex;
+    gap: 0.6em;
+    align-items: baseline;
+    padding: 0.3rem 0;
+    font-size: 0.92rem;
+  }
+
+  .pricing-plan-feature-icon {
+    color: var(--bs-primary);
+    flex: none;
+  }
+}
+
+// ============================================
+// Enterprise strip
+// ============================================
+.enterprise-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 1.75rem;
+
+  @media (max-width: 767.98px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/dist/assets/themes/newsflash/pages/test/libraries/layers/index.js

@@ -0,0 +1,9 @@
+// /test — Theme (newsflash) page JS — the #theme layer.
+// Runs AFTER #main, BEFORE #project. Turns the "js-theme" dot green.
+export default ({ manager, options }) => {
+  const dot = document.querySelector('.layer-dot[data-layer="js-theme"]');
+  if (dot) {
+    dot.style.background = '#30a46c'; // green
+  }
+  console.log('[test-layer] #theme JS ran → js-theme dot green');
+};

package/dist/assets/themes/newsflash/pages/test/libraries/layers/index.scss

@@ -0,0 +1,7 @@
+// /test — Theme (newsflash) page CSS — the #theme layer.
+// Loads AFTER the universal layer and turns the "css-theme" dot green.
+// Compiles standalone, so no theme tokens are needed here — just the proof.
+
+.layer-dot[data-layer="css-theme"] {
+  background: #30a46c; // green
+}

package/dist/commands/blogify.js

@@ -276,11 +276,14 @@ module.exports = async function (options) {
     });
   }
 
-  // Generate 12 posts
+  // Generate posts (--count=<n>, default 12)
+  const count = parseInt(options.count, 10) || 12;
   const now = Math.floor(Date.now() / 1000);
   const dayInSeconds = 86400;
 
-  for (let i = 0; i < 12; i++) {
+  logger.log(`Generating ${count} test posts...`);
+
+  for (let i = 0; i < count; i++) {
     // Calculate timestamp for each post (spread over last 12 days)
     const postTimestamp = now - (i * dayInSeconds);
     const postId = `test-${postTimestamp}`; // Add test- prefix to ID
@@ -335,5 +338,5 @@ ${generateBlogContent(postImages)}`;
     logger.log(`Created post: ${filename}`);
   }
 
-  logger.log(`Successfully created 12 blog posts in ${postsDir}`);
+  logger.log(`Successfully created ${count} blog posts in ${postsDir}`);
 };

package/dist/commands/test.js

@@ -5,15 +5,34 @@ const Manager = require('../build.js');
 const mgr     = new Manager();
 const logger  = mgr.logger('test');
 const { run } = require('../test/runner.js');
+const attachLogFile = require('../utils/attach-log-file.js');
+const { EXTENDED_MODE_WARNING } = require('../test/utils/extended-mode-warning.js');
 
 module.exports = async function (options) {
+  // Tee all test output to <projectRoot>/logs/test.log (ANSI-stripped) — mirrors
+  // the dev/build log pattern and EM/BEM's test.log. Skipped on CI via isServer().
+  attachLogFile('test');
+
   const layer       = options.layer    || 'all';
+  // Positional target: `npx mgr test <target>` where target supports source
+  // prefixes — `project:`, `project:<path>`, `mgr:`, `ujm:`, or a bare `<path>`.
+  const target      = (options._ && options._[1]) || null;
+  // `--filter` flag: substring match on test NAMES/descriptions (orthogonal to target).
   const filter      = options.filter   || null;
   const reporter    = options.reporter || 'pretty';
-  const integration = options.integration === true || options.integration === 'true';
+  // Extended mode — opt into tests that hit REAL external services (network fetches, Firebase
+  // via web-manager, live APIs) instead of skipping them. Off by default so `npx mgr test`
+  // stays fast and offline-safe. The canonical signal is the unprefixed `TEST_EXTENDED_MODE`
+  // env var — the SAME name across BEM/BXM/UJM/EM (cross-framework parity); `--extended` is the
+  // CLI shorthand. Once set on process.env it propagates to every spawned child (the Jekyll
+  // build, the boot HTTP server / Puppeteer browsers) automatically via inherited `process.env`.
+  const extended    = options.extended === true
+    || options.extended === 'true'
+    || process.env.TEST_EXTENDED_MODE === 'true'
+    || process.env.TEST_EXTENDED_MODE === '1';
 
-  if (integration) {
-    process.env.UJ_TEST_INTEGRATION = '1';
+  if (extended) {
+    process.env.TEST_EXTENDED_MODE = 'true';
   }
 
   // Canonical signal — every Manager picks this up via isTesting().
@@ -33,10 +52,15 @@ module.exports = async function (options) {
   }
 
   if (reporter !== 'json') {
-    logger.log(`Running tests (layer=${layer}${filter ? ` filter="${filter}"` : ''}${integration ? ' +integration' : ''})`);
+    logger.log(`Running tests (layer=${layer}${target ? ` target="${target}"` : ''}${filter ? ` filter="${filter}"` : ''}${extended ? ' +extended' : ''})`);
+    logger.log(`Test mode: ${extended ? 'extended (real external APIs)' : 'normal (external APIs skipped)'}`);
+    if (extended) {
+      logger.warn(EXTENDED_MODE_WARNING[0]);
+      EXTENDED_MODE_WARNING.slice(1).forEach((line) => logger.warn(line));
+    }
   }
 
-  const result = await run({ layer, filter, reporter });
+  const result = await run({ layer, target, filter, reporter });
 
   if (reporter === 'json') {
     // Final machine-readable summary.
@@ -51,6 +75,11 @@ module.exports = async function (options) {
 
   if (result.failed > 0) {
     process.exitCode = 1;
+    attachLogFile.detach();
     throw new Error(`${result.failed} test(s) failed`);
   }
+
+  // Restore stdout/stderr and close the log file. UJM's util writes synchronously,
+  // so the tail is already on disk — this just cleans up the handle.
+  attachLogFile.detach();
 };

package/dist/defaults/CLAUDE.md

@@ -28,9 +28,12 @@ npm start           # dev: clean → setup → bundle exec gulp serve (Jekyll +
 npm run build       # production build (UJ_BUILD_MODE=true): clean → setup → full gulp pipeline → _site/
 npm run deploy      # build → `npu sync --message='Deploy'` (publishes _site/)
 npx mgr test        # run framework + project test suites (build / page / boot layers)
-npx mgr test pages/home           # run a specific test by path (relative to test/)
-npx mgr test ujm:pages/home       # run only framework tests matching a path
-npx mgr test project:custom-test  # run only consumer project tests matching a path
+npx mgr test pages/home           # run a specific test by path (relative to test/, both sources)
+npx mgr test project:             # run ONLY your project tests (project:custom-test for one path)
+npx mgr test mgr:                 # run ONLY framework tests (ujm: / framework: are equivalent)
+npx mgr test --filter=foo         # match test NAMES within the selected files (composes with target)
+npx mgr test --extended           # also run tests that hit real external services (or TEST_EXTENDED_MODE=true; off by default)
+# (output is teed to logs/ — dev.log on `npm start`, build.log on `npm run build`, test.log on `npx mgr test`; cat instead of scrolling scrollback)
 npx mgr audit       # HTML validation + spellcheck + optional Lighthouse
 npx mgr install dev  # use LOCAL ultimate-jekyll-manager source (to test framework edits)
 npx mgr install live # restore the published ultimate-jekyll-manager from npm
@@ -51,7 +54,7 @@ See `node_modules/ultimate-jekyll-manager/docs/themes.md` for the full "Bootstra
 
 ## 🚨 Development workflow — MUST follow
 
-- **🚫 NEVER run `npm start`, `npm run build`, or `npm test`** unless the user explicitly asks. Assume the user is already running the dev server. Running these commands kills the user's process and wastes time.
+- **🚫 NEVER run `npm start`** — the user runs the dev server; running it again kills theirs. Assume it's already running; if it isn't, instruct the user to run it rather than running it yourself. Running `npx mgr test` is fine.
 - **✅ ALWAYS check `logs/dev.log`** after editing source files (SCSS, JS, HTML, config) to confirm the build succeeded. The dev server's gulp watcher recompiles on file change — check the log for errors.
   - Success: `Reloading Browsers...`
   - Failure: `'sass' errored`, `'webpack' errored`, `'build-error'`, `'jekyll' errored`
@@ -114,6 +117,16 @@ At build time, `require('ultimate-jekyll-manager/build')` exposes:
 - `Manager.logger(name)` — timestamped logger instance
 - `Manager.require(path)` — escape hatch for UJM transitive deps (use sparingly)
 
+## Dependency resolution
+
+- **Do NOT install framework dependencies directly** (`firebase`, `web-manager`, etc.). UJM's webpack config resolves them through the framework's own `node_modules/`. If something doesn't resolve, the issue is in UJM's webpack config — not your `package.json`.
+- **web-manager owns Firebase.** Never `import firebase from 'firebase/app'`. Use `import webManager from 'web-manager'` → `webManager.auth()`, `webManager.firestore()`.
+- **`Manager.require(name)`** resolves from UJM's module context at runtime for unbundled code (gulp tasks, test fixtures).
+
+## Testing
+
+Every feature ships with tests at every layer it has a surface in: **logic** (`test/build/`, or `test/page/` for frontend module logic), **UI** (`test/page/` — real events on the real DOM), and **end-to-end** (`test/boot/`). Skip a layer only when the feature genuinely has no surface there — "the logic test covers it" does not excuse the UI test. See `test/README.md` and `node_modules/ultimate-jekyll-manager/docs/test-framework.md`.
+
 <!-- Everything above this marker is owned by the framework and rewritten on every `npx mgr setup`. Add your project-specific notes below — they are preserved across setups. -->
 
 # ========== Custom Values ==========