Skip to content

Commit d69d11e

Browse files
alexdlnalexdln
committed
fix: configure different logos for themes on about page
1 parent 3e2d478 commit d69d11e

8 files changed

Lines changed: 224 additions & 185 deletions

File tree

‎app/assets/logos/oss-partners/index.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import LogoNuxt from '~/assets/logos/oss-partners/nuxt.svg'
2+
import LogoOpenSourcePledge from '~/assets/logos/oss-partners/open-source-pledge.svg'
3+
import LogoOpenSourcePledgeLight from '~/assets/logos/oss-partners/open-source-pledge-light.svg'
4+
import LogoOxC from '~/assets/logos/oss-partners/oxc.svg'
5+
import LogoRolldown from '~/assets/logos/oss-partners/rolldown.svg'
6+
import LogoStorybook from '~/assets/logos/oss-partners/storybook.svg'
7+
import LogoVite from '~/assets/logos/oss-partners/vite.svg'
8+
import LogoVitest from '~/assets/logos/oss-partners/vitest.svg'
9+
import LogoVue from '~/assets/logos/oss-partners/vue.svg'
10+
11+
// The list is used on the about page. To add, simply upload the logos nearby and add an entry here. Prefer SVGs.
12+
// For logo src, specify a string or object with the light and dark theme variants.
13+
// Prefer original assets from partner sites to keep their brand identity.
14+
//
15+
// If there are no original assets and the logo is not universal, you can add only the dark theme variant
16+
// and specify 'auto' for the light one - this will grayscale the logo and invert it in light mode.
17+
export const OSS_PARTNERS = [
18+
{
19+
name: 'Open Source Pledge',
20+
logo: {
21+
dark: LogoOpenSourcePledge,
22+
light: LogoOpenSourcePledgeLight,
23+
},
24+
url: 'https://opensourcepledge.com/',
25+
},
26+
{
27+
name: 'Void Zero',
28+
items: [
29+
{
30+
name: 'Vite',
31+
logo: LogoVite,
32+
url: 'https://vite.dev/',
33+
},
34+
{
35+
name: 'OxC',
36+
logo: LogoOxC,
37+
url: 'https://oxc.rs/',
38+
},
39+
{
40+
name: 'Vitest',
41+
logo: LogoVitest,
42+
url: 'https://vitest.dev/',
43+
},
44+
{
45+
name: 'Rolldown',
46+
logo: LogoRolldown,
47+
url: 'https://rolldown.rs/',
48+
},
49+
],
50+
},
51+
{
52+
name: 'Nuxt',
53+
logo: LogoNuxt,
54+
url: 'https://nuxt.com/',
55+
},
56+
{
57+
name: 'Storybook',
58+
logo: LogoStorybook,
59+
url: 'https://storybook.js.org/',
60+
},
61+
{
62+
name: 'Vue',
63+
logo: LogoVue,
64+
url: 'https://vuejs.org/',
65+
},
66+
]

‎app/assets/logos/oss-partners/open-source-pledge-light.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎app/assets/logos/sponsors/index.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import LogoVercel from './vercel.svg'
2+
import LogoVercelLight from './vercel-light.svg'
3+
import LogoVoidZero from './void-zero.svg'
4+
import LogoVoidZeroLight from './void-zero-light.svg'
5+
6+
// The list is used on the about page. To add, simply upload the logos nearby and add an entry here. Prefer SVGs.
7+
// For logo src, specify a string or object with the light and dark theme variants.
8+
// Prefer original assets from partner sites to keep their brand identity.
9+
//
10+
// If there are no original assets and the logo is not universal, you can add only the dark theme variant
11+
// and specify 'auto' for the light one - this will grayscale the logo and invert it in light mode.
12+
export const SPONSORS = [
13+
{
14+
name: 'Vercel',
15+
logo: {
16+
dark: LogoVercel,
17+
light: LogoVercelLight,
18+
},
19+
url: 'https://vercel.com/',
20+
},
21+
{
22+
name: 'Void Zero',
23+
logo: {
24+
dark: LogoVoidZero,
25+
light: LogoVoidZeroLight,
26+
},
27+
url: 'https://voidzero.dev/',
28+
},
29+
]

‎app/assets/logos/sponsors/vercel-light.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/assets/logos/sponsors/void-zero-light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎app/components/About/LogoImg.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup lang="ts">
2+
const props = defineProps<{
3+
src:
4+
| string
5+
| {
6+
dark: string
7+
light: string
8+
}
9+
}>()
10+
</script>
11+
<template>
12+
<div v-if="typeof src === 'string'">
13+
<img :src="src" loading="lazy" height="36" class="w-auto block h-9" />
14+
</div>
15+
<div v-else-if="src.light === 'auto'">
16+
<img
17+
:src="src.dark"
18+
loading="lazy"
19+
height="36"
20+
class="w-auto block light:invert light:grayscale h-9"
21+
/>
22+
</div>
23+
<div v-else>
24+
<img :src="src.dark" loading="lazy" height="36" class="w-auto block light:hidden h-9" />
25+
<img :src="src.light" loading="lazy" height="36" class="w-auto block hidden light:block h-9" />
26+
</div>
27+
</template>

‎app/components/About/LogoList.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<script setup lang="ts">
2+
type BaseItem = {
3+
name: string
4+
url: string
5+
logo:
6+
| string
7+
| {
8+
dark: string
9+
light: string
10+
}
11+
}
12+
13+
type GroupItem = {
14+
name: string
15+
items: BaseItem[]
16+
}
17+
18+
const props = defineProps<{
19+
list: (BaseItem | GroupItem)[]
20+
}>()
21+
</script>
22+
23+
<template>
24+
<ul class="flex items-center flex-wrap gap-4 md:gap-x-6 md:gap-y-4 list-none">
25+
<li v-for="item in list" :key="item.name">
26+
<a
27+
v-if="'logo' in item"
28+
:href="item.url"
29+
target="_blank"
30+
rel="noopener noreferrer"
31+
class="flex items-center justify-center h-full min-w-11 rounded-md hover:bg-fg/10 transition-colors p-1"
32+
>
33+
<AboutLogoImg :src="item.logo" :alt="item.name" />
34+
</a>
35+
<div v-else-if="item.items" class="relative flex items-center justify-center">
36+
<svg
37+
width="11"
38+
height="38"
39+
viewBox="0 0 11 38"
40+
fill="none"
41+
xmlns="http://www.w3.org/2000/svg"
42+
aria-hidden="true"
43+
>
44+
<path
45+
d="M5.62151 0C-1.8519 10.6931 -1.89574 27.2683 5.62151 37.9997H10.6709C3.15538 27.2683 3.19922 10.6931 10.6709 0H5.62151Z"
46+
fill="currentColor"
47+
/>
48+
</svg>
49+
<ul class="flex items-center justify-center h-full gap-0.5 list-none">
50+
<li v-for="groupItem in item.items" :key="groupItem.name">
51+
<a
52+
:href="groupItem.url"
53+
target="_blank"
54+
rel="noopener noreferrer"
55+
class="flex items-center justify-center h-full min-w-10 rounded-md hover:bg-fg/10 transition-colors p-0.5"
56+
>
57+
<AboutLogoImg :src="groupItem.logo" :alt="groupItem.name" />
58+
</a>
59+
</li>
60+
</ul>
61+
<svg
62+
width="11"
63+
height="38"
64+
viewBox="0 0 11 38"
65+
fill="none"
66+
xmlns="http://www.w3.org/2000/svg"
67+
aria-hidden="true"
68+
>
69+
<path
70+
d="M5.04935 0H0C7.4734 10.6931 7.51725 27.2683 0 37.9997H5.04935C12.5648 27.2683 12.521 10.6931 5.04935 0Z"
71+
fill="currentColor"
72+
/>
73+
</svg>
74+
</div>
75+
</li>
76+
</ul>
77+
</template>

0 commit comments

Comments
 (0)