diff --git a/__tests__/e2e/.vitepress/config.ts b/__tests__/e2e/.vitepress/config.ts
index 7ec72c30..cafcfd50 100644
--- a/__tests__/e2e/.vitepress/config.ts
+++ b/__tests__/e2e/.vitepress/config.ts
@@ -132,6 +132,27 @@ const sidebar: DefaultTheme.Config['sidebar'] = {
link: '/markdown-extensions/foo'
}
]
+ },
+ {
+ text: 'Team & Sponsors',
+ items: [
+ {
+ text: 'Doc Layout',
+ link: '/team-and-sponsors/doc'
+ },
+ {
+ text: 'Page Layout',
+ link: '/team-and-sponsors/page'
+ },
+ {
+ text: 'Home Layout',
+ link: '/team-and-sponsors/home'
+ },
+ {
+ text: 'Home Layout (raw markdown)',
+ link: '/team-and-sponsors/home-no-markdown-styles'
+ }
+ ]
}
],
'/multi-sidebar/': [
@@ -154,6 +175,7 @@ const sidebar: DefaultTheme.Config['sidebar'] = {
export default defineConfig({
title: 'Example',
description: 'An example app using VitePress.',
+ srcExclude: ['**/parts/**'],
markdown: {
image: { lazyLoad: true }
},
diff --git a/__tests__/e2e/multi-sidebar/index.test.ts b/__tests__/e2e/multi-sidebar/index.test.ts
index b6482bdb..cd654301 100644
--- a/__tests__/e2e/multi-sidebar/index.test.ts
+++ b/__tests__/e2e/multi-sidebar/index.test.ts
@@ -15,7 +15,8 @@ describe('test multi sidebar sort root', () => {
'Data Loading',
'Multi Sidebar Test',
'Dynamic Routes',
- 'Markdown Extensions'
+ 'Markdown Extensions',
+ 'Team & Sponsors'
])
})
})
diff --git a/__tests__/e2e/public/sponsor-logo.svg b/__tests__/e2e/public/sponsor-logo.svg
new file mode 100644
index 00000000..1349e88e
--- /dev/null
+++ b/__tests__/e2e/public/sponsor-logo.svg
@@ -0,0 +1,4 @@
+
diff --git a/__tests__/e2e/public/team-avatar-small.svg b/__tests__/e2e/public/team-avatar-small.svg
new file mode 100644
index 00000000..43e062b0
--- /dev/null
+++ b/__tests__/e2e/public/team-avatar-small.svg
@@ -0,0 +1,5 @@
+
diff --git a/__tests__/e2e/public/team-avatar-wide.svg b/__tests__/e2e/public/team-avatar-wide.svg
new file mode 100644
index 00000000..316cdfeb
--- /dev/null
+++ b/__tests__/e2e/public/team-avatar-wide.svg
@@ -0,0 +1,6 @@
+
diff --git a/__tests__/e2e/team-and-sponsors/data.ts b/__tests__/e2e/team-and-sponsors/data.ts
new file mode 100644
index 00000000..fd0bee00
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/data.ts
@@ -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')
+]
diff --git a/__tests__/e2e/team-and-sponsors/doc.md b/__tests__/e2e/team-and-sponsors/doc.md
new file mode 100644
index 00000000..ac2abe67
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/doc.md
@@ -0,0 +1,3 @@
+# Team & Sponsors in Doc Layout
+
+
diff --git a/__tests__/e2e/team-and-sponsors/home-no-markdown-styles.md b/__tests__/e2e/team-and-sponsors/home-no-markdown-styles.md
new file mode 100644
index 00000000..f536f96a
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/home-no-markdown-styles.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.
+---
+
+
diff --git a/__tests__/e2e/team-and-sponsors/home.md b/__tests__/e2e/team-and-sponsors/home.md
new file mode 100644
index 00000000..11e9030c
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/home.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.
+---
+
+
diff --git a/__tests__/e2e/team-and-sponsors/page.md b/__tests__/e2e/team-and-sponsors/page.md
new file mode 100644
index 00000000..e1afb836
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/page.md
@@ -0,0 +1,8 @@
+---
+layout: page
+title: Team & Sponsors in Page Layout
+---
+
+# Team & Sponsors in Page Layout
+
+
diff --git a/__tests__/e2e/team-and-sponsors/parts/doc-page-body.md b/__tests__/e2e/team-and-sponsors/parts/doc-page-body.md
new file mode 100644
index 00000000..13c989f4
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/parts/doc-page-body.md
@@ -0,0 +1,42 @@
+
+
+Regular paragraph with a [link](https://example.com) and `inline code`.
+
+## Small, One Member
+
+
+
+## Small, Two Members
+
+
+
+## Small, Three Members
+
+
+
+## Medium, One Member
+
+
+
+## Medium, Two Members
+
+
+
+## Medium, Three Members
+
+
+
+## Sponsors, Tiered
+
+
+
+## Sponsors, Single Tier
+
+
+
+## After Components
+
+Trailing markdown content after the components.
diff --git a/__tests__/e2e/team-and-sponsors/parts/home-body.md b/__tests__/e2e/team-and-sponsors/parts/home-body.md
new file mode 100644
index 00000000..f92190ce
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/parts/home-body.md
@@ -0,0 +1,47 @@
+
+
+## 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
+
+
+
+ Our Team
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt.
+
+
+
+
+ Partners
+ Lorem ipsum dolor sit amet.
+
+
+
+
+
+
+
+
+## After Components
+
+Trailing markdown content after the components.
diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index 9e8ea52d..ac062d7a 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -29,7 +29,7 @@ const component = computed(() => {
{
text-align: center;
font-weight: 600;
white-space: nowrap;
+ text-decoration: none;
transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}
diff --git a/src/client/theme-default/components/VPHome.vue b/src/client/theme-default/components/VPHome.vue
index 4e39a385..e9526c98 100644
--- a/src/client/theme-default/components/VPHome.vue
+++ b/src/client/theme-default/components/VPHome.vue
@@ -37,6 +37,7 @@ const { frontmatter, theme } = useData()
diff --git a/src/client/theme-default/components/VPTeamMembersItem.vue b/src/client/theme-default/components/VPTeamMembersItem.vue
index fcf9bfcd..bcca2e82 100644
--- a/src/client/theme-default/components/VPTeamMembersItem.vue
+++ b/src/client/theme-default/components/VPTeamMembersItem.vue
@@ -156,16 +156,20 @@ withDefaults(defineProps(), {
inset: 0;
margin: 0;
border-radius: 50%;
+ width: 100%;
+ height: 100%;
object-fit: cover;
}
.name {
margin: 0;
+ letter-spacing: normal;
font-weight: 600;
}
.affiliation {
margin: 0;
+ line-height: 1.5;
font-weight: 500;
color: var(--vp-c-text-2);
}
@@ -181,6 +185,7 @@ withDefaults(defineProps(), {
.desc {
margin: 0 auto;
+ line-height: 1.5;
}
.desc :deep(a) {
diff --git a/src/client/theme-default/components/VPTeamPageSection.vue b/src/client/theme-default/components/VPTeamPageSection.vue
index bccc5b1d..df22cabc 100644
--- a/src/client/theme-default/components/VPTeamPageSection.vue
+++ b/src/client/theme-default/components/VPTeamPageSection.vue
@@ -52,6 +52,8 @@
.title-text {
position: relative;
display: inline-block;
+ margin: 0;
+ border-top: none;
padding: 0 1.5rem;
letter-spacing: 0;
line-height: 1.6;
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index fd2a5481..e912c4a3 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -586,29 +586,6 @@
opacity: 0;
}
-/**
- * Component: Team
- * -------------------------------------------------------------------------- */
-
-.vp-doc .VPTeamMembers {
- margin-top: 1.5rem;
-}
-
-.vp-doc .VPTeamMembers.small.count-1 .container {
- margin: 0 !important;
- max-width: calc((100% - 1.5rem) / 2) !important;
-}
-
-.vp-doc .VPTeamMembers.small.count-2 .container,
-.vp-doc .VPTeamMembers.small.count-3 .container {
- max-width: 100% !important;
-}
-
-.vp-doc .VPTeamMembers.medium.count-1 .container {
- margin: 0 !important;
- max-width: calc((100% - 1.5rem) / 2) !important;
-}
-
/**
* External links
* -------------------------------------------------------------------------- */
diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css
index fc437ef0..a25c5b17 100644
--- a/src/client/theme-default/styles/components/vp-sponsor.css
+++ b/src/client/theme-default/styles/components/vp-sponsor.css
@@ -1,7 +1,3 @@
-/**
- * VPSponsors styles are defined as global because a new class gets
- * allied in onMounted` hook and we can't use scoped style.
- */
.vp-sponsor {
border-radius: 1rem;
overflow: hidden;
@@ -15,10 +11,10 @@
margin-top: 0.25rem;
}
-.vp-sponsor-tier {
- margin: 0 0 0.25rem !important;
+.vp-sponsor .vp-sponsor-tier {
+ margin: 0 0 0.25rem;
text-align: center;
- letter-spacing: 0.0625rem !important;
+ letter-spacing: 0.0625rem;
line-height: 1.5;
width: 100%;
font-weight: 600;
@@ -154,10 +150,17 @@
filter: grayscale(1) invert(1);
}
-/* Reset styles from vp-doc if used in markdown */
.vp-doc .vp-sponsor-grid,
.vp-doc .vp-sponsor-grid-item {
list-style: none;
margin: 0;
padding: 0;
}
+
+.vp-doc .vp-sponsor-grid-image {
+ margin: 0;
+}
+
+.vp-doc .vp-sponsor-grid-link {
+ text-decoration: none;
+}