alejofv
diff --git a/‎_includes/components/quote.html‎
Lines changed: 45 additions & 0 deletions b/‎_includes/components/quote.html‎
Lines changed: 45 additions & 0 deletions
diff --git a/‎_layouts/default.html‎
Lines changed: 11 additions & 2 deletions b/‎_layouts/default.html‎
Lines changed: 11 additions & 2 deletions
diff --git a/‎assets/landscape.svg‎
Lines changed: 0 additions & 23 deletions b/‎assets/landscape.svg‎
Lines changed: 0 additions & 23 deletions
@@ -0,0 +1,45 @@
+<div x-data="quote()" x-init="fetchQuote()">
+    <template x-if="isLoaded()">
+        <template x-if="success">
+            <a :href="link" target="_blank"
+                class="inline-block py-2 pl-4 my-2 text-orange-300 border-l-4 border-orange-300" x-text="quote">
+            </a>
+        </template>
+        <template x-if="!success">
+            <p class="py-2 my-2 text-sm text-red-300" x-text="quote">
+            </p>
+        </template>
+    </template>
+    <template x-if="!isLoaded()">
+        <p class="py-2 my-2 text-sm text-gray-300">
+            Loading quote of the day...
+        </p>
+    </template>
+</div>
+
+<script>
+    const quote = () => {
+        return {
+            quote: '',
+            author: '',
+            link: '',
+            success: false,
+            isLoaded() {
+                return this.quote !== ''
+            },
+            fetchQuote() {
+                const url = "/.netlify/functions/quote";
+
+                fetch(url)
+                    .then(response => response.json())
+                    .then(data => {
+                        this.success = data.success;
+                        this.quote = this.success ? `${data.quote.text} - ${data.quote.author}` : data.error
+                        this.link = this.success ? data.quote.link : ''
+
+                        console.log('Loaded quote. Success: ' + this.success)
+                    });
+            }
+        }
+    }
+</script>
@@ -9,13 +9,22 @@
 
   <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/main.css">
   <meta name="theme-color" content="#ffffff">
-  
+
   <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Josefin+Sans&display=swap" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>
 </head>
 
 <body>
-  {{ content }}
+  <div class="bg-gray-700">
+    <div class="container mx-auto md:flex md:flex-row md:items-center md:justify-center md:h-screen">
+      <div class="p-8 md:w-1/2 md:max-w-lg md:order-last">
+        {{ content }}
+      </div>
+      <div class="p-8 md:w-1/2 md:max-w-sm">
+        <img src="/assets/splash.svg" alt="landscape">
+      </div>
+    </div>
+  </div>
 </body>
 
 </html>