update contact form & projects

app.vue

@@ -15,7 +15,7 @@
       { name: 'theme-color', content: '#ffffff' }
     ],
     script: [
-      {  defer: 'true', 'data-domain': 'ryanmoon.com', src: 'https://pa.inspin.co/js/latest.js' }
+      {  defer: 'true', 'data-domain': 'ryanmoon.com', src: 'https://pa.inspin.io/js/latest.js' }
     ]
   })
 </script>

assets/style/pages/_contact.scss

@@ -1,6 +1,10 @@
 .contact {
   padding: 3rem 8.5rem 3rem 1rem;
 
+  .success {
+    padding: 2rem 8rem 0 0;
+  }
+
   form {
     display: grid;
     grid-row-gap: 1.25rem;
@@ -36,20 +40,20 @@
     input {
       position: relative;
       width: 100%;
-      min-width: 0px;
+      height: 2.5rem;
-      height: 40px;
       color: $f-color;
       background: #faf3ea;
-      outline: 2px solid transparent;
+      font-family: $p-font;
       font-size: .925rem;
       font-weight: 400;
-      padding: 0 16px;
+      padding: 0 1rem;
-      border-radius: .375rem;
       border: 1px solid #e6dfd6;
+      border-radius: .375rem;
+      outline: .1rem solid transparent;
 
       &:focus {
         border-color: $btns-color;
-        box-shadow: 0 0 0 1px $btns-color;
+        box-shadow: 0 0 0 .1rem $btns-color;
       }
 
       &::placeholder {
@@ -70,7 +74,7 @@
     textarea {
       min-height: 6rem;
       font-family: $p-font;
-      padding: .5rem 1rem;
+      padding: 1rem;
       resize: vertical;
     }
 

components/index/Apps.vue

@@ -2,7 +2,7 @@
   const apps = await queryContent('projects')
     .sort({ priority: 1 })
     .where({ public: true })
-    .only(['slug', 'project', 'excerpt'])
+    .only(['slug', 'project', 'description'])
     .find()
 </script>
 
@@ -13,7 +13,7 @@
       <NuxtLink :to="'/projects/' + app.slug" class="title" >
         <p>{{ app.project }}</p>
       </NuxtLink>
-      <p class="desc">{{ app.excerpt }}</p>
+      <p class="desc">{{ app.description }}</p>
     </div>
   </div>
 </template>

content/about.md

@@ -14,7 +14,7 @@ I believe in the <a href="https://www.gnu.org/philosophy/free-software-intro.en.
 My development stack consist of Nuxt.js, Directus.io, PostgreSQL, and a few more tools. Some of my websites are also hosted using the <a href="https://handshake.org" target="_BLANK">Handshake</a> naming system such as <a href="https://ryanmoon/" target="_BLANK">ryanmoon/</a> and <a href="https://dir.ectory" target="_BLANK">dir.ectory/</a>.
 
 <!---
-, <a href="https://dir.ectory" target="_BLANK">dir.ectory/</a>, and <a href="https://p.arked" target="_BLANK">p.arked/</a>.
+, and <a href="https://p.arked" target="_BLANK">p.arked/</a>.
 -->
 
 <!---

nuxt.config.ts

@@ -5,9 +5,24 @@ export default defineNuxtConfig({
   modules: [
     '@nuxt/content',
     '@nuxtjs/device',
+    ['nuxt-mail', {
+      message: {
+        to: process.env.EMAIL,
+      },
+      smtp: {
+        host: process.env.SMTP_HOST,
+        port: process.env.SMTP_PORT,
+        auth: {
+          user: process.env.SMTP_USER,
+          pass: process.env.SMTP_PASS,
+        },
+      },
+    }],
   ],
   
   css: [
     "~/assets/style/main.scss",
   ],
+
+  telemetry: false
 })

package.json

@@ -9,16 +9,15 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxt/content": "^2.7.0",
+    "@nuxt/content": "^2.9.0",
     "@nuxt/devtools": "latest",
-    "@nuxtjs/device": "^3.1.0",
+    "@nuxtjs/device": "^3.1.1",
     "@types/node": "^20",
-    "nuxt": "^3.6.2",
+    "nuxt": "^3.8.2",
-    "sass": "^1.63.6",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.13.6",
+    "nuxt-mail": "^4.0.2"
-    "nuxt-mail": "^4.0.1"
   }
 }

pages/contact.vue

@@ -1,39 +1,84 @@
+<script setup>
+
+  const mail = useMail()
+
+  const info = reactive({
+    name: undefined,
+    subject: undefined,
+    company: undefined,
+    email: undefined,
+    message: undefined,
+    test: undefined,
+    sent: false
+  })
+
+  async function onSubmit () {
+    
+    let details = `
+${ info.name } has sent a message.
+
+name: ${ info.name }
+Company: ${ info.company }
+email: ${ info.email }
+
+${ info.message }
+
+`
+
+    if (info.test === undefined) {
+      mail.send({
+        from: 'message@ryanmoon.com',
+        subject: info.subject + ' - ' + info.name + ' sent a message',
+        text: details,
+      })
+  
+      info.sent = true
+    }
+  }
+
+</script>
+
 <template>
   <div class="contact">
     <ContentDoc id="content" />
 
-    <form>
+    <form v-if="!info.sent" :state="info" @submit.prevent="onSubmit">
       <div class="group">
         <label for="name">Name<span aria-hidden="true">*</span></label>
-        <input name="name" id="name" type="text" placeholder="Your name" required="true" />
+        <input v-model="info.name" id="name" type="text" placeholder="Your name" required="true" />
       </div>
 
       <div class="group">
         <label for="subject">Subject<span aria-hidden="true">*</span></label>
-        <select name="subject" id="subject" >
+        <select v-model="info.subject" id="subject" >
           <option value="General" >General</option>
-          <option value="Project Request" >Project Request</option>
+          <option value="Inquiry" >Project Inquiry</option>
-          <option value="Other" >Other</option>
+          <option value="Misc" >Other</option>
           <option disabled selected hidden >---</option>
         </select>
       </div>
 
       <div class="group">
         <label for="company">Company</label>
-        <input name="company" id="company" type="text" placeholder="Your company" required="false" />
+        <input v-model="info.company" id="company" type="text" placeholder="Your company" required="false" />
       </div>
 
       <div class="group">
         <label for="email">Email<span aria-hidden="true">*</span></label>
-        <input name="email" id="email" type="email" placeholder="Email address" required="true" />
+        <input v-model="info.email" id="email" type="email" placeholder="Email address" required="true" />
       </div>
 
       <div class="group message">
         <label for="message">Message<span aria-hidden="true">*</span></label>
-        <textarea name="message" id="message" placeholder="Start typing here" required="true" ></textarea>
+        <textarea v-model="info.message" id="message" placeholder="Start typing here" required="true" ></textarea>
       </div>
 
       <button type="submit" >Submit</button>
     </form>
+
+    <div class="success" v-if="info.sent">
+      <p>Success, your message has been sent. I'll get back to you as soon as possible.</p>
+    </div>
+
   </div>
 </template>