From e6682c25a64ce78590eec009e6fde9c9629db586 Mon Sep 17 00:00:00 2001
From: sjpratt19 <sjpratt19@gmail.com>
Date: Thu, 3 Dec 2020 19:41:35 -0800
Subject: [PATCH] Added contact page

---
 demo/pages/contact.md                         |  4 +
 demo/pages/success.md                         |  8 ++
 demo/saber-config.js                          |  8 ++
 .../template/pages/contact.md                 |  4 +
 .../template/pages/success.md                 |  8 ++
 .../create-portfolio/template/saber-config.js |  8 ++
 .../src/components/TextArea.vue               | 48 +++++++++++
 .../src/components/TextField.vue              | 46 +++++++++++
 .../src/layouts/contact.vue                   | 80 +++++++++++++++++++
 9 files changed, 214 insertions(+)
 create mode 100644 demo/pages/contact.md
 create mode 100644 demo/pages/success.md
 create mode 100644 packages/create-portfolio/template/pages/contact.md
 create mode 100644 packages/create-portfolio/template/pages/success.md
 create mode 100644 packages/saber-theme-portfolio/src/components/TextArea.vue
 create mode 100644 packages/saber-theme-portfolio/src/components/TextField.vue
 create mode 100644 packages/saber-theme-portfolio/src/layouts/contact.vue

diff --git a/demo/pages/contact.md b/demo/pages/contact.md
new file mode 100644
index 0000000..d489ca7
--- /dev/null
+++ b/demo/pages/contact.md
@@ -0,0 +1,4 @@
+---
+title: Contact
+layout: contact
+---
diff --git a/demo/pages/success.md b/demo/pages/success.md
new file mode 100644
index 0000000..e142db8
--- /dev/null
+++ b/demo/pages/success.md
@@ -0,0 +1,8 @@
+---
+title: Form Submitted
+layout: page
+---
+
+Form successfully submitted.
+
+[Return Home](/)
diff --git a/demo/saber-config.js b/demo/saber-config.js
index 19c15cc..58e076e 100644
--- a/demo/saber-config.js
+++ b/demo/saber-config.js
@@ -20,6 +20,10 @@ module.exports = {
     sponsorLink: 'https://patreon.com/egoist',
     sponsorTip: 'Support my work',
     disqus: 'create-portfolio',
+    contactForm: {
+      type: 'netlify',
+      formSubmitRedirect: '/success'
+    },
     nav: [
       {
         text: 'Home',
@@ -28,6 +32,10 @@ module.exports = {
       {
         text: 'About',
         link: '/about'
+      },
+      {
+        text: 'Contact',
+        link: '/contact'
       }
     ],
     skills: [
diff --git a/packages/create-portfolio/template/pages/contact.md b/packages/create-portfolio/template/pages/contact.md
new file mode 100644
index 0000000..d489ca7
--- /dev/null
+++ b/packages/create-portfolio/template/pages/contact.md
@@ -0,0 +1,4 @@
+---
+title: Contact
+layout: contact
+---
diff --git a/packages/create-portfolio/template/pages/success.md b/packages/create-portfolio/template/pages/success.md
new file mode 100644
index 0000000..e142db8
--- /dev/null
+++ b/packages/create-portfolio/template/pages/success.md
@@ -0,0 +1,8 @@
+---
+title: Form Submitted
+layout: page
+---
+
+Form successfully submitted.
+
+[Return Home](/)
diff --git a/packages/create-portfolio/template/saber-config.js b/packages/create-portfolio/template/saber-config.js
index 6df239b..9aeb918 100644
--- a/packages/create-portfolio/template/saber-config.js
+++ b/packages/create-portfolio/template/saber-config.js
@@ -18,6 +18,10 @@ module.exports = {
     twitter: '<%= twitter %>',
     sponsorLink: '<%= sponsorLink %>',
     sponsorTip: 'Support my work',
+    contactForm: {
+      type: 'netlify',
+      formSubmitRedirect: '/success'
+    },
     nav: [
       {
         text: 'Home',
@@ -26,6 +30,10 @@ module.exports = {
       {
         text: 'About',
         link: '/about'
+      },
+      {
+        text: 'Contact',
+        link: '/contact'
       }
     ]
   },
diff --git a/packages/saber-theme-portfolio/src/components/TextArea.vue b/packages/saber-theme-portfolio/src/components/TextArea.vue
new file mode 100644
index 0000000..4f9a89e
--- /dev/null
+++ b/packages/saber-theme-portfolio/src/components/TextArea.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="text-input">
+    <label>{{ label }}</label>
+    <textarea :type="type" :name="name" required />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text-input {
+  padding-bottom: 20px;
+}
+label {
+  font-size: 20px;
+}
+textarea {
+  display: block;
+  resize: none;
+  width: 400px;
+  height: 150px;
+  padding: 10px;
+  border: 1px solid var(--hover-border-color);
+  border-radius: 3px;
+  background: var(--card-bg);
+  color: var(--text-color);
+}
+textarea:focus {
+  outline: 1px solid var(--hover-border-color);
+}
+</style>
diff --git a/packages/saber-theme-portfolio/src/components/TextField.vue b/packages/saber-theme-portfolio/src/components/TextField.vue
new file mode 100644
index 0000000..a3814e2
--- /dev/null
+++ b/packages/saber-theme-portfolio/src/components/TextField.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="text-input">
+    <label>{{ label }}</label>
+    <input :type="type" :name="name" required />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    type: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text-input {
+  padding-bottom: 20px;
+}
+label {
+  font-size: 20px;
+}
+input {
+  display: block;
+  width: 300px;
+  padding: 10px;
+  border: 1px solid var(--hover-border-color);
+  border-radius: 3px;
+  background: var(--card-bg);
+  color: var(--text-color);
+}
+input:focus {
+  outline: 1px solid var(--hover-border-color);
+}
+</style>
diff --git a/packages/saber-theme-portfolio/src/layouts/contact.vue b/packages/saber-theme-portfolio/src/layouts/contact.vue
new file mode 100644
index 0000000..ab9b177
--- /dev/null
+++ b/packages/saber-theme-portfolio/src/layouts/contact.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="wrap">
+    <div class="container">
+      <HomeProfile />
+      <div class="main">
+        <div class="columns">
+          <div class="column is-8">
+            <h2 class="page-title">
+              {{ page.attributes.title }}
+            </h2>
+            <form
+              name="Contact Form"
+              method="POST"
+              data-netlify="true"
+              :action="$themeConfig.contactForm.formSubmitRedirect"
+            >
+              <input type="hidden" name="form-name" value="Contact Form" />
+              <TextField label="Your Name" type="text" name="name" />
+              <TextField label="Your Email" type="email" name="email" />
+              <TextArea label="Your Message" type="text" name="message" />
+              <button type="submit">Send</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import HomeProfile from '../components/HomeProfile.vue'
+import TextField from '../components/TextField.vue'
+import TextArea from '../components/TextArea.vue'
+
+export default {
+  components: {
+    HomeProfile,
+    TextField,
+    TextArea
+  },
+  props: ['page'],
+  head() {
+    return {
+      title: ''
+        .concat(this.page.attributes.title, ' - ')
+        .concat(this.$siteConfig.title),
+      meta: [
+        {
+          property: 'og:title',
+          content: this.$siteConfig.title
+        },
+        {
+          property: 'og:description',
+          content: this.$siteConfig.description
+        },
+        {
+          property: 'og:image',
+          content: this.$themeConfig.profilePicture
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+button {
+  width: 80px;
+  height: 40px;
+  cursor: pointer;
+  border: 1px solid var(--hover-border-color);
+  border-radius: 3px;
+  background: var(--card-bg);
+  color: var(--text-color);
+}
+button:hover {
+  border: 2px solid var(--hover-border-color);
+  border-radius: 3px;
+}
+</style>