{"id":20895935,"url":"https://github.com/dan-q/q23-drawings-as-wordpress-comments","last_synced_at":"2025-04-11T03:51:37.772Z","repository":{"id":253232840,"uuid":"836136310","full_name":"Dan-Q/q23-drawings-as-wordpress-comments","owner":"Dan-Q","description":"Extension to DanQ.me's \"Q23\" blog theme to allow selected posts to accept drawings as comments.","archived":false,"fork":false,"pushed_at":"2024-08-25T06:09:21.000Z","size":26,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T12:12:11.870Z","etag":null,"topics":["canvas","comment","comments","draw","drawing","wordpress"],"latest_commit_sha":null,"homepage":"https://danq.me/draw-me-a-comment","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-2.1","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Dan-Q.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-31T08:18:35.000Z","updated_at":"2024-10-22T01:05:13.000Z","dependencies_parsed_at":"2024-08-19T10:18:59.469Z","dependency_job_id":null,"html_url":"https://github.com/Dan-Q/q23-drawings-as-wordpress-comments","commit_stats":null,"previous_names":["dan-q/q23-drawings-as-wordpress-comments"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan-Q%2Fq23-drawings-as-wordpress-comments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan-Q%2Fq23-drawings-as-wordpress-comments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan-Q%2Fq23-drawings-as-wordpress-comments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan-Q%2Fq23-drawings-as-wordpress-comments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dan-Q","download_url":"https://codeload.github.com/Dan-Q/q23-drawings-as-wordpress-comments/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248339262,"owners_count":21087214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","comment","comments","draw","drawing","wordpress"],"created_at":"2024-11-18T10:31:25.448Z","updated_at":"2025-04-11T03:51:37.755Z","avatar_url":"https://github.com/Dan-Q.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Draw Me A Comment\n\nWhat if instead of _writing_ a comment on a WordPress blog post... you could _draw_ one?\n\nhttps://github.com/user-attachments/assets/62516c45-7c13-4d79-ab93-9b9b0e42da60\n\nThis codebase contains the requisite PHP and JS code to add this capability, on a post-by-post basis, to the \"Q23\" theme used on [DanQ.me](https://danq.me/).\nThe theme itself is closed-source (and without a doubt too tied-in to Dan's very-specific requirements to be of use to others anyway), but there's probably\nsufficient code in this repository that an ambitious soul could adapt it for use on their own WordPress site. Or even to convert it into a general-purpose\nWordPress plugin.\n\nIn the meantime: to see it at work, visit [DanQ.me/draw-me-a-comment](https://danq.me/draw-me-a-comment)\n\n### Design decisions\n\n- It is **deliberately difficult**: few colours, no eraser, and clumsy controls partially level the playing field between talented artists and the rest of us.\n- It works **with touch or mouse controls** so you can use whatever device you have.\n- The output is **animated**: re-drawn in the order that you drew it (but potentially accelerated).\n- It's **progressively-enhanced** so that regular comments still work just fine (even alongside drawn comments).\n\nSome inspiration may have been taken from _[Drawful](https://www.jackboxgames.com/games/the-jackbox-party-pack-1/drawful)_.\n\n### How does it work?\n\n**Important**: I needed to widen the `wp_comments.comment_content` column to `MEDIUMTEXT` e.g. `ALTER TABLE wp_comments MODIFY COLUMN comment_content MEDIUMTEXT;`\nbecause drawings are really big, otherwise even moderately-large drawings get truncated.\n\nFor posts with a particular piece of metadata set, some Javascript is injected (users without Javascript continue to see the regular comment form). The\nJavascript replaces the comment text box with a `\u003ccanvas\u003e`, and adds code to allow drawing on it.\n\nA `fetch` call retrieves a colour palette from the server: the palette is generated in PHP based on a combination of factors including the time, post ID, and\nnumber of already-existing comments, and the resulting palette is digitally signed to prevent modification by the artist.\n\nEach action (begin touch, move while touching, end touch, change pen colour) on the canvas is recorded by writing it to the (now-hidden) comment `\u003ctextarea\u003e`.\nCoordinates are rounded somewhat to save space. The commands are all a single letter to represent the operation, followed by one or two comma-separated numbers.\nThe whole thing is preceeded by an identification header and the signed palette obtained earlier. The database column to which comments are written has been\nwidened to accomodate them.\n\nWhen outputting a comment, these instructions are converted into an SVG. The SVG is broken into multiple `\u003cg\u003e`roups each consisting of some number of strokes\n(the number of strokes increases with each iteration, to gradually \"accelerate\" slow drawings). This can be drawn directly, as is is the case in the /wp-admin\ndashboard, but on the front-end an `IntersectionObserver` detects when the comment comes into the scroll area and it's then _animated_, drawing the strokes in\nthe same order as the original artist did. Clicking a partially-redrawn comment skips the animation to the end.\n\n### What does the backend look like?\n\nPretty much what you'd expect:\n\n![image](https://github.com/user-attachments/assets/a4cef94f-2a65-4de0-83ae-cc4173dfedf1)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan-q%2Fq23-drawings-as-wordpress-comments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdan-q%2Fq23-drawings-as-wordpress-comments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan-q%2Fq23-drawings-as-wordpress-comments/lists"}