Skip to content

Commit f0ac524

Browse files
daffldaffl
authored
fix: Improve product display and blog navigation (#7)
1 parent b2c7c9d commit f0ac524

File tree

17 files changed

+243
-217
lines changed

17 files changed

+243
-217
lines changed

‎.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"printWidth": 120,
3+
"singleQuote": true,
4+
"semi": false,
5+
"tabWidth": 2,
6+
"useTabs": false
7+
}

‎app/components/BlogPostTile.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,22 @@ defineProps<{
88
</script>
99

1010
<template>
11-
<div>
12-
<Card :class="cardClasses">
13-
<figure class="aspect-video !rounded-box md:m-4">
11+
<NuxtLink :to="post.path" class="block h-full">
12+
<Card :class="['h-full hover:shadow-xl transition-shadow cursor-pointer', cardClasses]">
13+
<figure class="h-52 !rounded-box md:m-4 overflow-hidden">
1414
<img :src="post.meta.imgSrc" :alt="post.title" class="object-cover h-full w-full object-center" />
1515
</figure>
16-
<CardBody class="gap-6">
16+
<CardBody class="gap-6 flex flex-col flex-1">
1717
<CardTitle>{{ post.title }}</CardTitle>
18-
<p>{{ post.description }}</p>
18+
<p class="line-clamp-3">{{ post.description }}</p>
1919

20-
<CardActions class="mt-4">
21-
<NuxtLink :to="post.path" class="btn btn-primary btn-ghost">
20+
<CardActions class="mt-auto">
21+
<span class="btn btn-primary btn-ghost">
2222
Read More
2323
<Icon name="feather:chevron-right" size="24" />
24-
</NuxtLink>
24+
</span>
2525
</CardActions>
2626
</CardBody>
2727
</Card>
28-
</div>
28+
</NuxtLink>
2929
</template>

‎app/components/BlogPosts.vue‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,11 @@ defineProps<{
77
</script>
88

99
<template>
10-
<Flex class="mt-4 flex-wrap">
11-
<BlogPostTile
12-
v-for="post in posts"
10+
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
11+
<BlogPostTile
12+
v-for="post in posts"
1313
:key="post.id"
1414
:post="post"
15-
class="w-full md:w-1/2 lg:w-1/3"
1615
/>
17-
</Flex>
16+
</div>
1817
</template>

‎app/components/Discord.vue‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,27 @@
77
<Flex col items-center class="gap-4 md:items-start py-5 md:pl-8">
88
<!-- <Text size="md" class="text-center md:text-left text-base-content/70">Need more support?</Text> -->
99
<Text is="h3" size="3xl" bold class="text-center md:text-left">Join our community</Text>
10-
<Text size="md" class="text-center md:text-left text-base-content/70 text-balance line-clamp-2">Get help and support <br> from the Feathers community</Text>
10+
<Text size="md" class="text-center md:text-left text-base-content/70 text-balance line-clamp-2"
11+
>Get help and support <br />
12+
from the Feathers community</Text
13+
>
1114
<Flex>
12-
<NuxtLink
15+
<NuxtLink
1316
primary
14-
href="https://discord.gg/XV5qBcG6M9"
15-
target="_blank"
16-
rel="noopener noreferrer"
17+
href="https://discord.gg/qa8kez8QBx"
18+
target="_blank"
19+
rel="noopener noreferrer"
1720
class="btn btn-primary btn-xl gap-2 mt-4"
1821
>
1922
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
20-
<path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.105 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.8 8.18 1.8 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.293a.077.077 0 01-.008.127 12.27 12.27 0 01-1.873.892.077.077 0 00-.041.105c.36.698.774 1.362 1.225 1.993a.076.076 0 00.084.028 19.84 19.84 0 005.99-3.03.077.077 0 00.032-.054c.5-5.18-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.418 0-1.333.946-2.415 2.157-2.415 1.21 0 2.175 1.08 2.157 2.415 0 1.333-.946 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.418 0-1.333.954-2.415 2.157-2.415 1.203 0 2.175 1.08 2.157 2.415 0 1.333-.955 2.418-2.157 2.418z"/>
23+
<path
24+
d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.105 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.8 8.18 1.8 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.293a.077.077 0 01-.008.127 12.27 12.27 0 01-1.873.892.077.077 0 00-.041.105c.36.698.774 1.362 1.225 1.993a.076.076 0 00.084.028 19.84 19.84 0 005.99-3.03.077.077 0 00.032-.054c.5-5.18-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.418 0-1.333.946-2.415 2.157-2.415 1.21 0 2.175 1.08 2.157 2.415 0 1.333-.946 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.418 0-1.333.954-2.415 2.157-2.415 1.203 0 2.175 1.08 2.157 2.415 0 1.333-.955 2.418-2.157 2.418z"
25+
/>
2126
</svg>
2227
Join our Discord
2328
</NuxtLink>
2429
</Flex>
2530
</Flex>
2631
</Flex>
2732
</Flex>
28-
</template>
33+
</template>

‎app/components/DocsPage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import type { AuthDocsCollectionItem, FeathersDocsCollectionItem, PinionDocsCollectionItem } from '@nuxt/content';
2+
import type { AuthDocsCollectionItem, FeathersDocsCollectionItem, PinionDocsCollectionItem } from '@nuxt/content'
33
44
defineProps<{ page: PinionDocsCollectionItem | AuthDocsCollectionItem | FeathersDocsCollectionItem }>()
55
</script>

‎app/components/FooterMain.vue‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,25 @@ const { data: products } = await useAsyncData(() => queryCollection('products').
77
<div class="flex items-center justify-center py-8">
88
<Logo />
99
</div>
10-
<Footer class="sm:footer-horizontal text-neutral-content max-w-[87rem] mx-auto p-10 justify-evenly text-lg -ml-5.5 sm:ml-0">
10+
<Footer
11+
class="sm:footer-horizontal text-neutral-content max-w-[87rem] mx-auto p-10 justify-evenly text-lg -ml-5.5 sm:ml-0"
12+
>
1113
<nav class="flex flex-col gap-4">
12-
<FooterTitle class="normal-case">Products</FooterTitle>
14+
<FooterTitle class="normal-case">Projects</FooterTitle>
1315
<NuxtLink v-for="product in products" :key="product.slug" class="link link-hover" :to="product.slug">
1416
{{ product.title }}
1517
</NuxtLink>
1618
</nav>
1719
<nav class="flex flex-col gap-4">
1820
<FooterTitle class="normal-case">Learn</FooterTitle>
19-
<NuxtLink class="link link-hover" to="/blog">
20-
Blog
21-
</NuxtLink>
22-
<NuxtLink class="link link-hover" to="/help">
23-
Help
24-
</NuxtLink>
25-
<NuxtLink class="link link-hover" to="https://github.com/feathersdev">
26-
Github
27-
</NuxtLink>
21+
<NuxtLink class="link link-hover" to="/blog"> Blog </NuxtLink>
22+
<NuxtLink class="link link-hover" to="https://discord.gg/qa8kez8QBx"> Discord </NuxtLink>
23+
<NuxtLink class="link link-hover" to="https://github.com/feathersdev"> Github </NuxtLink>
2824
</nav>
2925
<nav class="flex flex-col gap-4">
3026
<FooterTitle class="normal-case">About</FooterTitle>
31-
<NuxtLink class="link link-hover" to="/tos">
32-
Terms of Service
33-
</NuxtLink>
34-
<NuxtLink class="link link-hover" to="/privacy">
35-
Privacy Policy
36-
</NuxtLink>
27+
<NuxtLink class="link link-hover" to="/tos"> Terms of Service </NuxtLink>
28+
<NuxtLink class="link link-hover" to="/privacy"> Privacy Policy </NuxtLink>
3729
</nav>
3830
</Footer>
3931

@@ -44,4 +36,4 @@ const { data: products } = await useAsyncData(() => queryCollection('products').
4436
</p>
4537
</div>
4638
</div>
47-
</template>
39+
</template>

‎app/components/Hero/HeroHome.vue‎

Lines changed: 41 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,15 @@
88
<Text>Realtime.</Text>
99
</Flex>
1010
<div class="text-center font-bold text-6xl">
11-
<span class="bg-clip-text text-transparent bg-gradient-to-r from-[#FF25B6] to-[#EA591E]">Beyond The Cloud</span>
11+
<span class="bg-clip-text text-transparent bg-gradient-to-r from-[#FF25B6] to-[#EA591E]"
12+
>Beyond The Cloud</span
13+
>
1214
</div>
1315
</Text>
14-
16+
1517
<Text size="lg" class="px-4 md:px-12 lg:px-36">
16-
Redefining modern web application development with seamless identity management, powerful data synchronization, and instant real-time updates—all in one place.
18+
Modern web application development with secure user logins, local-first data synchronization and real-time
19+
updates. All in one place.
1720
</Text>
1821

1922
<Flex row items-center class="gap-4 mx-auto mb-8">
@@ -22,18 +25,34 @@
2225
</NuxtLink>
2326
</Flex>
2427

25-
<NuxtImg src="/img/rock-md.svg" class="w-[190px] absolute lg:-top-1 -left-52 transition-all duration-500 ease-in-out floating-rock-1" />
26-
<NuxtImg src="/img/rock-lg.svg" class="hidden lg:block w-[386px] absolute -bottom-80 left-28 transition-all duration-500 ease-in-out floating-rock-2" />
27-
<NuxtImg src="/img/shuttle.svg" class="hidden lg:block w-[355px] absolute -bottom-72 right-20 transition-all duration-500 ease-in-out floating-shuttle" />
28+
<NuxtImg
29+
src="/img/rock-md.svg"
30+
class="w-[190px] absolute lg:-top-1 -left-52 transition-all duration-500 ease-in-out floating-rock-1"
31+
/>
32+
<NuxtImg
33+
src="/img/rock-lg.svg"
34+
class="hidden lg:block w-[386px] absolute -bottom-80 left-28 transition-all duration-500 ease-in-out floating-rock-2"
35+
/>
36+
<NuxtImg
37+
src="/img/shuttle.svg"
38+
class="hidden lg:block w-[355px] absolute -bottom-72 right-20 transition-all duration-500 ease-in-out floating-shuttle"
39+
/>
2840
</Flex>
29-
<NuxtImg src="/img/planet.svg" class="w-[400px] lg:w-[599px] absolute transition-all duration-500 ease-in-out bottom-20 -right-52 sm:-right-32 lg:bottom-74 lg:-right-72 planet-wobble" />
30-
<NuxtImg src="/img/bird-red.svg" class="w-[260px] lg:w-[342px] relative lg:-top-26 transition-all duration-500 ease-in-out floating" />
41+
<NuxtImg
42+
src="/img/planet.svg"
43+
class="w-[400px] lg:w-[599px] absolute transition-all duration-500 ease-in-out bottom-20 -right-52 sm:-right-32 lg:bottom-74 lg:-right-72 planet-wobble"
44+
/>
45+
<NuxtImg
46+
src="/img/bird-red.svg"
47+
class="w-[260px] lg:w-[342px] relative lg:-top-26 transition-all duration-500 ease-in-out floating"
48+
/>
3149
</div>
3250
</template>
3351

3452
<style scoped>
3553
@keyframes float {
36-
0%, 100% {
54+
0%,
55+
100% {
3756
transform: translateY(0);
3857
}
3958
50% {
@@ -42,7 +61,8 @@
4261
}
4362
4463
@keyframes float-rock-1 {
45-
0%, 100% {
64+
0%,
65+
100% {
4666
transform: translate(0, 0) rotate(0deg);
4767
}
4868
33% {
@@ -54,7 +74,8 @@
5474
}
5575
5676
@keyframes float-rock-2 {
57-
0%, 100% {
77+
0%,
78+
100% {
5879
transform: translate(0, 0) rotate(0deg);
5980
}
6081
30% {
@@ -83,29 +104,18 @@
83104
}
84105
85106
@keyframes float-shuttle {
86-
0%, 100% {
87-
transform:
88-
translate(0, 0)
89-
rotate(-1deg)
90-
scale(1);
107+
0%,
108+
100% {
109+
transform: translate(0, 0) rotate(-1deg) scale(1);
91110
}
92111
25% {
93-
transform:
94-
translate(-5px, -3px)
95-
rotate(0.5deg)
96-
scale(1.005);
112+
transform: translate(-5px, -3px) rotate(0.5deg) scale(1.005);
97113
}
98114
50% {
99-
transform:
100-
translate(3px, 2px)
101-
rotate(-0.5deg)
102-
scale(0.995);
115+
transform: translate(3px, 2px) rotate(-0.5deg) scale(0.995);
103116
}
104117
75% {
105-
transform:
106-
translate(-2px, 4px)
107-
rotate(0.3deg)
108-
scale(1.002);
118+
transform: translate(-2px, 4px) rotate(0.3deg) scale(1.002);
109119
}
110120
}
111121
@@ -116,7 +126,8 @@
116126
}
117127
118128
@keyframes planet-wobble {
119-
0%, 100% {
129+
0%,
130+
100% {
120131
transform: rotate(0deg);
121132
}
122133
50% {
@@ -129,4 +140,4 @@
129140
will-change: transform;
130141
transform-origin: center;
131142
}
132-
</style>
143+
</style>

‎app/components/Products.vue‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,27 @@
11
<script setup lang="ts">
2-
import type { Product } from '~~/content.config.schema';
2+
import type { Product } from '~~/content.config.schema'
33
44
defineProps<{
5-
superTitle?: string,
6-
title: string,
7-
subTitle?: string,
8-
description?: string,
5+
superTitle?: string
6+
title: string
7+
subTitle?: string
8+
description?: string
99
products: Product[]
1010
}>()
1111
</script>
1212

1313
<template>
1414
<div>
15-
<Titles
16-
:superTitle="superTitle"
17-
:title="title"
18-
:subTitle="subTitle"
19-
:description="description"
20-
/>
15+
<Titles :superTitle="superTitle" :title="title" :subTitle="subTitle" :description="description" />
2116
<Flex class="mt-8 flex-wrap px-2 lg:px-0">
22-
<ProductCard
23-
v-for="product in products"
24-
:key="product.slug"
25-
:product="product"
26-
class="w-full md:w-1/2 lg:w-1/2 p-2 lg:p-4"
27-
/>
17+
<template v-for="product in products" :key="product.title">
18+
<ProductCard
19+
v-if="product.highlight"
20+
:key="product.slug"
21+
:product="product"
22+
class="w-full md:w-1/2 lg:w-1/2 p-2 lg:p-4"
23+
/>
24+
</template>
2825
</Flex>
2926
</div>
30-
</template>
27+
</template>

0 commit comments

Comments
 (0)