starred/anonaddy

Fork 0

mirror of https://github.com/anonaddy/anonaddy.git synced 2026-04-25 14:15:53 +03:00

[GH-ISSUE #659] [Enhancement] Improve the banner, especially in `text/plain` messages. #1036

New issue

Open

opened 2026-03-14 11:33:35 +03:00 by kerem · 0 comments

kerem commented

2026-03-14 11:33:35 +03:00

Owner

Originally created by @RokeJulianLockhart on GitHub (Jul 11, 2024).
Original GitHub issue: https://github.com/anonaddy/anonaddy/issues/659

Examples

Current

`text/plain`

Code

Currently, undermentioned is what I see when I receive a text/plain message:

    <!--banner-info-->
This email was sent to e3t2lwtr@rokejulianlockhart.addy.io (https://fantia.jp/mypage/account/edit) from noreply@fantia.jp.
To deactivate this alias copy and paste the url below into your web browser.

https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7
<!--banner-info-->

Rendered

This is similar to /HTML-supported /Markdown content, it isn't really suitable for /plain:

    <!--banner-info-->
This email was sent to e3t2lwtr@rokejulianlockhart.addy.io (https://fantia.jp/mypage/account/edit) from noreply@fantia.jp.
To deactivate this alias copy and paste the url below into your web browser.

https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7
<!--banner-info-->

`text/HTML`

Rendered

Undermentioned is what I see when I receive a text/HTML message:

This email was sent to wy46xghh@rokejulianlockhart.addy.io (https://github.com/settings/emails) from notifications@github.com
Click here to deactivate this alias

GitHub has sanitised it, but we know what we're referring to: https://github.com/user-attachments/files/16553232/example.zip

Code

<div style="margin:0px auto;max-width:896px;padding:10px 20px;background-color:#f5f7fa;text-align:center;line-height:1.5;font-size:12px;width:100%;border-left: 3px solid #19216c;font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';color:#323f4b;overflow-wrap:break-word;">
            This email was sent to <span style="font-weight:500;color:#19216c;">wy46xghh@rokejulianlockhart.addy.io</span> (https://github.com/settings/emails) from <span style="font-weight:500;color:#19216c;">notifications@github.com</span><br>Click <a href="https://app.addy.io/deactivate/7dfa377d-94fe-495e-a2ba-25d815be2d6d?signature=94f589cb5828ec95aa7ae8062bf671dc0a2e42c7b8f4e2ff2475c762f494c49d" style="color:#2d3a8c;text-decoration:underline;" target="_blank" rel="noreferrer noopener nofollow">here</a> to deactivate this alias
        </div>

There's no need to define fonts and colours here. It's a bit of an accessibility nightmare.

Suggestions

Basic Improvements

These aren't what I'd implement, because they're very slight improvements - they improve readability, but don't adequately enhance the ability to locate important content quickly. See the last section for a better example.
1. text/plain
  
  Instead, this would be a lot more readable if it used text/markdown stylisation when in /plain format:
  1. Rendered
    
    This e-mail was sent to e3t2lwtr@rokejulianlockhart.addy.io (https://fantia.jp/mypage/account/edit) from noreply@fantia.jp.
    To deactivate this alias copy and paste this URL into your web browser: https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7
  2. Code
```
---

<banner-info>

This e-mail was sent to `e3t2lwtr@rokejulianlockhart.addy.io` (`https://fantia.jp/mypage/account/edit`) from `noreply@fantia.jp`.
To deactivate this alias copy and paste this URL into your web browser: https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7

</banner-info>
```
2. text/HTML
  
  ...And could be made more easily actionable by linkifying the addresses, when in /HTML format:
  1. Rendered
    
    This email was sent to e3t2lwtr@rokejulianlockhart.addy.io (https://fantia.jp/mypage/account/edit) from noreply@fantia.jp.
    To deactivate this alias copy and paste this URL into your web browser: https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7
  2. Code
```
<hr>

<banner-info>

This e-mail was sent to <code><a href="e3t2lwtr@rokejulianlockhart.addy.io">e3t2lwtr@rokejulianlockhart.addy.io</a></code> (<code><a href="https://fantia.jp/mypage/account/edit">https://fantia.jp/mypage/account/edit</a></code>) from <code><a href="noreply@fantia.jp">noreply@fantia.jp</a></code>.
To deactivate this alias copy and paste this URL into your web browser: <code><a href="https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7">https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7</a></code>

</banner-info>
```

Redesign

Though, I think this could still be clearer:

`text/plain`

AnonAddy
--------

| Key          | Value
|--------------|------------------------------------
| Alias        | e3t2lwtr@rokejulianlockhart.addy.io
| Sender       | noreply@fantia.jp
| Deactivation | To deactivate this alias, visit: https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7
| Description  | Registered at Fantia: https://fantia.jp/mypage/account/edit

This is perfectly valid /Markdown that is also legible as /plain due to it not using any of /Markdown's advanced features.

`text/HTML`

Rendered

Alias e3t2lwtr@rokejulianlockhart.addy.io
Sender noreply@fantia.jp
Deactivation To deactivate this alias, visit https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7.
Description
Registered at Fantia: https://fantia.jp/mypage/account/edit

Alias	`e3t2lwtr@rokejulianlockhart.addy.io`
Sender	`noreply@fantia.jp`
Deactivation	To deactivate this alias, visit `https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7`.
Description	Registered at Fantia: https://fantia.jp/mypage/account/edit

Code

<hr class="addy" id="addy-banner-separator">

<addy-banner-info class="addy" id="addy-banner">

<table class="addy"><tr>
	<th> Alias </th>
	<td> <code><a href="e3t2lwtr@RokeJulianLockhart.Addy.IO">e3t2lwtr@rokejulianlockhart.addy.io</a></code> </td>
</tr><tr>
	<th> Sender </th>
	<td> <code><a href="noreply@fantia.jp">noreply@fantia.jp</a></code> </td>
</tr><tr>
	<th> Deactivation</th>
	<td> To deactivate this alias, visit <code><a href="https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7">https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7</a></code>. </td>
</tr><tr>
	<th> Description </th>
	<td> <blockQuote cite="https://app.addy.io/aliases/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83/edit"> Registered at Fantia: https://fantia.jp/mypage/account/edit </blockQuote> </td>
</tr></table>

</addy-banner-info>

I could have made the Description field adhere to Markdown, but that seems like a separate request, so I've left it as plain text.

Originally created by @RokeJulianLockhart on GitHub (Jul 11, 2024). Original GitHub issue: https://github.com/anonaddy/anonaddy/issues/659 #### **Examples** 1. #### **Current** 1. #### **`text/plain`** 1. #### **Code** Currently, undermentioned is what I see when I receive a `text/plain` message: <blockQuote> ```HTML  This email was sent to e3t2lwtr@rokejulianlockhart.addy.io (https://fantia.jp/mypage/account/edit) from noreply@fantia.jp. To deactivate this alias copy and paste the url below into your web browser. https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7  ``` </blockQuote> 1. #### **Rendered** This is similar to `/HTML`-supported `/Markdown` content, it isn't really suitable for `/plain`: <blockQuote> ```txt  This email was sent to e3t2lwtr@rokejulianlockhart.addy.io (https://fantia.jp/mypage/account/edit) from noreply@fantia.jp. To deactivate this alias copy and paste the url below into your web browser. https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7  ``` </blockQuote> 1. #### **`text/HTML`** 1. #### **Rendered** Undermentioned is what I see when I receive a `text/HTML` message: <blockQuote> <div style="margin:0px auto;max-width:896px;padding:10px 20px;background-color:#f5f7fa;text-align:center;line-height:1.5;font-size:12px;width:100%;border-left: 3px solid #19216c;font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';color:#323f4b;overflow-wrap:break-word;"> This email was sent to <span style="font-weight:500;color:#19216c;">wy46xghh@rokejulianlockhart.addy.io</span> (https://github.com/settings/emails) from <span style="font-weight:500;color:#19216c;">notifications@github.com</span><br>Click <a href="https://app.addy.io/deactivate/7dfa377d-94fe-495e-a2ba-25d815be2d6d?signature=94f589cb5828ec95aa7ae8062bf671dc0a2e42c7b8f4e2ff2475c762f494c49d" style="color:#2d3a8c;text-decoration:underline;" target="_blank" rel="noreferrer noopener nofollow">here</a> to deactivate this alias </div> </blockQuote> GitHub has sanitised it, but we know what we're referring to: https://github.com/user-attachments/files/16553232/example.zip > ![image](https://github.com/user-attachments/assets/6edf34a8-c90f-4dd0-82d2-905585845816) 1. #### **Code** <blockQuote> ```HTML <div style="margin:0px auto;max-width:896px;padding:10px 20px;background-color:#f5f7fa;text-align:center;line-height:1.5;font-size:12px;width:100%;border-left: 3px solid #19216c;font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';color:#323f4b;overflow-wrap:break-word;"> This email was sent to <span style="font-weight:500;color:#19216c;">wy46xghh@rokejulianlockhart.addy.io</span> (https://github.com/settings/emails) from <span style="font-weight:500;color:#19216c;">notifications@github.com</span><br>Click <a href="https://app.addy.io/deactivate/7dfa377d-94fe-495e-a2ba-25d815be2d6d?signature=94f589cb5828ec95aa7ae8062bf671dc0a2e42c7b8f4e2ff2475c762f494c49d" style="color:#2d3a8c;text-decoration:underline;" target="_blank" rel="noreferrer noopener nofollow">here</a> to deactivate this alias </div> ``` </blockQuote> There's no need to define fonts and colours here. It's a bit of an accessibility nightmare. 1. #### **Suggestions** 1. #### **Basic Improvements** These aren't what I'd implement, because they're very slight improvements - they improve readability, but don't adequately enhance the ability to locate important content quickly. See the last section for a better example. 1. #### **`text/plain`** Instead, this would be a lot more readable if it used `text/markdown` stylisation when in `/plain` format: 1. #### **Rendered** <blockQuote> --- <banner-info> This e-mail was sent to `e3t2lwtr@rokejulianlockhart.addy.io` (`https://fantia.jp/mypage/account/edit`) from `noreply@fantia.jp`. To deactivate this alias copy and paste this URL into your web browser: https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7 </banner-info> </blockQuote> 1. #### **Code** ```MD --- <banner-info> This e-mail was sent to `e3t2lwtr@rokejulianlockhart.addy.io` (`https://fantia.jp/mypage/account/edit`) from `noreply@fantia.jp`. To deactivate this alias copy and paste this URL into your web browser: https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7 </banner-info> ``` 1. #### **`text/HTML`** ...And could be made more easily actionable by linkifying the addresses, when in `/HTML` format: 1. #### **Rendered** <blockQuote> <hr> <banner-info> This email was sent to <code><a href="e3t2lwtr@rokejulianlockhart.addy.io">e3t2lwtr@rokejulianlockhart.addy.io</a></code> (<code><a href="https://fantia.jp/mypage/account/edit">https://fantia.jp/mypage/account/edit</a></code>) from <code><a href="noreply@fantia.jp">noreply@fantia.jp</a></code>. To deactivate this alias copy and paste this URL into your web browser: <code><a href="https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7">https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7</a></code> </banner-info> </blockQuote> 1. #### **Code** ```MD <hr> <banner-info> This e-mail was sent to <code><a href="e3t2lwtr@rokejulianlockhart.addy.io">e3t2lwtr@rokejulianlockhart.addy.io</a></code> (<code><a href="https://fantia.jp/mypage/account/edit">https://fantia.jp/mypage/account/edit</a></code>) from <code><a href="noreply@fantia.jp">noreply@fantia.jp</a></code>. To deactivate this alias copy and paste this URL into your web browser: <code><a href="https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7">https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7</a></code> </banner-info> ``` 1. #### **Redesign** Though, I think this could still be clearer: 1. #### **`text/plain`** ```MD AnonAddy -------- | Key | Value |--------------|------------------------------------ | Alias | e3t2lwtr@rokejulianlockhart.addy.io | Sender | noreply@fantia.jp | Deactivation | To deactivate this alias, visit: https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7 | Description | Registered at Fantia: https://fantia.jp/mypage/account/edit ``` This is perfectly valid `/Markdown` that is also legible as `/plain` due to it not using any of `/Markdown`'s advanced features. 1. #### **`text/HTML`** 1. #### **Rendered** <blockQuote> <hr class="addy" id="addy-banner-separator"> <addy-banner-info class="addy" id="addy-banner"> <table class="addy"><tr> <th> Alias </th> <td> <code><a href="e3t2lwtr@RokeJulianLockhart.Addy.IO">e3t2lwtr@rokejulianlockhart.addy.io</a></code> </td> </tr><tr> <th> Sender </th> <td> <code><a href="noreply@fantia.jp">noreply@fantia.jp</a></code> </td> </tr><tr> <th> Deactivation</th> <td> To deactivate this alias, visit <code><a href="https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7">https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7</a></code>. </td> </tr><tr> <th> Description </th> <td> <blockQuote cite="https://app.addy.io/aliases/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83/edit"> Registered at Fantia: https://fantia.jp/mypage/account/edit </blockQuote> </td> </tr></table> </addy-banner-info> </blockQuote> 1. #### **Code** ```MD <hr class="addy" id="addy-banner-separator"> <addy-banner-info class="addy" id="addy-banner"> <table class="addy"><tr> <th> Alias </th> <td> <code><a href="e3t2lwtr@RokeJulianLockhart.Addy.IO">e3t2lwtr@rokejulianlockhart.addy.io</a></code> </td> </tr><tr> <th> Sender </th> <td> <code><a href="noreply@fantia.jp">noreply@fantia.jp</a></code> </td> </tr><tr> <th> Deactivation</th> <td> To deactivate this alias, visit <code><a href="https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7">https://app.addy.io/deactivate/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83?signature=d312f5fc0d5bc256ebf9991256c96b8111f31b9e5a07e7a4158f905e7d5e55e7</a></code>. </td> </tr><tr> <th> Description </th> <td> <blockQuote cite="https://app.addy.io/aliases/5f2b0bf5-8049-4844-82ef-7ac7a7d5ae83/edit"> Registered at Fantia: https://fantia.jp/mypage/account/edit </blockQuote> </td> </tr></table> </addy-banner-info> ``` I could have made the `Description` field adhere to Markdown, but that seems like a separate request, so I've left it as plain text.

No labels

bug

pull-request

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/anonaddy#1036

No description provided.

Rows
Columns

[GH-ISSUE #659] [Enhancement] Improve the banner, especially in text/plain messages. #1036

Examples

Current

text/plain

Code

Rendered

text/HTML

Rendered

Code

Suggestions

Basic Improvements

text/plain

Rendered

Code

text/HTML

Rendered

Code

Redesign

text/plain

text/HTML

Rendered

Code

[GH-ISSUE #659] [Enhancement] Improve the banner, especially in `text/plain` messages. #1036

`text/plain`

`text/HTML`

`text/plain`

`text/HTML`

`text/plain`

`text/HTML`