Skip to content

Commit 5094e84

Browse files
authored
Add developers pages, Proxify as a partner (#2985)
1 parent a961225 commit 5094e84

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+4879
-292
lines changed

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,3 +110,6 @@ src/api/index.json
110110
src/examples/data.json
111111
src/tutorial/data.json
112112
draft.md
113+
114+
# folders created by IDE
115+
.idea

.vitepress/config.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const nav: ThemeConfig['nav'] = [
4545
text: 'Resources',
4646
items: [
4747
{ text: 'Partners', link: '/partners/' },
48+
{ text: 'Developers', link: '/developers/' },
4849
{ text: 'Themes', link: '/ecosystem/themes' },
4950
{ text: 'UI Components', link: 'https://ui-libs.vercel.app/' },
5051
{
@@ -125,9 +126,13 @@ const nav: ThemeConfig['nav'] = [
125126
link: '/sponsor/'
126127
},
127128
{
128-
text: 'Partners',
129-
link: '/partners/',
130-
activeMatch: `^/partners/`
129+
text: 'Experts',
130+
badge: { text: 'NEW' },
131+
activeMatch: `^/(partners|developers)/`,
132+
items: [
133+
{ text: 'Partners', link: '/partners/' },
134+
{ text: 'Developers', link: '/developers/', badge: { text: 'NEW' } }
135+
]
131136
}
132137
]
133138

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script setup lang="ts">
2+
withDefaults(defineProps<{
3+
title?: string
4+
description?: string
5+
link?: string
6+
linkText?: string
7+
showDivider?: boolean
8+
}>(), {
9+
showDivider: true
10+
})
11+
</script>
12+
13+
<template>
14+
<section class="cta-section">
15+
<div v-if="showDivider" class="cta-divider"></div>
16+
<div class="cta-content">
17+
<h2 v-if="title" class="cta-title">{{ title }}</h2>
18+
<p v-if="description" class="cta-description">{{ description }}</p>
19+
<a v-if="link" :href="link" target="_blank" class="cta-link">{{ linkText }}</a>
20+
<slot></slot>
21+
</div>
22+
</section>
23+
</template>
24+
25+
<style scoped>
26+
.cta-section {
27+
text-align: center;
28+
max-width: 688px;
29+
margin: 0 auto;
30+
}
31+
32+
.cta-divider {
33+
width: 100px;
34+
margin: 0 auto;
35+
border-top: 1px solid var(--vt-c-divider-light);
36+
}
37+
38+
.cta-content {
39+
padding: 28px 28px 96px;
40+
}
41+
42+
.cta-title {
43+
font-size: 34px;
44+
font-weight: 600;
45+
letter-spacing: -0.5px;
46+
line-height: 1.2;
47+
margin: 0.5em 0 1em;
48+
}
49+
50+
.cta-description {
51+
color: var(--vt-c-text-2);
52+
}
53+
54+
.cta-link {
55+
margin-top: 2em;
56+
display: inline-block;
57+
padding: 12px 24px;
58+
background-color: var(--vt-c-bg-mute);
59+
color: var(--vt-c-text-code);
60+
font-weight: 600;
61+
border-radius: 6px;
62+
text-decoration: none;
63+
transition: background-color 0.5s, color 0.5s;
64+
}
65+
66+
.cta-link:hover {
67+
background-color: var(--vt-c-gray-light-4);
68+
}
69+
70+
.dark .cta-link:hover {
71+
background-color: var(--vt-c-gray-dark-3);
72+
}
73+
</style>
Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<script setup lang="ts">
2+
import { computed, onMounted, ref, shallowRef } from 'vue'
3+
4+
const props = withDefaults(
5+
defineProps<{
6+
items: Array<any>
7+
filter?: (item: any) => boolean
8+
cardComponent: any
9+
showLinkToAll?: boolean
10+
shuffleItems?: boolean
11+
browseLinkText?: string
12+
browseLinkUrl?: string
13+
splitBy?: string
14+
}>(),
15+
{
16+
showLinkToAll: false,
17+
shuffleItems: false,
18+
splitBy: 'platinum'
19+
}
20+
)
21+
22+
const isMounted = ref(false)
23+
const items = shallowRef([...props.items])
24+
25+
const filteredItems = computed(() =>
26+
props.filter ? items.value.filter(props.filter) : items.value
27+
)
28+
29+
onMounted(() => {
30+
isMounted.value = true
31+
items.value = processItems([...items.value], props.splitBy, props.shuffleItems)
32+
})
33+
34+
function processItems(items: Array<any>, splitBy: string, shouldShuffle: boolean) {
35+
const splitItems = items.filter(item => item[splitBy])
36+
const otherItems = items.filter(item => !item[splitBy])
37+
38+
if (shouldShuffle) {
39+
shuffleArray(splitItems)
40+
shuffleArray(otherItems)
41+
}
42+
43+
return [...splitItems, ...otherItems]
44+
}
45+
46+
function shuffleArray(array: Array<any>) {
47+
for (let i = array.length - 1; i > 0; i--) {
48+
const j = Math.floor(Math.random() * (i + 1)); // don't remove semicolon
49+
[array[i], array[j]] = [array[j], array[i]]
50+
}
51+
}
52+
</script>
53+
54+
<template>
55+
<div v-show="isMounted" class="card-list">
56+
<!-- to skip SSG since the partners are shuffled -->
57+
<ClientOnly>
58+
<component
59+
:is="cardComponent"
60+
v-for="item in filteredItems"
61+
:key="item.id || item.name"
62+
:data="item"
63+
/>
64+
</ClientOnly>
65+
66+
<a
67+
v-if="showLinkToAll && filteredItems.length % 2"
68+
:href="browseLinkUrl"
69+
class="browse-all-link"
70+
>
71+
{{ browseLinkText }}
72+
</a>
73+
</div>
74+
</template>
75+
76+
<style scoped>
77+
.card-list {
78+
display: flex;
79+
flex-wrap: wrap;
80+
justify-content: space-between;
81+
}
82+
83+
.browse-all-link {
84+
display: block;
85+
width: 48.5%;
86+
margin-bottom: 36px;
87+
padding-top: 240px;
88+
font-size: 1.2em;
89+
text-align: center;
90+
color: var(--vt-c-text-2);
91+
border: 1px solid var(--vt-c-divider-light);
92+
border-radius: 4px;
93+
transition: color 0.5s ease;
94+
}
95+
96+
.browse-all-link:hover {
97+
color: var(--vt-c-text-1);
98+
}
99+
100+
@media (max-width: 768px) {
101+
.browse-all-link {
102+
display: none;
103+
}
104+
}
105+
</style>
Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="page-hero">
3+
<h1 class="page-hero__title">
4+
<slot name="title" />
5+
</h1>
6+
<p class="page-hero__lead">
7+
<slot name="lead" />
8+
</p>
9+
</div>
10+
</template>
11+
12+
<style scoped>
13+
.page-hero {
14+
padding: 48px 24px;
15+
text-align: center;
16+
margin: 0 auto;
17+
max-width: 688px;
18+
}
19+
20+
.page-hero__title,
21+
.page-hero__lead,
22+
.page-hero :deep(.link) {
23+
transition: color 0.25s;
24+
}
25+
26+
.page-hero__title {
27+
line-height: 32px;
28+
font-size: 32px;
29+
font-weight: 500;
30+
margin-bottom: 0.3em;
31+
}
32+
33+
.page-hero__lead {
34+
padding-top: 8px;
35+
font-size: 16px;
36+
font-weight: 500;
37+
color: var(--vt-c-text-2);
38+
}
39+
40+
.page-hero__lead a {
41+
color: var(--vt-c-brand);
42+
}
43+
44+
.page-hero :deep(.link) {
45+
color: var(--vt-c-brand);
46+
}
47+
48+
.page-hero :deep(.link:hover) {
49+
color: var(--vt-c-brand-dark);
50+
}
51+
52+
/* Media Queries */
53+
@media (min-width: 768px) {
54+
.page-hero {
55+
padding: 64px 32px;
56+
}
57+
58+
.page-hero__title {
59+
line-height: 40px;
60+
font-size: 40px;
61+
}
62+
}
63+
</style>
Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<script setup lang="ts">
2+
const props = defineProps<{
3+
spotlightTitle?: string
4+
featuredTitle?: string
5+
browseLinkText?: string
6+
browseLinkUrl?: string
7+
}>()
8+
</script>
9+
10+
<template>
11+
<div class="showcase-layout">
12+
<!-- Hero Section -->
13+
<slot name="hero"></slot>
14+
15+
<!-- Spotlight Section -->
16+
<div class="showcase-layout__spotlight">
17+
<div class="spotlight-content">
18+
<h2 v-if="props.spotlightTitle" class="section-title">{{ props.spotlightTitle }}</h2>
19+
<slot name="spotlight"></slot>
20+
</div>
21+
</div>
22+
23+
<!-- Featured Section -->
24+
<div class="showcase-layout__featured">
25+
<!-- Optional Actions Section -->
26+
<div v-if="$slots.actions" class="featured-actions">
27+
<slot name="actions"></slot>
28+
</div>
29+
<h2 v-if="props.featuredTitle" class="section-title">{{ props.featuredTitle }}</h2>
30+
<slot name="featured-list"></slot>
31+
<slot name="featured-cta">
32+
<div v-if="browseLinkUrl" class="browse-more">
33+
<a class="accent-button" :href="props.browseLinkUrl">{{ props.browseLinkText }}</a>
34+
</div>
35+
</slot>
36+
</div>
37+
38+
<!-- Join Section -->
39+
<slot name="join"></slot>
40+
</div>
41+
</template>
42+
43+
<style scoped>
44+
.showcase-layout {
45+
padding-bottom: 16px;
46+
}
47+
48+
.showcase-layout__spotlight {
49+
background-color: var(--vt-c-bg-soft);
50+
}
51+
52+
.spotlight-content {
53+
padding: 36px 48px;
54+
max-width: 1280px;
55+
margin: 0 auto;
56+
}
57+
58+
.section-title {
59+
font-size: 1.1em;
60+
font-weight: 600;
61+
margin-bottom: 1.5em;
62+
color: var(--vt-c-text-2);
63+
}
64+
65+
.showcase-layout__featured {
66+
padding: 36px 48px;
67+
max-width: 960px;
68+
width: 100%;
69+
margin: 0 auto;
70+
}
71+
72+
.featured-actions {
73+
width: 100%;
74+
margin-bottom: 1.5em;
75+
}
76+
77+
.browse-more {
78+
margin: 1.5rem auto;
79+
display: flex;
80+
flex-direction: column;
81+
align-items: center;
82+
justify-content: center;
83+
}
84+
85+
.accent-button,
86+
:deep(.accent-button) {
87+
display: block;
88+
width: fit-content;
89+
min-width: 240px;
90+
text-align: center;
91+
background-color: var(--vt-c-brand);
92+
color: var(--vt-c-bg);
93+
padding: 12px 24px;
94+
font-weight: 600;
95+
border-radius: 6px;
96+
transition: background-color 0.5s, color 0.5s;
97+
text-decoration: none;
98+
}
99+
100+
.accent-button:hover,
101+
:deep(.accent-button):hover {
102+
background-color: var(--vt-c-brand-dark);
103+
}
104+
105+
/* Media Queries */
106+
@media (max-width: 768px) {
107+
.spotlight-content,
108+
.showcase-layout__featured {
109+
padding: 36px 28px;
110+
}
111+
}
112+
</style>

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"dependencies": {
1414
"@vue/repl": "^4.3.1",
15-
"@vue/theme": "^2.2.13",
15+
"@vue/theme": "^2.3.0",
1616
"dynamics.js": "^1.1.5",
1717
"gsap": "^3.12.5",
1818
"vitepress": "^1.3.2",

0 commit comments

Comments
 (0)