Web Clipper Template for Mastodon Posts

[amerpie]

What I’m trying to do

I need an Obsidian Web Clipper template for Mastodon Posts. Does anyone have one or a link to where I can import a copy? I’d really appreciate it!

Things I have tried

I didn’t see any here in the forums or on GiHub. I hope that doesn’t mean its too complicated to make one!

[dawni]

This could get you started:

{
	"schemaVersion": "0.1.0",
	"name": "Mastodon test",
	"behavior": "create",
	"noteContentFormat": "\n!{{selector:.detailed-status__display-avatar .account__avatar > img?src|link:\"|46\"}} {{selector:.detailed-status .display-name__html}} • [{{selector:.detailed-status .display-name__account}}]({{selector:.detailed-status .display-name__account}})\n\n{{selectorHtml:.detailed-status .status__content__text > p|join:\"\\n\\n\"|replace:(\"<br>\":\"\\n\",\"#\":\"\\\\#\",\"<img draggable=\\\"false\\\" class=\\\"emojione\\\" alt=\\\"\":\"\",\"\\\" title=\\\"\",:\"\",\"\\\" src=\\\"/emoji/1f9e1.svg\\\">\")|strip_attr:(\"href,title\")|strip_tags:(\"a\")}}\n\n{{selectorHtml:.detailed-status .media-gallery__item a?href|image|callout:(\"info\",\"attachments\",false)}}\n{{selectorHtml:.detailed-status video?aria-label|blockquote}}\n{{selectorHtml:.detailed-status video|strip_attr:(\"src,poster,title\")|replace:\"<video src=\":\"<video controls src=\"|blockquote}}\n{{selectorHtml:.detailed-status a.status-card .status-card__image-image|markdown|blockquote}}\n{{selectorHtml:.detailed-status a.status-card :is(.status-card__host,.status-card__title,.status-card__author)|join:\"\\n\"|markdown|blockquote}}\n\n{{selectorHtml:.detailed-status .status__content__text a:not(.mention)|join:\"\\n\\n\"|markdown|callout:\"info\",\"links\",\"false\"}}\n\n> [!info] toot meta\n> {{selectorHtml:.detailed-status .detailed-status__datetime|markdown}} • {{selectorHtml:.detailed-status .detailed-status__link|join:\" • \"|markdown}}\n\n{{highlights|map: item => item.text|join:\"\\n\\n> \"|callout:(\"highlight\", \"highlights\", false)}}\n",
	"properties": [
		{
			"name": "website-name",
			"value": "{{site}}",
			"type": "text"
		},
		{
			"name": "title",
			"value": "{{selector:.detailed-status .status__content__text|split:\\\" \\\"|slice:0,8|join:\\\" \\\"|safe_name}}",
			"type": "text"
		},
		{
			"name": "author",
			"value": "{{selector:.detailed-status .display-name__html}}",
			"type": "multitext"
		},
		{
			"name": "publication-datetime",
			"value": "{{selector:.detailed-status__datetime}}",
			"type": "datetime"
		},
		{
			"name": "URL",
			"value": "{{url|split:\\\"?\\\"|first}}",
			"type": "multitext"
		},
		{
			"name": "Obsidian-Web-Clipper",
			"value": "true",
			"type": "checkbox"
		},
		{
			"name": "topic",
			"value": "{{\\\"topics in this article, separated by commas\\\"}}",
			"type": "multitext"
		},
		{
			"name": "datetime-created",
			"value": "{{date}}",
			"type": "datetime"
		}
	],
	"triggers": [
		"https://mas.to/",
		"https://hachyderm.io/"
	],
	"noteNameFormat": "{{selector:.detailed-status .display-name__html}} on {{domain|safe_name}} {{selector:.detailed-status__datetime|date:\"YYYY-MM-DD.HHmm\"}}",
	"path": "kb/web clips",
	"context": "{{selectorHtml:.detailed-status|strip_tags:(\"script,h1,h2,h3,h4,h5,h6,meta,a,ol,ul,li,p,em,strong,i,b,img,video,audio,math,tablecite,strong,td,th,tr,caption,u\")|strip_attr:(\"alt,src,href,id,content,property,name,datetime,title\")}}"
}

Save it to a .json file then import into Web Clipper.

It is not the cleanest but has a lot of the selectors you’ll encounter in typical Mastodon toots.

Things to keep in mind:

• Different Mastodon hosts have similar structures for the most part but not entirely (I think), so you might want to tweak for the host you use most often.
• I made it while logged in to mas.to and never tested in a logged-out state.
• It’s not pure markdwon. It uses HTML for some things that I thought were appropriate (or I didn’t know a better way to achieve), such as embedded video.
• The examples below are with my CSS, so yours will look different.

When Web Clipper came out, I made this template thinking I would refine it over time, but I actually never use it. So to check, I clipped toots with different types of media from four servers just now (below), and it’s working on at least mastodon.world, mas.to, hachyderm.io, and mstdn.ca.

Good luck.

[amerpie]

Thank you very much!