<https://docs.linkeddatahub.com/tutorial/composition/>
        a       <https://w3id.org/atomgraph/linkeddatahub/document-hierarchy#Item>;
        <http://www.w3.org/1999/02/22-rdf-syntax-ns#_1>
                <https://docs.linkeddatahub.com/tutorial/composition/#content>;
        <http://purl.org/dc/terms/created>
                "2026-09-29T09:52:41.479Z"^^<http://www.w3.org/2001/XMLSchema#dateTime>;
        <http://purl.org/dc/terms/creator>
                <https://admin.linkeddatahub.com/acl/agents/5ba81960-d511-4a3b-8b9a-cb5bb278dd95/#this>;
        <http://purl.org/dc/terms/description>
                "Assemble the landing page from content blocks";
        <http://purl.org/dc/terms/title>
                "Composition";
        <http://rdfs.org/sioc/ns#has_container>
                <https://docs.linkeddatahub.com/tutorial/>;
        <http://www.w3.org/ns/auth/acl#owner>
                <https://admin.linkeddatahub.com/acl/agents/5ba81960-d511-4a3b-8b9a-cb5bb278dd95/#this> .

<https://docs.linkeddatahub.com/tutorial/composition/#content>
        a       <https://w3id.org/atomgraph/linkeddatahub#XHTML>;
        <http://www.w3.org/1999/02/22-rdf-syntax-ns#value>
                "<div xmlns=\"http://www.w3.org/1999/xhtml\">\n    <p class=\"ldh-body-lg\">Assemble the landing page from content blocks</p>\n    <p>Everything the app can show is now in place — text, data, charts, views. The landing page is their composition: an ordered sequence of\n        <a href=\"../../reference/data-model/blocks/\" target=\"_blank\">content blocks</a> on the root document. Two block types exist: <code>ldh:XHTML</code> holds authored markup, and\n        <code>ldh:Object</code> embeds any other resource — a chart, a view, a document.</p>\n    <p>The demo's finished root document interleaves them into an executive dashboard:</p>\n    <pre>&lt;&gt; a def:Root ;\n    dct:title \"Northwind Traders\" ;\n    rdf:_1 &lt;#overview-intro&gt; ;                 # XHTML   — \"Executive dashboard\" intro\n    rdf:_2 &lt;#sales-trend-block&gt; ;              # Object  — monthly sales line chart\n    rdf:_3 &lt;#margin-intro&gt; ;                   # XHTML   — \"What the deals cost\"\n    rdf:_4 &lt;#discount-rate-block&gt; ;            # Object  — discount rate line chart\n    rdf:_5 &lt;#revenue-by-country-block&gt; ;       # Object  — revenue by country bar chart\n    rdf:_6 &lt;products/#top-selling-products&gt; ;  # Object  — chart reused from Products\n    rdf:_7 &lt;#top-manager-header&gt; ;             # XHTML   — \"Sales leadership\"\n    rdf:_8 &lt;#top-manager&gt; ;                    # Object  — embeds &lt;employees/2/#this&gt;\n    rdf:_9 &lt;#navigation-prompt&gt; ;              # XHTML   — where to go next\n    rdf:_10 &lt;#select-children&gt; .               # Object  — children view</pre>\n    <p class=\"exhibit-links\">Source: <a href=\"https://github.com/AtomGraph/LinkedDataHub-Apps/blob/master/demo/northwind-traders/root.ttl\" target=\"_blank\">root.ttl</a> · Live: <a href=\"https://northwind-traders.demo.linkeddatahub.com/\" target=\"_blank\">the dashboard</a></p>\n    <p>Two of the blocks show how far transclusion reaches. <code>rdf:_6</code> embeds a chart that is <em>defined on the Products container</em> — the same\n        resource renders on both pages, so an insight is authored once and placed wherever it is needed. <code>rdf:_8</code> embeds a plain data resource:\n        <code>&lt;employees/2/#this&gt;</code>, the Vice President of Sales, rendered with his description and photo — no special profile widget exists; the\n        default rendering of the resource <em>is</em> the widget.</p>\n    <p>The narrative rhythm — prose, then evidence, then prose — is an editorial choice, and it is made entirely in data: reordering the page means renumbering <code>rdf:_N</code>.</p>\n    <div class=\"ac-tabs or-horizontal\">\n        <div class=\"ac-tablist sz-md va-line\" role=\"tablist\">\n            <button aria-controls=\"in-the-browser-pane\" aria-selected=\"true\" class=\"ac-tab is-on\" id=\"in-the-browser-tab\" role=\"tab\" type=\"button\"><span class=\"ac-tab-lbl\">In the browser</span></button>\n            <button aria-controls=\"from-the-command-line-pane\" aria-selected=\"false\" class=\"ac-tab\" id=\"from-the-command-line-tab\" role=\"tab\" type=\"button\"><span class=\"ac-tab-lbl\">From the command line</span></button>\n        </div>\n        <div aria-labelledby=\"in-the-browser-tab\" class=\"ac-tabpanel\" id=\"in-the-browser-pane\" role=\"tabpanel\">\n        <p>With the <a href=\"../../reference/user-interface/#layout-modes\" target=\"_blank\">Content layout mode</a> active, append blocks with the\n            <span class=\"ac-btn in-primary ap-solid sz-md\">XHTML</span> and <span class=\"ac-btn in-primary ap-solid sz-md\">Object</span> buttons at the bottom of the page. Reorder by dragging a block by\n            its drag handle and dropping it in a different position.</p>\n        </div>\n        <div aria-labelledby=\"from-the-command-line-tab\" class=\"ac-tabpanel\" hidden=\"hidden\" id=\"from-the-command-line-pane\" role=\"tabpanel\">\n        <p>The composition is the <samp>root.ttl</samp> of the <a href=\"../hello-dataspace/\">first stage</a>, grown to its final form and applied with the same <code>PUT</code>:</p>\n        <pre>ldh put \"$LDH_BASE\" root.ttl</pre>\n        <p>To reorder, renumber the <code>rdf:_N</code> properties in the file and <code>PUT</code> it again — <code>PUT</code> replaces the document's description outright.</p>\n        </div>\n    </div>\n    <div>\n        <h2 id=\"result\">What you now see</h2>\n        <p>The homepage is the finished dataspace: branded header, live charts over the imported graph, and navigation into the containers — all of it driven by one document's\n            description.</p>\n        <img alt=\"The finished Northwind landing page\" src=\"/uploads/4634992ca1715ade5ff9f5a1201c2c18db1a63fb\"></img>\n    </div>\n    <div>\n        <h2 id=\"how-this-works\">How this works</h2>\n        <ul>\n            <li><a href=\"../../reference/data-model/blocks/\" target=\"_blank\">Content blocks</a> — XHTML and object blocks, their RDF serialization and their management</li>\n        </ul>\n    </div>\n    <p class=\"ldh-body-lg\">Next: <a href=\"../publish/\">Publish</a></p>\n</div>"^^<http://www.w3.org/1999/02/22-rdf-syntax-ns#XMLLiteral> .
