mirror of
https://github.com/vitejs/vite.git
synced 2024-11-21 14:48:41 +00:00
docs: use remote data for sponsors
This commit is contained in:
Evan You
parent
d19754dcd6
commit
4240923d54
12
README.md
12
README.md
@ -33,10 +33,6 @@ In addition, Vite is highly extensible via its [Plugin API](https://vitejs.dev/g
|
||||
|
||||
[Read the Docs to Learn More](https://vitejs.dev).
|
||||
|
||||
## Migrating from 1.x
|
||||
|
||||
Check out the [Migration Guide](https://vitejs.dev/guide/migration.html) if you are upgrading from 1.x.
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Version (click for changelogs) |
|
||||
@ -55,3 +51,11 @@ See [Contributing Guide](https://github.com/vitejs/vite/blob/main/CONTRIBUTING.m
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
||||
## Sponsors
|
||||
|
||||
<p align="center">
|
||||
<a target="_blank" href="https://github.com/sponsors/yyx990803">
|
||||
<img alt="sponsors" src="https://sponsors.vuejs.org/vite.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@ -7,6 +7,9 @@ module.exports = {
|
||||
title: 'Vite',
|
||||
description: 'Next Generation Frontend Tooling',
|
||||
head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }]],
|
||||
vue: {
|
||||
reactivityTransform: true
|
||||
},
|
||||
themeConfig: {
|
||||
repo: 'vitejs/vite',
|
||||
logo: '/logo.svg',
|
||||
|
||||
137
docs/.vitepress/theme/SponsorsGroup.vue
Normal file
137
docs/.vitepress/theme/SponsorsGroup.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<script lang="ts">
|
||||
// shared data across instances so we load only once
|
||||
let data = $ref<SponsorData>()
|
||||
|
||||
const base = `https://sponsors.vuejs.org`
|
||||
const dataUrl = `${base}/vite.json`
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
|
||||
interface Sponsor {
|
||||
url: string
|
||||
img: string
|
||||
name: string
|
||||
}
|
||||
|
||||
interface SponsorData {
|
||||
special: Sponsor[]
|
||||
platinum: Sponsor[]
|
||||
platinum_china: Sponsor[]
|
||||
gold: Sponsor[]
|
||||
silver: Sponsor[]
|
||||
bronze: Sponsor[]
|
||||
}
|
||||
|
||||
const { tier, placement = 'aside' } = defineProps<{
|
||||
tier: keyof SponsorData
|
||||
placement?: 'aside' | 'page' | 'landing'
|
||||
}>()
|
||||
|
||||
let container = $ref<HTMLElement>()
|
||||
let visible = $ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
// only render when entering view
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
visible = true
|
||||
observer.disconnect()
|
||||
}
|
||||
},
|
||||
{ rootMargin: '0px 0px 300px 0px' }
|
||||
)
|
||||
observer.observe(container)
|
||||
onUnmounted(() => observer.disconnect())
|
||||
|
||||
// load data
|
||||
if (!data) {
|
||||
data = await (await fetch(dataUrl)).json()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="container"
|
||||
class="sponsor-container"
|
||||
:class="[tier.startsWith('plat') ? 'platinum' : tier, placement]"
|
||||
>
|
||||
<template v-if="data && visible">
|
||||
<a
|
||||
v-for="{ url, img, name } of data[tier]"
|
||||
class="sponsor-item"
|
||||
:href="url"
|
||||
target="_blank"
|
||||
rel="sponsored noopener"
|
||||
>
|
||||
<picture v-if="img.endsWith('png')">
|
||||
<source
|
||||
type="image/avif"
|
||||
:srcset="`${base}/images/${img.replace(/\.png$/, '.avif')}`"
|
||||
/>
|
||||
<img :src="`${base}/images/${img}`" :alt="name" />
|
||||
</picture>
|
||||
<img v-else :src="`${base}/images/${img}`" :alt="name" />
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sponsor-container {
|
||||
--max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sponsor-container.platinum {
|
||||
--max-width: 260px;
|
||||
}
|
||||
.sponsor-container.gold {
|
||||
--max-width: 160px;
|
||||
}
|
||||
.sponsor-container.silver {
|
||||
--max-width: 140px;
|
||||
}
|
||||
|
||||
.sponsor-item {
|
||||
margin: 2px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 2px;
|
||||
transition: background-color 0.2s ease;
|
||||
height: calc(var(--max-width) / 2 - 6px);
|
||||
}
|
||||
.sponsor-item.action {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
.sponsor-item img {
|
||||
width: 100%;
|
||||
max-width: calc(var(--max-width) - 30px);
|
||||
max-height: calc(var(--max-width) / 2 - 20px);
|
||||
margin: 10px 20px;
|
||||
}
|
||||
.special .sponsor-item {
|
||||
height: 160px;
|
||||
}
|
||||
.special .sponsor-item img {
|
||||
max-width: 300px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
/* aside mode (on content pages) */
|
||||
.sponsor-container.platinum.aside {
|
||||
--max-width: 200px;
|
||||
}
|
||||
.sponsor-container.gold.aside {
|
||||
--max-width: 124px;
|
||||
}
|
||||
.aside .sponsor-item {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
31
docs/.vitepress/theme/SponsorsSidebar.vue
Normal file
31
docs/.vitepress/theme/SponsorsSidebar.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import SponsorsGroup from './SponsorsGroup.vue'
|
||||
import { useData } from 'vitepress'
|
||||
const { frontmatter } = useData()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="frontmatter.sponsors !== false">
|
||||
<a
|
||||
class="sponsors-aside-text"
|
||||
href="https://github.com/sponsors/yyx990803"
|
||||
target="_blank"
|
||||
>Sponsors</a
|
||||
>
|
||||
<SponsorsGroup tier="platinum" />
|
||||
<SponsorsGroup tier="gold" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
a.sponsors-aside-text {
|
||||
color: #999;
|
||||
display: block;
|
||||
margin: 3em 0 1em;
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
padding-left: 2em;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,6 @@
|
||||
import Theme from 'vitepress/theme'
|
||||
import { h } from 'vue'
|
||||
import sponsors from './sponsors.json'
|
||||
import './sponsors.css'
|
||||
import SponsorsSidebar from './SponsorsSidebar.vue'
|
||||
import './custom.css'
|
||||
|
||||
export default {
|
||||
@ -9,29 +8,7 @@ export default {
|
||||
Layout() {
|
||||
return h(Theme.Layout, null, {
|
||||
'sidebar-bottom': () =>
|
||||
h('div', { class: 'sponsors sidebar' }, [
|
||||
h(
|
||||
'a',
|
||||
{
|
||||
href: 'https://github.com/sponsors/yyx990803',
|
||||
target: '_blank',
|
||||
rel: 'noopener'
|
||||
},
|
||||
[h('span', 'Sponsors')]
|
||||
),
|
||||
...sponsors.map(({ href, src, name, id }) =>
|
||||
h(
|
||||
'a',
|
||||
{
|
||||
href,
|
||||
target: '_blank',
|
||||
rel: 'noopener',
|
||||
'aria-label': 'sponsor-img'
|
||||
},
|
||||
[h('img', { src, alt: name, id: `sponsor-${id}` })]
|
||||
)
|
||||
)
|
||||
])
|
||||
h('div', { class: 'sponsors sidebar' }, [h(SponsorsSidebar)])
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
.sponsors {
|
||||
padding: 0 1.5rem 2rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.sponsors a {
|
||||
color: #999;
|
||||
margin: 1em 2em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sponsors img {
|
||||
max-width: 160px;
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
.sponsors.frontpage {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sponsors.frontpage img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sponsors.frontpage h2 {
|
||||
color: #999;
|
||||
font-size: 1.2rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sponsors.sidebar a img {
|
||||
max-height: 36px;
|
||||
}
|
||||
|
||||
.platinum-sponsors {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.platinum-sponsors a img {
|
||||
max-width: 240px;
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
.gold-sponsors {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* special cases */
|
||||
#sponsor-mux {
|
||||
padding: 5px 0;
|
||||
min-height: 36px;
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
[
|
||||
{
|
||||
"id": "stackblitz",
|
||||
"name": "StackBlitz",
|
||||
"href": "https://stackblitz.com/",
|
||||
"src": "/stackblitz.svg",
|
||||
"tier": "platinum"
|
||||
},
|
||||
{
|
||||
"id": "cypress",
|
||||
"name": "Cypress.io",
|
||||
"href": "https://cypress.io",
|
||||
"src": "/cypress.svg"
|
||||
},
|
||||
{
|
||||
"id": "tailwind",
|
||||
"name": "Tailwind Labs",
|
||||
"href": "https://tailwindcss.com",
|
||||
"src": "/tailwind-labs.svg"
|
||||
},
|
||||
{
|
||||
"id": "vuejobs",
|
||||
"name": "Vue Jobs",
|
||||
"href": "https://vuejobs.com/?ref=vuejs",
|
||||
"src": "/vuejobs.png"
|
||||
},
|
||||
{
|
||||
"id": "mux",
|
||||
"name": "Mux",
|
||||
"href": "https://mux.com",
|
||||
"src": "/mux.svg"
|
||||
},
|
||||
{
|
||||
"id": "plaid",
|
||||
"name": "Plaid Inc.",
|
||||
"href": "https://plaid.co.jp/",
|
||||
"src": "/plaid.svg"
|
||||
},
|
||||
{
|
||||
"id": "divriots",
|
||||
"name": "divriots",
|
||||
"href": "https://divriots.com/",
|
||||
"src": "/divriots.png"
|
||||
}
|
||||
]
|
||||
@ -23,21 +23,16 @@ features:
|
||||
footer: MIT Licensed | Copyright © 2019-present Evan You & Vite Contributors
|
||||
---
|
||||
|
||||
<div class="frontpage sponsors">
|
||||
<h2>Sponsors</h2>
|
||||
<div class="platinum-sponsors">
|
||||
<a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier === 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
|
||||
<img :src="src" :alt="name" :id="`sponsor-${id}`">
|
||||
</a>
|
||||
</div>
|
||||
<div class="gold-sponsors">
|
||||
<a v-for="{ href, src, name, id } of sponsors.filter(s => s.tier !== 'platinum')" :href="href" target="_blank" rel="noopener" aria-label="sponsor-img">
|
||||
<img :src="src" :alt="name" :id="`sponsor-${id}`">
|
||||
</a>
|
||||
</div>
|
||||
<a href="https://github.com/sponsors/yyx990803" target="_blank" rel="noopener">Become a sponsor on GitHub</a>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import sponsors from './.vitepress/theme/sponsors.json'
|
||||
import SponsorsGroup from './.vitepress/theme/SponsorsGroup.vue'
|
||||
</script>
|
||||
|
||||
<h3 style="text-align:center;color:#999">Sponsors</h3>
|
||||
|
||||
<SponsorsGroup tier="platinum" placement="landing" />
|
||||
|
||||
<SponsorsGroup tier="gold" placement="landing" />
|
||||
|
||||
<p style="text-align:center;margin-bottom:3em">
|
||||
<a style="color: #999;font-size:.9em;" href="https://github.com/sponsors/yyx990803" target="_blank" rel="noopener">Become a sponsor on GitHub</a>
|
||||
</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user