https://github.com/sammy-t/maildo
Mailto links extended.
https://github.com/sammy-t/maildo
callto css email html mailto npm phone sms tel
Last synced: 3 months ago
JSON representation
Mailto links extended.
- Host: GitHub
- URL: https://github.com/sammy-t/maildo
- Owner: Sammy-T
- License: gpl-3.0
- Created: 2024-10-13T22:48:29.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-11T21:15:27.000Z (about 1 year ago)
- Last Synced: 2025-04-11T22:27:24.864Z (about 1 year ago)
- Topics: callto, css, email, html, mailto, npm, phone, sms, tel
- Language: Svelte
- Homepage: https://www.npmjs.com/package/maildo
- Size: 155 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# maildo
Mailto link modals built in [Svelte](https://svelte.dev/) and inspired by [mailgo](https://github.com/manzinello/mailgo).
I created this project to recreate the functionality I enjoyed from the original Mailgo project after it was deprecated.
## Getting Started
### Installation
```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.
### Usage
Maildo will automatically be enabled for `mailto:` and `tel:` links unless the anchor tag includes the `no-maildo` class.
```html
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
### Install [pnpm](https://pnpm.io/)
```bash
npm install -g pnpm
```
### Install packages
```bash
pnpm install
```
### Run the dev server
```bash
pnpm run dev
```
Then navigate to `http://localhost:5173/` in your browser to view the dev site.
### Build output files
```bash
pnpm run build
```
Built files will be output to the `dist/` directory.