Add documentation on setting up DMARC

components/global/managed-note.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="bg-blue-100 p-5 flex flex-row gap-2">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
+      />
+    </svg>
+    <div>
+      <strong>Note:</strong>
+      This document only applies if you are using Managed Keila on keila.io.<br />
+      If you are using a self-hosted instance, these instructions won’t work.
+    </div>
+  </div>
+</template>

content/docs/managed-dmarc.md

@@ -0,0 +1,36 @@
+---
+title: Setting up SPF, DKIM & DMARC
+slug: managed-dmarc
+---
+
+# Setting up your domain for SPF, DKIM & DMARC
+
+Setting up your domain to comply with SPF, DKIM and DMARC requirements that are being
+implemented by more and more email providers, is easy with Keila!
+
+<managed-note></managed-note>
+
+## 1. Pick an unused subdomain.
+Choose a subdomain that is not currently used for anything else. This
+subdomain will become your *FROM domain*. Common choices are something
+like `mailings.example.com` or `send.example.com`.
+
+## 2. Update your DNS
+
+Add the following entries to your DNS settings:
+
+**Connect your chosen subdomain with CNAME**:  
+`CNAME` `*your-subdomain*.example.com` `public.keila.io`
+
+**Add the Keila DKIM key**:  
+`CNAME` `keila._domainkey.example.com`
+
+**Enable DMARC for your main domain**:  
+`TXT` `example.com` `v=DMARC1; p=none`
+
+## 3. Almost done!
+
+Now you’re almost done! Just submit our domain configuration form and we’ll take
+care of the rest and get in touch with you.
+<br><br><br>
+<a href="https://forms.gle/c3SJV8TrLxxzwqZq5" class="link-button">Submit your configuration</a>

layouts/default.vue

@@ -62,8 +62,8 @@
 </template>
 
 <script>
-import ogImage from '@/static/og_image.png'
 import logo from '../components/logo.vue'
+import ogImage from '@/static/og_image.png'
 const baseUrl = process.env.BASE_URL || ''
 
 export default {

layouts/docs.vue

@@ -64,8 +64,8 @@
 </template>
 
 <script>
-import ogImage from '@/static/og_image.png'
 import logo from '../components/logo.vue'
+import ogImage from '@/static/og_image.png'
 const baseUrl = process.env.BASE_URL || ''
 
 export default {

pages/docs/_slug.vue

@@ -28,6 +28,16 @@
             <li><nuxt-link to="/docs/campaigns">Campaigns</nuxt-link></li>
           </ul>
         </li>
+        <li class="with-sub">
+          <nuxt-link to="/docs/managed-dmarc">Managed&nbsp;Keila</nuxt-link>
+          <ul>
+            <li>
+              <nuxt-link to="/docs/managed-dmarc"
+                >Domain&nbsp;setup<br />(SPF,&nbsp;DKIM,&nbsp;DMARC)</nuxt-link
+              >
+            </li>
+          </ul>
+        </li>
         <li class="with-sub">
           <nuxt-link to="/docs/api">API</nuxt-link>
           <ul>
@@ -137,73 +147,84 @@ nav a.nuxt-link-exact-active {
   @apply bg-green-700 text-white;
 }
 
->>> .nuxt-content > * + * {
+:deep() .link-button {
+  @apply border-2 border-green-700 p-5;
+
+  &:hover {
+    @apply bg-green-100 cursor-pointer underline;
+  }
+}
+
+:deep() .nuxt-content > * + * {
   @apply text-gray-800 mt-5;
 }
 
->>> article h1 {
+:deep() article h1 {
   @apply text-3xl mb-5 font-bold text-gray-800;
 }
 
->>> .nuxt-content > h2 {
+:deep() .nuxt-content > h2 {
   @apply text-xl font-semibold mt-10;
 }
 
->>> article h3 {
+:deep() article h3 {
   @apply text-xl italic;
 }
 
->>> .nuxt-content > * + h3 {
+:deep() .nuxt-content > * + h3 {
   @apply mt-10;
 }
 
->>> .nuxt-content > h2 + h3 {
+:deep() .nuxt-content > h2 + h3 {
   @apply mt-5;
 }
 
->>> article h4 {
+:deep() article h4 {
   @apply font-bold;
 }
 
->>> article * + p {
+:deep() article * + p {
   @apply mt-5;
 }
 
->>> h2 + p {
+:deep() h2 + p {
   @apply mt-0;
 }
 
->>> article table {
+:deep() article table {
   @apply block w-full shadow overflow-x-auto;
   white-space: nowrap;
 }
 
->>> article table th {
+:deep() article table th {
   @apply bg-gray-100 text-left;
 }
 
->>> article table th,
->>> article table td {
+:deep() article table th,
+:deep() article table td {
   @apply p-5;
 }
 
->>> article a {
+:deep() article a {
   @apply text-green-600;
 }
 
->>> article ul {
+:deep() article ul {
   @apply ml-5 list-disc;
 }
+:deep() article ol {
+  @apply ml-5 list-decimal;
+}
 
->>> article code {
+:deep() article code {
   @apply bg-gray-300 border-2 border-gray-300;
 }
 
->>> article pre code {
+:deep() article pre code {
   @apply bg-transparent border-0;
 }
 
->>> article .next {
+:deep() article .next {
   @apply mt-10;
 }
 </style>