{"id":23430161,"url":"https://github.com/softplus/static-social-posts","last_synced_at":"2025-04-12T21:36:23.492Z","repository":{"id":155417269,"uuid":"362116492","full_name":"softplus/static-social-posts","owner":"softplus","description":"Embedding social posts in a privacy-preserving way -- using Hugo and Puppeteer","archived":false,"fork":false,"pushed_at":"2022-11-05T20:52:51.000Z","size":115,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T15:48:07.985Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/softplus.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":"2021-04-27T13:10:18.000Z","updated_at":"2024-12-08T12:19:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"32c821ec-8284-47c8-94ff-8e81f7aed323","html_url":"https://github.com/softplus/static-social-posts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softplus%2Fstatic-social-posts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softplus%2Fstatic-social-posts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softplus%2Fstatic-social-posts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/softplus%2Fstatic-social-posts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/softplus","download_url":"https://codeload.github.com/softplus/static-social-posts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248637447,"owners_count":21137533,"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":[],"created_at":"2024-12-23T08:16:02.285Z","updated_at":"2025-04-12T21:36:23.486Z","avatar_url":"https://github.com/softplus.png","language":"JavaScript","readme":"# static-social-posts\nEmbedding social posts in a privacy-preserving way -- using Hugo and Puppeteer. \n\nThis code renders tweets locally and embeds them as a screenshot in your posts.\nThis means users don't need to load Twitter scripts when viewing your pages, making everything faster \u0026 more private.\n\nIt currently supports Twitter / tweets. \nI'll expand for the other kinds of content (videos, posts, whatever) when I have time. \n\nSample at https://johnmu.com/tweet-screenshot-embeds/ (and below)\n\nBuilt on the [Hugo shortcodes](https://gohugo.io/content-management/shortcodes/#tweet) setup. \nOther platforms may vary, feel free to steal the idea.\n\n# Setup\n\n1. Copy all contents into your main Hugo folder. \n/code/ contains the scripts.\n\n1. Install puppeteer and html-to-text\n\n```\ncd code\nnpm i puppeteer html-to-text\n```\n\n3. Adjust `tweet_preprocess.sh` and `toot_preprocess.sh` to match content \u0026 static directories\n\n4. Run `tweet_preprocess.sh` and `toot_preprocess.sh` to test\n\n5. Add `code/tweet_preprocess.sh` and `code/toot_preprocess.sh` to whatever you use to deploy.\n\n# Mastodon Usage\n\nWhen writing posts, use the the following shortcode to swap in the image-versions of the post:\n\n```\n{{\u003c johnmu/toot \"https://mastodon.social/@johnmu/109292050061122141\"\u003e}}\n```\n\nIt works with the full URL of the post (easier to copy \u0026 paste).\nMastodon needs the full URL since posts are located on the user's server, not in a central repository.\nAfter adding these to a post, you must preprocess the posts before hosting with Hugo.\n\nSome Mastodon servers are quite slow. When creating the screenshot, Puppeteer waits until the embedded iframe of the post is resized, to try to capture the full content. There's a 20 second timeout should that not happen. The post includes a title-attribute for the image with a truncated version of the post's text.\n\n# Twitter Usage\n\nWhen writing posts, use the the following shortcodes to swap in the image-versions of tweets:\n\n```\n{{\u003c johnmu/tweet 877500564405444608 \u003e}}\n\n{{\u003c johnmu/tweet \"https://twitter.com/GoHugoIO/status/877500564405444608\" \u003e}}\n```\n\nIt works either by tweet ID or with the full URL (easier to copy \u0026 paste). \nAfter adding these to a post, you must preprocess the tweets before hosting with Hugo.\n\n# What it does\n\n1. Using grep, it finds all mentions of tweets / toots\n2. Any newly mentioned posts are rendered locally using Puppeteer / Chrome, and saved as a screenshot (this takes a while initially)\n3. When Hugo runs, it swaps out mentions against an embedded image \u0026 link to the post.\n\n# Cons\n\n* No responsive layout: small screens will get smaller text (image scaling rather than rewrapping)\n* Currently English-only tweets and Mastodon server default language\n* Twitter might not like embedding images (though I didn't spot anything in the TOS).\n* When posts are taken down, you have to manually remove the screenshot file if someone contacts you (or just empty the folder and rerun the script)\n\n# To do\n\n* Ditto for YouTube\n* Ditto for Instagram\n\n# Sample\n\nTwitter:\n\n![](static/captures/tweet_877500564405444608.png)\n\nMastodon:\n\n![](static/captures/toot_109292050061122141.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftplus%2Fstatic-social-posts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoftplus%2Fstatic-social-posts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoftplus%2Fstatic-social-posts/lists"}