kbravh / obsidian-tweet-to-markdown

An Obsidian.md plugin to save tweets as Markdown files.
MIT License
195 stars 12 forks source link

[feature request] Templates #39

Open nickpunt opened 2 years ago

nickpunt commented 2 years ago

Hi, just tried the plugin and love it! I frequently paste tweets into my obsidian wikis, which I style in a particular way in CSS. I'd love the ability to customize the template output so when I use the paste functionality in this, it comes out in a format I can specify.

My sense is scope is adding a Setting to pick file that's a template, and then parsing the template for where to insert the tweet data. One example of a simple template:

>***From [%TweetUser%](%TweetLink%) (YYYY)***
>%TweetBody%

To get a sense for what I mean, this is how I do my formatting:

>***From [@twitterhandle](https://twitter.com/twitterhandle/123098934) (2022)***
>this is the part that is the tweet!
>and here is another tweet
>>***From [@twitterhandle2](https://twitter.com/twitterhandle/09409324) (2018)***
>>this is a quote tweet the first tweet is using!

and the css I use in Obsidian Publish (publish.css) is:

/* BOXED QUOTES STYLE */
.markdown-preview-view blockquote {
  background-color: var(--background-blockquote);
  border-width: 0;
  margin-left: 0;
  border-radius: 10px;
  padding: 7px 15px 12px;
  margin-inline-end: 0;
  opacity: 0.9;
}
.markdown-preview-view blockquote > ul {
  margin-top: 0;
}
blockquote > p:first-of-type > strong:first-of-type > em {
  display: inline-block;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-family: 'Proxima Nova',proxima-nova,sans-serif;
  font-size: 0.75em;
  font-style: italic;
  letter-spacing: 0.01em;
  opacity: 1;
  color: var(--text-muted);
  width: 100%;
  line-height: 1.4;
}
blockquote > p:first-of-type > strong:first-of-type > em > a {
  border-bottom: 0;
}
blockquote > p:first-child {
  margin-bottom: 0;
}
blockquote > p:last-child {
  width: 100%;
  padding-bottom: 0px;
}
.markdown-preview-view blockquote > blockquote {
  opacity: 0.9;
  border-left: 0;
  margin-left: 0;
  padding-left: 15px;
  margin-inline-end: 0;
  padding-right: 15px;
  margin-bottom: 10px;
  background-color: var(--background-blockquote-2);
}

/* break hack https://stackoverflow.com/questions/7614928/change-br-height-using-css */
blockquote br {
  content: "";
  display: block;
  margin-bottom: 8px;
}
blockquote br:first-of-type {
  margin-bottom: 0;
}

which turns into this in my Obsidian Publish wiki:

Screen Shot 2022-10-29 at 11 08 05 PM

Maybe this kind of thing could be useful for or inspire others? Thanks so much @kbravh for making this plugin!