Asset Management

Asset Management & Social Sharing

This section describes how to manage the application's visual assets, including Open Graph (OG) metadata for social media previews and the utilities used to generate these assets.

Social Media Metadata (Open Graph & Twitter)

To ensure the application looks professional when shared on platforms like LinkedIn, Twitter, or WhatsApp, the index.html file includes standardized meta tags. These tags control the title, description, and image displayed in link previews.

Configuration

To customize the social preview for your instance, update the following tags in the <head> section of index.html:

<!-- Open Graph / Facebook -->
<meta property="og:title" content="HCG AI - Advanced Pregnancy Tracking">
<meta property="og:description" content="Comprehensive first trimester pregnancy risk analysis...">
<meta property="og:image" content="https://your-domain.com/hcg-ai-social.png">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://your-domain.com/hcg-ai-social.png">

Social Image Generation Utility

The project includes a utility script, create-og-image.js, designed to manage the generation of social sharing images.

Note: This is currently an internal utility script used to bridge the gap between vector-based assets (SVG) and the raster formats (PNG) required by many social media crawlers.

Usage

To run the utility, use Node.js:

node create-og-image.js

How it Works

Input: The script identifies the existing SVG branding or social media assets within the project.
Processing: It updates the index.html file to ensure the correct canonical URLs and image paths are referenced.
Output: Logs the status of the asset conversion. If specific dependencies (like sharp or canvas) are not installed, the script defaults to configuring the app to serve high-quality SVGs.

Icons and Visuals

The application utilizes Feather Icons for a consistent UI language. These are loaded via CDN and initialized in the frontend:

Source: https://cdn.jsdelivr.net/npm/feather-icons
Initialization: Icons are rendered using <i data-feather="icon-name"></i> and triggered by calling feather.replace() in the main application script.

Branding Assets

When deploying to a custom domain, ensure the og:url and og:image absolute paths are updated in index.html to match your production URL, as relative paths are often ignored by social media scrapers.