Added contact page

demo/pages/contact.md

@@ -0,0 +1,4 @@
+---
+title: Contact
+layout: contact
+---

demo/pages/success.md

@@ -0,0 +1,8 @@
+---
+title: Form Submitted
+layout: page
+---
+
+Form successfully submitted.
+
+[Return Home](/)

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: [

packages/create-portfolio/template/pages/contact.md

@@ -0,0 +1,4 @@
+---
+title: Contact
+layout: contact
+---

packages/create-portfolio/template/pages/success.md

@@ -0,0 +1,8 @@
+---
+title: Form Submitted
+layout: page
+---
+
+Form successfully submitted.
+
+[Return Home](/)

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'
       }
     ]
   },

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>

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>

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>