@omega.js/web 0.1.0

package/core/js/pages/blog/[slug].js

@@ -0,0 +1,132 @@
+// Libraries
+import omega from '@omega.js/client';
+import { createLogger } from '__main_assets__/js/libs/logger.js';
+
+const logger = createLogger('blog-post');
+
+// Module
+export default () => {
+  return new Promise(async function (resolve) {
+    // Initialize when DOM is ready
+    await omega.dom().ready();
+
+    insertBlogPostAds();
+    setupReadingProgress();
+
+    // Resolve after initialization
+    return resolve();
+  });
+};
+
+// Reading progress — fill [data-read-progress] as the article scrolls by.
+// rAF-throttled; no element (a theme without the bar) = no-op.
+function setupReadingProgress() {
+  const $bar = document.querySelector('[data-read-progress]');
+  const $article = document.querySelector('article');
+  if (!$bar || !$article) {
+    return;
+  }
+
+  let ticking = false;
+  const update = () => {
+    ticking = false;
+    const rect = $article.getBoundingClientRect();
+    const total = rect.height - window.innerHeight;
+    const progress = total > 0 ? Math.min(1, Math.max(0, -rect.top / total)) : 1;
+    $bar.style.transform = `scaleX(${progress})`;
+  };
+
+  window.addEventListener('scroll', () => {
+    if (!ticking) {
+      ticking = true;
+      requestAnimationFrame(update);
+    }
+  }, { passive: true });
+  update();
+}
+
+// Insert verts into blog post content
+function insertBlogPostAds() {
+  // Find the article content
+  const $article = document.querySelector('article .blog-post-content');
+  if (!$article) {
+    logger.log('No article element found');
+    return;
+  }
+
+  // Advertising is key-presence enabled — no config, no hosts inserted
+  if (!omega.config?.advertising) {
+    logger.log('No advertising config — skipping vert insertion');
+    return;
+  }
+
+  // Per-post opt-out: `verts: false` frontmatter marks the article
+  // (the same flag suppresses the layout's in-article unit)
+  if ($article.closest('[data-omega-verts="false"]')) {
+    logger.log('Post opted out of verts — skipping vert insertion');
+    return;
+  }
+
+  // Get all top-level paragraphs (exclude those inside blockquotes, details, etc.)
+  const $paragraphs = Array.from($article.querySelectorAll('p'))
+    .filter(p => !p.closest('blockquote, details, figure'));
+  if ($paragraphs.length < 3) {
+    logger.log('Not enough paragraphs for vert insertion');
+    return;
+  }
+
+  // Find valid positions to insert verts (every 4 paragraphs)
+  // But ensure the last vert isn't too close to the end of the article
+  const positions = [];
+  const minParagraphsAfterLastVert = 2; // Ensure at least 2 paragraphs after the last vert
+
+  for (let i = 0; i < $paragraphs.length; i++) {
+    // Only consider every 4th paragraph
+    if ((i + 1) % 4 !== 0) {
+      continue;
+    }
+
+    // Skip if this position is too close to the end of the article
+    const paragraphsRemaining = $paragraphs.length - 1 - i;
+    if (paragraphsRemaining < minParagraphsAfterLastVert) {
+      continue;
+    }
+
+    const $p = $paragraphs[i];
+    const $prevSibling = $p.previousElementSibling;
+
+    // Skip if previous sibling is an image or heading
+    if ($prevSibling) {
+      const isAfterImage = $prevSibling.tagName === 'IMG' || $prevSibling.tagName === 'PICTURE' || $prevSibling.querySelector('img');
+      const isAfterHeading = /^H[1-6]$/.test($prevSibling.tagName);
+
+      if (isAfterImage || isAfterHeading) {
+        continue;
+      }
+    }
+
+    positions.push($p);
+  }
+
+  if (positions.length === 0) {
+    logger.log('No valid positions for vert insertion');
+    return;
+  }
+
+  // Log vert insertion
+  logger.log('Inserting', positions.length, 'verts');
+
+  // Insert a modern vert host at each position — the shared client verts module
+  // owns the whole lifecycle (lazy arming, AdSense → house fallback ladder,
+  // no-fill collapse). Same markup vocabulary as the verts/unit section.
+  positions.forEach((targetParagraph) => {
+    const $host = document.createElement('div');
+    $host.classList.add('omega-vert-unit', 'my-4');
+    $host.setAttribute('data-omega-vert', 'in-article');
+    $host.setAttribute('data-omega-bind', '@hide auth.resolved.active');
+
+    // Insert after the target paragraph, then hand it to the verts module
+    targetParagraph.parentNode.insertBefore($host, targetParagraph.nextSibling);
+    omega.verts().mount($host);
+  });
+}

package/core/js/pages/blog/_search.mjs

@@ -0,0 +1,108 @@
+/**
+ * Blog search ranking and index loading — the pure half of the blog page
+ * module: index in, ranked matches out. No DOM, no client import, so it is
+ * unit-testable on its own (test/blog-search.test.js imports this file
+ * directly — the .mjs extension is what lets node import it from the
+ * CommonJS test lane).
+ */
+
+/**
+ * Rank the index against a query: every whitespace-separated token must match
+ * somewhere (title, description or taxonomy), and a title hit outranks a body
+ * hit. Newest-first survives within a rank because the index is already sorted.
+ * @param {object[]} entries - the loaded index
+ * @param {string} query - the raw query string
+ * @returns {object[]} matching entries, best first
+ */
+export function search(entries, query) {
+  const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (!tokens.length) {
+    return [];
+  }
+
+  const scored = [];
+  entries.forEach((entry, i) => {
+    const title = (entry.title || '').toLowerCase();
+    const taxonomy = [...(entry.categories || []), ...(entry.tags || [])].join(' ').toLowerCase();
+    const rest = `${(entry.desc || '').toLowerCase()} ${taxonomy}`;
+
+    let score = 0;
+    const matchesAll = tokens.every((token) => {
+      if (title.includes(token)) {
+        score += 2;
+        return true;
+      }
+      if (rest.includes(token)) {
+        score += 1;
+        return true;
+      }
+      return false;
+    });
+
+    if (matchesAll) {
+      scored.push({ entry, score, i });
+    }
+  });
+
+  return scored
+    .sort((a, b) => b.score - a.score || a.i - b.i)
+    .map((hit) => hit.entry);
+}
+
+/**
+ * The lazy index loader: fetch the build-emitted index ONCE and hand the same
+ * entries to every later query. A failed load (404, offline, a body that isn't
+ * JSON) is NOT cached — search stays broken only for the attempt that failed,
+ * and the next keystroke tries again — and it resolves null instead of
+ * rejecting, so the page renders its unavailable state rather than throwing.
+ * @param {string} url - the index url
+ * @param {object} logger - the page's tagged logger
+ * @returns {function(): Promise<object[]|null>} load()
+ */
+export function createIndexLoader(url, logger) {
+  let pending = null;
+
+  return function load() {
+    if (!pending) {
+      pending = fetch(url)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`${url} responded ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((entries) => {
+          logger.log(`Loaded ${entries.length} posts`);
+          return entries;
+        })
+        .catch((e) => {
+          // Drop the failed attempt so a later search re-fetches
+          pending = null;
+          logger.error(`Could not load ${url}`, e);
+          return null;
+        });
+    }
+
+    return pending;
+  };
+}
+
+/**
+ * Format an index date. The index carries a plain YYYY-MM-DD; formatting in
+ * UTC keeps the rendered date the AUTHORED date for every reader, never a
+ * timezone-shifted neighbour of it.
+ * @param {string} date - YYYY-MM-DD
+ * @returns {string} e.g. "Jan 15, 2024"
+ */
+export function formatDate(date) {
+  if (!date) {
+    return '';
+  }
+
+  return new Date(`${date}T00:00:00Z`).toLocaleDateString('en-US', {
+    timeZone: 'UTC',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}

package/core/js/pages/blog/index.js

@@ -0,0 +1,193 @@
+/**
+ * Blog Page JavaScript
+ *
+ * Blog search, self-contained: the build emits /blog/index.json (every post's
+ * title, description, date and taxonomy) and this module fetches it ONCE, on
+ * first use, then filters it in the browser. No search library, no third-party
+ * widget, no query leaving the site.
+ */
+
+// Libraries
+import omega from '@omega.js/client';
+import { createLogger } from '__main_assets__/js/libs/logger.js';
+import { search, formatDate, createIndexLoader } from './_search.mjs';
+import { event } from '__main_assets__/js/libs/analytics.js';
+
+const logger = createLogger('blog-search');
+
+// The build-emitted index (defaults/pages/blog/index-json.html)
+const INDEX_URL = '/blog/index.json';
+
+// Module
+// (The newsletter form binding moved to the section that renders it —
+// themes/base/_sections/marketing/newsletter-cta/section.js, initialized
+// by the §7 presence init on any page composing the band.)
+export default () => {
+  return new Promise(async function (resolve) {
+    // Initialize when DOM is ready
+    await omega.dom().ready();
+
+    setupSearch();
+
+    // Resolve after initialization
+    return resolve();
+  });
+};
+
+// Setup blog search functionality
+function setupSearch() {
+  const $input = document.getElementById('blog-search');
+  const $results = document.getElementById('blog-search-results');
+  const $listing = document.querySelector('[data-blog-listing]');
+
+  // A theme without the search surface renders no input — nothing to wire
+  if (!$input || !$results || !$listing) {
+    return;
+  }
+
+  let searchTimeout;
+
+  // Lazy index load — the first focus (or a ?q= deep link) pays for it, a
+  // visitor who never searches never downloads it, and the loader hands every
+  // later query the same entries
+  const loadIndex = createIndexLoader(INDEX_URL, logger);
+
+  const run = async (query) => {
+    if (!query) {
+      showListing($results, $listing);
+      return;
+    }
+
+    const entries = await loadIndex();
+
+    // The index never arrived (404, offline, bad JSON) — say so instead of
+    // rendering "no results", which would be a lie
+    if (!entries) {
+      renderUnavailable($results, $listing);
+      return;
+    }
+
+    render($results, $listing, search(entries, query), query);
+    trackBlogSearch(query);
+  };
+
+  $input.addEventListener('focus', loadIndex, { once: true });
+
+  // Handle search input
+  $input.addEventListener('input', (e) => {
+    clearTimeout(searchTimeout);
+    const query = e.target.value.trim();
+
+    // Restoring the listing is instant; querying is debounced
+    if (!query) {
+      run('');
+      return;
+    }
+
+    searchTimeout = setTimeout(() => run(query), 200);
+  });
+
+  // The form-less input still answers Enter: search now, no page load
+  $input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      clearTimeout(searchTimeout);
+      run($input.value.trim());
+    }
+  });
+
+  // Add keyboard shortcut (Ctrl/Cmd + K)
+  document.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      e.preventDefault();
+      $input.focus();
+      $input.select();
+    }
+  });
+
+  // Deep link: /blog?q=… (the site's SearchAction + OpenSearch target)
+  const initialQuery = (new URL(window.location.href).searchParams.get('q') || '').trim();
+  if (initialQuery) {
+    $input.value = initialQuery;
+    run(initialQuery);
+  }
+}
+
+/**
+ * Swap back to the paginated listing (empty query).
+ * @param {HTMLElement} $results - the results region
+ * @param {HTMLElement} $listing - the normal post listing
+ */
+function showListing($results, $listing) {
+  $results.innerHTML = '';
+  $results.hidden = true;
+  $listing.hidden = false;
+}
+
+/**
+ * Render the result list, replacing the listing while a query is active.
+ * @param {HTMLElement} $results - the results region
+ * @param {HTMLElement} $listing - the normal post listing
+ * @param {object[]} matches - ranked index entries
+ * @param {string} query - the raw query string
+ */
+function render($results, $listing, matches, query) {
+  const { escapeHTML } = omega.utilities();
+  const safeQuery = escapeHTML(query);
+
+  const body = matches.length
+    ? `<p class="omega-blog-search__summary">${matches.length} result${matches.length === 1 ? '' : 's'} for &ldquo;${safeQuery}&rdquo;</p>
+      <ol class="omega-blog-search__list">${matches.map((entry) => resultItem(entry, escapeHTML)).join('')}</ol>`
+    : `<div class="omega-blog-search__empty">
+        <h2 class="h5">No posts match &ldquo;${safeQuery}&rdquo;</h2>
+        <p class="mb-0">Try a shorter word, or clear the box to see every post.</p>
+      </div>`;
+
+  $results.innerHTML = `<div class="container">${body}</div>`;
+  $results.hidden = false;
+  $listing.hidden = true;
+}
+
+/**
+ * The index failed to load: the search box stays usable (a later query
+ * re-fetches), but this query has nothing honest to show.
+ * @param {HTMLElement} $results - the results region
+ * @param {HTMLElement} $listing - the normal post listing
+ */
+function renderUnavailable($results, $listing) {
+  $results.innerHTML = `<div class="container">
+      <div class="omega-blog-search__empty">
+        <h2 class="h5">Search is unavailable right now.</h2>
+        <p class="mb-0">Try again in a moment, or browse the posts below.</p>
+      </div>
+    </div>`;
+  $results.hidden = false;
+  $listing.hidden = false;
+}
+
+/**
+ * One result row: title link, first category + date, capped description.
+ * @param {object} entry - an index entry
+ * @param {function} escapeHTML - the client's HTML escaper
+ * @returns {string} the row markup
+ */
+function resultItem(entry, escapeHTML) {
+  const category = (entry.categories || [])[0];
+  const meta = [category, formatDate(entry.date)].filter(Boolean).map(escapeHTML).join(' · ');
+
+  return `
+    <li class="omega-blog-search__item">
+      <a class="omega-blog-search__title" href="${escapeHTML(entry.url)}">${escapeHTML(entry.title)}</a>
+      ${meta ? `<p class="omega-blog-search__meta">${meta}</p>` : ''}
+      ${entry.desc ? `<p class="omega-blog-search__excerpt">${escapeHTML(entry.desc)}</p>` : ''}
+    </li>
+  `;
+}
+
+// Tracking functions
+function trackBlogSearch(query) {
+  event('search', {
+    search_term: query,
+    content_category: 'blog',
+  });
+}

package/core/js/pages/blog/page/[num]/index.js

@@ -0,0 +1,7 @@
+/**
+ * Blog pagination pages (/blog/page/2, /blog/page/3, …) run the same module as
+ * /blog: the masthead search box is on every paginated page, so the search
+ * wiring has to be there too. Page assets resolve by URL, and `blog/index`
+ * never matches a three-segment URL — this wildcard entry is that match.
+ */
+export { default } from '../../index.js';

package/core/js/pages/connections/callback/index.js

@@ -0,0 +1,148 @@
+// Libraries
+import omega from '@omega.js/client';
+import { WAKEUP_ROUTE } from '@omega.js/client/modules/request.js';
+import { siteUrl } from '__main_assets__/js/libs/path-prefix.js';
+
+// Where the callback lands when nothing named a destination
+const DEFAULT_LANDING = '/dashboard/account#connections';
+
+// Where THIS connect lands ([#784](https://github.com/Omega-JS-Stack/omega/issues/784)).
+// A brand page starts a connect with `returnUrl: location.pathname + location.search + location.hash`,
+// the backend carries it through the encrypted state, and `tokenize` answers it —
+// the page has no other way of knowing it, since the browser left for the
+// provider in between.
+let landing = DEFAULT_LANDING;
+
+// Module
+export default () => {
+  return new Promise(async function (resolve) {
+    // Warm the backend before the auth wait below: the visitor is standing on a
+    // spinner while this page tokenizes their authorization code against
+    // `/omega/user/connections`, and that POST cannot go out until auth settles
+    // ([#644](https://github.com/Omega-JS-Stack/omega/issues/644)).
+    omega.request(WAKEUP_ROUTE, { wakeup: true });
+
+    await omega.dom().ready();
+
+    // Wait for auth state before handling callback
+    // Required because omega.request needs auth.currentUser
+    omega.auth().listen({ once: true }, () => {
+      handleOAuthCallback();
+    });
+
+    return resolve();
+  });
+};
+
+// Handle OAuth callback
+async function handleOAuthCallback() {
+  const $provider = document.getElementById('connections-provider');
+
+  try {
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+    const encryptedState = urlParams.get('state');
+    const error = urlParams.get('error');
+    const errorDescription = urlParams.get('error_description');
+
+    // Check for OAuth errors from provider
+    if (error) {
+      throw new Error(errorDescription || error || 'OAuth authorization was denied');
+    }
+
+    if (!code) {
+      throw new Error('Missing authorization code');
+    }
+
+    if (!encryptedState) {
+      throw new Error('Missing state parameter');
+    }
+
+    // Update provider display (we can't read encrypted state, so use generic text)
+    $provider.textContent = 'Provider';
+
+    // Build API URL using omega (no need to read from state)
+    const apiUrl = `${omega.getApiUrl()}/omega/user/connections`;
+
+    // Send tokenize request with encrypted state
+    // Note: tries=1 because auth codes can only be used once
+    const response = await omega.request(apiUrl, {
+      method: 'POST',
+      timeout: 60000,
+      tries: 1,
+      body: {
+        action: 'tokenize',
+        code: code,
+        encryptedState: encryptedState,
+      },
+    });
+
+    // Read off the answer BEFORE its outcome is judged, so both exits below
+    // offer the same way back
+    landing = isSitePath(response?.returnUrl) ? response.returnUrl : DEFAULT_LANDING;
+
+    if (!response.success) {
+      throw new Error(response.message || 'Failed to complete authorization');
+    }
+
+    showSuccess();
+
+  } catch (error) {
+    console.error('OAuth callback error:', error);
+    showError(error.message);
+  }
+}
+
+/**
+ * Whether a value is a path on this site — the same rule the backend validated
+ * the `returnUrl` with on the authorize leg (its one home is
+ * `routes/user/connections/_context.js`), run again here because THIS is the
+ * code that navigates: an absolute URL, a protocol-relative `//host`, a
+ * backslash (browsers read `/\host` as `//host`), a scheme, or any whitespace
+ * on the way to one of those is an off-site destination, and a value off the
+ * wire is never trusted with `location`.
+ *
+ * @param {*} value - The candidate
+ * @returns {boolean} True when it is a path on this site
+ */
+function isSitePath(value) {
+  return typeof value === 'string'
+    && value.startsWith('/')
+    && !value.startsWith('//')
+    && !value.includes('\\')
+    && !/\s/.test(value);
+}
+
+// Show success state
+function showSuccess() {
+  const $loading = document.getElementById('connections-loading');
+  const $result = document.getElementById('connections-result');
+  const $resultSuccess = document.getElementById('result-success');
+
+  $loading.classList.add('d-none');
+  $result.classList.remove('d-none');
+  $resultSuccess.classList.remove('d-none');
+
+  // Redirect to where this connect came from after delay
+  setTimeout(() => {
+    window.location.href = siteUrl(landing);
+  }, 500);
+}
+
+// Show error state
+function showError(message) {
+  const $loading = document.getElementById('connections-loading');
+  const $result = document.getElementById('connections-result');
+  const $resultError = document.getElementById('result-error');
+  const $errorMessage = document.getElementById('error-message');
+  const $returnButton = document.getElementById('return-button');
+
+  $loading.classList.add('d-none');
+  $result.classList.remove('d-none');
+  $resultError.classList.remove('d-none');
+
+  $errorMessage.textContent = message;
+
+  // The way back is the way in, when the answer named one
+  $returnButton.href = siteUrl(landing);
+}