Skip to content

Commit

Permalink
docs: add sponsors block
Browse files Browse the repository at this point in the history
  • Loading branch information
posva committed May 17, 2024
1 parent 37f0bf0 commit 6c57817
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 2 deletions.
75 changes: 75 additions & 0 deletions packages/docs/.vitepress/theme/components/AsideGitHubSponsors.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<script setup lang="ts">
import { computed } from 'vue'
import { VPDocAsideSponsors } from 'vitepress/theme'
import { useSponsor } from '../composables/sponsor'
const { data } = useSponsor()
const sponsors = computed(() => {
return (
data?.value.map((sponsor) => {
return {
size: sponsor.size === 'big' ? 'mini' : 'xmini',
items: sponsor.items,
}
}) ?? []
)
})
</script>

<template>
<VPDocAsideSponsors v-if="data" :data="sponsors" />
</template>

<style>
.viteconf {
margin-top: 1rem;
margin-bottom: 1rem;
border-radius: 14px;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
position: relative;
font-size: 0.9rem;
font-weight: 700;
line-height: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
gap: 1rem;
background-color: var(--vp-c-bg-alt);
border: 2px solid var(--vp-c-bg-alt);
transition: border-color 0.5s;
}
.viteconf:hover {
border: 2px solid var(--vp-c-brand-light);
}
.viteconf img {
transition: transform 0.5s;
transform: scale(1.25);
}
.viteconf:hover img {
transform: scale(1.75);
}
.viteconf .heading {
background-image: linear-gradient(
120deg,
#b047ff 16%,
var(--vp-c-brand-lighter),
var(--vp-c-brand-lighter)
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.viteconf .extra-info {
color: var(--vp-c-text-1);
opacity: 0;
font-size: 0.7rem;
padding-left: 0.1rem;
transition: opacity 0.5s;
}
.viteconf:hover .extra-info {
opacity: 0.9;
}
</style>
61 changes: 59 additions & 2 deletions packages/docs/.vitepress/theme/components/AsideSponsors.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,49 @@
<script setup lang="ts">
import { computed } from 'vue'
import { VPDocAsideSponsors } from 'vitepress/theme'
import sponsors from './sponsors.json'
// to avoid the never[] type in json
interface Sponsor {
alt: string
href: string
imgSrcDark: string
imgSrcLight: string
}
const asideSponsors = computed(() => {
return [
{
size: 'mini',
items: sponsors.platinum.length ? sponsors.platinum.map((sponsor: Sponsor) => ({
name: sponsor.alt,
url: sponsor.href,
img: sponsor.imgSrcLight,
})) : [
{
name: 'Become a sponsor',
url: 'https://github.com/sponsors/posva',
img: '/your-logo-here.svg'
}
],
},
{
size: 'xmini',
// TODO: use gold instead once I have some
items: sponsors.silver.map((sponsor: Sponsor) => ({
name: sponsor.alt,
url: sponsor.href,
img: sponsor.imgSrcLight,
})),
},
]
})
</script>

<template>
<a
<VPDocAsideSponsors :data="asideSponsors" />

<!-- <a
class="banner mp"
href="https://masteringpinia.com?utm=pinia-sidebar"
target="_blank"
Expand All @@ -10,7 +54,7 @@
<p class="heading">Mastering Pinia</p>
<p class="extra-info">written by its creator</p>
</span>
</a>
</a> -->

<a
class="banner cert"
Expand All @@ -27,6 +71,19 @@
</template>

<style scoped>
.VPDocAsideSponsors {
margin-top: 8px !important;
}
:deep(.vp-sponsor-grid.mini .vp-sponsor-grid-image) {
max-width: 158px;
max-height: 48px;
}
:deep(.vp-sponsor-grid.xmini .vp-sponsor-grid-image) {
max-width: 80px;
max-height: 32px;
}
.banner {
margin: 0.25rem 0;
padding: 0.4rem 0;
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/public/your-logo-here.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6c57817

Please sign in to comment.