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' } { name: 'theme-color', content: '#ffffff' }
], ],
script: [ 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> </script>

View File

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

View File

@ -2,7 +2,7 @@
const apps = await queryContent('projects') const apps = await queryContent('projects')
.sort({ priority: 1 }) .sort({ priority: 1 })
.where({ public: true }) .where({ public: true })
.only(['slug', 'project', 'excerpt']) .only(['slug', 'project', 'description'])
.find() .find()
</script> </script>
@ -13,7 +13,7 @@
<NuxtLink :to="'/projects/' + app.slug" class="title" > <NuxtLink :to="'/projects/' + app.slug" class="title" >
<p>{{ app.project }}</p> <p>{{ app.project }}</p>
</NuxtLink> </NuxtLink>
<p class="desc">{{ app.excerpt }}</p> <p class="desc">{{ app.description }}</p>
</div> </div>
</div> </div>
</template> </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>. 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: [ modules: [
'@nuxt/content', '@nuxt/content',
'@nuxtjs/device', '@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: [ css: [
"~/assets/style/main.scss", "~/assets/style/main.scss",
], ],
telemetry: false
}) })

19307
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

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> <template>
<div class="contact"> <div class="contact">
<ContentDoc id="content" /> <ContentDoc id="content" />
<form> <form v-if="!info.sent" :state="info" @submit.prevent="onSubmit">
<div class="group"> <div class="group">
<label for="name">Name<span aria-hidden="true">*</span></label> <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>
<div class="group"> <div class="group">
<label for="subject">Subject<span aria-hidden="true">*</span></label> <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="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> <option disabled selected hidden >---</option>
</select> </select>
</div> </div>
<div class="group"> <div class="group">
<label for="company">Company</label> <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>
<div class="group"> <div class="group">
<label for="email">Email<span aria-hidden="true">*</span></label> <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>
<div class="group message"> <div class="group message">
<label for="message">Message<span aria-hidden="true">*</span></label> <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> </div>
<button type="submit" >Submit</button> <button type="submit" >Submit</button>
</form> </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> </div>
</template> </template>