{"html_url": "https://github.com/dogsheep/evernote-to-sqlite/issues/5#issuecomment-706834800", "issue_url": "https://api.github.com/repos/dogsheep/evernote-to-sqlite/issues/5", "id": 706834800, "node_id": "MDEyOklzc3VlQ29tbWVudDcwNjgzNDgwMA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-10-12T03:24:57Z", "updated_at": "2020-10-16T20:16:28Z", "author_association": "MEMBER", "body": "Here's my first attempt at a plugin for this:\r\n```python\r\nfrom datasette import hookimpl\r\nimport jinja2\r\n\r\nSTART = \"<en-note\"\r\nEND = \"</en-note>\"\r\nTEMPLATE = \"\"\"\r\n<div style=\"max-width: 500px; white-space: normal; overflow-wrap: break-word;\">{}</div>\r\n\"\"\".strip()\r\n\r\nEN_MEDIA_SCRIPT = \"\"\"\r\nArray.from(document.querySelectorAll('en-media')).forEach(el => {\r\n    let hash = el.getAttribute('hash');\r\n    let type = el.getAttribute('type');\r\n    let path = `/evernote/resources_data/${hash}.json?_shape=array`;\r\n    fetch(path).then(r => r.json()).then(rows => {\r\n        let b64 = rows[0].data.encoded;\r\n        let data = `data:${type};base64,${b64}`;\r\n        el.innerHTML = `<img style=\"max-width: 300px\" src=\"${data}\">`;\r\n    });\r\n});\r\n\"\"\"\r\n\r\n\r\n@hookimpl\r\ndef render_cell(value, table):\r\n    if not table:\r\n        # Don't render content from arbitrary SQL queries, could be XSS hole\r\n        return\r\n    if not value or not isinstance(value, str):\r\n        return\r\n    value = value.strip()\r\n    if value.startswith(START) and value.endswith(END):\r\n        trimmed = value[len(START) : -len(END)]\r\n        trimmed = trimmed.split(\">\", 1)[1]\r\n        # Replace those horrible double newlines\r\n        trimmed = trimmed.replace(\"<div><br /></div>\", \"<br>\")\r\n        return jinja2.Markup(TEMPLATE.format(trimmed))\r\n\r\n\r\n@hookimpl\r\ndef extra_body_script():\r\n    return EN_MEDIA_SCRIPT\r\n```\r\nIt works!\r\n\r\nIt does however demonstrate that Evernote's \"clip this webpage\" feature means there is a LOT of weird HTML that can get into a note. It looks like they've filtered out the scripts but I wouldn't bet on it - they certainly don't filter out many of the inline styles. So running Bleach is almost certainly a good idea.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 718938889, "label": "Figure out how to display images from <en-media> tags inline in Datasette"}, "performed_via_github_app": null}
{"html_url": "https://github.com/dogsheep/evernote-to-sqlite/issues/5#issuecomment-706776808", "issue_url": "https://api.github.com/repos/dogsheep/evernote-to-sqlite/issues/5", "id": 706776808, "node_id": "MDEyOklzc3VlQ29tbWVudDcwNjc3NjgwOA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-10-11T22:23:14Z", "updated_at": "2020-10-11T22:23:14Z", "author_association": "MEMBER", "body": "... but it's still important to be able to get to the rendered note directly from the browse notes `/evernote/notes` page. Maybe use a simple `render_cell()` hook that just knows how to generate the link to the rendered note page?", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 718938889, "label": "Figure out how to display images from <en-media> tags inline in Datasette"}, "performed_via_github_app": null}
{"html_url": "https://github.com/dogsheep/evernote-to-sqlite/issues/5#issuecomment-706776680", "issue_url": "https://api.github.com/repos/dogsheep/evernote-to-sqlite/issues/5", "id": 706776680, "node_id": "MDEyOklzc3VlQ29tbWVudDcwNjc3NjY4MA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-10-11T22:22:16Z", "updated_at": "2020-10-11T22:22:16Z", "author_association": "MEMBER", "body": "Maybe the best way do this is with a custom route, `/-/evernote/note-id` - that way I can clean the HTML and resolve the other things in the `<en-note>` structure without using `render_cell()` and the like. My concern about using `render_cell()` is that it could lead to weird security problems when combined with `?sql=` queries.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 718938889, "label": "Figure out how to display images from <en-media> tags inline in Datasette"}, "performed_via_github_app": null}
{"html_url": "https://github.com/dogsheep/evernote-to-sqlite/issues/5#issuecomment-706776447", "issue_url": "https://api.github.com/repos/dogsheep/evernote-to-sqlite/issues/5", "id": 706776447, "node_id": "MDEyOklzc3VlQ29tbWVudDcwNjc3NjQ0Nw==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-10-11T22:20:32Z", "updated_at": "2020-10-11T22:20:32Z", "author_association": "MEMBER", "body": "Or... I could do this client-side. JavaScript that looks for `<en-media>` tags and fetches the data using `fetch()` wouldn't be too hard to write.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 718938889, "label": "Figure out how to display images from <en-media> tags inline in Datasette"}, "performed_via_github_app": null}
{"html_url": "https://github.com/dogsheep/evernote-to-sqlite/issues/5#issuecomment-706776242", "issue_url": "https://api.github.com/repos/dogsheep/evernote-to-sqlite/issues/5", "id": 706776242, "node_id": "MDEyOklzc3VlQ29tbWVudDcwNjc3NjI0Mg==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-10-11T22:18:30Z", "updated_at": "2020-10-11T22:19:48Z", "author_association": "MEMBER", "body": "Alternatively, rather than relying on `datasette-media` this could base64-embed the images. `evernote-to-sqlite` could register itself as a Datasette plugin that knows how to do this.\r\n\r\nMaybe rename the column to `evernote_content` and register a render cell hook that knows how to rewrite those note bodies so that they are visible?\r\n\r\nMight need to feed them through Bleach too, just in case any nasty code can get into them.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 718938889, "label": "Figure out how to display images from <en-media> tags inline in Datasette"}, "performed_via_github_app": null}
{"html_url": "https://github.com/dogsheep/evernote-to-sqlite/issues/5#issuecomment-706776180", "issue_url": "https://api.github.com/repos/dogsheep/evernote-to-sqlite/issues/5", "id": 706776180, "node_id": "MDEyOklzc3VlQ29tbWVudDcwNjc3NjE4MA==", "user": {"value": 9599, "label": "simonw"}, "created_at": "2020-10-11T22:17:55Z", "updated_at": "2020-10-11T22:17:55Z", "author_association": "MEMBER", "body": "We could even do server-side thumbnailing for some of these images, but I'm inclined to serve up the full size ones and set a width on the image element based on the `width` attribute on `<en-media>`.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 718938889, "label": "Figure out how to display images from <en-media> tags inline in Datasette"}, "performed_via_github_app": null}