ultimate-jekyll-manager 0.0.304 → 1.0.1

package/CHANGELOG.md

@@ -16,6 +16,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ---
 ## [Unreleased]
+### Changed
+- Migrate "app" terminology to "brand" across frontend and service worker: renamed `appData`/`fetchAppData` to `brandData`/`fetchBrandData`, `appConfig`/`fetchAppConfig` to `brandConfig`/`fetchBrandConfig`, API endpoint from `/backend-manager/app` to `/backend-manager/brand`, and `this.app` to `this.brand` in service worker
+
 ### Added
 - Abandoned cart tracking on checkout page: creates a Firestore document in `payments-carts/{uid}` when authenticated users begin checkout, with a 15-minute first reminder delay
 - Backend sidebar auto-expands collapsible dropdown sections containing the currently active page link (desktop and mobile)
@@ -27,8 +30,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Auth state settles before any authorized fetches fire on checkout, preventing race conditions
 - Quick boot mode (`UJ_QUICK=true`) for faster dev server startup (~5s vs ~20s) by skipping clean, slow setup operations, and deferring webpack/sass compilation until after Jekyll's first build
 - Dev-only warning in FormManager for form fields missing `name` attributes (skipped by validation and `getData()`)
+- FAQPage JSON-LD schema with 3-level fallback chain (`schema.faq_page.items` → `faqs.items` → `alternative.faqs.items`)
+- FAQPage schema enabled on blueprint pages with FAQ sections (pricing, contact, download, extension, alternatives)
+- OG image dimension meta tags (`og:image:width`, `og:image:height`) with 1200×630 defaults
+- Article published/modified time meta tags for blog posts
+- Admin marketing calendar page (`/admin/calendar`) with custom-built interactive calendar for scheduling newsletters and notifications
+- Calendar supports 4 view modes (month, week, day, year) with event CRUD, drag-and-drop, overlapping event layout, and `window.calendarAPI`
+- Real-time red "now" line indicator in day/week views, updates every 60 seconds
+- Viewport-locked admin layout variant (`themes/classy/admin/core/minimal-viewport-locked`) for full-height admin pages
+- Feedback page (`/feedback`) with emoji rating selection, written feedback fields, review prompt modal, and analytics tracking
+- FormManager auto-populates form fields from URL query parameters (skips utm_*, itm_*, cb, fbclid, gclid)
+- Review prompt modal after positive feedback submission with copy-paste textarea and external review site link
 
 ### Changed
+- Twitter card default from `summary` to configurable `summary_large_image`
 - Rename `site.tracking` config to `site.analytics` with simplified keys (`google-analytics` → `google`, `meta-pixel` → `meta`, `tiktok-pixel` → `tiktok`)
 - Update `webManager.config.tracking['meta-pixel']` to `webManager.config.analytics?.meta` in auth.js
 - Replace hardcoded discount codes with server-side validation via `payments/discount` API endpoint
@@ -58,6 +73,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fix admin forms (notifications, users) and blog/status forms missing `novalidate`, `onsubmit`, `name` attributes, and `.button-text` spans
 - Fix profile premium badge using removed `trialing` status and `access` field
 - Add dev-only artificial pre-delay support to checkout page for testing form protection timing
+- Fix `btn-check:checked` outline button styling in classy theme — transparent `!important` rule was overriding Bootstrap's checked background due to higher CSS specificity
 
 ---
 ## [1.0.0] - 2024-06-19

package/CLAUDE.md

@@ -363,7 +363,7 @@ Ultimate Jekyll uses the `jekyll-uj-powertools` gem for custom Liquid functional
 **Documentation:** `/Users/ian/Developer/Repositories/ITW-Creative-works/jekyll-uj-powertools/README.md`
 
 ### Available Features
-- **Filters:** `uj_strip_ads`, `uj_json_escape`, `uj_title_case`, `uj_content_format`
+- **Filters:** `uj_strip_ads`, `uj_json_escape`, `uj_title_case`, `uj_content_format`, `uj_hash`
 - **Tags:** `iftruthy`, `iffalsy`, `uj_icon`, `uj_logo`, `uj_image`, `uj_member`, `uj_post`, `uj_readtime`, `uj_social`, `uj_translation_url`, `uj_fake_comments`, `uj_language`
 - **Global Variables:** `site.uj.cache_breaker`
 - **Page Variables:** `page.random_id`, `page.extension`, `page.layout_data`, `page.resolved`
@@ -375,6 +375,14 @@ Ultimate Jekyll uses the `jekyll-uj-powertools` gem for custom Liquid functional
 #### `uj_content_format`
 Formats content by first liquifying it, then markdownifying it (if markdown file).
 
+#### `uj_hash`
+Returns a deterministic number between 0 and max (exclusive) based on the input string's MD5 hash. Same input always produces the same output.
+
+```liquid
+{{ "some-string" | uj_hash: 1000 }}  => 0-999 (stable across builds)
+{{ site.url | uj_hash: 2 }}          => 0 or 1
+```
+
 #### `iftruthy` / `iffalsy`
 Custom tags that check JavaScript truthiness (not null, undefined, or empty string).
 
@@ -481,6 +489,12 @@ When posts are created via BEM's `POST /admin/post` endpoint:
 
 Ultimate Jekyll uses Font Awesome icons but does NOT include the Font Awesome JavaScript or CSS library. All icons must be rendered server-side using Jekyll's `{% uj_icon %}` tag.
 
+### Available Icons
+
+UJM ships with the **full Font Awesome Pro solid icon set** (4,600+ icons) at `assets/icons/font-awesome/solid/`, plus brand icons at `assets/icons/font-awesome/brands/`. Any Pro or Free solid/brand icon name can be used with `{% uj_icon %}` and prerendered icons. The icon style defaults to `solid` and can be configured via `site.config.icons.style`.
+
+Browse available icons at: https://fontawesome.com/icons
+
 ### When to Use `{% uj_icon %}` vs Prerendered Icons
 
 **IMPORTANT:** Use the correct method based on WHERE the icon will be used:
@@ -911,6 +925,26 @@ Custom library for site management functionality.
 
 **Important:** Always check the source code or README before assuming a function exists. Do not guess at API methods.
 
+#### Subscription Resolution
+
+Use `webManager.auth().resolveSubscription(account)` to derive calculated subscription state. This is the **single source of truth** for determining a user's effective plan — do NOT manually check `subscription.status`, `trial.claimed`, or `cancellation.pending` separately.
+
+```javascript
+const resolved = webManager.auth().resolveSubscription(account);
+// Returns: { plan, active, trialing, cancelling }
+```
+
+| Field | Description |
+|-------|-------------|
+| `plan` | Effective plan ID right now (`'basic'` if cancelled/suspended) |
+| `active` | Has active access (active, trialing, or cancelling) |
+| `trialing` | In active trial |
+| `cancelling` | Cancellation pending |
+
+Raw subscription data (product.id, status, trial, cancellation) is on `account.subscription` directly — `resolveSubscription()` returns only the calculated/derived fields.
+
+The same function exists in BEM as `User.resolveSubscription(account)` with identical return shape.
+
 ### Ultimate Jekyll Libraries
 
 Ultimate Jekyll provides helper libraries in `src/assets/js/libs/` that can be imported as needed.
@@ -1348,6 +1382,111 @@ Which renders as "Can I import my data from ExampleApp?" for an ExampleApp compe
 | CSS | `src/assets/css/pages/alternatives/alternative/index.scss` |
 | JS | `src/assets/js/pages/alternatives/alternative/index.js` |
 
+## Schema / Structured Data (JSON-LD)
+
+UJ automatically generates JSON-LD structured data in `foot.html`. The SoftwareApplication schema with AggregateRating is opt-in via frontmatter.
+
+### SoftwareApplication Schema
+
+Renders a `SoftwareApplication` JSON-LD block with deterministic aggregate ratings. Enabled by blueprint layouts (index, pricing, download, alternatives/alternative) — consuming projects can override or disable per page.
+
+**How it works:**
+
+1. **`_config.yml`** sets fallback defaults (no `enabled` key — just field defaults like `application_category`, `price`, etc.)
+2. **Blueprint layouts** set `schema.software_application.enabled: true` with page-appropriate `features`
+3. **Consuming projects** can override any value in their page frontmatter, or disable with `enabled: false`
+
+This follows the standard `page.resolved` merge: page > layout > site.
+
+**Deterministic ratings:** Uses the `uj_hash` filter (from jekyll-uj-powertools) seeded with `site.url` by default, producing stable values across builds:
+- Rating: always `4.8` or `4.9` (deterministic per seed)
+- Review count: 200,000–999,999 (deterministic per seed)
+- Override seed per page with `hash_seed` to get different values
+
+**Blueprint frontmatter example:**
+```yaml
+### SCHEMA ###
+schema:
+  software_application:
+    enabled: true
+    features:
+      - "Free to use"
+      - "24/7 availability"
+      - "User-friendly interface"
+```
+
+**Consuming project override example:**
+```yaml
+schema:
+  software_application:
+    application_category: "EducationalApplication"
+    features:
+      - "AI-powered solutions"
+      - "24/7 availability"
+```
+
+**Consuming project disable example:**
+```yaml
+schema:
+  software_application:
+    enabled: false
+```
+
+**Available fields:**
+
+| Field | Default | Description |
+|-------|---------|-------------|
+| `enabled` | (set by blueprint) | Enable/disable the schema block |
+| `name` | `site.brand.name` | Application name |
+| `description` | `page.resolved.meta.description` | Application description |
+| `application_category` | `WebApplication` | Schema.org application category |
+| `operating_system` | `Web-based` | Target OS |
+| `price` | `0` | Price (string) |
+| `price_currency` | `USD` | Currency code |
+| `features` | `[]` | Feature list for `featureList` field |
+| `hash_seed` | `site.url` | Seed for deterministic rating/count generation |
+
+**File locations:**
+
+| Purpose | Path |
+|---------|------|
+| Schema block (rendering) | `src/defaults/dist/_includes/core/foot.html` |
+| Site-level defaults | `src/defaults/src/_config.yml` (under `schema:`) |
+| Blueprint activation | `src/defaults/dist/_layouts/blueprint/{index,pricing,download}.html`, `blueprint/alternatives/alternative.html` |
+| Hash filter | `jekyll-uj-powertools/lib/filters/main.rb` (`uj_hash`) |
+
+### FAQPage Schema
+
+Renders a `FAQPage` JSON-LD block for pages with FAQ/accordion sections. Enabled by the alternatives blueprint — consuming projects can also enable it on any page with FAQ content.
+
+**How it works:**
+
+1. **`_config.yml`** sets `faq_page.items: []` as fallback
+2. **Blueprint layouts** set `schema.faq_page.enabled: true`
+3. **Items source (fallback chain):** `schema.faq_page.items` → `page.resolved.faqs.items` → `page.resolved.alternative.faqs.items`. Pages with generic `faqs.items` (like pricing) and alternatives pages both get FAQPage schema automatically without duplicating content
+4. Questions/answers are processed through `uj_liquify` (supports Liquid expressions like competitor names) and `uj_json_escape`
+
+**Blueprint activation:** Enabled by default in `blueprint/pricing.html`, `blueprint/contact.html`, `blueprint/download.html`, `blueprint/extension/index.html`, and `blueprint/alternatives/alternative.html`.
+
+**Consuming project usage — provide items directly:**
+```yaml
+schema:
+  faq_page:
+    enabled: true
+    items:
+      - question: "How do I get started?"
+        answer: "Sign up for free and follow the onboarding guide."
+      - question: "Is there a free plan?"
+        answer: "Yes, our basic plan is completely free."
+```
+
+**Available fields:**
+
+| Field | Default | Description |
+|-------|---------|-------------|
+| `enabled` | (set by blueprint) | Enable/disable the schema block |
+| `items` | `[]` | Array of `{question, answer}` objects. Falls back to `alternative.faqs.items` if empty |
+
 ## Audit Workflow
 
 When fixing issues identified by the audit task (`src/gulp/tasks/audit.js`):

package/README.md

@@ -385,7 +385,7 @@ Raw pixel values also accepted: `vert-size="300"` → 300px max-height. Omit `ve
   - Inserts fake session data in the Security section (active sessions)
 
 ##### Checkout Page (`/payment/checkout`)
-* `_dev_appId`: Override the application ID for testing (e.g., `_dev_appId=test-app`)
+* `_dev_brandId`: Override the brand ID for testing (e.g., `_dev_brandId=test-app`)
 * `_dev_trialEligible`: Force trial eligibility status:
   - `_dev_trialEligible=true`: User is eligible for trial
   - `_dev_trialEligible=false`: User is not eligible for trial

package/TODO.md

@@ -38,7 +38,7 @@ MAKE COMPONENTS? ASK CLAUDE HOW AND IF ITS POSSIBLE
 
 FIX SIGNIN/SINGUP FORM
 
-https://192.168.86.69:4000/payment/checkout?product=premium&_dev_trialEligible=true&_dev_appId=dev&_dev_cardProcessor=stripe
+https://192.168.86.69:4000/payment/checkout?product=premium&_dev_trialEligible=true&_dev_brandId=dev&_dev_cardProcessor=stripe
 
 filter-adaptive-inverse
 

package/dist/assets/css/pages/admin/calendar/index.scss

@@ -0,0 +1,477 @@
+// Admin Calendar Styles
+
+// Current time / today accent color
+$calendar-now-color: #F44336;
+
+// ============================================
+// Fix: viewport-locked layout sets display:flex on all direct children,
+// which overrides Bootstrap modal's default display:none.
+// Restore Bootstrap's default: hidden unless .show is present.
+// ============================================
+#calendar-event-modal:not(.show) {
+  display: none !important;
+}
+
+// ============================================
+// Calendar Root
+// ============================================
+#calendar-root {
+  min-height: 0;
+}
+
+// ============================================
+// Toolbar
+// ============================================
+#calendar-toolbar {
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.calendar-toolbar-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.calendar-toolbar-period {
+  font-size: 1.1rem;
+  font-weight: 600;
+  text-align: center;
+  min-width: 200px;
+}
+
+.calendar-toolbar-views .btn {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8rem;
+}
+
+// ============================================
+// Calendar Grid (shared)
+// ============================================
+#calendar-grid {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+// Day-of-week header
+.calendar-day-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: var(--bs-secondary-color);
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--bs-border-color);
+  flex-shrink: 0;
+}
+
+// ============================================
+// Month View
+// ============================================
+.calendar-month {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(auto-fill, 1fr);
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.calendar-cell {
+  border-right: 1px solid var(--bs-border-color);
+  border-bottom: 1px solid var(--bs-border-color);
+  padding: 0.25rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 80px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.15s;
+
+  &:nth-child(7n) {
+    border-right: none;
+  }
+
+  &:hover {
+    background-color: var(--bs-tertiary-bg);
+  }
+}
+
+.calendar-cell--today {
+  background-color: rgba($calendar-now-color, 0.05);
+
+  .calendar-cell-date {
+    background-color: $calendar-now-color;
+    color: #fff;
+    border-radius: 50%;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.calendar-cell--outside {
+  opacity: 0.35;
+}
+
+.calendar-cell--drag-over {
+  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
+}
+
+.calendar-cell-date {
+  font-size: 0.8rem;
+  font-weight: 500;
+  margin-bottom: 0.125rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+}
+
+.calendar-cell-events {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.calendar-cell-more {
+  font-size: 0.7rem;
+  color: var(--bs-secondary-color);
+  cursor: pointer;
+  padding: 0 0.25rem;
+
+  &:hover {
+    color: var(--bs-primary);
+  }
+}
+
+// ============================================
+// Week View
+// ============================================
+.calendar-week-header {
+  display: grid;
+  grid-template-columns: 50px repeat(7, 1fr);
+  border-bottom: 1px solid var(--bs-border-color);
+  flex-shrink: 0;
+}
+
+.calendar-week-header-cell {
+  text-align: center;
+  padding: 0.5rem 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--bs-secondary-color);
+
+  .calendar-week-header-date {
+    display: block;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--bs-body-color);
+  }
+
+  &.calendar-cell--today .calendar-week-header-date {
+    background-color: $calendar-now-color;
+    color: #fff;
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+  }
+}
+
+.calendar-week-allday {
+  display: grid;
+  grid-template-columns: 50px repeat(7, 1fr);
+  border-bottom: 1px solid var(--bs-border-color);
+  min-height: 1.5rem;
+  flex-shrink: 0;
+
+  .calendar-week-time-label {
+    font-size: 0.65rem;
+    color: var(--bs-secondary-color);
+    padding: 0.125rem 0.25rem;
+    text-align: right;
+  }
+}
+
+.calendar-week-body {
+  display: grid;
+  grid-template-columns: 50px repeat(7, 1fr);
+  flex-grow: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.calendar-week-time-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar-week-time-label {
+  height: 60px;
+  font-size: 0.65rem;
+  color: var(--bs-secondary-color);
+  text-align: right;
+  padding-right: 0.5rem;
+  padding-top: 0;
+  transform: translateY(-0.4rem);
+}
+
+.calendar-week-day-col {
+  position: relative;
+  border-left: 1px solid var(--bs-border-color);
+}
+
+.calendar-week-time-slot {
+  height: 60px;
+  border-bottom: 1px solid var(--bs-border-color-translucent);
+  position: relative;
+
+  &:hover {
+    background-color: var(--bs-tertiary-bg);
+  }
+}
+
+// Now line (real-time red indicator)
+.calendar-now-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background-color: $calendar-now-color;
+  z-index: 2;
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: -4px;
+    top: -4px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: $calendar-now-color;
+  }
+}
+
+.calendar-week-event {
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  border-radius: 4px;
+  padding: 0.125rem 0.25rem;
+  font-size: 0.7rem;
+  overflow: hidden;
+  cursor: pointer;
+  z-index: 1;
+  color: #fff;
+  border-left: 3px solid rgba(0, 0, 0, 0.2);
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+// ============================================
+// Day View
+// ============================================
+.calendar-day-header-single {
+  text-align: center;
+  padding: 0.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  border-bottom: 1px solid var(--bs-border-color);
+  flex-shrink: 0;
+}
+
+.calendar-day-body {
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  flex-grow: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.calendar-day-col {
+  position: relative;
+}
+
+// Day events reuse week event styles via shared class in renderer
+
+// ============================================
+// Year View
+// ============================================
+.calendar-year {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  padding: 0.5rem;
+  overflow-y: auto;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.calendar-mini-month {
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: var(--bs-tertiary-bg);
+  }
+}
+
+.calendar-mini-month-title {
+  text-align: center;
+  font-weight: 600;
+  font-size: 0.85rem;
+  margin-bottom: 0.25rem;
+}
+
+.calendar-mini-month-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-size: 0.65rem;
+  gap: 1px;
+}
+
+.calendar-mini-day-header {
+  color: var(--bs-secondary-color);
+  font-weight: 600;
+  padding: 0.125rem 0;
+}
+
+.calendar-mini-day {
+  padding: 0.125rem 0;
+  border-radius: 50%;
+  position: relative;
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.calendar-cell--today {
+    background-color: $calendar-now-color;
+    color: #fff;
+    opacity: 1;
+  }
+
+  &.calendar-cell--outside {
+    visibility: hidden;
+  }
+
+  &.has-events::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: $calendar-now-color;
+  }
+}
+
+// ============================================
+// Event Pills (Month View)
+// ============================================
+.calendar-event {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.0625rem 0.25rem;
+  border-radius: 3px;
+  font-size: 0.7rem;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  color: #fff;
+  transition: opacity 0.15s;
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+.calendar-event--dragging {
+  opacity: 0.4 !important;
+}
+
+// During drag, disable pointer-events on all events so drops land on time slots
+.calendar-grid--dragging {
+  .calendar-event,
+  .calendar-week-event {
+    pointer-events: none;
+  }
+}
+
+.calendar-event-time {
+  font-weight: 600;
+  font-size: 0.65rem;
+  flex-shrink: 0;
+}
+
+.calendar-event-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// ============================================
+// Color Swatches
+// ============================================
+.color-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.15s, border-color 0.15s;
+  padding: 0;
+
+  &:hover {
+    transform: scale(1.15);
+  }
+
+  &.active {
+    border-color: var(--bs-body-color);
+    transform: scale(1.15);
+  }
+}
+
+// ============================================
+// Responsive
+// ============================================
+@media (max-width: 767.98px) {
+  .calendar-year {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .calendar-toolbar-period {
+    min-width: auto;
+    font-size: 0.95rem;
+  }
+
+  .calendar-cell {
+    min-height: 60px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .calendar-year {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}