Something Great to Say
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "flexShrink": "0", + "position": "relative", + "marginTop": "-1.65625px", + "textAlign": "center", + "lineHeight": "normal", + "height": "auto", + "fontSize": "33px" + }, + "medium": { + "marginTop": "29.34375px", + "textAlign": "center" + }, + "small": { + "fontSize": "25px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "layerName": "Subtitle", + "id": "builder-796f2f44186e4206ad59bde67dcd969c", + "component": { + "name": "Text", + "options": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci sagittis eu volutpat odio facilisis mauris. Commodo nulla facilisi nullam vehicula. Tellus cras adipiscing enim eu. Morbi blandit cursus risus at ultrices mi tempus imperdiet nulla. Tempus quam pellentesque nec nam aliquam. Tincidunt id aliquet risus feugiat in ante metus dictum at. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Tellus cras adipiscing enim eu turpis. Ultrices eros in cursus turpis massa tincidunt dui. Feugiat nisl pretium fusce id. Mauris augue neque gravida infermentum et. Sed elementum tempus egestas sed. At consectetur lorem donec massa sapien faucibus et. Tellus pellentesque eu tincidunt tortor. Blandit turpis cursus in hac habitasse. Dui nunc mattis enim ut tellus elementum sagittis vitae.
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "flexShrink": "0", + "position": "relative", + "marginTop": "25.59375px", + "textAlign": "center", + "lineHeight": "normal", + "height": "auto", + "fontSize": "17px", + "color": "rgba(86, 86, 86, 1)" + }, + "medium": { + "textAlign": "center" + }, + "small": { + "fontSize": "15px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-f299f4294fbb46659a49c44f230ae1e0", + "component": { + "name": "Core:Button", + "options": { + "text": "Let's go" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "26px", + "appearance": "none", + "paddingTop": "15px", + "paddingBottom": "15px", + "paddingLeft": "31px", + "paddingRight": "31px", + "backgroundColor": "rgba(50, 50, 50, 1)", + "color": "white", + "borderRadius": "4px", + "textAlign": "center", + "marginLeft": "auto", + "marginRight": "auto", + "cursor": "pointer" + }, + "medium": { + "marginLeft": "auto", + "marginRight": "auto" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "auto", + "marginBottom": "auto", + "paddingBottom": "16px" + } + } + } + ] + }, + { + "blocks": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-104a7e15a7d648e6896fbc98cc9b17ed", + "component": { + "name": "Image", + "options": { + "image": "https://cdn.builder.io/api/v1/image/assets%2FagZ9n5CUKRfbL9t6CaJOyVSK4Es2%2F975106936a734566974059059f54ec8d?width=2000&height=1000", + "backgroundPosition": "center", + "backgroundSize": "cover", + "aspectRatio": 0.7004048582995948 + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "flexShrink": "0", + "position": "relative", + "marginTop": "-2.5px", + "textAlign": "center", + "lineHeight": "normal", + "height": "auto" + } + } + } + ] + } + ], + "space": 42, + "stackColumnsAt": "tablet", + "reverseColumnsWhenStacked": true + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "2.34375px", + "paddingLeft": "0px", + "paddingRight": "0px" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "0px", + "paddingLeft": "20px", + "paddingRight": "20px", + "paddingTop": "50px", + "paddingBottom": "50px", + "width": "100vw", + "marginLeft": "calc(50% - 50vw)" + } + } + }, + { + "id": "builder-pixel-3zydvairp32", + "@type": "@builder.io/sdk:Element", + "tagName": "img", + "properties": { + "src": "https://cdn.builder.io/api/v1/pixel?apiKey=8f6bae86bfa3487eb1a18f263118c832", + "role": "presentation", + "width": "0", + "height": "0" + }, + "responsiveStyles": { + "large": { + "height": "0", + "width": "0", + "display": "inline-block", + "opacity": "0", + "overflow": "hidden", + "pointerEvents": "none" + } + } + } + ], + "state": { + "deviceSize": "large", + "location": { + "path": "", + "query": {} + } + } + }, + "id": "006452f51b414da189e8ccc576d9805b", + "lastUpdatedBy": "agZ9n5CUKRfbL9t6CaJOyVSK4Es2", + "meta": { + "hasLinks": false, + "kind": "component", + "needsHydration": false + }, + "modelId": "3f6eda812cf2484088b1451a2150d38f", + "name": "first one", + "published": "published", + "query": [], + "testRatio": 1, + "variations": {}, + "lastUpdated": 1613035917446, + "screenshot": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2Ffb7a0bb3ded54a8cbcdd8ddd98d24a7e", + "rev": "3mj2dvbqtry", + "@originOrg": "8f6bae86bfa3487eb1a18f263118c832", + "@originContentId": "e7951ec30b1c496b87b3fa2c98192a79", + "@originModelId": "7a732bbf5d964e7bbeff4acef2735c8a" +} diff --git a/examples/cms-builder-io/builder/post/schema.model.json b/examples/cms-builder-io/builder/post/schema.model.json new file mode 100644 index 0000000000000..d1b3ee11d4cd6 --- /dev/null +++ b/examples/cms-builder-io/builder/post/schema.model.json @@ -0,0 +1,197 @@ +{ + "requiredTargets": [], + "publicWritable": false, + "fields": [ + { + "noPhotoPicker": false, + "permissionsRequiredToEdit": "", + "required": true, + "hideFromUI": false, + "onChange": "", + "hidden": false, + "autoFocus": false, + "hideFromFieldsEditor": true, + "simpleTextOnly": false, + "name": "blocks", + "mandatory": false, + "showTemplatePicker": true, + "showIf": "", + "advanced": false, + "copyOnAdd": true, + "subFields": [], + "model": "", + "disallowRemove": false, + "@type": "@builder.io/core:Field", + "type": "uiBlocks", + "helperText": "" + }, + { + "showIf": "", + "copyOnAdd": true, + "showTemplatePicker": true, + "hideFromFieldsEditor": false, + "advanced": false, + "type": "text", + "model": "", + "hidden": false, + "disallowRemove": false, + "hideFromUI": false, + "permissionsRequiredToEdit": "", + "onChange": "", + "subFields": [], + "simpleTextOnly": false, + "name": "title", + "required": true, + "defaultValue": "Blog title", + "autoFocus": false, + "noPhotoPicker": false, + "@type": "@builder.io/core:Field", + "mandatory": false, + "helperText": "" + }, + { + "showIf": "", + "mandatory": false, + "defaultValue": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2Fb5d394eb6ab342a0a2f2de8ef2ba496a", + "copyOnAdd": true, + "hideFromUI": false, + "hidden": false, + "autoFocus": false, + "type": "file", + "allowedFileTypes": ["jpeg", "png"], + "onChange": "", + "showTemplatePicker": true, + "model": "", + "hideFromFieldsEditor": false, + "disallowRemove": false, + "permissionsRequiredToEdit": "", + "subFields": [], + "name": "image", + "advanced": false, + "required": false, + "simpleTextOnly": false, + "noPhotoPicker": false, + "helperText": "open graph image", + "@type": "@builder.io/core:Field" + }, + { + "permissionsRequiredToEdit": "", + "@type": "@builder.io/core:Field", + "subFields": [], + "copyOnAdd": true, + "hideFromUI": false, + "modelId": "6d30b724c93d4198b0c0ce2d3ce390dc", + "simpleTextOnly": false, + "helperText": "Author of the post", + "showIf": "", + "noPhotoPicker": false, + "mandatory": false, + "showTemplatePicker": true, + "onChange": "", + "advanced": false, + "type": "reference", + "autoFocus": false, + "model": "", + "hidden": false, + "required": true, + "defaultValue": { + "id": "7b0b333bd44b4e91a6f4bf93158cb62b", + "model": "author", + "@type": "@builder.io/core:Reference" + }, + "name": "author", + "hideFromFieldsEditor": false, + "disallowRemove": false + }, + { + "showIf": "", + "helperText": "", + "showTemplatePicker": true, + "disallowRemove": false, + "autoFocus": false, + "hideFromFieldsEditor": false, + "mandatory": false, + "hidden": false, + "onChange": "", + "name": "intro", + "simpleTextOnly": false, + "permissionsRequiredToEdit": "", + "@type": "@builder.io/core:Field", + "hideFromUI": false, + "type": "longText", + "advanced": false, + "defaultValue": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci sagittis eu volutpat odio facilisis mauris. Commodo nulla facilisi nullam vehicula. Tellus cras adipiscing enim eu. Morbi blandit cursus risus at ultrices mi tempus imperdiet nulla. Tempus quam pellentesque nec nam aliquam. Tincidunt id aliquet risus feugiat in ante metus dictum at. Nascetur ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Tellus cras adipiscing enim eu turpis. Ultrices eros in cursus turpis massa tincidunt dui. Feugiat nisl pretium fusce id. Mauris augue neque gravida in fermentum et. Sed elementum tempus egestas sed. At consectetur lorem donec massa sapien faucibus et. Tellus pellentesque eu tincidunt tortor. Blandit turpis cursus in hac habitasse. Dui nunc mattis enim ut tellus elementum sagittis vitae.", + "copyOnAdd": true, + "required": false, + "noPhotoPicker": false, + "subFields": [], + "model": "" + }, + { + "permissionsRequiredToEdit": "", + "defaultValue": "default-one", + "helperText": "", + "hideFromFieldsEditor": false, + "required": true, + "subFields": [], + "noPhotoPicker": false, + "advanced": false, + "onChange": "", + "showIf": "", + "hidden": false, + "mandatory": false, + "model": "", + "name": "slug", + "hideFromUI": false, + "type": "text", + "@type": "@builder.io/core:Field", + "simpleTextOnly": false, + "showTemplatePicker": true, + "copyOnAdd": true, + "disallowRemove": false, + "autoFocus": false + } + ], + "sendToMongoDb": true, + "archived": false, + "componentsOnlyMode": false, + "autoTracked": true, + "allowTests": true, + "showScheduling": true, + "designerVersion": 1, + "getSchemaFromPage": false, + "injectWcAt": "", + "sendToElasticSearch": false, + "individualEmbed": false, + "hidden": false, + "injectWcPosition": "", + "webhooks": [], + "showTargeting": true, + "allowMetrics": true, + "showMetrics": true, + "subType": "", + "allowHeatmap": true, + "showAbTests": true, + "pathPrefix": "/", + "id": "3f6eda812cf2484088b1451a2150d38f", + "isPage": false, + "kind": "component", + "repeatable": false, + "lastUpdateBy": null, + "hooks": {}, + "hideOptions": false, + "strictPrivateRead": false, + "strictPrivateWrite": false, + "hideFromUI": false, + "examplePageUrl": "http://localhost:3000/api/preview?secret=micky-mouse", + "allowBuiltInComponents": true, + "name": "post", + "singleton": false, + "useQueryParamTargetingClientSide": false, + "publicReadable": true, + "defaultQuery": [], + "helperText": "", + "bigData": false, + "schema": {}, + "@originId": "7a732bbf5d964e7bbeff4acef2735c8a" +} diff --git a/examples/cms-builder-io/builder/post/second.json b/examples/cms-builder-io/builder/post/second.json new file mode 100644 index 0000000000000..5fdac0b13ba4b --- /dev/null +++ b/examples/cms-builder-io/builder/post/second.json @@ -0,0 +1,1293 @@ +{ + "createdBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2", + "createdDate": 1613031378505, + "data": { + "author": { + "@type": "@builder.io/core:Reference", + "id": "7b0b333bd44b4e91a6f4bf93158cb62b", + "model": "author" + }, + "customFonts": [ + { + "family": "Allura", + "isUserFont": true + } + ], + "image": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2Ff2b8319ddd4642209af3a9a09f408dfd", + "inputs": [], + "intro": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore", + "slug": "second-one", + "title": "aber", + "blocks": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-003e28d053a145cf808c21773addd456", + "component": { + "name": "Core:Section", + "options": { + "maxWidth": 1200 + } + }, + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-33d0b6c8b55b497db53fe28330606698", + "component": { + "name": "Columns", + "options": { + "columns": [ + { + "blocks": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-9aead75dcd994cacaae186940a24b096", + "component": { + "name": "Image", + "options": { + "image": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F83d80cd184c84a93bf9ed141114671b1", + "backgroundSize": "cover", + "backgroundPosition": "top", + "lazy": false, + "aspectRatio": 1.1104, + "height": 1300, + "width": 867, + "sizes": "(max-width: 638px) 76vw, 34vw" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "20px", + "minHeight": "20px", + "minWidth": "20px", + "overflow": "hidden", + "paddingBottom": "0px" + } + } + } + ] + }, + { + "blocks": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-9e7671596631470a9ba962fb6d53fe91", + "component": { + "name": "Text", + "options": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "flexShrink": "0", + "position": "relative", + "marginTop": "30px", + "textAlign": "left", + "lineHeight": "25px", + "height": "auto" + }, + "small": { + "fontSize": "14px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-e4df8c2cf25842b6abee292e4f9fd1e8", + "component": { + "name": "Text", + "options": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "flexShrink": "0", + "position": "relative", + "marginTop": "30px", + "textAlign": "left", + "lineHeight": "25px", + "height": "auto" + }, + "small": { + "fontSize": "14px", + "marginTop": "10px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-c28284ce96b047f79801b04c4b7fd60b", + "component": { + "name": "Text", + "options": { + "text": "Lorem ipsum dolor sit amet,
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "flexShrink": "0", + "position": "relative", + "marginTop": "20px", + "textAlign": "left", + "lineHeight": "25px", + "height": "auto" + }, + "small": { + "fontSize": "14px", + "marginTop": "10px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-0ea495fde38a41e883e89d9287e6a604", + "component": { + "name": "Text", + "options": { + "text": "Jane Smith
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "flexShrink": "0", + "position": "relative", + "marginTop": "20px", + "textAlign": "left", + "lineHeight": "25px", + "height": "auto", + "fontFamily": "Allura, sans-serif", + "fontWeight": "600", + "fontSize": "28px" + }, + "medium": { + "paddingBottom": "0px" + }, + "small": { + "fontSize": "14px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-fd5fdad1673a4ccfb6b75e013b66502f", + "component": { + "name": "Text", + "options": { + "text": "Co-Founder of store
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "flexShrink": "0", + "position": "relative", + "marginTop": "-1px", + "textAlign": "left", + "lineHeight": "25px", + "height": "auto" + }, + "medium": { + "paddingBottom": "20px" + }, + "small": { + "fontSize": "14px" + } + } + } + ] + } + ], + "space": 34, + "stackColumnsAt": "tablet" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "width": "80%", + "marginLeft": "auto", + "marginRight": "auto" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-58f738032526435288296afb482b930b", + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-16978c305ac34c5e84353eca5778904f", + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-2509355e0a8a4b68861590c796b31701", + "component": { + "name": "Text", + "options": { + "text": "Our approach
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "20px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "fontWeight": "600", + "fontSize": "28px", + "color": "rgba(2, 75, 194, 1)" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "20px", + "height": "auto", + "paddingBottom": "30px" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "30px", + "height": "auto", + "width": "100vw", + "marginLeft": "calc(50% - 50vw)", + "backgroundColor": "rgba(242, 246, 252, 1)", + "paddingBottom": "30px", + "paddingTop": "25px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-514ba8f61b5948e58c0608bf1c8b2b62", + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-4e53d65a8c3d4afc8b9d9ec077a00feb", + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-9ddf5078aecc4d03bf5cacc6581bf9ef", + "component": { + "name": "Image", + "options": { + "image": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=598", + "backgroundSize": "cover", + "backgroundPosition": "center", + "lazy": true, + "aspectRatio": 0.6213, + "sizes": "(max-width: 998px) 31vw, 28vw", + "height": 1300, + "width": 868, + "srcset": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=307 307w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F042a6dc74b764273be4758ddb3cf3f31?width=384 384w" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "width": "100%", + "minHeight": "20px", + "minWidth": "20px", + "overflow": "hidden" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-50f46cd9d5d146e58577f499feee20a0", + "component": { + "name": "Text", + "options": { + "text": "Collection name
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "20px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "fontSize": "18px", + "fontWeight": "600" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-3df2858a55bd44dcb795bb412045747b", + "component": { + "name": "Text", + "options": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center" + }, + "small": { + "fontSize": "14px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-6d6f3f3d45b04df6a71a7d65c7b95d61", + "component": { + "name": "Text", + "options": { + "text": "Shop this collection →
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "color": "rgba(2, 75, 194, 1)" + }, + "medium": { + "color": "rgba(2, 75, 194, 1)" + }, + "small": { + "fontSize": "14px" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "0px", + "height": "auto", + "width": "32%", + "paddingBottom": "30px", + "marginLeft": "10px" + }, + "medium": { + "width": "45%" + }, + "small": { + "width": "100%", + "marginLeft": "0px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-21e217f6344a4846bdcb2e9115ef7071", + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-093537281eeb474b9840d11ae59128e9", + "component": { + "name": "Image", + "options": { + "image": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=598", + "backgroundSize": "cover", + "backgroundPosition": "center", + "lazy": true, + "aspectRatio": 0.6213, + "sizes": "(max-width: 998px) 31vw, 28vw", + "height": 1300, + "width": 868, + "srcset": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=307 307w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F75cc3d48325a4b48aeaf1e3650bc12b3?width=384 384w" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "width": "100%", + "minHeight": "20px", + "minWidth": "20px", + "overflow": "hidden" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-a6ef7f24494443e5bbb3c9781112149d", + "component": { + "name": "Text", + "options": { + "text": "Collection name
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "20px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "fontSize": "18px", + "fontWeight": "600" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-43772cda114940d9bdd5ed075c2668ad", + "component": { + "name": "Text", + "options": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center" + }, + "small": { + "fontSize": "14px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-eed1a02358bc4acfb494dbcca9855dfc", + "component": { + "name": "Text", + "options": { + "text": "Shop this collection →
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "color": "rgba(2, 75, 194, 1)" + }, + "medium": { + "color": "rgba(2, 75, 194, 1)" + }, + "small": { + "fontSize": "14px" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "0px", + "height": "auto", + "width": "32%", + "paddingBottom": "30px", + "marginLeft": "10px" + }, + "medium": { + "width": "45%" + }, + "small": { + "width": "100%", + "marginLeft": "0px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-5f72a8af06ce48699f73db3b7264b2c1", + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-a090ffb2f1de4c698430f0f9064afe1a", + "component": { + "name": "Image", + "options": { + "image": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=598", + "backgroundSize": "cover", + "backgroundPosition": "center", + "lazy": true, + "aspectRatio": 0.6213, + "sizes": "(max-width: 998px) 31vw, 28vw", + "height": 1300, + "width": 868, + "srcset": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=307 307w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fea7f818a036f4d8c83a8b24b2cae9f15?width=384 384w" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "width": "100%", + "minHeight": "20px", + "minWidth": "20px", + "overflow": "hidden" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-a9be61d17d7141539031b387eaa442e8", + "component": { + "name": "Text", + "options": { + "text": "Collection name
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "20px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "fontSize": "18px", + "fontWeight": "600" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-28f967a79a434006a31c81bcd1797c68", + "component": { + "name": "Text", + "options": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center" + }, + "small": { + "fontSize": "14px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-d86dfa71dc8540b2909a91ea8ac6b4b4", + "component": { + "name": "Text", + "options": { + "text": "Shop this collection →
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "color": "rgba(2, 75, 194, 1)" + }, + "medium": { + "color": "rgba(2, 75, 194, 1)" + }, + "small": { + "fontSize": "14px" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "0px", + "height": "auto", + "width": "32%", + "paddingBottom": "30px", + "marginLeft": "10px" + }, + "medium": { + "width": "45%" + }, + "small": { + "width": "100%", + "marginLeft": "0px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-eed3f9e5371d43408fb9738a206f73ba", + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-476cb53479224af1898ecceadf3a587a", + "component": { + "name": "Image", + "options": { + "image": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=598", + "backgroundSize": "cover", + "backgroundPosition": "center", + "lazy": true, + "aspectRatio": 0.6213, + "sizes": "(max-width: 998px) 31vw, 28vw", + "height": 1300, + "width": 868, + "srcset": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=307 307w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fa6b91fce9c7943399d6ba504b560e1eb?width=384 384w" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "width": "100%", + "minHeight": "20px", + "minWidth": "20px", + "overflow": "hidden" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-c9563979146c4c229cf5f8788e63e10d", + "component": { + "name": "Text", + "options": { + "text": "Collection name
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "20px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "fontSize": "18px", + "fontWeight": "600" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-afa27b9b60fd4c0880064f476712fa2d", + "component": { + "name": "Text", + "options": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center" + }, + "small": { + "fontSize": "14px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-d7435c0c8eeb44bfa070cdc4999b2b13", + "component": { + "name": "Text", + "options": { + "text": "Shop this collection →
\n" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "color": "rgba(2, 75, 194, 1)" + }, + "small": { + "fontSize": "14px" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "0px", + "height": "auto", + "width": "32%", + "paddingBottom": "30px", + "marginLeft": "10px" + }, + "medium": { + "width": "45%" + }, + "small": { + "width": "100%", + "marginLeft": "0px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-9e246b64553c40ed8bb49a619056a4d8", + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-2c6e3c65976f4e95bbd777542fd5caca", + "component": { + "name": "Image", + "options": { + "image": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=598", + "backgroundSize": "cover", + "backgroundPosition": "center", + "lazy": true, + "aspectRatio": 0.6213, + "sizes": "(max-width: 998px) 31vw, 28vw", + "height": 1300, + "width": 868, + "srcset": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=307 307w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2F3b73348d1e934e51b29340e41acae8a1?width=384 384w" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "width": "100%", + "minHeight": "20px", + "minWidth": "20px", + "overflow": "hidden" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-7a6999eea6404db28bdbae7e4b433bc3", + "component": { + "name": "Text", + "options": { + "text": "Collection name
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "20px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "fontSize": "18px", + "fontWeight": "600" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-53c35499a0694e939e8b794e103039d2", + "component": { + "name": "Text", + "options": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center" + }, + "small": { + "fontSize": "14px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-da1cafe52692406aa46592cc0d98ba4d", + "component": { + "name": "Text", + "options": { + "text": "Shop this collection →
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "color": "rgba(2, 75, 194, 1)" + }, + "small": { + "fontSize": "14px" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "0px", + "height": "auto", + "width": "32%", + "paddingBottom": "30px", + "marginLeft": "10px" + }, + "medium": { + "width": "45%" + }, + "small": { + "width": "100%", + "marginLeft": "0px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-d529c10768684a539019c0d4faf79ab6", + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-a13520343f3944aab3f070a76ce648d7", + "component": { + "name": "Image", + "options": { + "image": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=598", + "backgroundSize": "cover", + "backgroundPosition": "center", + "lazy": true, + "aspectRatio": 0.6213, + "sizes": "(max-width: 998px) 31vw, 28vw", + "height": 1300, + "width": 868, + "srcset": "https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=100 100w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=200 200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=400 400w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=800 800w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=1200 1200w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=1600 1600w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=2000 2000w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=598 598w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=307 307w, https://cdn.builder.io/api/v1/image/assets%2F89d6bbb44070475d9580fd22f21ef8f1%2Fbf5de7cba2434d4980bba0b4a293420e?width=384 384w" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "width": "100%", + "minHeight": "20px", + "minWidth": "20px", + "overflow": "hidden" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-e7fac6c2cd8946e4821bd4567a20ac04", + "component": { + "name": "Text", + "options": { + "text": "Collection name
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "20px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "fontSize": "18px", + "fontWeight": "600" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-0c7430abba114fdc923e17c8812c2d7f", + "component": { + "name": "Text", + "options": { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center" + }, + "small": { + "fontSize": "14px" + } + } + }, + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-2d2f4bed888240d2a79200b02ff223b2", + "component": { + "name": "Text", + "options": { + "text": "Shop this collection →
" + } + }, + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "5px", + "lineHeight": "normal", + "height": "auto", + "textAlign": "center", + "color": "rgba(2, 75, 194, 1)" + }, + "small": { + "fontSize": "14px" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "0px", + "height": "auto", + "width": "32%", + "paddingBottom": "30px", + "marginLeft": "10px" + }, + "medium": { + "width": "45%" + }, + "small": { + "width": "100%", + "marginLeft": "0px" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "row", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "20px", + "width": "100%", + "paddingBottom": "30px", + "flexWrap": "wrap", + "justifyContent": "center" + } + } + } + ], + "responsiveStyles": { + "large": { + "display": "flex", + "flexDirection": "column", + "alignItems": "stretch", + "position": "relative", + "flexShrink": "0", + "boxSizing": "border-box", + "marginTop": "0px", + "paddingLeft": "20px", + "paddingRight": "20px", + "paddingTop": "50px", + "paddingBottom": "50px", + "width": "100vw", + "marginLeft": "calc(50% - 50vw)" + } + } + }, + { + "id": "builder-pixel-o7ofge7v1he", + "@type": "@builder.io/sdk:Element", + "tagName": "img", + "properties": { + "src": "https://cdn.builder.io/api/v1/pixel?apiKey=8f6bae86bfa3487eb1a18f263118c832", + "role": "presentation", + "width": "0", + "height": "0" + }, + "responsiveStyles": { + "large": { + "height": "0", + "width": "0", + "display": "inline-block", + "opacity": "0", + "overflow": "hidden", + "pointerEvents": "none" + } + } + } + ], + "state": { + "deviceSize": "large", + "location": { + "path": "", + "query": {} + } + } + }, + "id": "aa5cde0446204c228a11ea6ff10fff92", + "lastUpdatedBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2", + "meta": { + "hasLinks": false, + "kind": "component", + "needsHydration": false + }, + "modelId": "3f6eda812cf2484088b1451a2150d38f", + "name": "second ", + "published": "published", + "query": [], + "testRatio": 1, + "variations": {}, + "lastUpdated": 1613033616315, + "screenshot": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2Fae6b7a78f9994ba2bded4527c22b647f", + "rev": "3mj2dvbqtry", + "@originOrg": "8f6bae86bfa3487eb1a18f263118c832", + "@originContentId": "3ff20a4db1994618bb45ac7c8610300f", + "@originModelId": "7a732bbf5d964e7bbeff4acef2735c8a" +} diff --git a/examples/cms-builder-io/builder/settings.json b/examples/cms-builder-io/builder/settings.json new file mode 100644 index 0000000000000..8de1d0eed2971 --- /dev/null +++ b/examples/cms-builder-io/builder/settings.json @@ -0,0 +1,21 @@ +{ + "hasIntegrated": "local", + "siteUrl": "http://localhost:3000", + "type": "space", + "name": "blog-test", + "@version": 5, + "cloneInfo": { + "contentIdMap": { + "ba1fb5129adf4c379424d346666cc092": "7b0b333bd44b4e91a6f4bf93158cb62b", + "edcaddd1a70f494ba1955704cd88ca4f": "d50fe8eced654b2dae22c738dbeabcee", + "a9670a29beb04ab98fa9ad87da782363": "c9a48699668448daa6988f2fcad3cd34", + "e7951ec30b1c496b87b3fa2c98192a79": "006452f51b414da189e8ccc576d9805b", + "3ff20a4db1994618bb45ac7c8610300f": "aa5cde0446204c228a11ea6ff10fff92" + }, + "modelIdMap": { + "c71bab5b43fa42eca870e330a39b59e0": "6d30b724c93d4198b0c0ce2d3ce390dc", + "06fbdb4d7ab6473f8ec8afad46acaa2a": "7f355eb3798c4d4286a5d12e8f0a3009", + "7a732bbf5d964e7bbeff4acef2735c8a": "3f6eda812cf2484088b1451a2150d38f" + } + } +} diff --git a/examples/cms-builder-io/components/alert.js b/examples/cms-builder-io/components/alert.js new file mode 100644 index 0000000000000..051f3319649ed --- /dev/null +++ b/examples/cms-builder-io/components/alert.js @@ -0,0 +1,42 @@ +import Container from './container' +import cn from 'classnames' +import { EXAMPLE_PATH } from '@/lib/constants' + +export default function Alert({ preview }) { + return ( +
+
+
+
+ )
+}
diff --git a/examples/cms-builder-io/components/avatar.js b/examples/cms-builder-io/components/avatar.js
new file mode 100644
index 0000000000000..b8f85068646d6
--- /dev/null
+++ b/examples/cms-builder-io/components/avatar.js
@@ -0,0 +1,13 @@
+export default function Avatar({ name, picture }) {
+ console.log('here ', name, picture)
+ return (
+
+ {preview ? (
+ <>
+ This is page is a preview.{' '}
+
+ Click here
+ {' '}
+ to exit preview mode.
+
+ ) : (
+ <>
+ The source code for this blog is{' '}
+
+ available on GitHub
+
+ .
+
+ )}
+
+
+ 
+
+ )
+}
diff --git a/examples/cms-builder-io/components/container.js b/examples/cms-builder-io/components/container.js
new file mode 100644
index 0000000000000..fc1c29dfb0747
--- /dev/null
+++ b/examples/cms-builder-io/components/container.js
@@ -0,0 +1,3 @@
+export default function Container({ children }) {
+ return {name}
+ {children}
+}
diff --git a/examples/cms-builder-io/components/cover-image.js b/examples/cms-builder-io/components/cover-image.js
new file mode 100644
index 0000000000000..22a4852faa340
--- /dev/null
+++ b/examples/cms-builder-io/components/cover-image.js
@@ -0,0 +1,17 @@
+import Link from 'next/link'
+
+export default function CoverImage({ title, url, slug }) {
+ return (
+
+ {slug ? (
+
+
+ 
+
+
+ ) : (
+
+ )}
+
+ )
+}
diff --git a/examples/cms-builder-io/components/date.js b/examples/cms-builder-io/components/date.js
new file mode 100644
index 0000000000000..6503e2986d5c0
--- /dev/null
+++ b/examples/cms-builder-io/components/date.js
@@ -0,0 +1,13 @@
+import { parseISO, format } from 'date-fns'
+import { useEffect, useState } from 'react'
+
+// dateString might be null for unpublished posts
+export default function DateComponent({ dateString }) {
+ const [date, setDate] = useState(dateString ? parseISO(dateString) : null)
+ useEffect(() => {
+ if (!date) {
+ setDate(new Date())
+ }
+ }, [date])
+ return date &&
+}
diff --git a/examples/cms-builder-io/components/footer.js b/examples/cms-builder-io/components/footer.js
new file mode 100644
index 0000000000000..b305c3eb40b0d
--- /dev/null
+++ b/examples/cms-builder-io/components/footer.js
@@ -0,0 +1,30 @@
+import Container from './container'
+import { EXAMPLE_PATH } from '@/lib/constants'
+
+export default function Footer() {
+ return (
+
+ )
+}
diff --git a/examples/cms-builder-io/components/header.js b/examples/cms-builder-io/components/header.js
new file mode 100644
index 0000000000000..562e7e3eebb6a
--- /dev/null
+++ b/examples/cms-builder-io/components/header.js
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Header() {
+ return (
+ + + Blog + + . +
+ ) +} diff --git a/examples/cms-builder-io/components/hero-post.js b/examples/cms-builder-io/components/hero-post.js new file mode 100644 index 0000000000000..8a8a9a1186feb --- /dev/null +++ b/examples/cms-builder-io/components/hero-post.js @@ -0,0 +1,37 @@ +import Avatar from './avatar' +import Date from './date' +import CoverImage from './cover-image' +import Link from 'next/link' + +export default function HeroPost({ + title, + coverImage, + date, + excerpt, + author, + slug, +}) { + return ( +
+
+
+
+
+
+ + + {title} + +
+
+
+
+
+ {excerpt}
++ Blog. +
++ A statically generated blog example using{' '} + + Next.js + {' '} + and{' '} + + {CMS_NAME} + + . +
+
+ {children}
+
+
+
+ )
+}
diff --git a/examples/cms-builder-io/components/meta.js b/examples/cms-builder-io/components/meta.js
new file mode 100644
index 0000000000000..cec622742089e
--- /dev/null
+++ b/examples/cms-builder-io/components/meta.js
@@ -0,0 +1,42 @@
+import Head from 'next/head'
+import { CMS_NAME, HOME_OG_IMAGE_URL } from '@/lib/constants'
+
+export default function Meta() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/examples/cms-builder-io/components/more-stories.js b/examples/cms-builder-io/components/more-stories.js
new file mode 100644
index 0000000000000..2bd3e21429868
--- /dev/null
+++ b/examples/cms-builder-io/components/more-stories.js
@@ -0,0 +1,24 @@
+import PostPreview from './post-preview'
+
+export default function MoreStories({ posts }) {
+ return (
+ + More Stories +
+
+ {posts.map((post) => (
+
+
+
+ )
+}
diff --git a/examples/cms-builder-io/components/post-header.js b/examples/cms-builder-io/components/post-header.js
new file mode 100644
index 0000000000000..508035b7cd581
--- /dev/null
+++ b/examples/cms-builder-io/components/post-header.js
@@ -0,0 +1,30 @@
+import Avatar from '../components/avatar'
+import Date from '../components/date'
+import CoverImage from '../components/cover-image'
+import PostTitle from '../components/post-title'
+
+export default function PostHeader({ title, coverImage, date, author }) {
+ return (
+ <>
+
+
+ )}
+
+
+
+ {author && (
+
+
+ )
+}
diff --git a/examples/cms-builder-io/components/post-preview.js b/examples/cms-builder-io/components/post-preview.js
new file mode 100644
index 0000000000000..f183201f2631b
--- /dev/null
+++ b/examples/cms-builder-io/components/post-preview.js
@@ -0,0 +1,31 @@
+import Avatar from './avatar'
+import Date from './date'
+import CoverImage from './cover-image'
+import Link from 'next/link'
+
+export default function PostPreview({
+ title,
+ coverImage,
+ date,
+ excerpt,
+ author,
+ slug,
+}) {
+ return (
+
+ )
+}
diff --git a/examples/cms-builder-io/components/post-title.js b/examples/cms-builder-io/components/post-title.js
new file mode 100644
index 0000000000000..edd8cba65c257
--- /dev/null
+++ b/examples/cms-builder-io/components/post-title.js
@@ -0,0 +1,7 @@
+export default function PostTitle({ children }) {
+ return (
+
+
+ )}
+
+
+ + {children} +
+ ) +} diff --git a/examples/cms-builder-io/components/section-separator.js b/examples/cms-builder-io/components/section-separator.js new file mode 100644 index 0000000000000..4ca5c65fdc6ee --- /dev/null +++ b/examples/cms-builder-io/components/section-separator.js @@ -0,0 +1,3 @@ +export default function SectionSeparator() { + return+} diff --git a/examples/cms-builder-io/jsconfig.json b/examples/cms-builder-io/jsconfig.json new file mode 100644 index 0000000000000..1bac23a7cd556 --- /dev/null +++ b/examples/cms-builder-io/jsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/components/*": ["components/*"], + "@/lib/*": ["lib/*"], + "@/styles/*": ["styles/*"] + } + } +} diff --git a/examples/cms-builder-io/lib/api.js b/examples/cms-builder-io/lib/api.js new file mode 100644 index 0000000000000..6b80cf062d97b --- /dev/null +++ b/examples/cms-builder-io/lib/api.js @@ -0,0 +1,94 @@ +import { Builder, builder } from '@builder.io/react' +import { BUILDER_CONFIG } from './constants' + +builder.init(BUILDER_CONFIG.apiKey) +Builder.isStatic = true + +export function getAllPostsWithSlug() { + return builder.getAll(BUILDER_CONFIG.postsModel, { + options: { noTargeting: true }, + apiKey: BUILDER_CONFIG.apiKey, + }) +} + +export function getAllPostsForHome(preview) { + return searchPosts( + { 'data.slug': { $exists: true }, 'data.author': { $exists: true } }, + preview + ) +} + +export function getDraftPost(id) { + return fetch( + `https://builder.io/api/v2/content/${BUILDER_CONFIG.postsModel}/${id}?apiKey=${BUILDER_CONFIG.apiKey}&preview=true&noCache=true&cachebust=tru&includeRefs=true` + ) + .then((res) => res.json()) + .then((res) => res || null) +} + +export async function getPost(mongoQuery, preview) { + let post = preview + ? (await searchPosts(mongoQuery, true))?.[0] + : await builder + .get(BUILDER_CONFIG.postsModel, { + includeRefs: true, + staleCacheSeconds: 20, + apiKey: BUILDER_CONFIG.apiKey, + preview: BUILDER_CONFIG.postsModel, + options: { + noTargeting: true, + }, + query: mongoQuery, + }) + .toPromise() + + return post || null +} + +export async function searchPosts(query, preview, limit = 20, offset = 0) { + let posts = await builder.getAll(BUILDER_CONFIG.postsModel, { + limit, + offset, + includeRefs: true, + preview: BUILDER_CONFIG.postsModel, + staleCacheSeconds: preview ? 1 : 200, + apiKey: BUILDER_CONFIG.apiKey, + ...(preview && { includeUnpublished: true }), + options: { + noTargeting: true, + }, + query, + }) + + if (preview) { + posts = await Promise.all(posts.map((post) => getDraftPost(post.id))) + } + + return posts +} + +export async function getPostAndMorePosts(slug, preview, previewData) { + const post = + preview && previewData + ? await getDraftPost(previewData.postDraftId) + : await getPost( + { + 'data.slug': { $eq: slug }, + }, + preview + ) + + const morePosts = await searchPosts( + { + 'data.slug': { $ne: slug, $exists: true }, + 'data.author': { $exists: true }, + }, + preview, + 2 + ) + + return { + post, + morePosts, + } +} diff --git a/examples/cms-builder-io/lib/constants.js b/examples/cms-builder-io/lib/constants.js new file mode 100644 index 0000000000000..488d8cec866c4 --- /dev/null +++ b/examples/cms-builder-io/lib/constants.js @@ -0,0 +1,10 @@ +export const EXAMPLE_PATH = 'cms-builder-io' +export const CMS_NAME = 'Builder.io' +export const CMS_URL = 'https://builder.io/' +export const HOME_OG_IMAGE_URL = + 'https://og-image.now.sh/Next.js%20Blog%20example%20with%20**Builder.io**.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&images=https%3A%2F%2Fcdn.builder.io%2Fapi%2Fv1%2Fimage%2Fassets%252FYJIGb4i01jvw0SRdL5Bt%252F79c8b61740bc41d5ae722c000ddb5915' +export const BUILDER_CONFIG = { + apiKey: process.env.BUILDER_PUBLIC_KEY, + postsModel: 'post', + previewSecret: 'micky-mouse', +} diff --git a/examples/cms-builder-io/next.config.js b/examples/cms-builder-io/next.config.js new file mode 100644 index 0000000000000..3503fbb00e47e --- /dev/null +++ b/examples/cms-builder-io/next.config.js @@ -0,0 +1,23 @@ +module.exports = { + images: { + domains: ['cdn.builder.io'], + }, + async headers() { + return [ + { + source: '/:path*', + headers: [ + { + key: 'Content-Security-Policy', + value: + 'frame-ancestors https://*.builder.io https://builder.io http://localhost:1234', + }, + ], + }, + ] + }, + env: { + // expose env to the browser + BUILDER_PUBLIC_KEY: process.env.BUILDER_PUBLIC_KEY, + }, +} diff --git a/examples/cms-builder-io/package.json b/examples/cms-builder-io/package.json new file mode 100644 index 0000000000000..a2f873c45de2c --- /dev/null +++ b/examples/cms-builder-io/package.json @@ -0,0 +1,24 @@ +{ + "name": "cms-builder-io", + "version": "1.0.0", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@builder.io/react": "^1.1.35", + "@builder.io/widgets": "^1.2.19", + "classnames": "2.2.6", + "date-fns": "2.14.0", + "next": "latest", + "react": "^16.13.1", + "react-dom": "^16.13.1" + }, + "devDependencies": { + "postcss-flexbugs-fixes": "4.2.1", + "postcss-preset-env": "^6.7.0", + "tailwindcss": "^1.4.6" + }, + "license": "MIT" +} diff --git a/examples/cms-builder-io/pages/_app.js b/examples/cms-builder-io/pages/_app.js new file mode 100644 index 0000000000000..f18e112c7cf79 --- /dev/null +++ b/examples/cms-builder-io/pages/_app.js @@ -0,0 +1,7 @@ +import '@/styles/index.css' + +function MyApp({ Component, pageProps }) { + return