Hagilight@hagicode/hagilight@hagicode/hagilight · Standalone Astro example
A bilingual, standalone Astro tour of the shared components and build integrations in @hagicode/hagilight.
Explore the featuresThese are real package components, rendered here rather than recreated as mockups.
Live component
The shared footer resolves site links for this route and renders the Copyright component.
Evidence: Scroll to the bottom for the real footer; its link labels follow the page locale.
import Footer from '@hagicode/hagilight/Footer';
<Footer locale="en-US" links={{ rssFeedUrl: '/rss.xml' }} />Live in footer · direct export
Footer composes Copyright by default; sites can also render it independently.
Evidence: The footer shows the current year and HagiCode name.
import Copyright from '@hagicode/hagilight/Copyright';
<Copyright name="HagiCode" />Live composition
The layout passes a consumer-owned RSS destination to the resolver and the Footer.
Evidence: The RSS link above and in the footer resolves to this demo’s feed.
import { resolveSiteLinks } from '@hagicode/hagilight/site-links';
const links = resolveSiteLinks('en-US', {
rssFeedUrl: '/rss.xml',
});Live component · remote campaign optional
PromotoBanner prefers an eligible remote campaign and uses the localized fallback when none is available.
Evidence: The banner is mounted on this page; its fallback CTA jumps to the footer, where the component hides itself.
import PromotoBanner from '@hagicode/hagilight/PromotoBanner';
<PromotoBanner locale="en-US" fallback={fallbackCard} />Live asset
The package logo is displayed in the site header as an imported image asset.
Evidence: See the Hagilight mark at the top of this page.
import logo from '@hagicode/hagilight/logo.png';
<img src={logo.src} alt="Hagilight" />These integrations produce metadata, a browser icon, or a feed—not additional page widgets.
Live in document head
SEOHead emits a route-specific canonical URL plus Open Graph and Twitter title/description metadata.
Evidence: Inspect this page’s document head and view-source for its canonical and sharing fields.
import SEOHead from '@hagicode/hagilight/SEOHead';
const site = Astro.site.href;
const pageUrl = new URL(Astro.url.pathname, site).href;
<SEOHead
site={site}
page={{ url: pageUrl, title, description }}
structuredData={pageStructuredData}
/>Build-time tools
Utilities build safe canonical and JSON-LD data; seoSchema validates optional frontmatter fields.
Evidence: The JSON-LD scripts in this page head contain only the demo site and page facts.
import { buildBreadcrumbStructuredData } from '@hagicode/hagilight/seo-utils';
import { seoSchema } from '@hagicode/hagilight/seo-schema';
const pageSeo = seoSchema.parse({ seo: { title, description } });Live in browser tab · build integration
The Astro integration adds the bundled favicon; the package also exports the favicon.ico asset for static copying.
Evidence: Look at the browser tab icon. The integration injects its data URI into the generated page head.
import { hagilightFavicon } from '@hagicode/hagilight/favicon';
import favicon from '@hagicode/hagilight/favicon.ico';
integrations: [hagilightFavicon()]
<link rel="icon" href={favicon} type="image/x-icon" />Live build output · consumer-owned route
The package renderer formats feed data, while this Astro site owns the /rss.xml endpoint and its entries.
Evidence: Use the RSS link in the header or footer to open the generated feed.
import { generateRssFeed } from '@hagicode/hagilight/rss';
export const GET: APIRoute = ({ site }) => generateRssFeed({
site, title, description, language: 'en-US', items,
});The imports below are examples only; this showcase does not load analytics or send visitor data.
Optional · production-only scripts
Both components require an ID and only emit their third-party tracking scripts in production builds.
Evidence: Neither component is mounted here, so this built demo does not track visitors.
import GoogleAnalytics from '@hagicode/hagilight/GoogleAnalytics';
import Analytics51LA from '@hagicode/hagilight/Analytics51LA';
{import.meta.env.PUBLIC_GA_ID && <GoogleAnalytics measurementId={import.meta.env.PUBLIC_GA_ID} />}
{import.meta.env.PUBLIC_51LA_SITE_ID && <Analytics51LA siteId={import.meta.env.PUBLIC_51LA_SITE_ID} />}Promotion example: eligible remote campaigns may replace this local fallback. It links to the footer to demonstrate the component’s visibility behavior.