update contact form & projects
parent
bfb9cc0de0
commit
e69dba136a
2
app.vue
2
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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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>.
|
||||
-->
|
||||
|
||||
<!---
|
||||
|
|
|
@ -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
|
||||
})
|
File diff suppressed because it is too large
Load Diff
11
package.json
11
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",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue