From 95148baf98394a4cf397581fd4e09b42596312e2 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.com>
Date: Sun, 14 Aug 2022 20:17:42 +0000
Subject: [PATCH] Migrate landing page: header

---
 components/NavBar.vue   | 115 ++++++++++++++++++++++++----------------
 components/header.html  |  79 ---------------------------
 layouts/content.vue     |  40 +++++---------
 layouts/landingpage.vue |  14 -----
 pages/index.vue         |  86 ++++++++++++++++++++++++++++--
 5 files changed, 165 insertions(+), 169 deletions(-)
 delete mode 100644 components/header.html
 delete mode 100644 layouts/landingpage.vue

diff --git a/components/NavBar.vue b/components/NavBar.vue
index 6cf58ea00..aca5044ad 100644
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -4,6 +4,17 @@
       class="w-full flex flex-row flex-wrap items-center justify-between bg-white px-6 border-b border-gray-300 h-20"
     >
       <div class="flex">
+        <!-- Logo -->
+        <div
+          v-if="showLogo"
+          class="hidden flex-none md:flex flex-row items-center w-full h-20 border-b px-6"
+        >
+          <jabref-logo class="w-10 flex-none" />
+          <span class="ml-3 flex-1 text-gray-900 text-2xl font-semibold"
+            >JabRef</span
+          >
+        </div>
+
         <!-- Hamburger icon for small screens -->
         <div class="flex md:hidden mr-5 items-center">
           <button
@@ -15,7 +26,10 @@
         </div>
 
         <!-- Search bar -->
-        <div class="relative text-gray-600">
+        <div
+          v-if="showSearchBar"
+          class="relative text-gray-600"
+        >
           <t-input
             v-model="searchQuery"
             type="search"
@@ -35,22 +49,24 @@
       </div>
 
       <!-- Main menu -->
-      <div class="space-x-14">
-        <span class="text-primary-600 text-lg font-semibold">Library</span>
-        <span class="text-gray-400 text-lg font-semibold">Browse</span>
-        <div class="inline">
-          <span class="text-gray-400 text-lg font-semibold">
-            Subscriptions
-          </span>
-          <div class="inline-block align-top pl-0.5 -mt-1">
-            <FontAwesomeIcon
-              icon="circle"
-              class="text-primary-600"
-              size="xs"
-            />
+      <slot>
+        <div class="space-x-14">
+          <span class="text-primary-600 text-lg font-semibold">Library</span>
+          <span class="text-gray-400 text-lg font-semibold">Browse</span>
+          <div class="inline">
+            <span class="text-gray-400 text-lg font-semibold">
+              Subscriptions
+            </span>
+            <div class="inline-block align-top pl-0.5 -mt-1">
+              <FontAwesomeIcon
+                icon="circle"
+                class="text-primary-600"
+                size="xs"
+              />
+            </div>
           </div>
         </div>
-      </div>
+      </slot>
 
       <!-- User profile -->
       <div class="flex items-center pr-10 space-x-7">
@@ -119,48 +135,53 @@
   </nav>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { useApolloClient, useMutation } from '@vue/apollo-composable'
 import { gql } from '~/apollo'
 import { cacheCurrentUser } from '~/apollo/cache'
 import { useUiStore } from '~/store'
 
-export default defineComponent({
-  setup() {
-    const { resolveClient } = useApolloClient()
+defineProps({
+  showLogo: {
+    type: Boolean,
+    default: false,
+  },
+  showSearchBar: {
+    type: Boolean,
+    default: true,
+  },
+})
 
-    const { mutate: logout, onDone } = useMutation(
-      gql(/* GraphQL */ `
-        mutation Logout {
-          logout {
-            result
-          }
-        }
-      `),
-      {
-        update(_cache, _data) {
-          cacheCurrentUser(null)
-        },
-      }
-    )
+const { resolveClient } = useApolloClient()
 
-    onDone(() => {
-      // Reset graphql cache
-      void resolveClient().clearStore()
+const { mutate: logout, onDone } = useMutation(
+  gql(/* GraphQL */ `
+    mutation Logout {
+      logout {
+        result
+      }
+    }
+  `),
+  {
+    update(_cache, _data) {
+      cacheCurrentUser(null)
+    },
+  }
+)
 
-      void navigateTo({ name: 'index' })
-    })
+onDone(() => {
+  // Reset graphql cache
+  void resolveClient().clearStore()
 
-    const uiStore = useUiStore()
-    // TODO:Don't update store immediately to avoid unnecessary queries to the server.
-    // For some reason `toRef(uiStore.activeSearchQuery) + useDebounce` or `debouncedWatch` doesn't work here
-    const searchQuery = ref(uiStore.activeSearchQuery ?? '')
+  void navigateTo({ name: 'index' })
+})
 
-    watch(searchQuery, (newQuery) => {
-      uiStore.activeSearchQuery = newQuery
-    })
+const uiStore = useUiStore()
+// TODO:Don't update store immediately to avoid unnecessary queries to the server.
+// For some reason `toRef(uiStore.activeSearchQuery) + useDebounce` or `debouncedWatch` doesn't work here
+const searchQuery = ref(uiStore.activeSearchQuery ?? '')
 
-    return { logout, searchQuery }
-  },
+watch(searchQuery, (newQuery) => {
+  uiStore.activeSearchQuery = newQuery
 })
 </script>
diff --git a/components/header.html b/components/header.html
deleted file mode 100644
index 1072c18b8..000000000
--- a/components/header.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!-- Navigation -->
-<nav id="navbar-main" class="navbar navbar-expand-lg navbar-light fixed-top">
-  <div class="container">
-    <a class="navbar-brand" href="#">
-      <img style="height: 1.2em;" class="pr-4" src="/img/JabRef-icon-256.png" />
-      {{ site.title }}
-    </a>
-
-    <!-- Links get grouped for better mobile display -->
-    <button
-      class="navbar-toggler"
-      type="button"
-      data-toggle="collapse"
-      data-target="#navbarNav"
-      aria-controls="navbarNav"
-      aria-expanded="false"
-      aria-label="Toggle navigation"
-    >
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="collapse navbar-collapse" id="navbarNav">
-      <ul class="navbar-nav ml-auto mr-1">
-        <li class="nav-item">
-          <a class="nav-link" href="#features">Features</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#download">Download</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#getinvolved">Get Involved</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#support">Support</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="https://blog.jabref.org/">News</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav>
-
-<!-- Masthead -->
-<header class="masthead text-center">
-  <div class="container">
-    <div class="row">
-      <div class="col-xl-9 mx-auto">
-        <h1>{{ page.title }}</h1>
-      </div>
-      <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
-        <h3 class="mb-5">{{ page.subTitle }}</h3>
-      </div>
-    </div>
-    <div class="screenshot mt-5" data-img="main">
-      <img id="screeny" src="../img/jabref-mainscreen.png" alt="" />
-      <div class="interactive-image" id="image-overlay-container"></div>
-    </div>
-    <div class="row mt-5">
-      <div class="col-lg-10 col-lg-offset-1 mx-auto">
-        <h2>JabRef supports you in every step of your research</h2>
-        <p class="lead pt-2">
-          Read more about it below or get going straight away.
-        </p>
-      </div>
-    </div>
-    <div class="row justify-content-center pt-3">
-      <div class="col-auto">
-        <a
-          href="https://downloads.jabref.org/"
-          class="btn btn-primary btn-lg download-btn"
-        >
-          Download JabRef
-        </a>
-      </div>
-    </div>
-  </div>
-</header>
diff --git a/layouts/content.vue b/layouts/content.vue
index 34ef35b56..114ced5e1 100644
--- a/layouts/content.vue
+++ b/layouts/content.vue
@@ -1,28 +1,16 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
-  </link>
-  <body>
-    <div class="container">
-      <div class="row">
-        <div class="col-xs-1 col-md-2"></div>
-        <div class="col-xs-10 col-md-8">
-          {{ content }}
+<template>
+  <div class="flex flex-wrap">
+    <div class="min-h-screen w-full flex flex-col">
+      <header>
+        <slot name="header">
+          <NavBar />
+        </slot>
+      </header>
+      <main class="relative h-full overflow-hidden">
+        <div class="grow p-6 h-full">
+          <slot />
         </div>
-        <div class="col-xs-1 col-md-2"></div>
-      </div>
-      <div class="row">
-        <div class="col-xs-1 col-md-2"></div>
-        <div class="col-xs-3 col-md-3">
-          <a href="../">Return to Index</a>
-        </div>
-        <div class="col-xs-2 col-xs-offset-2 col-md-offset-2 col-md-3 text-right">
-          <a href="{{site.github.repository_url}}/blob/gh-pages/{{page.path}}">Edit this page</a>
-        </div>
-        <div class="col-xs-1 col-md-2"></div>
-      </div>
+      </main>
     </div>
-  </body>
-</html>
\ No newline at end of file
+  </div>
+</template>
diff --git a/layouts/landingpage.vue b/layouts/landingpage.vue
deleted file mode 100644
index 8eb25df54..000000000
--- a/layouts/landingpage.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-	{% include head.html %}
-
-	<body data-spy="scroll" data-target="#navbar-main" data-offset="0">
-		{% include header.html %}
-		{% include features.html %}
-		{% include download.html %}
-		{% include getinvolved.html %}
-		{% include support.html %}
-		{% include footer.html %}
-		{% include js.html %}
-	</body>
-</html>
diff --git a/pages/index.vue b/pages/index.vue
index 920840bda..785d4987a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,85 @@
 <template>
-  <div class="container"></div>
-  --- layout: default title: Stay on top of your Literature subTitle: The
-  efficient way to collect, organize & discover ---
+  <div>
+    <NuxtLayout name="content">
+      <template #header>
+        <NavBar
+          :show-search-bar="false"
+          :show-logo="true"
+        >
+          <div class="space-x-14">
+            <t-nuxtlink
+              active-class="text-gray-400 hover:text-highlight-600 text-lg font-semibold"
+              href="#features"
+              >Features</t-nuxtlink
+            >
+            <t-nuxtlink
+              active-class="text-gray-400 hover:text-highlight-600 text-lg font-semibold"
+              href="#download"
+              >Download</t-nuxtlink
+            >
+            <t-nuxtlink
+              active-class="text-gray-400 hover:text-highlight-600 text-lg font-semibold"
+              href="#getinvolved"
+              >Get Involved</t-nuxtlink
+            >
+            <t-nuxtlink
+              active-class="text-gray-400 hover:text-highlight-600 text-lg font-semibold"
+              href="#support"
+              >Support</t-nuxtlink
+            >
+            <t-nuxtlink
+              class="text-gray-400 hover:text-highlight-600 text-lg font-semibold"
+              href="https://blog.jabref.org/"
+              >News</t-nuxtlink
+            >
+          </div>
+        </NavBar>
+      </template>
+
+      <!-- Masthead -->
+      <header class="masthead text-center">
+        <div class="container mx-auto">
+          <div class="flex flex-wrap">
+            <div class="xl:w-3/4 pr-4 pl-4 mt-16 mx-auto">
+              <h1 class="text-5xl mb-4">Stay on top of your Literature</h1>
+            </div>
+            <div class="xl:w-3/4 pr-4 pl-4 mx-auto">
+              <h2 class="mb-5 text-3xl text-gray-700">
+                The efficient way to collect, organize & discover
+              </h2>
+            </div>
+          </div>
+          <div class="mt-20 shadow-[0_0_25px_#a7a7bd] max-w-screen-xl mx-auto">
+            <img
+              src="~/assets/jabref-mainscreen.png"
+              alt=""
+            />
+          </div>
+          <div class="row mt-5">
+            <div class="xl:w-3/4 pr-4 pl-4 mt-16 mx-auto">
+              <h2 class="text-3xl">
+                JabRef supports you in every step of your research
+              </h2>
+              <p class="text-xl font-light pt-2">
+                Read more about it below or get going straight away.
+              </p>
+            </div>
+          </div>
+          <div class="row justify-content-center pt-6">
+            <div class="col-auto">
+              <t-button class="mx-auto text-xl">
+                <a href="https://downloads.jabref.org/"> Download JabRef </a>
+              </t-button>
+            </div>
+          </div>
+        </div>
+      </header>
+      {% include features.html %} {% include download.html %} {% include
+      getinvolved.html %} {% include support.html %} {% include footer.html %}
+    </NuxtLayout>
+  </div>
 </template>
+
+<script setup lang="ts">
+definePageMeta({ layout: false })
+</script>