maildo

Mailto link modals built in Svelte and inspired by mailgo.

I created this project to recreate the functionality I enjoyed from the original Mailgo project after it was deprecated.

Getting Started

$3

``bash
npm i maildo
`

then import the CSS and JS.

`js
import 'maildo/dist/index.css';
import 'maildo/dist/index';
`

> [!NOTE]
> This example assumes the use of a build system that allows importing css in js. But you should adapt importing of the css and js to your project's build system.

$3

Maildo will automatically be enabled for mailto: and tel: links unless the anchor tag includes the no-maildo class.

`html

Email Me



Call Me




Email Me




Call Me

`

#### Data Attributes

As an alternative to including the email address or phone number directly in the mailto: or tel: link, you can include the corresponding data attributes.

##### Href method

`html


Email Me

`

##### Class method

`html


Email Me

`

##### Mailto Attributes

| name | description |
| --- | --- |
| data-address | The username of the recipient's email address. |
| data-domain | The domain of the recipient's email address. |
| data-cc-address | The username of the CCed email address. |
| data-cc-domain | The domain of the CCed email address. |
| data-bcc-address | The username of the BCCed email address. |
| data-bcc-domain | The domain of the BCCed email address. |
| data-subject | The subject of the email. |
| data-body | The body of the email. |

##### Tel Attributes

| name | description |
| --- | --- |
| data-tel | The recipient's phone number. |

Development

$3

`bash
npm install -g pnpm
`

$3

`bash
pnpm install
`

$3

`bash
pnpm run dev
`

Then navigate to http://localhost:5173/ in your browser to view the dev site.

$3

`bash
pnpm run build
`

Built files will be output to the dist/` directory.