Skip to content
This repository has been archived by the owner on Oct 15, 2024. It is now read-only.

Commit

Permalink
✨ Add about page, add error page and add texts
Browse files Browse the repository at this point in the history
  • Loading branch information
dmitrijt9 committed Jan 17, 2021
1 parent 01aee6c commit 8db713f
Show file tree
Hide file tree
Showing 9 changed files with 269 additions and 30 deletions.
16 changes: 16 additions & 0 deletions assets/icons/check.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
</template>
6 changes: 4 additions & 2 deletions components/Footer.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<footer class="bg-white">
<div
class="max-w-7xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8"
class="max-w-9xl mx-auto py-12 px-4 sm:px-6 md:flex md:items-center md:justify-between lg:px-8"
>
<div class="flex justify-center space-x-6 md:order-2">
<a
Expand All @@ -25,7 +25,9 @@
class="text-center text-base text-secondary inline-flex items-center w-full justify-center"
>
&copy; Made with
<span><Icon name="heart" class="w-6 h-6 mx-1 text-red-400" /></span>
<span
><Icon name="heart" class="w-6 h-6 mx-1 text-primary-dark"
/></span>
by
<a
class="hover:text-primary mx-1 transition-all duration-150"
Expand Down
37 changes: 26 additions & 11 deletions components/Header.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="relative py-6 sm:py-10 z-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="max-w-9xl mx-auto px-4 sm:px-6">
<nav
class="relative flex items-center justify-between sm:h-10 md:justify-center"
aria-label="Global"
Expand All @@ -13,9 +13,9 @@
<span class="sr-only">Linked Read</span>
<Icon
name="logo"
class="h-8 sm:h-16 w-auto text-primary animate-pulse"
class="h-8 sm:h-16 w-auto text-primary-dark animate-pulse"
/>
<span class="md:hidden text-primary ml-3 font-sans text-base"
<span class="md:hidden text-primary-dark ml-3 font-sans text-base"
>Linked Read</span
>
</a>
Expand All @@ -35,13 +35,14 @@
</div>
</div>
<div class="hidden md:flex md:space-x-10">
<a
<NuxtLink
v-for="link in menuLinks"
:key="link.label"
:href="link.route"
:to="link.route"
class="font-medium text-base text-secondary hover:text-black transition-colors duration-150"
>{{ link.label }}</a
>
{{ link.label }}
</NuxtLink>
</div>
<div
class="hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0"
Expand Down Expand Up @@ -74,8 +75,11 @@
>
<div class="px-5 pt-4 flex items-center justify-between">
<div class="inline-flex items-center">
<Icon name="logo" class="h-8 w-auto text-primary animate-pulse" />
<span class="md:hidden text-primary ml-3 font-sans text-sm"
<Icon
name="logo"
class="h-8 w-auto text-primary-dark animate-pulse"
/>
<span class="md:hidden text-primary-dark ml-3 font-sans text-sm"
>Linked Read</span
>
</div>
Expand All @@ -97,14 +101,15 @@
aria-labelledby="main-menu"
>
<div class="px-2 pt-2 pb-3" role="none">
<a
<NuxtLink
v-for="link in menuLinks"
:key="link.label"
:href="link.route"
:to="link.route"
class="block px-3 py-2 rounded-md text-base font-medium text-black bg-secondary-light text-opacity-75 focus:bg-secondary bg-opacity-50"
role="menuitem"
>{{ link.label }}</a
>
{{ link.label }}
</NuxtLink>
</div>
<div role="none">
<a
Expand All @@ -130,6 +135,10 @@ export default {
return {
menuOpen: false,
menuLinks: [
{
label: 'Home',
route: '/',
},
{
label: 'About',
route: 'about',
Expand All @@ -139,3 +148,9 @@ export default {
},
}
</script>

<style scoped>
.nuxt-link-exact-active {
@apply border-b-2 border-primary;
}
</style>
29 changes: 16 additions & 13 deletions components/Hero.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<div class="relative bg-gray-50 overflow-hidden">
<main class="my-16 mx-auto max-w-7xl px-4 sm:my-24">
<main class="my-16 mx-auto max-w-9xl px-4 sm:my-24">
<div class="text-center">
<h1
class="text-4xl tracking-tight font-extrabold text-secondary sm:text-5xl md:text-6xl"
>
<span class="block text-primary xl:inline">Linked Read</span>
<span class="block text-primary-dark xl:inline">Linked Read</span>
</h1>
<p
class="mt-3 max-w-md mx-auto text-base text-black sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"
Expand All @@ -21,20 +21,23 @@
@click="scrollTo('#visualizer')"
>Go ahead</Button
>
<Button
class="w-full mt-3 sm:mt-0 sm:ml-3"
type="secondary"
size="lg"
@click="scrollTo('#visualizer')"
>Learn more</Button
>
<NuxtLink class="w-full inline-flex mt-3 sm:mt-0 sm:ml-3" to="about">
<Button class="w-full" type="secondary" size="lg"
>Learn more</Button
>
</NuxtLink>
</div>
</div>
<div class="mt-32">
<Icon
name="chevron-double-down"
class="h-16 w-16 text-primary-light mx-auto animate-bounce"
/>
<div
class="cursor-pointer h-16 w-16 mx-auto flex items-center justify-center group"
@click="scrollTo('#visualizer')"
>
<Icon
name="chevron-double-down"
class="h-16 w-16 text-primary animate-bounce group-hover:animate-pulse transition-all duration-150"
/>
</div>
</div>
</main>
</div>
Expand Down
37 changes: 37 additions & 0 deletions layouts/error.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<template>
<main class="mt-16 mx-auto max-w-7xl px-4 sm:mt-24">
<div class="text-center">
<h1
class="text-4xl tracking-tight font-extrabold text-black text-opacity-75 sm:text-5xl md:text-6xl"
>
<span class="block xl:inline">Ooops...</span>
<span class="block text-primary-dark xl:inline">{{
error.statusCode
}}</span>
</h1>
<p
class="mt-3 max-w-md mx-auto text-base text-black text-opacity-50 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"
>
{{
error.statusCode === 404
? 'This page does not exist. Sure, you wanted to get somewhere else. Go to homepage and see your options.'
: "That's embarassing. Some error occured. Please, return to homepage or contact me."
}}
</p>
<div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
<div class="rounded-md shadow">
<NuxtLink to="/" class="w-full flex items-center justify-center">
<Button size="lg" type="secondary">Return Home</Button>
</NuxtLink>
</div>
</div>
</div>
</main>
</template>

<script>
export default {
props: ['error'],
layout: 'default',
}
</script>
8 changes: 6 additions & 2 deletions nuxt.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,15 @@ export default {

// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
title: 'linked-read',
title: 'Linked Read',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{
hid: 'description',
name: 'description',
content: 'Visualize open data of books and authors of your choice.',
},
],
link: [{ rel: 'icon', type: 'image/png', href: '/linked-read-orange.png' }],
},
Expand Down
157 changes: 157 additions & 0 deletions pages/about.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<template>
<div>
<section class="mt-16 mx-auto max-w-9xl max-w- px-4 sm:mt-24 sm:px-6">
<div class="text-center">
<h1
class="text-4xl tracking-tight font-extrabold text-black text-opacity-75 sm:text-5xl md:text-6xl leading-tight"
>
<span class="block">Best way to use</span>
<span class="block text-primary-dark">linked data</span>
</h1>
<p
class="mt-3 max-w-md mx-auto text-base text-black sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"
>
Linked read uses benefits of a vast world of semantic web. It is
trying to make your love to reading even more interesting while using
idea of open and linked data.
</p>
</div>
</section>
<!-- FEATURES -->
<section class="bg-white mt-16">
<div
class="max-w-9xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8 lg:grid lg:grid-cols-3 lg:gap-x-8"
>
<div>
<h2 class="mt-2 text-3xl font-extrabold text-black text-opacity-75">
Features
</h2>
<p class="mt-4 text-lg text-black text-opacity-50">
In Linked Read you can easily search books and authors and then see
found results in an interactive network map. Where nodes are books,
authors or series and links between nodes are relations such as -
"Author written a book." or "Book belongs to a series."
</p>
</div>
<div class="mt-12 lg:mt-0 lg:col-span-2">
<dl
class="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:grid-rows-3 sm:grid-flow-col sm:gap-x-6 sm:gap-y-10 lg:gap-x-8"
>
<div class="flex">
<!-- Heroicon name: check -->
<Icon class="flex-shrink-0 h-8 w-8 text-green-500" name="check" />
<div class="ml-3">
<dt
class="text-lg leading-6 font-semibold text-black text-opacity-75"
>
Search books
</dt>
<dd class="mt-2 text-base text-black text-opacity-50">
Find books by just typing a part of a title of the book you
are looking for.
</dd>
</div>
</div>

<div class="flex">
<!-- Heroicon name: check -->
<Icon class="flex-shrink-0 h-8 w-8 text-green-500" name="check" />
<div class="ml-3">
<dt
class="text-lg leading-6 font-semibold text-black text-opacity-75"
>
Search authors
</dt>
<dd class="mt-2 text-base text-black text-opacity-50">
Find authors by just typing a name or a surname of the author
you are looking for.
</dd>
</div>
</div>

<div class="flex">
<!-- Heroicon name: check -->
<Icon class="flex-shrink-0 h-8 w-8 text-green-500" name="check" />
<div class="ml-3">
<dt
class="text-lg leading-6 font-semibold text-black text-opacity-75"
>
Discover relationships
</dt>
<dd class="mt-2 text-base text-black text-opacity-50">
See what books an author written or what series he created. Or
look to what series a book belongs to. All this in an
interactive network map, so you see all in one place.
</dd>
</div>
</div>

<div class="flex">
<!-- Heroicon name: check -->
<Icon class="flex-shrink-0 h-8 w-8 text-green-500" name="check" />
<div class="ml-3">
<dt
class="text-lg leading-6 font-semibold text-black text-opacity-75"
>
Book detail
</dt>
<dd class="mt-2 text-base text-black text-opacity-50">
Select a node representing a book and look for some details
about it.
</dd>
</div>
</div>
<div class="flex">
<!-- Heroicon name: check -->
<Icon class="flex-shrink-0 h-8 w-8 text-green-500" name="check" />
<div class="ml-3">
<dt
class="text-lg leading-6 font-semibold text-black text-opacity-75"
>
Set up a map
</dt>
<dd class="mt-2 text-base text-black text-opacity-50">
Set up a network map as you wish. You'd like to group nodes
tight, bigger nodes or larger font size? No problem.
</dd>
</div>
</div>
</dl>
</div>
</div>
</section>
<!-- CTA -->
<section class="bg-primary-light">
<div
class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"
>
<h2
class="text-3xl font-extrabold text-black text-opacity-75 sm:text-4xl"
>
<span class="block">Level up your reading hobby.</span>
<span class="block">Start using Linked Read.</span>
</h2>
<p class="mt-4 text-lg leading-6 text-primary-dark">
Visualize data about books and discover undiscovered.
</p>

<NuxtLink
to="/"
class="mt-8 w-full inline-flex items-center justify-center sm:w-auto"
>
<Button type="secondary" size="lg"> Try now </Button>
</NuxtLink>
</div>
</section>
</div>
</template>

<script>
export default {
head() {
return {
title: 'Linked Read | Best way to use linked data',
}
},
}
</script>
Loading

0 comments on commit 8db713f

Please sign in to comment.