mirror of https://github.com/vuejs/vitepress
fix(theme): rendering of sponsor and team components inside vp-doc containers (#4493)
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com> Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>pull/5194/merge
Robin
1 month ago
committed by
GitHub
parent
08cc11092b
commit
b7602df1cd
|
After Width: | Height: | Size: 258 B |
|
After Width: | Height: | Size: 221 B |
|
After Width: | Height: | Size: 283 B |
@ -0,0 +1,89 @@
|
||||
import type { DefaultTheme } from 'vitepress/theme'
|
||||
|
||||
export const members: DefaultTheme.TeamMember[] = [
|
||||
{
|
||||
// smaller than the rendered avatar, checks that it still fills the circle
|
||||
avatar: '/team-avatar-small.svg',
|
||||
name: 'Alice Example',
|
||||
title: 'Creator',
|
||||
org: 'Example Org',
|
||||
orgLink: 'https://example.com',
|
||||
desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://example.com' },
|
||||
{ icon: 'x', link: 'https://example.com' }
|
||||
],
|
||||
sponsor: 'https://example.com'
|
||||
},
|
||||
{
|
||||
// non-square, checks object-fit (side stripes must stay cropped out)
|
||||
avatar: '/team-avatar-wide.svg',
|
||||
name: 'Bob Example',
|
||||
title: 'Maintainer',
|
||||
links: [{ icon: 'github', link: 'https://example.com' }]
|
||||
},
|
||||
{
|
||||
avatar: '/team-avatar-small.svg',
|
||||
name: 'Carol Example',
|
||||
title: 'Partner'
|
||||
}
|
||||
]
|
||||
|
||||
export const partners: DefaultTheme.TeamMember[] = [
|
||||
{
|
||||
avatar: '/team-avatar-wide.svg',
|
||||
name: 'Dave Example',
|
||||
title: 'Partner',
|
||||
links: [{ icon: 'github', link: 'https://example.com' }]
|
||||
},
|
||||
{
|
||||
avatar: '/team-avatar-small.svg',
|
||||
name: 'Eve Example',
|
||||
title: 'Partner'
|
||||
},
|
||||
{
|
||||
avatar: '/team-avatar-wide.svg',
|
||||
name: 'Frank Example',
|
||||
title: 'Partner'
|
||||
}
|
||||
]
|
||||
|
||||
interface Sponsor {
|
||||
name: string
|
||||
img: string
|
||||
url: string
|
||||
}
|
||||
|
||||
const sponsor = (name: string): Sponsor => ({
|
||||
name,
|
||||
img: '/sponsor-logo.svg',
|
||||
url: 'https://example.com'
|
||||
})
|
||||
|
||||
export const sponsors: {
|
||||
tier: string
|
||||
size?: 'medium' | 'big'
|
||||
items: Sponsor[]
|
||||
}[] = [
|
||||
{
|
||||
tier: 'Platinum Sponsors',
|
||||
size: 'big',
|
||||
items: [sponsor('Sponsor One'), sponsor('Sponsor Two')]
|
||||
},
|
||||
{
|
||||
tier: 'Gold Sponsors',
|
||||
size: 'medium',
|
||||
items: [
|
||||
sponsor('Sponsor Three'),
|
||||
sponsor('Sponsor Four'),
|
||||
sponsor('Sponsor Five'),
|
||||
sponsor('Sponsor Six')
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export const friends: Sponsor[] = [
|
||||
sponsor('Friend One'),
|
||||
sponsor('Friend Two'),
|
||||
sponsor('Friend Three')
|
||||
]
|
||||
@ -0,0 +1,3 @@
|
||||
# Team & Sponsors in Doc Layout
|
||||
|
||||
<!--@include: ./parts/doc-page-body.md-->
|
||||
@ -0,0 +1,30 @@
|
||||
---
|
||||
layout: home
|
||||
title: Team & Sponsors in Home Layout (no markdown styles)
|
||||
markdownStyles: false
|
||||
|
||||
hero:
|
||||
name: Team & Sponsors
|
||||
text: Home layout without markdown styles
|
||||
tagline: Reference rendering of the components
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Doc Layout
|
||||
link: ./doc
|
||||
image:
|
||||
src: /vitepress.png
|
||||
alt: VitePress
|
||||
|
||||
features:
|
||||
- icon: 📝
|
||||
title: Feature A
|
||||
details: Some details about feature A.
|
||||
- icon: ⚡
|
||||
title: Feature B
|
||||
details: Some details about feature B.
|
||||
- icon: 🚀
|
||||
title: Feature C
|
||||
details: Some details about feature C.
|
||||
---
|
||||
|
||||
<!--@include: ./parts/home-body.md-->
|
||||
@ -0,0 +1,29 @@
|
||||
---
|
||||
layout: home
|
||||
title: Team & Sponsors in Home Layout
|
||||
|
||||
hero:
|
||||
name: Team & Sponsors
|
||||
text: Home layout with markdown styles
|
||||
tagline: Compare with the no-markdown-styles variant
|
||||
actions:
|
||||
- theme: brand
|
||||
text: Doc Layout
|
||||
link: ./doc
|
||||
image:
|
||||
src: /vitepress.png
|
||||
alt: VitePress
|
||||
|
||||
features:
|
||||
- icon: 📝
|
||||
title: Feature A
|
||||
details: Some details about feature A.
|
||||
- icon: ⚡
|
||||
title: Feature B
|
||||
details: Some details about feature B.
|
||||
- icon: 🚀
|
||||
title: Feature C
|
||||
details: Some details about feature C.
|
||||
---
|
||||
|
||||
<!--@include: ./parts/home-body.md-->
|
||||
@ -0,0 +1,8 @@
|
||||
---
|
||||
layout: page
|
||||
title: Team & Sponsors in Page Layout
|
||||
---
|
||||
|
||||
# Team & Sponsors in Page Layout
|
||||
|
||||
<!--@include: ./parts/doc-page-body.md-->
|
||||
@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import { VPTeamMembers, VPSponsors } from 'vitepress/theme'
|
||||
import { members, friends, sponsors } from './data'
|
||||
</script>
|
||||
|
||||
Regular paragraph with a [link](https://example.com) and `inline code`.
|
||||
|
||||
## Small, One Member
|
||||
|
||||
<VPTeamMembers size="small" :members="members.slice(0, 1)" />
|
||||
|
||||
## Small, Two Members
|
||||
|
||||
<VPTeamMembers size="small" :members="members.slice(0, 2)" />
|
||||
|
||||
## Small, Three Members
|
||||
|
||||
<VPTeamMembers size="small" :members />
|
||||
|
||||
## Medium, One Member
|
||||
|
||||
<VPTeamMembers size="medium" :members="members.slice(0, 1)" />
|
||||
|
||||
## Medium, Two Members
|
||||
|
||||
<VPTeamMembers size="medium" :members="members.slice(0, 2)" />
|
||||
|
||||
## Medium, Three Members
|
||||
|
||||
<VPTeamMembers size="medium" :members />
|
||||
|
||||
## Sponsors, Tiered
|
||||
|
||||
<VPSponsors :data="sponsors" />
|
||||
|
||||
## Sponsors, Single Tier
|
||||
|
||||
<VPSponsors tier="Friends" size="mini" :data="friends" />
|
||||
|
||||
## After Components
|
||||
|
||||
Trailing markdown content after the components.
|
||||
@ -0,0 +1,47 @@
|
||||
<script setup>
|
||||
import {
|
||||
VPTeamPage,
|
||||
VPTeamPageTitle,
|
||||
VPTeamPageSection,
|
||||
VPTeamMembers,
|
||||
VPHomeSponsors
|
||||
} from 'vitepress/theme'
|
||||
import { members, partners, sponsors } from './data'
|
||||
</script>
|
||||
|
||||
## Markdown Section
|
||||
|
||||
Some paragraph text with a [link](https://example.com) and `inline code` to
|
||||
verify how markdown content is styled in this variant.
|
||||
|
||||
- List item one
|
||||
- List item two
|
||||
|
||||
<VPTeamPage>
|
||||
<VPTeamPageTitle>
|
||||
<template #title>Our Team</template>
|
||||
<template #lead>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt.
|
||||
</template>
|
||||
</VPTeamPageTitle>
|
||||
<VPTeamMembers :members="members.slice(0, 2)" />
|
||||
<VPTeamPageSection>
|
||||
<template #title>Partners</template>
|
||||
<template #lead>Lorem ipsum dolor sit amet.</template>
|
||||
<template #members>
|
||||
<VPTeamMembers size="small" :members="partners" />
|
||||
</template>
|
||||
</VPTeamPageSection>
|
||||
</VPTeamPage>
|
||||
|
||||
<VPHomeSponsors
|
||||
message="Made possible by our generous sponsors"
|
||||
:data="sponsors"
|
||||
action-text="Become a sponsor"
|
||||
action-link="https://example.com"
|
||||
/>
|
||||
|
||||
## After Components
|
||||
|
||||
Trailing markdown content after the components.
|
||||
Loading…
Reference in new issue