Add contact page

server/app.js

@@ -27,6 +27,7 @@ require('apostrophe')({
     'book-page': {},
     'book-preview-widget': {},
     'highlight-items-widget': {},
+    'contact-page': {},
     donate: {},
     'donate-page': {},
     newsletter: {},

server/modules/@apostrophecms/page/index.js

@@ -13,6 +13,10 @@ module.exports = {
         name: 'author-page',
         label: 'Author',
       },
+      {
+        name: 'contact-page',
+        label: 'Contact',
+      },
     ],
     park: [
       {

server/modules/contact-page/index.js

@@ -0,0 +1,50 @@
+module.exports = {
+  extend: '@apostrophecms/page-type',
+  fields: {
+    add: {
+      heading: {
+        type: 'string',
+      },
+      paragraph: {
+        type: 'string',
+        textarea: true,
+      },
+      form: {
+        type: 'object',
+        fields: {
+          add: {
+            nameLabel: {
+              type: 'string',
+            },
+            emailLabel: {
+              type: 'string',
+            },
+            messageLabel: {
+              type: 'string',
+            },
+          },
+        },
+      },
+    },
+    group: {
+      basics: {
+        label: 'Basics',
+        fields: ['title', 'heading', 'paragraph', 'form'],
+      },
+    },
+  },
+  methods (self) {
+    return {
+      indexPage (req) {
+        self.setTemplate(req, 'index')
+      },
+      showPage (req) {
+        req.notFound = true
+      },
+      // dispatchAll () {
+      //   self.dispatch('/', self.indexPage)
+      //   self.dispatch('/:slug', self.showPage)
+      // },
+    }
+  },
+}

server/modules/contact-page/ui/src/index.scss

@@ -0,0 +1,19 @@
+.pdl-contact {
+  display: flex;
+
+  .pdl-contact__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+  }
+  .pdl-contact__heading {
+    font-size: 113px;
+    font-weight: 450;
+    margin-top: 50px;
+    margin-left: 32px;
+    margin-bottom: 48px;
+    letter-spacing: -1px;
+    text-align: left;
+  }
+}

server/modules/contact-page/views/page.html

@@ -0,0 +1,34 @@
+{% extends "layout.html" %}
+{% block title %}{{ data.page.title }}{% endblock %}
+
+{% block main %}
+<section class="pdl-contact">
+  <div class="pdl-contact__wrapper">
+    <h1 class="pdl-contact__heading">
+      {{ data.page.heading }}
+    </h1>
+    <div class="pdl-contact__paragraph">
+      {{ data.page.paragraph | safe }}
+    </div>
+  </div>
+
+  <div class="pdl-contact__wrapper">
+    <form class="pdl-contact__form" action="/contact" method="post">
+      <div class="pdl-contact__form-group">
+        <label for="name" class="pdl-contact__label">Name</label>
+        <input type="text" id="name" name="name" class="pdl-contact__input" required>
+      </div>
+      <div class="pdl-contact__form-group">
+        <label for="email" class="pdl-contact__label">Email</label>
+        <input type="email" id="email" name="email" class="pdl-contact__input" required>
+      </div>
+      <div class="pdl-contact__form-group">
+        <label for="message" class="pdl-contact__label">Message</label>
+        <textarea id="message" name="message" class="pdl-contact__textarea" required></textarea>
+      </div>
+      <button type="submit" class="pdl-contact__button">Send</button>
+    </form>
+  </div>
+</section>
+{% endblock %}
+