How to embed a tiddler(s) inside a gmail message

[Mat]

This is (1) almost off topic and (2) way too intricate to do a lot...

...but you'll agree it's interesting.

I did NOT try this out but I believe it can be used to send a tiddler, even a several, directly in a gmail message.

First you must export your tiddlers into HTML format and open the result in a text editor so you see the code. (Unfortunately it contains the FULL TW css - discuss here). Then do this:

https://www.youtube.com/watch?v=ZSSqsEVsChc

<:-)

[Mohamed Amin]

Thanks Mat for the video, it has a VERY nice tips, specially the "inline CSS tool"

[TiddlyTweeter]

Ciao Mat

Mat wrote:

This is (1) almost off topic and (2) way too intricate to do a lot...

Actually it is very on-topic. Most everyone would at some point want to use TW seamlessly with email. And its possible.

I personally think we could do a lot more to illustrate and promote "integrations" with email, posting to social networks etc.

...but you'll agree it's interesting.

It is. The method in the video is "insertion" of the content into the browser  "code inspector". 

Just FYI I use a couple of other methods, which I find less techy. 

The one that works well for HTML email for me is enabled by installing in a browser the "Markdown Here" browser extension (it works fine with straight HTML as well as Markdown). 

An example result you can see here, where I posted to GG using it (Gmail & GG use the same engine so it works on both) in nice looking HTML ... https://groups.google.com/g/tiddlywiki/c/GHbwtMIrA3I/m/eJyRkqyKAQAJ

Interesting topic!

TT

[Ste]

Just tried that, that's cool!

Doesn't work in google groups though :(

Ste

[TiddlyTweeter]

Ste wrote:

Just tried that, that's cool!

Doesn't work in google groups though :(

Maybe the Gormenghast Saga of GG redefining itself is blocking it now :-(

I'll test it and if I can get it to work I will let you know.

TT  

[TiddlyTweeter]

Ste: Doesn't work in google groups though :( 

Actually it does ...

Does Markdown Here work … YES, I find so.

That was "<blockquote class="tc-quote"><p><strong>Does Markdown Here work ... YES, I find so.</strong> </p></blockquote>"  raw HTML via "Markdown Here".

Best wishes

TT

​

[Mat]

TiddlyTweeter wrote:

Ste: Doesn't work in google groups though :( 

Actually it does ...

Give us the HelloThere tiddler! Give us the HelloThere tiddler! We want HelloThere!

<:-)

[TiddlyTweeter]

Mat,

Ha! You naughty man. Asking for mission 27 before mission 2 has occurred.

"Hello There" will go over but it is so heavy on embedded images it is too much for nice render.

TT

[TiddlyTweeter]

Just with raw, with no CSS specific support that Markdown Here can provide to tweak,  try  the Stamp …

Insert snippets

You can insert preconfigured snippets of text to use stamp from toolbar. Click stamp () and just select a snippet.

Create a snippet

1. Click stamp ()
2. Create a snippet tiddler through the "Add your own" menu entry
3. Type some text as snippet for the tiddler, add a caption for the name as shown in the menu
4. Click the ok button

Tip: You can also create a snippet tiddler using the new tiddler button in the sidebar, and add tag $:/tags/TextEditor/Snippet

New in: 5.1.20 Adding a prefix and/or suffix to a selection

1. Click stamp ()
2. Create a snippet tiddler through the "Add your own" menu entry
3. Add a caption for the name as shown in the menu
4. Create a tiddler with the same title but add the suffix /prefix
5. Insert the prefix in its text field
6. Create a tiddler with the same title but add the suffix /suffix
7. Insert the suffix in its text field
8. Click the ok button

Best wishes

TT

​

On Thursday, 4 March 2021 at 17:54:27 UTC+1 Mat wrote:

[TiddlyTweeter]

It throws away the svg embeds. Actually you could keep them IF you sweated the CSS.

But I think the key point is that that basic thing can be transferred easily. One needs work on the CSS a bit for regular use.

But Markdown Here has a way to accept that.

Best wishes

TT

[Mat]

Cool.

Maybe we could emulate that "inline CSS" function so one could pass a tiddler through it. Or an export tiddler function where it was built in. That's actually a really interesting idea because it might be a way to rid the whole stylesheets load that follows when you export even a single tiddler. Hm... that might actully be exactly what is needed; a tool that replaces all class="foo" with style="whatever foo defines". This makes perfect sense for exported tiddlers.

<:-)

[TiddlyTweeter]

Mat wrote:

Cool.

Maybe we could emulate that "inline CSS" function so one could pass a tiddler through it. Or an export tiddler function where it was built in. That's actually a really interesting idea because it might be a way to rid the whole stylesheets load that follows when you export even a single tiddler. Hm... that might actully be exactly what is needed; a tool that replaces all class="foo" with style="whatever foo defines". This makes perfect sense for exported tiddlers.

Right. One of the reasons I like "Markdown Here" is simply I input the raw HTML and much of the time the recipient system has perfectly okay CSS for rendering standard raw output. BUT IF you need add a bit of precision CSS (class) you can add it. 

I think you are right that "inline CSS" is a good general approach to portability, though I am not so clear how to easily do that in TW for such purposes.

TT, x

[Mohamed Amin]

This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

HelloThere

24th December 2020 at 3:29pm

TableOfContents

Have you ever had the feeling that your head is not quite big enough to hold everything you need to remember?

Welcome to TiddlyWiki, a unique non-linear notebook for capturing, organising and sharing complex information.

Use it to keep your to-do list, to plan an essay or novel, or to organise your wedding. Record every thought that crosses your brain, or build a flexible and responsive website.

Introduction to TiddlyWiki

A Gentle Guide

What's New in 5.1.23

TiddlyMap Plugin

Helping TiddlyWiki

Developers

TiddlyWiki Classic

Unlike conventional online services, TiddlyWiki lets you choose where to keep your data, guaranteeing that in the decades to come you will still be able to use the notes you take today.

Forum YouTube Twitter GitHub Gitter

The TiddlyWiki is the best software I've ever found for organising my ideas.

It's well worth spending an hour or so playing with it to see how it can help you. This will be time well-spent and will change how you think and how you organise your ideas.

Joe Armstrong, Co-inventor of Erlang

TiddlyWiki gets a Gearhead rating of 6 out of 5 (it's that good).

Finding code that works flawlessly after just two or three years is magical enough but after seven years?!

Mark Gibbs, Network World

[Mohamed Amin]

This is my shoot :)

I used the Juice CSS Inliner online tool, and got an error regarding the following CSS blocks :-

*, input[type="search"] {

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}

*,

*::before,

*::after {

  box-sizing: border-box;

}

.tc-thumbnail-background {

position: absolute;

border-radius: 3px;

}

 After removing them I got the above result (svg issue)

[TiddlyTweeter]

Mohamed Amin wrote:

This is my shoot ...

 

 ... I got the above result (svg issue)

Right! GOOD example. The "SVG problem" I'm not sure can be overcome on GG. 

Less of an issue in email?

I think the MAIN thing to explain is that you CAN pass raw HTML and CSS into GG & Gmail. 

The breakdown on more complex things like "HelloThere" is something empirical to investigate the WHY?  of that breakdown.

So near, yet not quite there. x

TT

[Euthymious]

Should the next mission be sending mail from inside the TW?

пятница, 5 марта 2021 г. в 04:55:28 UTC+3, Mohamed Amin:

[Mat]

Good workin' Mohamed!

The ::before and ::after 

These are css pseudo classes and can't be put as inline styling, so this may be the reason why they cause problems. A workaround to that is to (manually) define a styleblock and add a custom class to the to-be-styled item, i.e:

<div style="theautomaticallyproducedinlinestyles" class="myclass">

<style>.myclass::before {...} .myclass::after {...} <style>

Images

I would guess that the "inline translator" deliberately disregards svg's then because surely(?) they should be possible to include in html?

I would assume thought that if the image seen in the TW is really an external link - which is the recommendation for images in TW! - then it should also show in the to-be-emailed-tiddler.

<:-)

[TiddlyTweeter]

Euthymious wrote:

Should the next mission be sending mail from inside the TW?

That has been EASY for simple email (plain text) forever already.

This thread is about transfer of TW HTML & CSS to email, which is a different thing.

Best wishes

TT

[Mat]

Euthymious wrote:

Should the next mission be sending mail from inside the TW?

That would be cool. Sending off a tiddler. Tiddlers do kinda look like an email - heading, textfield etc.

The other way around; to send an email, or at least a gmail, into the TW and have it end up as a tiddler, would actually be very possible... if only there were some kind of integration between TW and Googles services... 

<:-)

[TiddlyTweeter]

Mat wrote ... 

... Images

I would guess that the "inline translator" deliberately disregards svg's then because surely(?) they should be possible to include in html?

I would assume thought that if the image seen in the TW is really an external link - which is the recommendation for images in TW! - then it should also show in the to-be-emailed-tiddler.

It is TRUE that  bulk email systems like MailChimp, pretty much a definer, invoke images as EXTERNAL resources. 

But PART of the issue on both GG & Gmail is actually EMAIL engines tend to LAG behind the general web. That is a complicating factor.

TT

[TiddlyTweeter]

Ciao Mat,

Where have you been sleeping? It has been done already. 

Your mate Jed did it. 

Riz did it.

MY point in this thread was really, COLLECTIVELY, we could much better document how to email and social network post.

But YOUR OP is about HTML/CSS inserts first. That is more tight.

Best wishes

TT

Euthymious wrote:

Should the next mission be sending mail from inside the TW?

 

[strikke...@gmail.com]

TT,

Do you have any links for that - for the newbies and the sleepy old timers.

Birthe

[Mat]

TiddlyTweeter wrote:

Where have you been sleeping? It has been done already. 

Oh, I have indeed been sleeping. Must look this up. 

MY point in this thread was really, COLLECTIVELY, we could much better document how to email and social network post.

But YOUR OP is about HTML/CSS inserts first. That is more tight.

Frankly, I just threw this out there as a fun thing. But I now understand there is more serious interest in it and it would, indeed, be cool if there was a practical way to show tiddlers in other contexts. It seems to me we are very much bound to html/css if we want a pretty representation (other than a photo of the tiddler ;-) so I think my github discussion is highly relevant. It would be super cool if single tiddlers could be properly represented as static tiddlers because there is a LOT of seemingly dynamic stuff you can do using only CSS. (I dare even bet that one could make a static wiki that even open and closes tiddlers making it appear like a real TW. But at a fraction of the size and without any JS concerns and, now, possibly even pasted for direct use inside the email. But that's for another discussion.)

<:-)

[TiddlyTweeter]

Ciao Mat

One thing at a time ..

Mat ...

so I think my github discussion is highly relevant. 

For the issue  here is that useful? OF course a full EXPORT of HTML will need to have 25,000 lines of CSS

 or whatever.

But for simple Email & GG it is totally irrelevant. 

TW produces quite clean HTML that CSS can be modest with FOR email & GG.

TT 

 

[Mat]

TiddlyTweeter wrote:

Mat ...

so I think my github discussion is highly relevant. 

But for simple Email & GG it is totally irrelevant.  

 

How can it possibly be irrelevant? The gh discussion is about taking away dedundant code in html tiddlers. And with my mention there of the idea to make the css be inline, then the html tiddler would be exactly what you need for Email and GG. 

<:-)

[TiddlyTweeter]

strikke...@gmail.com asked:

Do you have any links for that - for the newbies and the sleepy old timers.

Yeah. RIZ did it for Email, Twitter & Reddit ... 4 years ago with Social Network Macros. It is NOT the only solution around but pretty much comprehensively illustrative. It is NOT so difficult. All three use "URL Posting" method.

TT, x

[TiddlyTweeter]

Mat

You are RIGHT for HTML email!

TBH, I do think that pursuing/clarifying using browser add-on workings for IN-LINING CSS would be worth it.

They exist. They work already. 

TBH, my issues are simpler than aspirations to revamp TW. 

My work is merely to prep standard CSS  styles in TW that MATCH what needs to be in-lined and NO more than that.

As I mentioned before, Email CSS that works is a sub-set of all CSS, so it is actually quite tricky going outside the end-use remit. 

Best wishes

TT

[TiddlyTweeter]

Mat

Regarding INLINING TW I did a few more tests. Basically you can in GG & GMail, though SVGs and IMGs are simply discarded)…

This was an interesting test that works … on how easy it might be using a browser INLINER to be able to POST & EMAIL “Rich Text”. The initial results are pretty good. What you see below is more-or-less how it looks in my TW. The LINKS work, which is the point. The rendered input fields obviously can’t do anything, but they turn up, but could be switched off via CSS …

Lookup a Word …

Word
» bundle – American Heritage – Chambers – Collins – Dictionary.com – Merriam-Webster – OneLook – Oxford – Qwant – The Free Dictionary – Wiktionary

Synonyms
» bundle – Synonymy – The Free Thesaurus – Thesaurus.com

Etymology
» bundle – Etymology Geek – Google Ngram Graph – Online Etymology Dictionary

Lookup an Idiom …

» bundle of nerves – The Free Dictionary, Idioms – The Idioms

Translate English to Italian …

» bundle of clothing – DeepL – Google Translate

Tradurre Italiano in Inglese …

» fascio di vestiti – DeepL – Google Translate

TT, x

On Wednesday, 3 March 2021 at 14:09:28 UTC+1 Mat wrote:

This is (1) almost off topic and (2) way too intricate to do a lot...

...but you'll agree it's interesting.

I did NOT try this out but I believe it can be used to send a tiddler, even a several, directly in a gmail message.

First you must export your tiddlers into HTML format and open the result in a text editor so you see the code. (Unfortunately it contains the FULL TW css - discuss here). Then do this:

https://www.youtube.com/watch?v=ZSSqsEVsChc

<:-)

​