From cb05aa8b6fd2bc8461e28e476f3415ef5e588bee Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 7 May 2019 18:10:58 +0100
Subject: [PATCH] Combine Welcome and App

---
 src/App.vue                | 130 +++++++++++++++++++++++++++++++++--
 src/components/Welcome.vue | 135 -------------------------------------
 2 files changed, 124 insertions(+), 141 deletions(-)
 delete mode 100644 src/components/Welcome.vue

diff --git a/src/App.vue b/src/App.vue
index 4b25193..90d6650 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,111 @@
 <template>
-  <div id="app" class="font-sans text-black bg-black text-sm leading-normal">
+  <div id="app" class="min-h-screen font-sans text-black bg-black text-sm leading-normal">
     <skip-link></skip-link>
 
-    <welcome title="Rebuilding Bartik"></welcome>
+    <div class="bg-blue-300">
+      <div class="py-4 text-white">
+        <div id="header" class="xl:max-w-6xl mx-auto px-4 relative">
+          <div class="flex flex-col-reverse">
+            <div class="flex items-center">
+              <img src="img/logo.svg" alt="" class="mr-4">
+              <div class="text-2xl">
+                <a href="#0">{{ title }}</a>
+              </div>
+            </div>
+
+            <div class="text-sm flex justify-end">
+              <a href="#0">Log in</a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <main-menu></main-menu>
+    </div>
+
+    <div id="main-content" class="bg-white pt-6 pb-4 lg:pb-12">
+      <div class="xl:max-w-6xl mx-auto px-4">
+        <drupal-message type="status">
+          <p>
+            A Bartik clone, built with
+            <a href="https://vuejs.org" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Vue.js</a>
+            and <a href="https://tailwindcss.com" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Tailwind CSS</a>.
+          </p>
+        </drupal-message>
+
+        <div class="flex flex-col md:flex-row-reverse md:-mx-6 my-6">
+          <div id="main" class="w-full md:w-auto md:flex-1 md:px-6 mb-8 md:mb-0">
+            <div class="font-serif">
+              <h1 class="text-3xl font-normal leading-tight mb-1">Welcome to {{ title }}</h1>
+              <p>No front page content has been created yet.</p>
+              <p>Follow the <a href="#0" class="">User Guide</a> to start building your site.</p>
+            </div>
+
+            <div class="mt-10">
+              <a href="#0">
+                <img src="img/feed.svg" alt="">
+              </a>
+            </div>
+          </div>
+
+          <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4">
+            <sidebar-block>
+              <h2 class="font-serif font-normal text-base text-grey-600 border-b border-solid border-grey-300 mb-3">Search</h2>
+
+              <div>
+                <form action="#" class="flex">
+                  <input type="text" class="border border-solid border-grey-400 py-1 px-2 w-full xl:w-auto">
+
+                  <button type="submit" class="bg-grey-200 px-3 rounded-full border-b border-solid border-grey-500 ml-2 flex-none">
+                    <img src="img/loupe.svg" class="block">
+                  </button>
+                </form>
+              </div>
+            </sidebar-block>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="footer" class="text-xs text-white">
+      <div class="xl:max-w-6xl mx-auto px-4 pt-16 pb-4">
+        <div class="border-t border-solid border-grey-600 pt-6 -mb-6">
+          <div class="mb-6">
+            <p><a href="#0">Contact</a></p>
+          </div>
+
+          <div class="mb-6">
+            <p>
+              A clone of <a href="https://www.drupal.org">Drupal</a>’s default theme (Bartik).
+              Built by <a href="https://www.oliverdavies.uk">Oliver Davies</a>
+              using <a href="https://vuejs.org">Vue.js</a>
+              and <a href="https://tailwindcss.com">Tailwind CSS</a>.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import SkipLink from './components/SkipLink'
-import Welcome from './components/Welcome'
+import MainMenu from '@/components/MainMenu'
+import SidebarBlock from '@/components/SidebarBlock'
+import SkipLink from '@/components/SkipLink'
 
 export default {
   name: 'app',
+
   components: {
-    SkipLink,
-    Welcome
+    MainMenu,
+    SidebarBlock,
+    SkipLink
+  },
+
+  data () {
+    return {
+      title: 'Rebuilding Bartik'
+    }
   }
 }
 </script>
@@ -28,5 +119,32 @@ export default {
   transform: translateX(-50%);
 }
 
+#header a {
+  @apply text-white no-underline;
+
+  &:hover,
+  &:focus {
+    @apply underline
+  }
+}
+
+#main a {
+  @apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
+
+  &:hover,
+  &:focus {
+    @apply text-blue-100 border-solid
+  }
+}
+
+#footer a {
+  @apply text-white no-underline border-b border-dotted border-white;
+
+  &:hover,
+  &:focus {
+    @apply border-none
+  }
+}
+
 @tailwind utilities;
 </style>
diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
deleted file mode 100644
index 4527a75..0000000
--- a/src/components/Welcome.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <div class="bg-blue-300">
-      <div class="py-4 text-white">
-        <div id="header" class="xl:max-w-6xl mx-auto px-4 relative">
-          <div class="flex flex-col-reverse">
-            <div class="flex items-center">
-              <img src="img/logo.svg" alt="" class="mr-4">
-              <div class="text-2xl">
-                <a href="#0">{{ title }}</a>
-              </div>
-            </div>
-
-            <div class="text-sm flex justify-end">
-              <a href="#0">Log in</a>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <main-menu></main-menu>
-    </div>
-
-    <div id="main-content" class="bg-white pt-6 pb-4 lg:pb-12">
-      <div class="xl:max-w-6xl mx-auto px-4">
-        <drupal-message type="status">
-          <p>
-            A Bartik clone, built with
-            <a href="https://vuejs.org" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Vue.js</a>
-            and <a href="https://tailwindcss.com" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Tailwind CSS</a>.
-          </p>
-        </drupal-message>
-
-        <div class="flex flex-col md:flex-row-reverse md:-mx-6 my-6">
-          <div id="main" class="w-full md:w-auto md:flex-1 md:px-6 mb-8 md:mb-0">
-            <div class="font-serif">
-              <h1 class="text-3xl font-normal leading-tight mb-1">Welcome to {{ title }}</h1>
-              <p>No front page content has been created yet.</p>
-              <p>Follow the <a href="#0" class="">User Guide</a> to start building your site.</p>
-            </div>
-
-            <div class="mt-10">
-              <a href="#0">
-                <img src="img/feed.svg" alt="">
-              </a>
-            </div>
-          </div>
-
-          <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6 -mb-4">
-            <sidebar-block>
-              <h2 class="font-serif font-normal text-base text-grey-600 border-b border-solid border-grey-300 mb-3">Search</h2>
-
-              <div>
-                <form action="#" class="flex">
-                  <input type="text" class="border border-solid border-grey-400 py-1 px-2 w-full xl:w-auto">
-
-                  <button type="submit" class="bg-grey-200 px-3 rounded-full border-b border-solid border-grey-500 ml-2 flex-none">
-                    <img src="img/loupe.svg" class="block">
-                  </button>
-                </form>
-              </div>
-            </sidebar-block>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div id="footer" class="text-xs text-white">
-      <div class="xl:max-w-6xl mx-auto px-4 pt-16 pb-4">
-        <div class="border-t border-solid border-grey-600 pt-6 -mb-6">
-          <div class="mb-6">
-            <p><a href="#0">Contact</a></p>
-          </div>
-
-          <div class="mb-6">
-            <p>
-              A clone of <a href="https://www.drupal.org">Drupal</a>’s default theme (Bartik).
-              Built by <a href="https://www.oliverdavies.uk">Oliver Davies</a>
-              using <a href="https://vuejs.org">Vue.js</a>
-              and <a href="https://tailwindcss.com">Tailwind CSS</a>.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import MainMenu from './MainMenu.vue'
-import SidebarBlock from './SidebarBlock.vue'
-
-export default {
-  components: {
-    MainMenu,
-    SidebarBlock
-  },
-
-  props: {
-    title: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>
-
-<style type="postcss">
-#header a {
-  @apply text-white no-underline;
-
-  &:hover,
-  &:focus {
-    @apply underline
-  }
-}
-
-#main a {
-  @apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
-
-  &:hover,
-  &:focus {
-    @apply text-blue-100 border-solid
-  }
-}
-
-#footer a {
-  @apply text-white no-underline border-b border-dotted border-white;
-
-  &:hover,
-  &:focus {
-    @apply border-none
-  }
-}
-</style>