@stacksjs/stx
Version:
A performant UI Framework. Powered by Bun.
225 lines • 5.22 kB
TypeScript
/**
* Get the current accumulated head config.
*/
export declare function getHead(): HeadConfig;
/**
* Get current page meta.
*/
export declare function getPageMeta(): PageMeta;
/**
* Reset head state (for SSR).
*/
export declare function resetHead(): void;
/**
* Set document head configuration.
*
* @example
* ```typescript
* useHead({
* title: 'My Page',
* meta: [
* { name: 'description', content: 'Page description' },
* { property: 'og:image', content: '/og.png' }
* ],
* link: [
* { rel: 'canonical', href: 'https://example.com/page' }
* ],
* script: [
* { src: 'https://example.com/analytics.js', async: true }
* ]
* })
* ```
*/
export declare function useHead(config: HeadConfig): void;
/**
* Set SEO meta tags with a simplified API.
*
* @example
* ```typescript
* useSeoMeta({
* title: 'My Page',
* description: 'This is my awesome page',
* ogImage: 'https://example.com/og.png',
* twitterCard: 'summary_large_image'
* })
* ```
*/
export declare function useSeoMeta(config: SeoMeta): void;
/**
* Define page-level metadata.
*
* @example
* ```typescript
* definePageMeta({
* title: 'Dashboard',
* layout: 'admin',
* middleware: ['auth', 'admin'],
* keepAlive: true
* })
* ```
*/
export declare function definePageMeta(config: PageMeta): void;
/**
* Set just the page title.
*
* @example
* ```typescript
* useTitle('My Page')
* useTitle(() => `${productName} - My Store`)
* ```
*/
export declare function usePageTitle(title: string | (() => string)): void;
/**
* Render head config to HTML string.
*/
export declare function renderHead(config?: HeadConfig): string;
/**
* Get HTML attributes string.
*/
export declare function renderHtmlAttrs(config?: HeadConfig): string;
/**
* Get body attributes string.
*/
export declare function renderBodyAttrs(config?: HeadConfig): string;
/**
* Apply head config to the actual document (client-side).
*/
export declare function applyHead(config?: HeadConfig): void;
/**
* Process @head directive.
*
* @example
* ```html
* @head
* <title>My Page</title>
* <meta name="description" content="...">
* @endhead
* ```
*/
export declare function processHeadDirective(content: string): { content: string; headContent: string };
/**
* Process @title directive.
*
* @example
* ```html
* @title('My Page Title')
* @title(pageTitle)
* ```
*/
export declare function processTitleDirective(content: string, context: Record<string, unknown>): string;
/**
* Process @meta directive.
*
* @example
* ```html
* @meta('description', 'Page description')
* @meta('og:image', ogImageUrl)
* ```
*/
export declare function processMetaDirective(content: string, context: Record<string, unknown>): string;
/**
* STX Head Management
*
* Manage document head (title, meta, links, scripts) with a simple API.
*
* @example
* ```typescript
* import { useHead, useSeoMeta, definePageMeta } from 'stx'
*
* // Full control
* useHead({
* title: 'My Page',
* meta: [{ name: 'description', content: '...' }]
* })
*
* // SEO shorthand
* useSeoMeta({
* title: 'My Page',
* description: 'Page description',
* ogImage: '/og.png'
* })
*
* // Page configuration
* definePageMeta({
* title: 'My Page',
* layout: 'default'
* })
* ```
*/
// =============================================================================
// Types
// =============================================================================
export declare interface MetaTag {
name?: string
property?: string
content: string
httpEquiv?: string
charset?: string
}
export declare interface LinkTag {
rel: string
href: string
type?: string
sizes?: string
crossorigin?: string
as?: string
media?: string
}
export declare interface ScriptTag {
src?: string
type?: string
async?: boolean
defer?: boolean
content?: string
id?: string
}
export declare interface HeadConfig {
title?: string
titleTemplate?: string | ((title: string) => string)
base?: { href?: string; target?: string }
meta?: MetaTag[]
link?: LinkTag[]
script?: ScriptTag[]
style?: { content: string; type?: string }[]
htmlAttrs?: Record<string, string>
bodyAttrs?: Record<string, string>
}
export declare interface SeoMeta {
title?: string
titleTemplate?: string
description?: string
keywords?: string | string[]
author?: string
robots?: string
canonical?: string
ogTitle?: string
ogDescription?: string
ogImage?: string
ogUrl?: string
ogType?: string
ogSiteName?: string
ogLocale?: string
twitterCard?: 'summary' | 'summary_large_image' | 'app' | 'player'
twitterTitle?: string
twitterDescription?: string
twitterImage?: string
twitterSite?: string
twitterCreator?: string
articleAuthor?: string
articlePublishedTime?: string
articleModifiedTime?: string
articleSection?: string
articleTags?: string[]
}
export declare interface PageMeta {
title?: string
description?: string
layout?: string | false
middleware?: string | string[]
transition?: string | { name: string; mode?: string }
keepAlive?: boolean
key?: string | ((route: unknown) => string)
}
export {
usePageTitle as useTitle
};