changedetection.io icon indicating copy to clipboard operation
changedetection.io copied to clipboard

Notification rendering method confusing

Open alfureu opened this issue 3 years ago • 8 comments

Describe the bug So I set up changedetection.io and created the filters which extracts the necessary css elements I am following on websites. I use email notifications, and no matter how I set it up, it is not helpful.

In the web diff the text is rendered nicely, highlighting the added (green) and removed (red) lines. All in separate lines. When I set the Text email notification, the text is rendered as text with (removed) and (added) lines. I would really like to have this to see visually, so I switch to HTML. However, in HTML the whole notification text is rendered in a single line (the CR/LF are stripped), and no visual difference visible either. With markdown the issue is similar as with html. Also, in some websites the <div> elements are so crazy that the text is tabbed by every singe additional element, e.g.:

> element 1
>   element 2
>     element 3
>        ...

Am I doing something wrong? I would like to see exactly the same view as in the diff page on the web frontend of changedetection.

Version Exact version in the top right area: 0.39.17.2

Expected behavior It would be great if the HTML rendered would not strip the CR/LF characters. It would be also great if the differences would be color-coded instead of text-rendered, just like in the diff page of changedetection.io. Finally, force left-aligning could be introduced due to some pages.

If I am doing anything wrong, please do let me know.

alfureu avatar Aug 07 '22 10:08 alfureu

ahh so in HTML mode, it doesnt say "(added)" and "(removed)" right?

dgtlmoon avatar Aug 07 '22 17:08 dgtlmoon

Correct. Also, in HTML mode everything is in a single line.

In text the info in the brackets has an extra space, e.g. instead of (added) there is (added )

alfureu avatar Aug 07 '22 17:08 alfureu

I have an update to this, as in HTML mode some email clients appeared to respect some CR/LF characters (not sure which one is used).

It would be great, if (at least in HTML mode) the output could render colours, e.g.:

+ (added )
! (changed)
- (removed)

By doing so the "added" "changed" "removed" words could be removed, which are of different length and do not look good in an email. Again, talking only about HTML (potentially markdown as well).

NB, there is still an extra space behind (added ) which needs to be fixed.

alfureu avatar Sep 09 '22 11:09 alfureu

excellent feedback, i'll check it into! thanks!

dgtlmoon avatar Sep 09 '22 11:09 dgtlmoon

I must also add, that in HTML mode thw CR/LF is not added, as in Text-mode

So a change detected in Text mode:

(added ) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at leo diam. Morbi efficitur id massa quis gravida. Pellentesque quis maximus odio, eu maximus lorem. Vestibulum tempus feugiat iaculis. Vivamus non metus vestibulum, bibendum dolor eu, scelerisque lectus. Fusce non interdum turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut quam egestas, hendrerit erat in, efficitur ante. Sed ac finibus erat. Fusce sed tellus sed neque dictum feugiat et vitae mi. Integer at diam sagittis, fringilla ipsum sit amet, congue libero.
(removed) Aliquam erat volutpat. Phasellus odio magna, aliquet vel suscipit sit amet, condimentum sit amet nulla. Etiam tempor sed nisi eu eleifend. Aenean ut tortor vel nulla rhoncus finibus. Suspendisse felis lectus, ultricies ac viverra vitae, luctus eget mauris. Maecenas mollis mi vitae hendrerit tincidunt. Duis rhoncus erat id porta molestie.

in HTML mode looks all in a single line, e.g.

(added ) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at leo diam. Morbi efficitur id massa quis gravida. Pellentesque quis maximus odio, eu maximus lorem. Vestibulum tempus feugiat iaculis. Vivamus non metus vestibulum, bibendum dolor eu, scelerisque lectus. Fusce non interdum turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut quam egestas, hendrerit erat in, efficitur ante. Sed ac finibus erat. Fusce sed tellus sed neque dictum feugiat et vitae mi. Integer at diam sagittis, fringilla ipsum sit amet, congue libero. (removed) Aliquam erat volutpat. Phasellus odio magna, aliquet vel suscipit sit amet, condimentum sit amet nulla. Etiam tempor sed nisi eu eleifend. Aenean ut tortor vel nulla rhoncus finibus. Suspendisse felis lectus, ultricies ac viverra vitae, luctus eget mauris. Maecenas mollis mi vitae hendrerit tincidunt. Duis rhoncus erat id porta molestie.

Can something be done about this please?

alfureu avatar Sep 12 '22 21:09 alfureu

Problem is, the 'diff' you view in the application is generated by javascript, which you cannot put javascript into an email..

so there's two systems

I'm open to PR's

dgtlmoon avatar Nov 21 '22 08:11 dgtlmoon

I was going to open a feature request for this (i.e. Add {diff_html} token for use in notifications), but just found this open issue.

I didn't realize the html diff is currently generated client-side; would it be reasonable to have that be implemented server-side for use in notifications?

Also, should I open a new issue and label it "feature request", or is it sufficiently covered by this issue?

pirandello9 avatar Nov 29 '22 01:11 pirandello9

Problem is, the 'diff' you view in the application is generated by javascript, which you cannot put javascript into an email..

so there's two systems

I'm open to PR's

The color issue is a huge problem for me too. It is very hard to read the mails and often takes me forever to figure out that nothing relevant changed - especially for long pages with a lot text. Isn't it possible to use playwright to go to the diff page to let it render the JS and then fetch the DOM element and pack it in an email?

blippercop avatar Dec 26 '22 22:12 blippercop