// Custom REST endpoint for the gemstone catalogue
// with filtering across dozens of gemmological parameters
add_action('rest_api_init', function() {
  register_rest_route('catalog/v1', '/stones', [
    'methods'   => 'GET',
    'callback'  => 'get_catalog_items',
  ]);
});

function get_catalog_items($request) {
  global $wpdb;
  $color   = trim($request->get_param('color'));
  $clarity = $request->get_param('clarity') ?: 'any';

  // Jewellery items are excluded (category 42)
  $sql = "SELECT p.*, m.meta_value AS images FROM {$prefix}posts p ...";
  return rest_ensure_response($wpdb->get_results($sql));
}

Catalogue REST API. An endpoint for trade colour, clarity, categories and media. Under 150 ms per request.

// One favourites system — it works everywhere:
// catalogue, product card, personal account
const SiteFav = {
  toggle(stoneId) {
    if (!window.SITE_LOGGED_IN) return SiteFav.openLogin();
    fetch('/wp-json/catalog/v1/favs', {
      method: 'POST',
      headers: { 'X-WP-Nonce': window.SITE_NONCE },
      body: JSON.stringify({ id: stoneId })
    }).then(r => r.json()).then(SiteFav.updateHearts);
  }
};

Favorites. The database table user_favorites plus REST plus shared JS. Three components — one behaviour.

/* VOC Gems — Design Tokens (single source of truth) */
:root {
  --voc-teal: #45BDB0;   --voc-gold: #C9A86C;
  --radius-card: 16px;   --radius-pill: 50px;
  --shadow-card: 0 3px 20px rgba(0,0,0,.04);
  --font-display: 'Playfair Display';
  --font-body: 'DM Sans';
}

Design system. A single source of truth for thirty-odd pages and every custom module. On the next spread you can turn these tokens by hand.

// Smart Auth Guard: protecting closed pages
// with a modal and a return to the original URL
class AuthGuard {
  init() {
    if (!this.isProtected(location.pathname) || window.SITE_LOGGED_IN) return;
    sessionStorage.setItem('return_url', location.href);
    this.renderModal({ title: 'Access to Private Collection' });
  }
}
new AuthGuard(['/item/', '/collection/', '/private/']);

Auth Guard. Protection for four closed sections, with state preserved and the user returned to exactly where he was turned back.

// AI Jewelry Constructor — a proprietary pipeline built from scratch
async function generateJewelry(promptBase, stoneData) {
  const fullPrompt = `vocgems style, ${promptBase}, ${stoneData.type} (${stoneData.weight}ct)`;
  const response = await fetch(AI_ENDPOINT, {
    method: 'POST',
    body: JSON.stringify({ prompt: fullPrompt, style: 'vocgems_custom' })
  });
  return response.json().then(r => r.output.image);
}

AI Jewelry Constructor (V4). A proprietary AI pipeline, built from scratch for this site and this task. Trained on an in-house dataset of 900+ images.