1
0
Fork 0

update contact form & projects

main
Ryan Moon 2023-11-26 20:36:09 -05:00
parent bfb9cc0de0
commit e69dba136a
8 changed files with 10551 additions and 8869 deletions

View File

@ -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>

View File

@ -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: 40px;
height: 2.5rem;
color: $f-color;
background: #faf3ea;
outline: 2px solid transparent;
font-family: $p-font;
font-size: .925rem;
font-weight: 400;
padding: 0 16px;
border-radius: .375rem;
padding: 0 1rem;
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;
}

View File

@ -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>

View File

@ -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>.
-->
<!---

View File

@ -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
})

19513
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",
"sass": "^1.63.6",
"nuxt": "^3.8.2",
"sass": "^1.69.5",
"sass-loader": "^13.3.2"
},
"dependencies": {
"@nuxtjs/axios": "^5.13.6",
"nuxt-mail": "^4.0.1"
"nuxt-mail": "^4.0.2"
}
}

View File

@ -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="Other" >Other</option>
<option value="Inquiry" >Project Inquiry</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>