obscure email

index.html

@@ -117,7 +117,7 @@
           <h2>Contact</h2>
         </header>
 
-        <p x-data="{ email: 'a@aneur.in' }">
+        <p x-data="contact">
           The best way to reach me is by email.
           Send a message to <a x-bind:href="`mailto:${email}`" x-text="email"></a> summarising what you're looking for—or just to say hello!
         </p>

src/components/Contact.ts

@@ -0,0 +1,11 @@
+export interface ContactState {
+  email: string
+}
+
+export default function Contact(): ContactState {
+  const email = 'ni.ruena@a'.split('').reverse().join('')
+
+  return {
+    email,
+  }
+}

src/components/Skills.ts

@@ -1,30 +1,30 @@
 import { Skill } from '../types'
 import request, { ErrorResponse } from '@annybs/request-js'
 
-export default function Skills() {
-  interface State {
-    currentTag: string | null
-    skills: Skill[]
-    tags: string[]
-    visibleSkills: Skill[]
+export interface SkillsState {
+  currentTag: string | null
+  skills: Skill[]
+  tags: string[]
+  visibleSkills: Skill[]
 
-    init(): void
-    setCurrentTag(e: MouseEvent): void
-    tagClass(value: string): string
-  }
+  init(): void
+  setCurrentTag(e: MouseEvent): void
+  tagClass(value: string): string
+}
 
+export default function Skills(): SkillsState {
   function readCurrentTag() {
     const usp = new URLSearchParams(window.location.search)
     return usp.get('tag')
   }
 
-  function updateVisibleSkills(this: State) {
+  function updateVisibleSkills(this: SkillsState) {
     const tag = this.currentTag
     if (tag) this.visibleSkills = this.skills.filter(skill => skill.tags.includes(tag))
     else this.visibleSkills = this.skills
   }
 
-  const state: State = {
+  return {
     currentTag: null,
     skills: [],
     visibleSkills: [],
@@ -77,6 +77,4 @@ export default function Skills() {
       return 'tag'
     },
   }
-
-  return state
 }

src/main.ts

@@ -1,9 +1,11 @@
 import './style.scss'
 import Alpine from 'alpinejs'
+import Contact from './components/Contact'
 import Skills from './components/Skills'
 
 function main() {
   (window as unknown as { Alpine: typeof Alpine }).Alpine = Alpine
+  Alpine.data('contact', Contact)
   Alpine.data('skills', Skills)
   Alpine.start()
 }