{
  "@components": {
    "actions": {
      "@id": "https://hydra-api.pretagov.com/@actions"
    }, 
    "aliases": {
      "@id": "https://hydra-api.pretagov.com/@aliases"
    }, 
    "breadcrumbs": {
      "@id": "https://hydra-api.pretagov.com/@breadcrumbs"
    }, 
    "contextnavigation": {
      "@id": "https://hydra-api.pretagov.com/@contextnavigation"
    }, 
    "navigation": {
      "@id": "https://hydra-api.pretagov.com/@navigation"
    }, 
    "navroot": {
      "@id": "https://hydra-api.pretagov.com/@navroot"
    }, 
    "types": {
      "@id": "https://hydra-api.pretagov.com/@types"
    }, 
    "workflow": {
      "@id": "https://hydra-api.pretagov.com/@workflow"
    }
  }, 
  "@id": "https://hydra-api.pretagov.com", 
  "@type": "Plone Site", 
  "UID": "e419fd90b87c4a7b81440498e8d13923", 
  "allow_discussion": false, 
  "blocks": {
    "0ab1a8f7-2d26-4933-800c-2f10474afe63": {
      "@type": "separator", 
      "styles": {
        "align": "full"
      }
    }, 
    "0d0c0506-f9bb-48d8-af0a-1352d81b45de": {
      "@type": "slate", 
      "plaintext": "Find out more about Hydra", 
      "value": [
        {
          "children": [
            {
              "text": "Find out more about Hydra"
            }
          ], 
          "type": "h2"
        }
      ]
    }, 
    "2fac7e5d-affb-4a8e-969f-2fac4d08e0fd": {
      "@type": "slate", 
      "plaintext": "GitHub Repository, Plone Documentation, Plone Community Forum", 
      "styles": {}, 
      "value": [
        {
          "children": [
            {
              "children": [
                {
                  "text": ""
                }, 
                {
                  "children": [
                    {
                      "text": "Hydra on GitHub \u2014 source code, issues, and documentation"
                    }
                  ], 
                  "data": {
                    "url": "https://github.com/collective/volto-hydra"
                  }, 
                  "type": "link"
                }, 
                {
                  "text": ""
                }
              ], 
              "type": "li"
            }, 
            {
              "children": [
                {
                  "text": ""
                }, 
                {
                  "children": [
                    {
                      "text": "Plone 6 Documentation"
                    }
                  ], 
                  "data": {
                    "url": "https://6.docs.plone.org"
                  }, 
                  "type": "link"
                }, 
                {
                  "text": ""
                }
              ], 
              "type": "li"
            }, 
            {
              "children": [
                {
                  "text": ""
                }, 
                {
                  "children": [
                    {
                      "text": "Plone Community Forum"
                    }
                  ], 
                  "data": {
                    "url": "https://community.plone.org"
                  }, 
                  "type": "link"
                }, 
                {
                  "text": ""
                }
              ], 
              "type": "li"
            }
          ], 
          "type": "ul"
        }
      ]
    }, 
    "303984b4-693a-408f-83f7-5a88b243d7db": {
      "@type": "slider", 
      "autoplayDelay": 4000, 
      "autoplayEnabled": false, 
      "autoplayJump": false, 
      "slides": [
        {
          "@id": "b09f39ea-36c3-4f09-9a18-30aef3565a22", 
          "buttonText": "See all Content Types", 
          "description": "You can log in and experience currently working features (Volto like but on any frontend)", 
          "flagAlign": "left", 
          "head_title": "Welcome to Hydra", 
          "href": [
            {
              "@id": "/docs/examples/content-types", 
              "@type": "Document", 
              "Description": "This section has a sample of content types available in this site.", 
              "Title": "Content Types", 
              "hasPreviewImage": null, 
              "head_title": null, 
              "image_field": "image", 
              "title": "Content Types"
            }
          ], 
          "preview_image": [
            {
              "@id": "/images/penguin1.jpg", 
              "@type": "Image", 
              "CreationDate": "2024-03-07T12:29:54+01:00", 
              "Creator": "admin", 
              "Date": "2024-03-07T12:30:08+01:00", 
              "Description": "", 
              "EffectiveDate": "None", 
              "ExpirationDate": "None", 
              "ModificationDate": "2024-03-07T12:30:08+01:00", 
              "Subject": [], 
              "Title": "testimage", 
              "Type": "Bild", 
              "UID": "9abc1a813bcf46388e565b277bd8c6bf", 
              "author_name": null, 
              "cmf_uid": null, 
              "commentators": [], 
              "created": "2024-03-07T11:29:54+00:00", 
              "description": "", 
              "effective": "1969-12-30T23:00:00+00:00", 
              "end": null, 
              "exclude_from_nav": false, 
              "expires": "2499-12-30T23:00:00+00:00", 
              "getIcon": true, 
              "getId": "testimage.jpg", 
              "getObjSize": "2.0 MB", 
              "getPath": "/Plone/testimage.jpg", 
              "getRemoteUrl": null, 
              "getURL": "http://localhost:3000/testimage.jpg", 
              "hasPreviewImage": null, 
              "head_title": null, 
              "id": "testimage.jpg", 
              "image_field": "image", 
              "in_response_to": null, 
              "is_folderish": false, 
              "last_comment_date": null, 
              "listCreators": [
                "admin"
              ], 
              "location": null, 
              "mime_type": "image/jpeg", 
              "modified": "2024-03-07T11:30:08+00:00", 
              "nav_title": null, 
              "portal_type": "Image", 
              "review_state": null, 
              "start": null, 
              "sync_uid": null, 
              "title": "testimage", 
              "total_comments": 0, 
              "type_title": "Bild"
            }
          ], 
          "title": "You can use this site to test Hydra"
        }, 
        {
          "@id": "ef8ceecc-7c1d-4e0a-9b67-a56e7d03f6e3", 
          "buttonText": "See all blocks", 
          "description": "Frontend freedom makes it easy to create beautiful and fast experiences", 
          "flagAlign": "right", 
          "head_title": "Welcome to Hydra's many frontends", 
          "hideButton": false, 
          "href": [
            {
              "@id": "/docs/examples", 
              "@type": "Document", 
              "Description": "", 
              "Title": "Blocks", 
              "hasPreviewImage": null, 
              "head_title": null, 
              "image_field": "", 
              "title": "Blocks"
            }
          ], 
          "preview_image": [
            {
              "@id": "/images/penguin2.jpg", 
              "@type": "Image", 
              "CreationDate": "2024-03-08T13:05:46+01:00", 
              "Creator": "admin", 
              "Date": "2024-03-08T13:05:46+01:00", 
              "Description": "", 
              "EffectiveDate": "None", 
              "ExpirationDate": "None", 
              "ModificationDate": "2024-03-08T13:05:46+01:00", 
              "Subject": [], 
              "Title": "penguin2.jpg", 
              "Type": "Bild", 
              "UID": "05bace45294c45d5ab93de883e7ce702", 
              "author_name": null, 
              "cmf_uid": null, 
              "commentators": [], 
              "created": "2024-03-08T12:05:46+00:00", 
              "description": "", 
              "effective": "1969-12-30T23:00:00+00:00", 
              "end": null, 
              "exclude_from_nav": false, 
              "expires": "2499-12-30T23:00:00+00:00", 
              "getIcon": true, 
              "getId": "penguin2.jpg", 
              "getObjSize": "2.8 MB", 
              "getPath": "/Plone/images/penguin2.jpg", 
              "getRemoteUrl": null, 
              "getURL": "http://localhost:3000/images/penguin2.jpg", 
              "hasPreviewImage": null, 
              "head_title": null, 
              "id": "penguin2.jpg", 
              "image_field": "image", 
              "in_response_to": null, 
              "is_folderish": false, 
              "last_comment_date": null, 
              "listCreators": [
                "admin"
              ], 
              "location": null, 
              "mime_type": "image/jpeg", 
              "modified": "2024-03-08T12:05:46+00:00", 
              "nav_title": null, 
              "portal_type": "Image", 
              "review_state": null, 
              "start": null, 
              "sync_uid": null, 
              "title": "penguin2.jpg", 
              "total_comments": 0, 
              "type_title": "Bild"
            }
          ], 
          "title": "You are enjoying one of many possible frontends"
        }
      ], 
      "styles": {}
    }, 
    "9567ae6d-191c-43f1-91cc-4288bbb98f88": {
      "@type": "slate", 
      "plaintext": " Mobile hybrid app using f7-Vue.js ", 
      "styles": {}, 
      "value": [
        {
          "children": [
            {
              "children": [
                {
                  "text": ""
                }, 
                {
                  "children": [
                    {
                      "text": "NUXT.js Example"
                    }
                  ], 
                  "data": {
                    "url": "https://hydra-nuxt-flowbrite.netlify.app/"
                  }, 
                  "type": "link"
                }, 
                {
                  "text": ""
                }
              ], 
              "type": "li"
            }, 
            {
              "children": [
                {
                  "text": ""
                }, 
                {
                  "children": [
                    {
                      "text": "Framework7 Example (mobile app)"
                    }
                  ], 
                  "data": {
                    "url": "https://hydra-vue-f7.netlify.app/"
                  }, 
                  "type": "link"
                }, 
                {
                  "text": ""
                }
              ], 
              "type": "li"
            }, 
            {
              "children": [
                {
                  "text": ""
                }, 
                {
                  "children": [
                    {
                      "text": "Next.js Example"
                    }
                  ], 
                  "data": {
                    "url": "https://hydra-blogsite-nextjs.vercel.app"
                  }, 
                  "type": "link"
                }, 
                {
                  "text": ""
                }
              ], 
              "type": "li"
            }, 
            {
              "children": [
                {
                  "text": ""
                }, 
                {
                  "children": [
                    {
                      "text": "Edit either of these frontends: hydra.pretagov.com"
                    }
                  ], 
                  "data": {
                    "url": "https://hydra.pretagov.com"
                  }, 
                  "type": "link"
                }, 
                {
                  "text": ""
                }
              ], 
              "type": "li"
            }
          ], 
          "type": "ul"
        }
      ]
    }, 
    "e972541f-b114-494b-a51e-cc8b11c8207d": {
      "@type": "slate", 
      "plaintext": "Frontends for this content", 
      "styles": {}, 
      "value": [
        {
          "children": [
            {
              "text": "View this site in other frameworks"
            }
          ], 
          "type": "h2"
        }
      ]
    }, 
    "fae599f3-e7d4-451b-a413-84355c796b7e": {
      "@type": "gridBlock", 
      "blocks": {
        "c9f92df8-81fd-4259-a149-5c8798735350": {
          "@type": "slate", 
          "plaintext": "  You can use this site to test Plone 6.\n Disclaimer : This instance is reset every night, so all changes will be lost afterwards.", 
          "value": [
            {
              "children": [
                {
                  "text": ""
                }, 
                {
                  "children": [
                    {
                      "text": ""
                    }
                  ], 
                  "type": "strong"
                }, 
                {
                  "text": "You can use this site to test Hydra Edit.\n"
                }
              ], 
              "type": "p"
            }, 
            {
              "children": [
                {
                  "text": ""
                }, 
                {
                  "children": [
                    {
                      "text": "Disclaimer"
                    }
                  ], 
                  "type": "strong"
                }, 
                {
                  "text": ": This instance is reset every night, so all changes will be lost afterwards."
                }
              ], 
              "type": "p"
            }
          ]
        }, 
        "d105783c-fa27-4c92-a3d9-6323adbe5e72": {
          "@type": "slate", 
          "plaintext": "This site uses some recommended add-ons :\n and some blocks that are suitable to be used with volto-light-theme.  volto-form-block ", 
          "value": [
            {
              "children": [
                {
                  "text": "This site uses some recommended "
                }, 
                {
                  "children": [
                    {
                      "text": "add-ons"
                    }
                  ], 
                  "type": "strong"
                }, 
                {
                  "text": ":"
                }
              ], 
              "type": "p"
            }, 
            {
              "children": [
                {
                  "children": [
                    {
                      "text": "Some blocks that are suitable to be used with volto-light-theme."
                    }
                  ], 
                  "type": "li"
                }, 
                {
                  "children": [
                    {
                      "text": ""
                    }, 
                    {
                      "children": [
                        {
                          "text": "volto-form-block"
                        }
                      ], 
                      "data": {
                        "url": "https://github.com/collective/volto-form-block"
                      }, 
                      "type": "link"
                    }, 
                    {
                      "text": ""
                    }
                  ], 
                  "type": "li"
                }
              ], 
              "type": "ul"
            }
          ]
        }, 
        "d78b666f-b07b-4036-9853-efe6263515aa": {
          "@type": "slate", 
          "plaintext": "You can log in and use it as an admin user using these credentials :\n\nusername: admin password: admin ", 
          "value": [
            {
              "children": [
                {
                  "text": "You can "
                }, 
                {
                  "children": [
                    {
                      "text": "log in"
                    }
                  ], 
                  "type": "strong"
                }, 
                {
                  "text": " and use it as an admin user using these "
                }, 
                {
                  "children": [
                    {
                      "text": "credentials"
                    }
                  ], 
                  "type": "strong"
                }, 
                {
                  "text": ":\n\nusername: "
                }, 
                {
                  "children": [
                    {
                      "text": "admin"
                    }
                  ], 
                  "type": "strong"
                }, 
                {
                  "text": "\npassword: "
                }, 
                {
                  "children": [
                    {
                      "text": "admin"
                    }
                  ], 
                  "type": "strong"
                }, 
                {
                  "text": ""
                }
              ], 
              "type": "p"
            }
          ]
        }
      }, 
      "blocks_layout": {
        "items": [
          "c9f92df8-81fd-4259-a149-5c8798735350", 
          "d78b666f-b07b-4036-9853-efe6263515aa", 
          "d105783c-fa27-4c92-a3d9-6323adbe5e72"
        ]
      }, 
      "styles": {}
    }, 
    "hero-cta": {
      "@type": "slate", 
      "plaintext": "Try the demo  \u00b7  Source on GitHub", 
      "styles": {
        "backgroundColor": "grey"
      }, 
      "value": [
        {
          "children": [
            {
              "children": [
                {
                  "text": "Try the demo"
                }
              ], 
              "data": {
                "url": "https://hydra.pretagov.com/login?return_url=/"
              }, 
              "type": "link"
            }, 
            {
              "text": "  \u00b7  "
            }, 
            {
              "children": [
                {
                  "text": "Source on GitHub"
                }
              ], 
              "data": {
                "url": "https://github.com/collective/volto-hydra"
              }, 
              "type": "link"
            }
          ], 
          "type": "p"
        }
      ]
    }, 
    "hero-headline": {
      "@type": "slate", 
      "plaintext": "Visual editing. Any frontend.", 
      "styles": {}, 
      "value": [
        {
          "children": [
            {
              "text": "Visual editing. Any frontend."
            }
          ], 
          "type": "h1"
        }
      ]
    }, 
    "hero-subhead": {
      "@type": "slate", 
      "plaintext": "A visual headless CMS using Plone \u2014 drag-and-drop blocks and inline text editing, with whichever frontend stack you choose.", 
      "styles": {}, 
      "value": [
        {
          "children": [
            {
              "text": "A visual headless CMS using Plone \u2014 drag-and-drop blocks and inline text editing, with whichever frontend stack you choose."
            }
          ], 
          "type": "p"
        }
      ]
    }, 
    "quickstart-code": {
      "@type": "codeExample", 
      "tabs": [
        {
          "@id": "tab-nuxt", 
          "code": "<!-- pages/[...slug].vue -->\n<template>\n  <!-- data-block-uid: makes block selectable, draggable, and editable -->\n  <div v-for=\"id in page?.blocks_layout?.items\" :key=\"id\"\n       :data-block-uid=\"editing ? id : undefined\">\n    <!-- data-edit-link: click to edit link URL in sidebar -->\n    <a :href=\"page.blocks[id].link\"\n       :data-edit-link=\"editing ? 'link' : undefined\">\n      <!-- data-edit-media: click to pick/upload image in sidebar -->\n      <img :src=\"page.blocks[id].image\"\n           :data-edit-media=\"editing ? 'image' : undefined\" />\n      <!-- data-edit-text: edit text directly in the preview -->\n      <h3 :data-edit-text=\"editing ? 'title' : undefined\">\n        {{ page.blocks[id].title }}\n      </h3>\n      <p :data-edit-text=\"editing ? 'description' : undefined\">\n        {{ page.blocks[id].description }}\n      </p>\n    </a>\n  </div>\n</template>\n\n<script setup>\nimport { ref, onMounted } from 'vue'\nimport { initBridge } from 'hydra-js'\n\nconst page = ref(null)\nconst editing = ref(false)\n\nonMounted(async () => {\n  // Only init bridge when loaded inside the editor\n  if (window.name.startsWith('hydra')) {\n    editing.value = true\n    initBridge({\n      // Register custom block types with their field schemas\n      blocks: {\n        card: { blockSchema: { properties: {\n          image: { widget: 'image' },\n          title: { type: 'string' },\n          description: { type: 'string' },\n          link: { widget: 'url' },\n        }}}\n      },\n      // Receive live updates as editor changes content\n      onEditChange: (data) => { page.value = data }\n    })\n  } else {\n    const res = await fetch(`/++api++${useRoute().path}`)\n    page.value = await res.json()\n  }\n})\n</script>", 
          "label": "Nuxt.js", 
          "language": "vue"
        }, 
        {
          "@id": "tab-nextjs", 
          "code": "// app/[...slug]/page.jsx\n'use client'\nimport { useState, useEffect } from 'react'\nimport { initBridge } from 'hydra-js'\n\nexport default function Page({ params }) {\n  const [page, setPage] = useState(null)\n  const [editing, setEditing] = useState(false)\n\n  useEffect(() => {\n    // Only init bridge when loaded inside the editor\n    if (window.name.startsWith('hydra')) {\n      setEditing(true)\n      initBridge({\n        // Register custom block types with their field schemas\n        blocks: {\n          card: { blockSchema: { properties: {\n            image: { widget: 'image' },\n            title: { type: 'string' },\n            description: { type: 'string' },\n            link: { widget: 'url' },\n          }}}\n        },\n        // Receive live updates as editor changes content\n        onEditChange: setPage\n      })\n    } else {\n      fetch(`/++api++/${params.slug?.join('/') || ''}`)\n        .then(r => r.json()).then(setPage)\n    }\n  }, [])\n\n  if (!page) return <div>Loading...</div>\n\n  return page.blocks_layout?.items?.map(id => {\n    const block = page.blocks[id]\n    return (\n      // data-block-uid: makes block selectable, draggable, and editable\n      <div key={id} data-block-uid={editing ? id : undefined}>\n        {/* data-edit-link: click to edit link URL in sidebar */}\n        <a href={block.link}\n           data-edit-link={editing ? 'link' : undefined}>\n          {/* data-edit-media: click to pick/upload image in sidebar */}\n          <img src={block.image}\n               data-edit-media={editing ? 'image' : undefined} />\n          {/* data-edit-text: edit text directly in the preview */}\n          <h3 data-edit-text={editing ? 'title' : undefined}>\n            {block.title}\n          </h3>\n          <p data-edit-text={editing ? 'description' : undefined}>\n            {block.description}\n          </p>\n        </a>\n      </div>\n    )\n  })\n}", 
          "label": "Next.js", 
          "language": "jsx"
        }, 
        {
          "@id": "tab-svelte", 
          "code": "<!-- src/routes/[...slug]/+page.svelte -->\n<script>\n  import { onMount } from 'svelte'\n  import { initBridge } from 'hydra-js'\n\n  let page = $state(null)\n  let editing = $state(false)\n\n  onMount(async () => {\n    // Only init bridge when loaded inside the editor\n    if (window.name.startsWith('hydra')) {\n      editing = true\n      initBridge({\n        // Register custom block types with their field schemas\n        blocks: {\n          card: { blockSchema: { properties: {\n            image: { widget: 'image' },\n            title: { type: 'string' },\n            description: { type: 'string' },\n            link: { widget: 'url' },\n          }}}\n        },\n        // Receive live updates as editor changes content\n        onEditChange: (data) => { page = data }\n      })\n    } else {\n      const res = await fetch(`/++api++${window.location.pathname}`)\n      page = await res.json()\n    }\n  })\n</script>\n\n{#if page}\n  {#each page.blocks_layout?.items ?? [] as id}\n    <!-- data-block-uid: makes block selectable, draggable, and editable -->\n    <div data-block-uid={editing ? id : undefined}>\n      <!-- data-edit-link: click to edit link URL in sidebar -->\n      <a href={page.blocks[id].link}\n         data-edit-link={editing ? 'link' : undefined}>\n        <!-- data-edit-media: click to pick/upload image in sidebar -->\n        <img src={page.blocks[id].image}\n             data-edit-media={editing ? 'image' : undefined} />\n        <!-- data-edit-text: edit text directly in the preview -->\n        <h3 data-edit-text={editing ? 'title' : undefined}>\n          {page.blocks[id].title}\n        </h3>\n        <p data-edit-text={editing ? 'description' : undefined}>\n          {page.blocks[id].description}\n        </p>\n      </a>\n    </div>\n  {/each}\n{/if}", 
          "label": "SvelteKit", 
          "language": "svelte"
        }, 
        {
          "@id": "tab-vanilla", 
          "code": "<!-- index.html -->\n<div id=\"content\"></div>\n<script type=\"module\">\n  import { initBridge } from 'hydra-js'\n\n  let editing = false\n\n  // Only init bridge when loaded inside the editor\n  if (window.name.startsWith('hydra')) {\n    editing = true\n    initBridge({\n      // Register custom block types with their field schemas\n      blocks: {\n        card: { blockSchema: { properties: {\n          image: { widget: 'image' },\n          title: { type: 'string' },\n          description: { type: 'string' },\n          link: { widget: 'url' },\n        }}}\n      },\n      // Receive live updates as editor changes content\n      onEditChange: renderPage\n    })\n  } else {\n    const res = await fetch(`/++api++${location.pathname}`)\n    renderPage(await res.json())\n  }\n\n  function renderPage(page) {\n    const el = document.getElementById('content')\n    el.innerHTML = page.blocks_layout.items.map(id => {\n      const b = page.blocks[id]\n      return `\n        <!-- data-block-uid: makes block selectable, draggable, and editable -->\n        <div ${editing ? `data-block-uid=\"${id}\"` : ''}>\n          <!-- data-edit-link: click to edit link URL in sidebar -->\n          <a href=\"${b.link}\"\n             ${editing ? 'data-edit-link=\"link\"' : ''}>\n            <!-- data-edit-media: click to pick/upload image in sidebar -->\n            <img src=\"${b.image}\"\n                 ${editing ? 'data-edit-media=\"image\"' : ''} />\n            <!-- data-edit-text: edit text directly in the preview -->\n            <h3 ${editing ? 'data-edit-text=\"title\"' : ''}>\n              ${b.title}\n            </h3>\n            <p ${editing ? 'data-edit-text=\"description\"' : ''}>\n              ${b.description}\n            </p>\n          </a>\n        </div>`\n    }).join('')\n  }\n</script>", 
          "label": "HTML/JS", 
          "language": "html"
        }, 
        {
          "@id": "tab-astro", 
          "code": "<!-- src/pages/[...slug].astro\n     First paint and every subsequent render come from /api/render \u2014\n     blocks are rendered server-side by .astro components via Astro's\n     Container API. Same pattern works for PHP, Django, Rails, Laravel:\n     see docs/server-rendered-frontends.md -->\n<!DOCTYPE html>\n<html>\n  <body>\n    <div id=\"content\"></div>\n    <script>\n      import { initBridge } from 'hydra-js'\n      if (window.name.startsWith('hydra')) {\n        initBridge({\n          // Register custom block types with their field schemas\n          blocks: {\n            card: { blockSchema: { properties: {\n              image: { widget: 'image' },\n              title: { type: 'string' },\n              description: { type: 'string' },\n              link: { widget: 'url' },\n            }}}\n          },\n          // Server-render mode (Storyblok-style): the bridge POSTs each\n          // smallest-changed-unit to renderEndpoint and swaps the\n          // returned HTML into renderContainer.\n          renderEndpoint: '/api/render',\n          renderContainer: '#content',\n        })\n      }\n    </script>\n  </body>\n</html>\n\n// src/pages/api/render.ts\nimport { experimental_AstroContainer as AstroContainer } from 'astro/container'\nimport BlockRenderer from '../../components/BlockRenderer.astro'\n\nexport const POST = async ({ request }) => {\n  const { unit, formData } = await request.json()\n  const container = await AstroContainer.create()\n  // BlockRenderer.astro emits data-block-uid + data-edit-* attributes \u2014\n  // same DOM contract as the other tabs, just produced server-side.\n  const html = await container.renderToString(BlockRenderer, {\n    props: { unit, formData },\n  })\n  return new Response(html, { headers: { 'Content-Type': 'text/html' } })\n}", 
          "label": "Astro", 
          "language": "astro"
        }
      ]
    }, 
    "quickstart-heading": {
      "@type": "slate", 
      "plaintext": "Quick Start", 
      "value": [
        {
          "children": [
            {
              "text": "Quick Start"
            }
          ], 
          "type": "h2"
        }
      ]
    }, 
    "video-hero-001": {
      "@type": "video", 
      "align": "center", 
      "autoplay": true, 
      "controls": false, 
      "loop": true, 
      "muted": true, 
      "styles": {}, 
      "url": "/docs/static/hydra-demo"
    }, 
    "why-hydra-grid": {
      "@type": "gridBlock", 
      "blocks": {
        "box-enterprise": {
          "@type": "slate", 
          "plaintext": "Truly Decoupled. Your frontend is independent code you own. Upgrade the CMS without rewriting your site; switch frameworks and get the same editing experience.", 
          "value": [
            {
              "children": [
                {
                  "children": [
                    {
                      "text": "Truly Decoupled"
                    }
                  ], 
                  "type": "strong"
                }
              ], 
              "type": "p"
            }, 
            {
              "children": [
                {
                  "text": "Your frontend is independent code you own. Upgrade the CMS without rewriting your site; switch frameworks and get the same editing experience."
                }
              ], 
              "type": "p"
            }
          ]
        }, 
        "box-frontend": {
          "@type": "slate", 
          "plaintext": "Any Frontend. Use React, Vue, Nuxt, Next.js, or any stack. Switch between frontends mid-edit for omni-channel delivery.", 
          "value": [
            {
              "children": [
                {
                  "children": [
                    {
                      "text": "Any Frontend"
                    }
                  ], 
                  "type": "strong"
                }
              ], 
              "type": "p"
            }, 
            {
              "children": [
                {
                  "text": "Use React, Vue, Nuxt, Next.js, or any stack. Switch between frontends mid-edit for omni-channel delivery."
                }
              ], 
              "type": "p"
            }
          ]
        }, 
        "box-opensource": {
          "@type": "slate", 
          "plaintext": "Open Source. Secure, scalable Plone backend. Host anywhere, control your costs and security.", 
          "value": [
            {
              "children": [
                {
                  "children": [
                    {
                      "text": "Open Source"
                    }
                  ], 
                  "type": "strong"
                }
              ], 
              "type": "p"
            }, 
            {
              "children": [
                {
                  "text": "Secure, scalable Plone backend. Host anywhere, control your costs and security."
                }
              ], 
              "type": "p"
            }
          ]
        }, 
        "box-visual": {
          "@type": "slate", 
          "plaintext": "Visual Editing. True WYSIWYG with drag-and-drop blocks. No special frontend framework required \u2014 just HTML attributes.", 
          "value": [
            {
              "children": [
                {
                  "children": [
                    {
                      "text": "Visual Editing"
                    }
                  ], 
                  "type": "strong"
                }
              ], 
              "type": "p"
            }, 
            {
              "children": [
                {
                  "text": "True WYSIWYG with drag-and-drop blocks. No special frontend framework required \u2014 just HTML attributes."
                }
              ], 
              "type": "p"
            }
          ]
        }
      }, 
      "blocks_layout": {
        "items": [
          "box-visual", 
          "box-frontend", 
          "box-enterprise", 
          "box-opensource"
        ]
      }, 
      "styles": {}
    }, 
    "why-hydra-heading": {
      "@type": "slate", 
      "plaintext": "Why Hydra", 
      "styles": {}, 
      "value": [
        {
          "children": [
            {
              "text": "Why Hydra"
            }
          ], 
          "type": "h2"
        }
      ]
    }, 
    "why-hydra-quadrant": {
      "@type": "image", 
      "align": "center", 
      "size": "l", 
      "url": "/images/quadrant/@@download/image/quadrant.svg"
    }, 
    "why-hydra-tagline": {
      "@type": "slate", 
      "plaintext": "Most CMS platforms force a trade-off: visual editing or frontend freedom. Hydra gives you both.", 
      "styles": {}, 
      "value": [
        {
          "children": [
            {
              "text": "Most CMS platforms force a trade-off: visual editing or frontend freedom. Hydra gives you both."
            }
          ], 
          "type": "p"
        }
      ]
    }
  }, 
  "blocks_layout": {
    "items": [
      "hero-headline", 
      "hero-subhead", 
      "hero-cta", 
      "video-hero-001", 
      "why-hydra-heading", 
      "why-hydra-tagline", 
      "why-hydra-quadrant", 
      "why-hydra-grid", 
      "quickstart-heading", 
      "quickstart-code", 
      "303984b4-693a-408f-83f7-5a88b243d7db", 
      "fae599f3-e7d4-451b-a413-84355c796b7e", 
      "0ab1a8f7-2d26-4933-800c-2f10474afe63", 
      "e972541f-b114-494b-a51e-cc8b11c8207d", 
      "9567ae6d-191c-43f1-91cc-4288bbb98f88", 
      "0d0c0506-f9bb-48d8-af0a-1352d81b45de", 
      "2fac7e5d-affb-4a8e-969f-2fac4d08e0fd"
    ]
  }, 
  "contributors": [], 
  "creators": [
    "admin"
  ], 
  "description": "A Visual Headless CMS \u2014 true visual editing with drag and drop blocks using any frontend stack", 
  "effective": null, 
  "exclude_from_nav": false, 
  "expires": null, 
  "id": "Plone", 
  "is_folderish": true, 
  "items": [
    {
      "@id": "https://hydra-api.pretagov.com/docs", 
      "@type": "Document", 
      "description": "A Visual Headless CMS using Plone as a server, providing true visual editing with drag-and-drop blocks and editable text \u2014 with any frontend stack you choose.", 
      "effective": "2025-01-01T00:00:00+00:00", 
      "end": null, 
      "getObjSize": "0 KB", 
      "head_title": null, 
      "image_field": "", 
      "image_scales": null, 
      "mime_type": "text/plain", 
      "nav_title": null, 
      "review_state": "published", 
      "start": null, 
      "title": "Volto Hydra Documentation", 
      "type_title": "Page"
    }, 
    {
      "@id": "https://hydra-api.pretagov.com/plone-foundation.png", 
      "@type": "Image", 
      "description": "", 
      "effective": "1969-12-31T00:00:00+00:00", 
      "end": null, 
      "getObjSize": "49.5 KB", 
      "head_title": null, 
      "image_field": "image", 
      "image_scales": {
        "image": [
          {
            "content-type": "image/png", 
            "download": "@@images/image-2000-92ab2e42b40f35832171feb087dbabb8.png", 
            "filename": "image.png", 
            "height": 439, 
            "scales": {
              "great": {
                "download": "@@images/image-1200-38fc7a3e5c3b34521e9a8d6c6010a997.png", 
                "height": 263, 
                "width": 1200
              }, 
              "huge": {
                "download": "@@images/image-1600-df31a41255cd52b1a8ca77ae1e1eba65.png", 
                "height": 351, 
                "width": 1600
              }, 
              "icon": {
                "download": "@@images/image-32-aba31a5e7f65183750ea0b46d86db613.png", 
                "height": 7, 
                "width": 32
              }, 
              "large": {
                "download": "@@images/image-800-6eb7338b8c8fcb9660cb277bc7d5b412.png", 
                "height": 175, 
                "width": 800
              }, 
              "larger": {
                "download": "@@images/image-1000-972671d5a19d157eb06bb0730513e328.png", 
                "height": 219, 
                "width": 1000
              }, 
              "mini": {
                "download": "@@images/image-200-ba05a4360386e76c7a26a925a2410d47.png", 
                "height": 43, 
                "width": 200
              }, 
              "preview": {
                "download": "@@images/image-400-8ba5c686d872aebd6adf532477712838.png", 
                "height": 87, 
                "width": 400
              }, 
              "teaser": {
                "download": "@@images/image-600-eca57ccdf0158c9ba2ad298619f5ac01.png", 
                "height": 131, 
                "width": 600
              }, 
              "thumb": {
                "download": "@@images/image-128-1e5895a2f2edd372bf9e7eed5153383a.png", 
                "height": 28, 
                "width": 128
              }, 
              "tile": {
                "download": "@@images/image-64-f97569057ed26030bfa8ef32d9ae18b1.png", 
                "height": 14, 
                "width": 64
              }
            }, 
            "size": 50737, 
            "width": 2000
          }
        ]
      }, 
      "mime_type": "image/png", 
      "nav_title": null, 
      "review_state": null, 
      "start": null, 
      "title": "Plone Foundation Logo", 
      "type_title": "Image"
    }, 
    {
      "@id": "https://hydra-api.pretagov.com/images", 
      "@type": "Document", 
      "description": "", 
      "effective": "2024-03-08T15:35:00+00:00", 
      "end": null, 
      "getObjSize": "0 KB", 
      "head_title": null, 
      "image_field": "", 
      "image_scales": null, 
      "mime_type": "text/plain", 
      "nav_title": null, 
      "review_state": "published", 
      "start": null, 
      "title": "Images", 
      "type_title": "Page"
    }, 
    {
      "@id": "https://hydra-api.pretagov.com/templates", 
      "@type": "Folder", 
      "description": "Layout and block templates", 
      "effective": "2025-01-01T00:00:00+00:00", 
      "end": null, 
      "getObjSize": "0 KB", 
      "head_title": null, 
      "image_field": "", 
      "image_scales": null, 
      "mime_type": "text/plain", 
      "nav_title": null, 
      "review_state": "published", 
      "start": null, 
      "title": "Templates", 
      "type_title": "Folder"
    }, 
    {
      "@id": "https://hydra-api.pretagov.com/search", 
      "@type": "Document", 
      "description": "Search the site", 
      "effective": "1969-12-31T00:00:00+00:00", 
      "end": null, 
      "getObjSize": "0 KB", 
      "head_title": null, 
      "image_field": "", 
      "image_scales": null, 
      "mime_type": "text/plain", 
      "nav_title": null, 
      "review_state": "published", 
      "start": null, 
      "title": "Search", 
      "type_title": "Page"
    }
  ], 
  "items_total": 5, 
  "language": {
    "title": "English", 
    "token": "en"
  }, 
  "layout": "document_view", 
  "lock": {
    "locked": false, 
    "stealable": true
  }, 
  "parent": {}, 
  "relatedItems": [], 
  "review_state": null, 
  "rights": "", 
  "subjects": [], 
  "table_of_contents": null, 
  "title": "Volto Hydra", 
  "type_title": "Plone Site", 
  "working_copy": null, 
  "working_copy_of": null
}