the utterances commenting system inside of the browser only jupyterlite interactive computing interface

readme.md

utterance.ipynb

{"metadata":{"language_info":{"codemirror_mode":{"name":"python","version":3},"file_extension":".py","mimetype":"text/x-python","name":"python","nbconvert_exporter":"python","pygments_lexer":"ipython3","version":"3.8"},"kernelspec":{"name":"python","display_name":"Pyolite","language":"python"},"toc-autonumbering":true,"toc-showmarkdowntxt":true,"toc-showcode":true,"toc-showtags":true},"nbformat_minor":4,"nbformat":4,"cells":[{"cell_type":"markdown","source":"# A quick utteranc.es for IPython and Pyolite","metadata":{}},{"cell_type":"code","source":"try:\n    from IPython.display import *\n    __main_name__ = \"__main__\"\nexcept:\n    from pyolite.display import *\n    __main_name__ = \"__console__\"","metadata":{"trusted":true},"execution_count":193,"outputs":[]},{"cell_type":"code","source":"def utter(\n    repo=\"utterance/utterances\", \n    issue=\"1\", \n    theme=\"preferred-color-scheme\",\n    style=\"social\"\n):\n    gh_html = f\"https://github.com/{repo}/issues/{issue}\"\n    gha = f\"\"\"<a target=\"about:blank\" href=\"{gh_html}\" \"\"\"\n    ghi = f\"\"\"<i class=\"fa fa-github\"></i>\"\"\"\n    shield = lambda field, label: f\"\"\"\n        <img src=\"https://img.shields.io/github/issues/detail/{field}/{repo}/{issue}?style={style}{'&label=' + label if label else ''}\" />\n    \"\"\"\n    return HTML(f\"\"\"\n    <div class=\"uttered\">\n        <h2>{gha}>@{repo}#{issue} {ghi}</a></h2>\n        <blockquote>\n            {gha}>\n            {shield(\"title\", \"\")}\n            {shield(\"state\", \"is\")}\n            {shield(\"comments\", \"💬\")}\n            {shield(\"comments\", \"📆\")}\n            <code>{repo} {ghi}</code>\n            </a>\n        </blockquote>\n        <script async src=\"https://utteranc.es/client.js\" crossorigin=\"anonymous\" \n            repo=\"{repo}\" issue-number=\"{issue}\" theme=\"{theme}\">\n        </script>\n    </div>\n    <style>\n        .uttered {{ \n            max-height: 90vh; \n            overflow-y: auto; \n            flex: 1; \n            height: 100%; \n        }}\n        .uttered h2 {{ padding: 2em 1em 0 1em; }}\n        .uttered blockquote {{ \n            padding-left: 0;\n            padding-top: 0.5em;\n            margin-left: 0;\n            position: absolute; \n            top: -0.25em; \n            right: 0.5em;\n            left: 0;\n            z-index: 1; \n            background-color: var(--jp-layout-color1); \n            padding: 0.25em; \n            border-radius: 0.25em;\n            opacity: 0.8;\n            margin: 0;\n            transition: opacity 0.5s;\n        }}\n        .uttered blockquote:hover {{ \n            opacity: 1;\n            transition: all 0.5s;\n        }}\n        .uttered blockquote i {{\n            font-size: 1em;\n        }}\n        .uttered blockquote a {{ \n            padding: 0.25em;\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n            justify-content: space-between;\n        }}\n        .uttered blockquote code {{\n            border-radius: 0.5em;\n        }}\n    </style>\n    \"\"\")","metadata":{"trusted":true},"execution_count":230,"outputs":[]},{"cell_type":"code","source":"if __name__ == __main_name__:\n    display(utter())","metadata":{"trusted":true},"execution_count":231,"outputs":[{"output_type":"display_data","data":{"text/plain":"<pyolite.display.HTML object at 0x1ac8dc0>","text/html":"\n    <div class=\"uttered\">\n        <h2><a target=\"about:blank\" href=\"https://github.com/utterance/utterances/issues/1\" >@utterance/utterances#1 <i class=\"fa fa-github\"></i></a></h2>\n        <blockquote>\n            <a target=\"about:blank\" href=\"https://github.com/utterance/utterances/issues/1\" >\n            \n        <img src=\"https://img.shields.io/github/issues/detail/title/utterance/utterances/1?style=social\" />\n    \n            \n        <img src=\"https://img.shields.io/github/issues/detail/state/utterance/utterances/1?style=social&label=is\" />\n    \n            \n        <img src=\"https://img.shields.io/github/issues/detail/comments/utterance/utterances/1?style=social&label=💬\" />\n    \n            \n        <img src=\"https://img.shields.io/github/issues/detail/comments/utterance/utterances/1?style=social&label=📆\" />\n    \n            <code>utterance/utterances <i class=\"fa fa-github\"></i></code>\n            </a>\n        </blockquote>\n        <script async src=\"https://utteranc.es/client.js\" crossorigin=\"anonymous\" \n            repo=\"utterance/utterances\" issue-number=\"1\" theme=\"preferred-color-scheme\">\n        </script>\n    </div>\n    <style>\n        .uttered { \n            max-height: 90vh; \n            overflow-y: auto; \n            flex: 1; \n            height: 100%; \n        }\n        .uttered h2 { padding: 2em 1em 0 1em; }\n        .uttered blockquote { \n            padding-left: 0;\n            padding-top: 0.5em;\n            margin-left: 0;\n            position: absolute; \n            top: -0.25em; \n            right: 0.5em;\n            left: 0;\n            z-index: 1; \n            background-color: var(--jp-layout-color1); \n            padding: 0.25em; \n            border-radius: 0.25em;\n            opacity: 0.8;\n            margin: 0;\n            transition: opacity 0.5s;\n        }\n        .uttered blockquote:hover { \n            opacity: 1;\n            transition: all 0.5s;\n        }\n        .uttered blockquote i {\n            font-size: 1em;\n        }\n        .uttered blockquote a { \n            padding: 0.25em;\n            display: flex;\n            flex-direction: row;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .uttered blockquote code {\n            border-radius: 0.5em;\n        }\n    </style>\n    "},"metadata":{}}]},{"cell_type":"code","source":"","metadata":{},"execution_count":null,"outputs":[]}]}