chore: pride month fundraiser conclusion (#6588)

* pride end blog post

* Fix drago link

* prepr oops

apps/frontend/src/layouts/default.vue

@@ -5,6 +5,10 @@
 	<div class="pointer-events-none absolute inset-0 z-[-1]">
 		<div id="absolute-background-teleport" class="relative"></div>
 	</div>
+	<div
+		class="pride-backdrop pointer-events-none absolute inset-0 z-[-1]"
+		:class="{ shown: showPrideBackdrop }"
+	></div>
 	<div class="pointer-events-none absolute inset-0 z-50">
 		<div
 			class="over-the-top-random-animation"
@@ -801,6 +805,7 @@ import ProjectCreateModal from '~/components/ui/create/ProjectCreateModal.vue'
 import ModrinthFooter from '~/components/ui/ModrinthFooter.vue'
 import { getSignInRouteObj } from '~/composables/auth.ts'
 import { errors as generatedStateErrors } from '~/generated/state.json'
+import { provideCurrentProjectId } from '~/providers/current-project.ts'
 import { getProjectTypeMessage } from '~/utils/i18n-project-type.ts'
 import { hasActiveMidas } from '~/utils/user-membership.ts'
 
@@ -867,6 +872,32 @@ const showTinMismatchBanner = computed(() => {
 	return !!auth.value.user && status === 'tin-mismatch'
 })
 
+const PRIDE_COLLECTION_ID = 'M4c3ITvd'
+const PRIDE_ARTICLE_SLUGS = ['pride-campaign-2025', 'pride-campaign-2026', 'proud-of-you-2026']
+const PRIDE_CACHE_TIME = 1000 * 60 * 60 * 24
+
+const { data: prideCollection } = useQuery({
+	queryKey: computed(() => ['collection', PRIDE_COLLECTION_ID]),
+	queryFn: () => client.labrinth.collections.get(PRIDE_COLLECTION_ID),
+	staleTime: PRIDE_CACHE_TIME,
+	gcTime: PRIDE_CACHE_TIME,
+})
+
+const prideProjectIds = computed(() => new Set(prideCollection.value?.projects ?? []))
+
+const currentProjectId = ref()
+provideCurrentProjectId(currentProjectId)
+
+const showPrideBackdrop = computed(() => {
+	if (PRIDE_ARTICLE_SLUGS.includes(route.params.slug)) {
+		return true
+	}
+	if (route.params.collection === PRIDE_COLLECTION_ID) {
+		return true
+	}
+	return !!currentProjectId.value && prideProjectIds.value.has(currentProjectId.value)
+})
+
 const basePopoutId = useId()
 
 async function fetchIntercomToken() {
@@ -1695,4 +1726,21 @@ const { cycle: changeTheme } = useTheme()
 		transform: translateY(0);
 	}
 }
+
+.pride-backdrop {
+	background-image: linear-gradient(to right, #c20732, #f57203, #ffd632, #21ca8b, #2f9ff2, #e420fc);
+	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 80%);
+	height: 30rem;
+	opacity: 0;
+	transition: opacity 1s ease;
+}
+
+.pride-backdrop.shown {
+	opacity: 0.08;
+}
+
+.light-mode .pride-backdrop.shown,
+.light .pride-backdrop.shown {
+	opacity: 0.15;
+}
 </style>

apps/frontend/src/pages/[type]/[project].vue

@@ -1114,7 +1114,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
 import { useLocalStorage } from '@vueuse/core'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
-import { nextTick, readonly, ref, useTemplateRef, watch } from 'vue'
+import { nextTick, onScopeDispose, readonly, ref, useTemplateRef, watch, watchEffect } from 'vue'
 
 import { navigateTo } from '#app'
 import Accordion from '~/components/ui/Accordion.vue'
@@ -1130,6 +1130,7 @@ import { saveFeatureFlags } from '~/composables/featureFlags.ts'
 import { STALE_TIME, STALE_TIME_LONG } from '~/composables/queries/project'
 import { versionQueryOptions } from '~/composables/queries/version'
 import { userCollectProject, userFollowProject } from '~/composables/user.js'
+import { injectCurrentProjectId } from '~/providers/current-project.ts'
 import {
 	loadChecklistOpenState,
 	saveChecklistOpenState,
@@ -1705,6 +1706,16 @@ const project = computed(() => {
 // Use actual project ID for dependent queries (ensures cache consistency)
 const projectId = computed(() => projectRaw.value?.id)
 
+const sharedProjectId = injectCurrentProjectId(null)
+if (sharedProjectId) {
+	watchEffect(() => {
+		sharedProjectId.value = projectId.value ?? undefined
+	})
+	onScopeDispose(() => {
+		sharedProjectId.value = undefined
+	})
+}
+
 // V3 Project
 const {
 	data: projectV3,

apps/frontend/src/pages/collection/[collection].vue

@@ -954,5 +954,9 @@ function openEditModal(event) {
 		color: var(--color-brand);
 		font-weight: 600;
 	}
+
+	a:hover {
+		text-decoration: underline;
+	}
 }
 </style>

apps/frontend/src/providers/current-project.ts

@@ -0,0 +1,9 @@
+import { createContext } from '@modrinth/ui'
+import type { Ref } from 'vue'
+
+/**
+ * Informs the default layout of the current project ID, if any, because it can't be gleaned from the route which may be a slug
+ */
+export const [injectCurrentProjectId, provideCurrentProjectId] = createContext<
+	Ref<string | undefined>
+>('root', 'currentProjectId')

apps/frontend/src/public/news/feed/articles.json

@@ -1,5 +1,12 @@
 {
 	"articles": [
+		{
+			"title": "Proud of you all",
+			"summary": "Over 2,400 of you came together to raise more than $40,000 for charity this Pride month!",
+			"thumbnail": "https://modrinth.com/news/article/proud-of-you-2026/thumbnail.webp",
+			"date": "2026-07-02T01:00:00.000Z",
+			"link": "https://modrinth.com/news/article/proud-of-you-2026"
+		},
 		{
 			"title": "Improving Modpack review delays",
 			"summary": "Reducing the back-and-forth needed to get your modpack approved.",