Skip to content

feat: make the support card stand out in the sidebar - #4346

Merged
kulmann merged 1 commit into
mainfrom
feat/support-card
Nov 9, 2026
Merged

kulmann merged 1 commit into
mainfrom
feat/support-card

Conversation

@kulmann

@kulmann kulmann commented Nov 6, 2026 •

Copy link
Copy Markdown
Member

Description

Replaces the small "Sponsor us" text link at the bottom of the sidebar with a prominent "Support OpenCloud" card.

  • "Donate" links to the GitHub sponsors page (same target as before).
  • "Buy support" links to the subscription support page on the OpenCloud website, in German if a German UI language is selected and in English otherwise.
  • The card uses the tertiary color roles, so it follows the active theme including dark mode.
  • The heart icon animates once after page load and respects prefers-reduced-motion.
  • The card is also shown in the mobile navigation menu.
  • The existing disableSponsorLink config option hides the whole card.

Keeping this as a draft until the mtm params are confirmed and I've received permalinks for the buy support URLs.

Related Issue

Screenshots

Screenshot 2026-11-06 at 15 13 24 Screenshot 2026-11-06 at 15 13 40 Screenshot 2026-11-06 at 15 25 11 Screenshot 2026-11-06 at 15 25 32

How Has This Been Tested?

  • test environment: unit tests (Vitest)
  • test case 1: card is rendered by default and hidden when disableSponsorLink is set
  • test case 2: donate button links to the GitHub sponsors page in a new tab
  • test case 3: buy support button links to the German page for de/de_CH and to the English page for other languages
  • test case 4: animation only runs on the first mount

@kulmann kulmann self-assigned this Nov 6, 2026
@kulmann
kulmann marked this pull request as draft November 6, 2026 14:27
</div>
<div class="flex flex-col gap-2">
<custom-component-target :extension-point="dynamicExtensionPointBottom" />
<support-card v-if="!options.disableSponsorLink" class="mx-2" />

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<support-card v-if="!options.disableSponsorLink" class="mx-2" />
<support-card v-if="!options.disableSponsorLink" class="mx-3 pt-4" />

to have the same width as the nav bar items and some padding top when the window heigh gets narrow

Image

@AlexAndBear

Copy link
Copy Markdown
Member

I'd also remove the pb-4 from the version info so looks more harmonized

image

@AlexAndBear

Copy link
Copy Markdown
Member

Heads-up: #4370 hides the sidebar footer (sponsor link, version, version check) in embed mode. The support card here sits outside that footer, so it'll need the same check, e.g. v-if="!options.disableSponsorLink && !isEmbedModeEnabled" with useEmbedMode(). Whichever lands second gets a small conflict in SidebarNav.vue.

@kulmann
kulmann force-pushed the feat/support-card branch 2 times, most recently from b8bfa23 to 57d8324 Compare November 9, 2026 09:43
@kulmann
kulmann requested a review from AlexAndBear November 9, 2026 10:02
@kulmann
kulmann marked this pull request as ready for review November 9, 2026 10:02
@kulmann
kulmann merged commit be7d950 into main Nov 9, 2026
28 checks passed
@kulmann
kulmann deleted the feat/support-card branch November 9, 2026 13:49
@openclouders openclouders mentioned this pull request Nov 9, 2026
1 task
@AlexAndBear

Copy link
Copy Markdown
Member

@kulmann how do we go around this show-stopper?

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants