Example Document Snapshots

Hosted on gabo.es via the Hypermedia Protocol.

Seed Developers Brainstorming Structure in Seed Hypermedia How to form References in Seed Hypermedia

Site with Outline Navigation

A document snapshot of a Home Document:

{
  "name": "F1 Fans",
  "content": [
    {
      "block": {
        "id": "block1",
        "type": "Heading",
        "text": "Teams",
        "style": "h1"
      },
      "children": [
        {
          "block": {
            "id": "block2",
            "type": "Heading",
            "text": "Ferrari"
          },
          "children": [
            {
              "block": {
                "id": "block3",
                "type": "Paragraph",
                "text": "Founded by Enzo Ferrari in 1929"
              }
            }
          ]
        },
        {
          "block": {
            "id": "block2",
            "type": "Heading",
            "text": "Mercedes"
          },
          "children": [
            {
              "block": {
                "id": "block3",
                "type": "Paragraph",
                "text": "First raced in 1954"
              }
            }
          ]
        }
      ]
    }
  ]
}

This Document will have the following Navigation structure. Because the navigation is not explicitly defined in the document, the nav is an Outline of the Document content:

Teams

Ferrari

Mercedes

Site with Shared Sidebar

A Sub-Document may embed the navigation of a parent document. Imagine there is a document /teams/ferarri:

{
  "name": "Ferrari",
  "content": [],
  "navigation": [
    {
      "block": {
        "id": "block1",
        "type": "Heading",
        "text": "Drivers",
        "style": "h1"
      },
      "children": [
        {
          "block": {
            "id": "block2",
            "type": "Embed",
            "link": "hm://123/teams/ferrari/drivers/louis-hamilton",
            "view": "Card"
          }
        },
        {
          "block": {
            "id": "block3",
            "type": "Embed",
            "link": "hm://123/teams/ferrari/drivers/charles-leclerc",
            "view": "Card"
          }
        }
      ]
    }
  ]
}

This Document will have the navigation structure:

Drivers

Louis Hamilton

Charles Leclerk

The driver document is located at /teams/ferrari/drivers/louis-hamilton:

{
  "name": "Louis Hamilton",
  "content": [],
  "navigation": [
    {
      "block": {
        "id": "block1",
        "type": "Embed",
        "link": "hm://123/teams/ferrari",
        "view": "Navigation"
      }
    }
  ]
}

The navigation structure matches the drivers doc. When you click on "Louis Hamilton" from the drivers navigaion, the Louis page highlights and the navigation content stays the same.

Activity