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":false,"toc-showcode":false,"toc-showtags":true},"nbformat_minor":4,"nbformat":4,"cells":[{"cell_type":"markdown","source":"# U.tter.anc.es 🇪🇸 in IPython🐍 (& Pyolite💡)\n\n[utteranc.es](https://utteranc.es) provides a number of clever ways to re-use GitHub issue comments inside other content, once enabled through a service account. The `U.tter()` rich display can shows these in a notebook... plus some badges made by [shields.io](https://shields.io)🛡️).","metadata":{}},{"cell_type":"code","source":"import re\nfrom uuid import uuid4\nimport random\ntry:\n    from IPython.display import *\n    __main_name__ = \"__main__\"\nexcept:\n    from pyolite.display import *\n    __main_name__ = \"__console__\"","metadata":{"trusted":true},"execution_count":383,"outputs":[]},{"cell_type":"code","source":"class U:\n    @staticmethod\n    def random(*args, **kwargs):\n        for field, opts in U.RANDOM.items():\n            kwargs.update({field: random.choice(opts)})\n        return U.tter(*args, **kwargs)\n        \n    @staticmethod\n    def tter(\n        url=None,\n        label=None,\n        repo=None,\n        issue=None, \n        theme=None,\n        style=None,\n        badges=None,\n    ):\n        utter_class = f\"uttered-{uuid4()}\"\n        style = style or U.STYLES[0]\n        theme = theme or U.THEMES[0]\n        if url:\n            bits = url.replace(\"https://\", \"\").split(\"/\")\n            repo = f\"{bits[1]}/{bits[2]}\"\n            issue = bits[4]\n        else:\n            repo = repo or \"utterance/utterances\"\n            issue = issue or \"1\"\n            url = f\"https://github.com/{repo}/issues/{issue}\"\n        label = label or f\"{repo}#{issue}\"\n        badges = badges if badges else U.SHIELDS if badges is None else {}\n        gha = f\"\"\"<a target=\"about:blank\" href=\"{url}\" \"\"\"\n        ghi = f\"\"\"<i class=\"fa fa-github\"></i>\"\"\"\n        shields = \"\".join([\n            f\"\"\"<img \n                alt=\"{label} {fld}\"\n                title=\"{label} {fld}\"\n                src=\"https://img.shields.io/github/issues/detail/{fld}/{repo}/{issue}?style={style}{'&label=' + lbl if lbl else ''}\" \n                />\n            \"\"\" \n            for fld, lbl in badges.items()\n        ])\n        return HTML(f\"\"\"\n        <div class=\"uttered {utter_class}\" title=\"{label}\">\n            <h2>{gha}>{ghi} {label}</a></h2>\n            <blockquote>{gha}>{shields}<label>{ghi} {label}</label></a></blockquote>\n            <script async src=\"https://utteranc.es/client.js\" crossorigin=\"anonymous\" \n                repo=\"{repo}\" issue-number=\"{issue}\" theme=\"{theme}\">\n            </script>\n            <style>{U.CSS.format(utter_class=utter_class)}</style>\n        </div>\n        \"\"\")\n    SHIELDS = {\"title\": \"📛\", \"state\": \"is\", \"age\": \"⏳\", \"last-update\": \"📆\", \"comments\": \"💬\"}\n    STYLES = [\"social\", \"flat\", \"plastic\",  \"flat-square\", \"for-the-badge\"]\n    THEMES = [\"preferred-color-scheme\", \"github-light\", \"github-dark\", \"github-dark-orange\", \"icy-dark\", \"dark-blue\", \"boxy-light\", \"photon-dark\"]\n    RANDOM = {\"theme\": THEMES, \"style\": STYLES}\n    CSS = \"\"\"\n        .{utter_class} {{\n            max-height: 90vh; \n            overflow-y: auto; \n            flex: 1; \n            height: 100%; \n        }}\n        .{utter_class} h2 {{ padding: 2em 1em 0 1em; }}\n        .{utter_class} 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            cursor: pointer;\n            display: flex;\n        }}\n        .{utter_class} blockquote:hover {{ \n            opacity: 1;\n            transition: all 0.5s;\n        }}\n        .{utter_class} blockquote i {{\n            font-size: 1em;\n        }}\n        .{utter_class} blockquote img {{\n            opacity: 0.5;\n            transition: all 0.2s;\n        }}\n        .{utter_class} blockquote img:hover,\n        .{utter_class} blockquote img:focus {{\n            opacity: 1.0;\n            transition: all 0.2s;\n        }}\n        .{utter_class} blockquote a {{\n            padding: 0.25em;\n            display: flex;\n            flex-wrap: wrap;\n            align-items: center;\n            justify-content: space-between;\n            font-weight: bold;\n            align-items: baseline;\n            flex: 1;\n        }}\n        .{utter_class} blockquote label {{\n            border-radius: 0.5em;\n            padding: 0 1em 0 0;\n            width: 100%;\n            cursor: pointer;\n        }}\n    \"\"\"","metadata":{"trusted":true},"execution_count":384,"outputs":[]},{"cell_type":"code","source":"if __name__ == __main_name__:\n    display(U.random())","metadata":{"trusted":true},"execution_count":385,"outputs":[{"output_type":"display_data","data":{"text/plain":"<pyolite.display.HTML object at 0x1487f38>","text/html":"\n        <div class=\"uttered uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea\" title=\"utterance/utterances#1\">\n            <h2><a target=\"about:blank\" href=\"https://github.com/utterance/utterances/issues/1\" ><i class=\"fa fa-github\"></i> utterance/utterances#1</a></h2>\n            <blockquote><a target=\"about:blank\" href=\"https://github.com/utterance/utterances/issues/1\" ><img \n                alt=\"utterance/utterances#1 title\"\n                title=\"utterance/utterances#1 title\"\n                src=\"https://img.shields.io/github/issues/detail/title/utterance/utterances/1?style=flat&label=📛\" \n                />\n            <img \n                alt=\"utterance/utterances#1 state\"\n                title=\"utterance/utterances#1 state\"\n                src=\"https://img.shields.io/github/issues/detail/state/utterance/utterances/1?style=flat&label=is\" \n                />\n            <img \n                alt=\"utterance/utterances#1 age\"\n                title=\"utterance/utterances#1 age\"\n                src=\"https://img.shields.io/github/issues/detail/age/utterance/utterances/1?style=flat&label=⏳\" \n                />\n            <img \n                alt=\"utterance/utterances#1 last-update\"\n                title=\"utterance/utterances#1 last-update\"\n                src=\"https://img.shields.io/github/issues/detail/last-update/utterance/utterances/1?style=flat&label=📆\" \n                />\n            <img \n                alt=\"utterance/utterances#1 comments\"\n                title=\"utterance/utterances#1 comments\"\n                src=\"https://img.shields.io/github/issues/detail/comments/utterance/utterances/1?style=flat&label=💬\" \n                />\n            <label><i class=\"fa fa-github\"></i> utterance/utterances#1</label></a></blockquote>\n            <script async src=\"https://utteranc.es/client.js\" crossorigin=\"anonymous\" \n                repo=\"utterance/utterances\" issue-number=\"1\" theme=\"boxy-light\">\n            </script>\n            <style>\n        .uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea {\n            max-height: 90vh; \n            overflow-y: auto; \n            flex: 1; \n            height: 100%; \n        }\n        .uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea h2 { padding: 2em 1em 0 1em; }\n        .uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea 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            cursor: pointer;\n            display: flex;\n        }\n        .uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea blockquote:hover { \n            opacity: 1;\n            transition: all 0.5s;\n        }\n        .uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea blockquote i {\n            font-size: 1em;\n        }\n        .uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea blockquote img {\n            opacity: 0.5;\n            transition: all 0.2s;\n        }\n        .uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea blockquote img:hover,\n        .uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea blockquote img:focus {\n            opacity: 1.0;\n            transition: all 0.2s;\n        }\n        .uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea blockquote a {\n            padding: 0.25em;\n            display: flex;\n            flex-wrap: wrap;\n            align-items: center;\n            justify-content: space-between;\n            font-weight: bold;\n            align-items: baseline;\n            flex: 1;\n        }\n        .uttered-34c4ac34-ab8c-4bb6-91dd-bf587632bdea blockquote label {\n            border-radius: 0.5em;\n            padding: 0 1em 0 0;\n            width: 100%;\n            cursor: pointer;\n        }\n    </style>\n        </div>\n        "},"metadata":{}}]},{"cell_type":"code","source":"","metadata":{},"execution_count":null,"outputs":[]}]}