From de54ad895c075761723f8de5c8e7041ec04503e9 Mon Sep 17 00:00:00 2001 From: Aziz Abbas Date: Wed, 12 Jan 2022 13:58:43 -0800 Subject: [PATCH 01/58] [examples] Add a statically generated blog example using Next.js and Builder.io (#22094) A statically generated blog example using Next.js and [Builder.io](https://builder.io), demo on [https://cms-builder-io.vercel.app/](https://cms-builder-blog.vercel.app/) --- docs/basic-features/pages.md | 1 + examples/blog-starter/README.md | 1 + examples/cms-agilitycms/README.md | 1 + examples/cms-builder-io/.env.local.example | 2 + examples/cms-builder-io/.gitignore | 34 + examples/cms-builder-io/README.md | 93 ++ .../builder/author/joe-public.json | 24 + .../builder/author/johnny-doe.json | 24 + .../builder/author/schema.model.json | 96 ++ .../builder/post/first-one.json | 283 ++++ .../builder/post/schema.model.json | 197 +++ .../cms-builder-io/builder/post/second.json | 1293 +++++++++++++++++ examples/cms-builder-io/builder/settings.json | 21 + examples/cms-builder-io/components/alert.js | 42 + examples/cms-builder-io/components/avatar.js | 17 + .../components/builder-image.js | 11 + .../cms-builder-io/components/container.js | 3 + .../cms-builder-io/components/cover-image.js | 29 + examples/cms-builder-io/components/date.js | 9 + examples/cms-builder-io/components/footer.js | 30 + examples/cms-builder-io/components/header.js | 12 + .../cms-builder-io/components/hero-post.js | 37 + examples/cms-builder-io/components/intro.js | 28 + examples/cms-builder-io/components/layout.js | 16 + examples/cms-builder-io/components/meta.js | 42 + .../cms-builder-io/components/more-stories.js | 24 + .../cms-builder-io/components/post-body.js | 13 + .../cms-builder-io/components/post-header.js | 26 + .../cms-builder-io/components/post-preview.js | 31 + .../cms-builder-io/components/post-title.js | 7 + .../components/section-separator.js | 3 + examples/cms-builder-io/jsconfig.json | 10 + examples/cms-builder-io/lib/api.js | 94 ++ examples/cms-builder-io/lib/constants.js | 10 + examples/cms-builder-io/next.config.js | 19 + examples/cms-builder-io/package.json | 22 + examples/cms-builder-io/pages/_app.js | 7 + .../cms-builder-io/pages/api/exit-preview.js | 8 + examples/cms-builder-io/pages/api/preview.js | 30 + examples/cms-builder-io/pages/index.js | 44 + examples/cms-builder-io/pages/posts/[slug].js | 94 ++ examples/cms-builder-io/postcss.config.js | 8 + .../public/favicon/android-chrome-192x192.png | Bin 0 -> 4795 bytes .../public/favicon/android-chrome-512x512.png | Bin 0 -> 14640 bytes .../public/favicon/apple-touch-icon.png | Bin 0 -> 1327 bytes .../public/favicon/browserconfig.xml | 9 + .../public/favicon/favicon-16x16.png | Bin 0 -> 595 bytes .../public/favicon/favicon-32x32.png | Bin 0 -> 880 bytes .../cms-builder-io/public/favicon/favicon.ico | Bin 0 -> 15086 bytes .../public/favicon/mstile-150x150.png | Bin 0 -> 3567 bytes .../public/favicon/safari-pinned-tab.svg | 33 + .../public/favicon/site.webmanifest | 19 + examples/cms-builder-io/styles/index.css | 7 + examples/cms-builder-io/tailwind.config.js | 36 + examples/cms-buttercms/README.md | 1 + examples/cms-contentful/README.md | 1 + examples/cms-cosmic/README.md | 1 + examples/cms-datocms/README.md | 1 + examples/cms-ghost/README.md | 1 + examples/cms-graphcms/README.md | 1 + examples/cms-kontent/README.md | 1 + examples/cms-prismic/README.md | 1 + examples/cms-sanity/README.md | 1 + examples/cms-storyblok/README.md | 1 + examples/cms-strapi/README.md | 1 + examples/cms-takeshape/README.md | 1 + examples/cms-wordpress/README.md | 1 + 67 files changed, 2913 insertions(+) create mode 100644 examples/cms-builder-io/.env.local.example create mode 100644 examples/cms-builder-io/.gitignore create mode 100644 examples/cms-builder-io/README.md create mode 100644 examples/cms-builder-io/builder/author/joe-public.json create mode 100644 examples/cms-builder-io/builder/author/johnny-doe.json create mode 100644 examples/cms-builder-io/builder/author/schema.model.json create mode 100644 examples/cms-builder-io/builder/post/first-one.json create mode 100644 examples/cms-builder-io/builder/post/schema.model.json create mode 100644 examples/cms-builder-io/builder/post/second.json create mode 100644 examples/cms-builder-io/builder/settings.json create mode 100644 examples/cms-builder-io/components/alert.js create mode 100644 examples/cms-builder-io/components/avatar.js create mode 100644 examples/cms-builder-io/components/builder-image.js create mode 100644 examples/cms-builder-io/components/container.js create mode 100644 examples/cms-builder-io/components/cover-image.js create mode 100644 examples/cms-builder-io/components/date.js create mode 100644 examples/cms-builder-io/components/footer.js create mode 100644 examples/cms-builder-io/components/header.js create mode 100644 examples/cms-builder-io/components/hero-post.js create mode 100644 examples/cms-builder-io/components/intro.js create mode 100644 examples/cms-builder-io/components/layout.js create mode 100644 examples/cms-builder-io/components/meta.js create mode 100644 examples/cms-builder-io/components/more-stories.js create mode 100644 examples/cms-builder-io/components/post-body.js create mode 100644 examples/cms-builder-io/components/post-header.js create mode 100644 examples/cms-builder-io/components/post-preview.js create mode 100644 examples/cms-builder-io/components/post-title.js create mode 100644 examples/cms-builder-io/components/section-separator.js create mode 100644 examples/cms-builder-io/jsconfig.json create mode 100644 examples/cms-builder-io/lib/api.js create mode 100644 examples/cms-builder-io/lib/constants.js create mode 100644 examples/cms-builder-io/next.config.js create mode 100644 examples/cms-builder-io/package.json create mode 100644 examples/cms-builder-io/pages/_app.js create mode 100644 examples/cms-builder-io/pages/api/exit-preview.js create mode 100644 examples/cms-builder-io/pages/api/preview.js create mode 100644 examples/cms-builder-io/pages/index.js create mode 100644 examples/cms-builder-io/pages/posts/[slug].js create mode 100644 examples/cms-builder-io/postcss.config.js create mode 100644 examples/cms-builder-io/public/favicon/android-chrome-192x192.png create mode 100644 examples/cms-builder-io/public/favicon/android-chrome-512x512.png create mode 100644 examples/cms-builder-io/public/favicon/apple-touch-icon.png create mode 100644 examples/cms-builder-io/public/favicon/browserconfig.xml create mode 100644 examples/cms-builder-io/public/favicon/favicon-16x16.png create mode 100644 examples/cms-builder-io/public/favicon/favicon-32x32.png create mode 100644 examples/cms-builder-io/public/favicon/favicon.ico create mode 100644 examples/cms-builder-io/public/favicon/mstile-150x150.png create mode 100644 examples/cms-builder-io/public/favicon/safari-pinned-tab.svg create mode 100644 examples/cms-builder-io/public/favicon/site.webmanifest create mode 100644 examples/cms-builder-io/styles/index.css create mode 100644 examples/cms-builder-io/tailwind.config.js diff --git a/docs/basic-features/pages.md b/docs/basic-features/pages.md index ad46f39e5913..e76d51973667 100644 --- a/docs/basic-features/pages.md +++ b/docs/basic-features/pages.md @@ -63,6 +63,7 @@ You can also use **Client-side Rendering** along with Static Generation or Serve
  • Storyblok Example (Demo)
  • GraphCMS Example (Demo)
  • Kontent Example (Demo)
    • +
  • Builder.io Example (Demo)
  • Static Tweet (Demo)
    • diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md index cdeb9747b5f3..6a7a956f4e89 100644 --- a/examples/blog-starter/README.md +++ b/examples/blog-starter/README.md @@ -38,6 +38,7 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu - [GraphCMS](/examples/cms-graphcms) - [Kontent](/examples/cms-kontent) - [Umbraco Heartcore](/examples/cms-umbraco-heartcore) +- [Builder.io](/examples/cms-builder-io) ## How to use diff --git a/examples/cms-agilitycms/README.md b/examples/cms-agilitycms/README.md index e7a1be152cf8..b7a66cbcea02 100644 --- a/examples/cms-agilitycms/README.md +++ b/examples/cms-agilitycms/README.md @@ -32,6 +32,7 @@ Once you have access to [the environment variables you'll need](#step-15-set-up- - [Ghost](/examples/cms-ghost) - [Umbraco Heartcore](/examples/cms-umbraco-heartcore) - [Blog Starter](/examples/blog-starter) +- [Builder.io](/examples/cms-builder-io) ## How to use diff --git a/examples/cms-builder-io/.env.local.example b/examples/cms-builder-io/.env.local.example new file mode 100644 index 000000000000..3138915779a5 --- /dev/null +++ b/examples/cms-builder-io/.env.local.example @@ -0,0 +1,2 @@ +# Copy this file as .env.local +NEXT_PUBLIC_BUILDER_API_KEY= diff --git a/examples/cms-builder-io/.gitignore b/examples/cms-builder-io/.gitignore new file mode 100644 index 000000000000..1437c53f70bc --- /dev/null +++ b/examples/cms-builder-io/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/cms-builder-io/README.md b/examples/cms-builder-io/README.md new file mode 100644 index 000000000000..f08e79b70755 --- /dev/null +++ b/examples/cms-builder-io/README.md @@ -0,0 +1,93 @@ +# A statically generated blog example using Next.js and Builder.io + +This example showcases Next.js's [Static Generation](https://nextjs.org/docs/basic-features/pages) feature using [Builder.io](https://builder.io/) as the data source. + +## Demo + +[https://cms-builder-io.vercel.app/](https://cms-builder-io.vercel.app/) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example cms-builder-io cms-builder-io-app +# or +yarn create next-app --example cms-builder-io cms-builder-io-app +``` + +## Configuration + +### Step 1 Install the Builder.io cli + +``` +npm install @builder.io/cli -g +``` + +### Step 2 Generate a space + +[Signup for Builder.io](https://builder.io/signup), then go to your [organization settings page](https://builder.io/account/organization?root=true), create a private key and copy it and supply it for `[private-key]` below. For `[space-name]` create a name for your space, such as "Blog" + +``` +cd cms-builder-io-app +builder create -k [private-key] -n [space-name] -d +``` + +This command when done it'll print your new space's public api key, copy it and add as the value for `NEXT_PUBLIC_BUILDER_API_KEY` into the .env files (`.env.production` and `.env.development`) + +``` +BUILDER_PUBLIC_KEY=... +``` + +### Step 3 Run Next.js in development mode + +```bash +npm install +npm run dev + +# or + +yarn install +yarn dev +``` + +Your blog should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, you can post on [GitHub discussions](https://github.com/vercel/next.js/discussions). + +### Step 4 Try preview mode + +To try preview mode at any time while editing in Builder.io press `view current draft`, if you changed the secret defined in [constants.js](./lib/constants.js) you'll need to also change it in your `Post` [model settings](https://builder.io/models). + +To exit the preview mode, you can click **Click here to exit preview mode** at the top. + +### Step 5 Deploy on Vercel + +You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). + +#### Deploy Your Local Project + +To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example). + +**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file. + +#### Deploy from Our Template + +Alternatively, you can deploy using our template by clicking on the Deploy button below. + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/cms-builder-io&project-name=cms-builder-io&repository-name=cms-builder-io&env=BUILDER_PUBLIC_KEY&envDescription=Required%20to%20connect%20the%20app%20with%20Builder.io&envLink=https://www.builder.io/c/docs/custom-react-components#api-key) + +### Related examples + +- [WordPress](/examples/cms-wordpress) +- [DatoCMS](/examples/cms-datocms) +- [Sanity](/examples/cms-sanity) +- [TakeShape](/examples/cms-takeshape) +- [Prismic](/examples/cms-prismic) +- [Contentful](/examples/cms-contentful) +- [Agility CMS](/examples/cms-agilitycms) +- [Cosmic](/examples/cms-cosmic) +- [Strapi](/examples/cms-strapi) +- [ButterCMS](/examples/cms-buttercms) +- [GraphCMS](/examples/cms-graphcms) +- [Kontent](/examples/cms-kontent) +- [Ghost](/examples/cms-ghost) +- [Blog Starter](/examples/blog-starter) diff --git a/examples/cms-builder-io/builder/author/joe-public.json b/examples/cms-builder-io/builder/author/joe-public.json new file mode 100644 index 000000000000..451d63f24f38 --- /dev/null +++ b/examples/cms-builder-io/builder/author/joe-public.json @@ -0,0 +1,24 @@ +{ + "createdBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2", + "createdDate": 1613015350978, + "data": { + "image": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F6ae860242834453ea87d6057e7df9754", + "name": "Joe Public" + }, + "id": "7b0b333bd44b4e91a6f4bf93158cb62b", + "lastUpdatedBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2", + "meta": { + "kind": "data" + }, + "modelId": "6d30b724c93d4198b0c0ce2d3ce390dc", + "name": "Joe Public", + "published": "published", + "query": [], + "testRatio": 1, + "variations": {}, + "lastUpdated": 1613031369279, + "rev": "0pjukbnd3ox", + "@originOrg": "8f6bae86bfa3487eb1a18f263118c832", + "@originContentId": "ba1fb5129adf4c379424d346666cc092", + "@originModelId": "c71bab5b43fa42eca870e330a39b59e0" +} diff --git a/examples/cms-builder-io/builder/author/johnny-doe.json b/examples/cms-builder-io/builder/author/johnny-doe.json new file mode 100644 index 000000000000..d3f3b848ca04 --- /dev/null +++ b/examples/cms-builder-io/builder/author/johnny-doe.json @@ -0,0 +1,24 @@ +{ + "createdBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2", + "createdDate": 1613027534444, + "data": { + "image": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F5df565e2c411421082123ea8c1084a73", + "name": "Johnny Roe" + }, + "id": "d50fe8eced654b2dae22c738dbeabcee", + "lastUpdatedBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2", + "meta": { + "kind": "data" + }, + "modelId": "6d30b724c93d4198b0c0ce2d3ce390dc", + "name": "Johnny Doe", + "published": "published", + "query": [], + "testRatio": 1, + "variations": {}, + "lastUpdated": 1613067837951, + "rev": "0pjukbnd3ox", + "@originOrg": "8f6bae86bfa3487eb1a18f263118c832", + "@originContentId": "edcaddd1a70f494ba1955704cd88ca4f", + "@originModelId": "c71bab5b43fa42eca870e330a39b59e0" +} diff --git a/examples/cms-builder-io/builder/author/schema.model.json b/examples/cms-builder-io/builder/author/schema.model.json new file mode 100644 index 000000000000..94d2b7db6b3b --- /dev/null +++ b/examples/cms-builder-io/builder/author/schema.model.json @@ -0,0 +1,96 @@ +{ + "helperText": "", + "injectWcAt": "", + "webhooks": [], + "showTargeting": true, + "sendToMongoDb": true, + "hideFromUI": false, + "showScheduling": true, + "name": "author", + "fields": [ + { + "showTemplatePicker": true, + "helperText": "", + "type": "text", + "name": "name", + "noPhotoPicker": false, + "simpleTextOnly": false, + "permissionsRequiredToEdit": "", + "@type": "@builder.io/core:Field", + "mandatory": false, + "required": true, + "hideFromFieldsEditor": false, + "hideFromUI": false, + "model": "", + "copyOnAdd": true, + "disallowRemove": false, + "showIf": "", + "advanced": false, + "onChange": "", + "subFields": [], + "autoFocus": false, + "hidden": false + }, + { + "autoFocus": false, + "subFields": [], + "name": "image", + "required": true, + "type": "file", + "allowedFileTypes": ["jpeg", "png"], + "@type": "@builder.io/core:Field", + "copyOnAdd": true, + "defaultValue": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F8c8bf9b14266412497c0090aa3136beb", + "showTemplatePicker": true, + "noPhotoPicker": false, + "mandatory": false, + "disallowRemove": false, + "showIf": "", + "permissionsRequiredToEdit": "", + "advanced": false, + "onChange": "", + "model": "", + "hideFromFieldsEditor": false, + "hideFromUI": false, + "helperText": "", + "hidden": false, + "simpleTextOnly": false + } + ], + "publicReadable": true, + "individualEmbed": false, + "schema": {}, + "lastUpdateBy": null, + "subType": "", + "id": "6d30b724c93d4198b0c0ce2d3ce390dc", + "injectWcPosition": "", + "repeatable": false, + "archived": false, + "hooks": {}, + "pathPrefix": "/", + "requiredTargets": [], + "allowBuiltInComponents": true, + "isPage": false, + "publicWritable": false, + "autoTracked": true, + "sendToElasticSearch": false, + "hideOptions": false, + "examplePageUrl": "", + "showAbTests": true, + "allowTests": true, + "getSchemaFromPage": false, + "allowMetrics": true, + "defaultQuery": [], + "useQueryParamTargetingClientSide": false, + "kind": "data", + "designerVersion": 1, + "strictPrivateWrite": false, + "componentsOnlyMode": false, + "showMetrics": true, + "singleton": false, + "bigData": false, + "hidden": false, + "allowHeatmap": true, + "strictPrivateRead": false, + "@originId": "c71bab5b43fa42eca870e330a39b59e0" +} diff --git a/examples/cms-builder-io/builder/post/first-one.json b/examples/cms-builder-io/builder/post/first-one.json new file mode 100644 index 000000000000..38e3317e2df7 --- /dev/null +++ b/examples/cms-builder-io/builder/post/first-one.json @@ -0,0 +1,283 @@ +{ + "createdBy": "4FFFg0MNRJT0z0nW4uUizDHfHJV2", + "createdDate": 1613015962185, + "data": { + "author": { + "@type": "@builder.io/core:Reference", + "id": "d50fe8eced654b2dae22c738dbeabcee", + "model": "author" + }, + "image": "https://cdn.builder.io/api/v1/image/assets%2F8f6bae86bfa3487eb1a18f263118c832%2F79e961dbf6d54a9a8f189c5bd48454d8", + "inputs": [], + "intro": "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.", + "slug": "first-one", + "title": "Now howoiofweewf", + "blocks": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-73d17ca4f7bc472dbd5b146c075d7976", + "component": { + "name": "Core:Section", + "options": { + "maxWidth": 1200 + } + }, + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "id": "builder-2ac544bf3b9941b2b4e629e34e44c069", + "component": { + "name": "Columns", + "options": { + "columns": [ + { + "blocks": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "layerName": "Centered Box", + "id": "builder-90ecefea6830467787059c4a74a67bc9", + "children": [ + { + "@type": "@builder.io/sdk:Element", + "@version": 2, + "layerName": "Title", + "id": "builder-86d8df34f7924d90b1f0326f644f3dd6", + "component": { + "name": "Text", + "options": { + "text": "

    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 000000000000..d1b3ee11d4cd --- /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 000000000000..5fdac0b13ba4 --- /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 000000000000..8de1d0eed297 --- /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 000000000000..2994d59fbd32 --- /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 ( +
    + +
    + {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/avatar.js b/examples/cms-builder-io/components/avatar.js new file mode 100644 index 000000000000..635f3f90910f --- /dev/null +++ b/examples/cms-builder-io/components/avatar.js @@ -0,0 +1,17 @@ +import BuilderImage from './builder-image' + +export default function Avatar({ name, picture }) { + return ( +
    +
    + +
    +
    {name}
    +
    + ) +} diff --git a/examples/cms-builder-io/components/builder-image.js b/examples/cms-builder-io/components/builder-image.js new file mode 100644 index 000000000000..89d38ff15024 --- /dev/null +++ b/examples/cms-builder-io/components/builder-image.js @@ -0,0 +1,11 @@ +import Image from 'next/image' + +const builderLoader = ({ src, width, quality }) => { + return `${src}?width=${width}&quality=${quality || 75}` +} + +const BuilderImage = (props) => { + return +} + +export default BuilderImage diff --git a/examples/cms-builder-io/components/container.js b/examples/cms-builder-io/components/container.js new file mode 100644 index 000000000000..fc1c29dfb074 --- /dev/null +++ b/examples/cms-builder-io/components/container.js @@ -0,0 +1,3 @@ +export default function Container({ children }) { + return
    {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 000000000000..222d6b47610d --- /dev/null +++ b/examples/cms-builder-io/components/cover-image.js @@ -0,0 +1,29 @@ +import BuilderImage from './builder-image' +import Link from 'next/link' +import cn from 'classnames' + +export default function CoverImage({ title, url, slug }) { + const image = ( + + ) + + return ( +
    + {slug ? ( + + {image} + + ) : ( + image + )} +
    + ) +} diff --git a/examples/cms-builder-io/components/date.js b/examples/cms-builder-io/components/date.js new file mode 100644 index 000000000000..4fd5b35f56e4 --- /dev/null +++ b/examples/cms-builder-io/components/date.js @@ -0,0 +1,9 @@ +import { format } from 'date-fns' + +export default function DateComponent({ dateString }) { + return ( + + ) +} diff --git a/examples/cms-builder-io/components/footer.js b/examples/cms-builder-io/components/footer.js new file mode 100644 index 000000000000..da9eed88ec26 --- /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 000000000000..562e7e3eebb6 --- /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 000000000000..680afd982901 --- /dev/null +++ b/examples/cms-builder-io/components/hero-post.js @@ -0,0 +1,37 @@ +import Link from 'next/link' +import Avatar from '../components/avatar' +import DateComponent from '../components/date' +import CoverImage from '../components/cover-image' + +export default function HeroPost({ + title, + coverImage, + date, + excerpt, + author, + slug, +}) { + return ( +
    +
    + +
    +
    +
    +

    + + {title} + +

    +
    + +
    +
    +
    +

    {excerpt}

    + {author && } +
    +
    +
    + ) +} diff --git a/examples/cms-builder-io/components/intro.js b/examples/cms-builder-io/components/intro.js new file mode 100644 index 000000000000..5931b3c5961b --- /dev/null +++ b/examples/cms-builder-io/components/intro.js @@ -0,0 +1,28 @@ +import { CMS_NAME, CMS_URL } from '../lib/constants' + +export default function Intro() { + return ( +
    +

    + Blog. +

    +

    + A statically generated blog example using{' '} + + Next.js + {' '} + and{' '} + + {CMS_NAME} + + . +

    +
    + ) +} diff --git a/examples/cms-builder-io/components/layout.js b/examples/cms-builder-io/components/layout.js new file mode 100644 index 000000000000..99d95353131e --- /dev/null +++ b/examples/cms-builder-io/components/layout.js @@ -0,0 +1,16 @@ +import Alert from '../components/alert' +import Footer from '../components/footer' +import Meta from '../components/meta' + +export default function Layout({ preview, children }) { + return ( + <> + +
    + +
    {children}
    +
    +