"\n    <!DOCTYPE html>\n    <html>\n        <head>\n            <title>All Posts</title>\n            <style>\n    body {\n        margin: 0;\n        padding: 0;\n        font-family: system-ui, sans-serif;\n    }\n    header {\n        text-align: center;\n    }\n    h4 {\n        margin-top: -1rem;\n        margin-bottom: 2rem;\n        font-weight: 300;\n    }\n    main {\n        width: 600px;\n        max-width: 100%;\n        margin: 1rem auto;\n        @media (max-width: 600px) {\n            width: 90%;\n        }\n    }\n    article {\n        border: 1px solid #888;\n        margin-bottom: 1.25rem;\n        padding: 1rem;\n        opacity: 1;\n        transition: opacity 500ms ease;\n    }\n    article.htmx-added {\n        opacity: 0;\n    }\n    form {\n        display: flex;\n        align-items: center;\n        gap: 1rem;\n    }\n    button {\n        display: flex;\n        padding: 0.25rem;\n    }\n    img {\n        width: 100%;\n        max-width: 100%;\n        max-height: calc((600px * 9) / 16);\n        object-fit: cover;\n        display: block;\n    }\n    section {\n        margin: 1rem 0;\n    }\n    footer {\n        text-align: center;\n        padding: 2rem;\n    }\n    nav {\n        text-align: center;\n        position: absolute;\n        right: 1rem;\n    }\n</style>\n            <script src=\"https://unpkg.com/htmx.org@2.0.0-alpha1/dist/htmx.min.js\"></script>\n            <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        </head>\n        <body hx-headers='{\"Accept\": \"text/html\"}'>\n            \n    <header>\n        <h1><a href=\"/\">pgrender.org</a></h1>\n        <h4>Example site running pg_render, PostgREST and HTMX</h4>\n        <code><a href=\"https://github.com/mkaski/pg_render_example\">View source</a></code>\n    </header>\n            <main>\n                \n    <article>\n        <form hx-post=\"/rpc/like\" hx-target=\"find span\">\n            <button name=\"id\" value=\"1\" type=\"submit\">\n                Like\n            </button>\n            <label><span>7</span> likes</label>\n        </form>\n        <a href=\"/post/1\">\n            <h2>Demo Post #1</h2>\n        </a>\n        <section>This page is rendered entirely in PostgreSQL using PostgREST, pg_render and HTMX.</section>\n        <img src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMjAwIj4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2YwZjBmMCIvPgo8L3N2Zz4=\" alt=\"Demo Post #1\">\n    </article>\n    <article>\n        <form hx-post=\"/rpc/like\" hx-target=\"find span\">\n            <button name=\"id\" value=\"2\" type=\"submit\">\n                Like\n            </button>\n            <label><span>6</span> likes</label>\n        </form>\n        <a href=\"/post/2\">\n            <h2>Demo Post #2</h2>\n        </a>\n        <section>Placeholder content for a demo blog. Demo content to illustrate the structure of a blog post entry.</section>\n        <img src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmx1ZUdyYWRpZW50IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6I0U2RjJGRjtzdG9wLW9wYWNpdHk6MSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjojQjBENEYwO3N0b3Atb3BhY2l0eToxIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InVybCgjYmx1ZUdyYWRpZW50KSIvPgo8L3N2Zz4=\" alt=\"Demo Post #2\">\n    </article>\n    <article>\n        <form hx-post=\"/rpc/like\" hx-target=\"find span\">\n            <button name=\"id\" value=\"3\" type=\"submit\">\n                Like\n            </button>\n            <label><span>4</span> likes</label>\n        </form>\n        <a href=\"/post/3\">\n            <h2>Demo Post #3</h2>\n        </a>\n        <section>Sample text for a blog post. This serves as a placeholder for demonstration.</section>\n        <img src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMjAwIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNhN2M3ZTciLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzFlMWMxIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkKSIvPgo8L3N2Zz4=\" alt=\"Demo Post #3\">\n    </article>\n                \n    \n        <nav></nav>\n        <nav hx-get=\"/rpc/load_more?page=2\" hx-trigger=\"revealed\" hx-swap=\"afterend\" />\n    \n    <div class=\"htmx-indicator\">Loading...</div>\n\n            </main>\n            \n    <footer>\n        <small><a href=\"https://github.com/mkaski/pg_render\">pg_render</a></small>\n    </footer>\n        </body>\n    </html>"