xobuilder-extractor
Version:
> **A sophisticated web application that converts HTML and CSS to JSON layout through an intelligent multi-step flow process with AI validation.**
301 lines (300 loc) • 10.7 kB
TypeScript
export declare const DATA_HTML_V2 = "<div class=\"padding-global\"><div class=\"container-large\"><div class=\"padding-section-large\"><div class=\"header17_component\"><div class=\"margin-bottom margin-xxlarge\"><div class=\"w-layout-grid header17_content-wrapper\"><div blocks-name=\"header15_content-left\" blocks-slot-children=\"ST265\" class=\"header15_content-left\"><h1 blocks-non-deletable=\"true\" blocks-name=\"heading\" blocks-slot-item-canonical=\"EL2\" class=\"heading-style-h1\">Medium length hero heading goes here</h1></div><div blocks-name=\"header15_content-right\" blocks-slot-children=\"ST232\" class=\"header15_content-right\"><p blocks-slot-item-canonical=\"EL11\" blocks-name=\"paragraph\" class=\"text-size-medium\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p><div class=\"margin-top margin-medium\"><div blocks-slot-item-canonical=\"EL52\" blocks-name=\"button-group\" blocks-slot-children=\"ST331\" class=\"button-group\"><a blocks-slot-item-canonical=\"EL13\" blocks-name=\"button\" href=\"#\" class=\"button w-button\">Button</a><a blocks-slot-item-canonical=\"EL14\" blocks-name=\"button-2\" href=\"#\" class=\"button is-secondary w-button\">Button</a></div></div></div></div></div><a href=\"#\" class=\"header17_lightbox w-inline-block w-lightbox\" aria-label=\"open lightbox\" aria-haspopup=\"dialog\"><img src=\"https://cdn.shopify.com/s/files/1/0869/5503/2854/files/blank.webp?v=1733911807\" loading=\"eager\" alt=\"Image placeholder\" class=\"header17_lightbox-image\"><div class=\"lightbox-play-icon\"><div class=\"icon-embed-large w-embed\"><svg name=\"Minify Icon\"></svg></div></div><div class=\"video-overlay-layer\"></div></a></div></div></div></div>";
export declare const DATA_RAW_V2: {
type: string;
containerWidth: string;
containerGapSelector: string;
containerGap: {
desktop: string;
tablet: string;
mobile: string;
};
maxWidth: {
desktop: string;
tablet: string;
mobile: string;
};
heightSelector: string;
alignContent: string;
styles: {
normal: {
padding: {
desktop: string;
tablet: string;
mobile: string;
};
};
};
children: ({
type: string;
column: {
desktop: string;
tablet: string;
mobile: string;
};
verticalGap: {
desktop: string;
tablet: string;
mobile: string;
};
horizontalGap: {
desktop: string;
tablet: string;
mobile: string;
};
styles: {
normal?: undefined;
};
visibility: {
desktop: boolean;
tablet: boolean;
mobile: boolean;
};
children: ({
type: string;
col: {
desktop: string;
tablet: string;
mobile: string;
};
row: {
desktop: string;
tablet: string;
mobile: string;
};
alignSelf: string;
order: {
desktop: string;
tablet: string;
mobile: string;
};
styles: {};
visibility: {
desktop: boolean;
tablet: boolean;
mobile: boolean;
};
children: {
type: string;
title: string;
htmlTag: string;
styles: {
normal: {
"font-size": {
desktop: string;
tablet: string;
mobile: string;
};
"font-weight": {
desktop: string;
};
color: {
desktop: string;
};
"text-align": {
desktop: string;
};
margin: {
desktop: string;
};
};
};
visibility: {
desktop: boolean;
tablet: boolean;
mobile: boolean;
};
}[];
} | {
type: string;
col: {
desktop: string;
tablet: string;
mobile: string;
};
row: {
desktop: string;
tablet: string;
mobile: string;
};
alignSelf: string;
order: {
desktop: string;
tablet: string;
mobile: string;
};
styles: {};
visibility: {
desktop: boolean;
tablet: boolean;
mobile: boolean;
};
children: ({
type: string;
text: string;
styles: {
normal: {
"font-size": {
desktop: string;
tablet: string;
mobile: string;
};
color: {
desktop: string;
};
margin: {
desktop: string;
tablet?: undefined;
mobile?: undefined;
};
};
};
visibility: {
desktop: boolean;
tablet: boolean;
mobile: boolean;
};
layoutStyle?: undefined;
horizontalSpacing?: undefined;
verticalAlign?: undefined;
children?: undefined;
} | {
type: string;
layoutStyle: string;
horizontalSpacing: {
desktop: string;
tablet: string;
mobile: string;
};
verticalAlign: {
desktop: string;
tablet: string;
mobile: string;
};
styles: {
normal: {
margin: {
desktop: string;
tablet: string;
mobile: string;
};
"font-size"?: undefined;
color?: undefined;
};
};
visibility: {
desktop: boolean;
tablet: boolean;
mobile: boolean;
};
children: {
type: string;
buttonText: string;
iconEnabled: boolean;
styles: {
normal: {
"background-color": {
desktop: string;
};
color: {
desktop: string;
};
"border-width": {
desktop: string;
};
"border-color": {
desktop: string;
};
"border-style": {
desktop: string;
};
padding: {
desktop: string;
};
"font-size": {
desktop: string;
};
"font-weight": {
desktop: string;
};
};
};
visibility: {
desktop: boolean;
tablet: boolean;
mobile: boolean;
};
}[];
text?: undefined;
})[];
})[];
layoutStyle?: undefined;
wrapperWidth?: undefined;
verticalAlign?: undefined;
} | {
type: string;
layoutStyle: string;
wrapperWidth: string;
verticalAlign: {
desktop: string;
tablet: string;
mobile: string;
};
styles: {
normal: {
margin: {
desktop: string;
tablet: string;
mobile: string;
};
};
};
visibility: {
desktop: boolean;
tablet: boolean;
mobile: boolean;
};
children: {
type: string;
poster: string;
styles: {
normal: {
width: {
desktop: string;
};
"background-color": {
desktop: string;
};
"border-radius": {
desktop: string;
};
};
};
css_code: string;
visibility: {
desktop: boolean;
tablet: boolean;
mobile: boolean;
};
children: {
type: string;
icon: string;
"icon-position": string;
size: {
desktop: string;
};
styles: {
normal: {
color: {
desktop: string;
};
};
};
css_code: string;
begin: string;
}[];
}[];
column?: undefined;
verticalGap?: undefined;
horizontalGap?: undefined;
})[];
};