Skip to content

Commit

Permalink
Migrate landing page: header
Browse files Browse the repository at this point in the history
  • Loading branch information
@tobiasdiez
tobiasdiez committed Aug 14, 2022
1 parent 2254f1d commit 95148ba
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 169 deletions.
115 changes: 68 additions & 47 deletions components/NavBar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
Expand All @@ -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">
Expand Down Expand Up @@ -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>
79 changes: 0 additions & 79 deletions components/header.html
View file

This file was deleted.

40 changes: 14 additions & 26 deletions layouts/content.vue
View file
Original file line number Diff line number Diff line change
@@ -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>
</div>
</template>
14 changes: 0 additions & 14 deletions layouts/landingpage.vue
View file

This file was deleted.

86 changes: 83 additions & 3 deletions pages/index.vue
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 95148ba

Please sign in to comment.