Created
February 7, 2025 09:13
-
-
Save ivoba/222d5a49ad4542392772195c5e5ad032 to your computer and use it in GitHub Desktop.
Astro ObfuscateLink component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- | |
| import ObfuscateLink from './ObfuscateLink.astro'; | |
| --- | |
| <div class="card hint"> | |
| <p> | |
| Email: <ObfuscateLink email="[email protected]" /> | |
| </p> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- | |
| --- | |
| <!doctype html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <meta name="language" content="de" /> | |
| <title>ObfuscateLink Astro component</title> | |
| </head> | |
| <body> | |
| <slot /> | |
| <script> | |
| import { ObfuscateLink } from 'obfuscate-link-web-component'; | |
| // Only define the custom element if it hasn't been defined yet | |
| if (!customElements.get('obfuscate-link')) { | |
| customElements.define('obfuscate-link', ObfuscateLink); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| <style></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- | |
| type BaseProps = { | |
| id?: string; | |
| } | |
| type EmailProps = BaseProps & { | |
| email: string; | |
| tel?: never; | |
| sms?: never; | |
| facetime?: never; | |
| href?: never; | |
| } | |
| type TelProps = BaseProps & { | |
| email?: never; | |
| tel: string; | |
| sms?: never; | |
| facetime?: never; | |
| href?: never; | |
| } | |
| type SmsProps = BaseProps & { | |
| email?: never; | |
| tel?: never; | |
| sms: string; | |
| facetime?: never; | |
| href?: never; | |
| } | |
| type FacetimeProps = BaseProps & { | |
| email?: never; | |
| tel?: never; | |
| sms?: never; | |
| facetime: string; | |
| href?: never; | |
| } | |
| type HrefProps = BaseProps & { | |
| email?: never; | |
| tel?: never; | |
| sms?: never; | |
| facetime?: never; | |
| href: string; | |
| } | |
| export type Props = EmailProps | TelProps | SmsProps | FacetimeProps | HrefProps; | |
| const props = Astro.props; | |
| const { id } = props; | |
| // Find the active prop (email, tel, sms, facetime, or href) | |
| const activeProp = Object.entries(props).find(([key, value]) => | |
| key !== 'id' && value !== undefined | |
| ); | |
| let attribute = ''; | |
| let value = ''; | |
| if (activeProp) { | |
| [attribute, value] = activeProp; | |
| const orgValue = value; | |
| value = Buffer.from(value).toString('base64'); | |
| } | |
| --- | |
| <obfuscate-link | |
| id={id} | |
| {...{[attribute]: value}} | |
| ><slot /></obfuscate-link> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment