per theme follows the system theme, not GitHub's, so it showed the
* light ones on a dark GitHub page.
* All file URLs are already relative to the README.
@@ -194,20 +195,30 @@ function supportPanel(tree, repository) {
}
/**
- * The donation section: one sentence linking the Asset Store. GitHub cannot style a card, so the sentence gives way to
- * an image of the site's one, linking the store.
+ * The donation section: one sentence linking Ko-fi and the Asset Store. GitHub cannot style a card, and an image links
+ * one place, so the sentence gives way to an image of the site's card, linking the first place, and a row of button
+ * images under it, one per place.
*/
function donateCard(tree, {images, exists}) {
- const isStore = (url) => /^https:\/\/assetstore\.unity\.com\//.test(url);
+ const places = [
+ {test: (url) => /^https:\/\/ko-fi\.com\//.test(url), button: `${images}/support-kofi.svg`, alt: 'Support on Ko-fi'},
+ {test: (url) => /^https:\/\/assetstore\.unity\.com\//.test(url), button: `${images}/support-store.svg`, alt: 'Unity Asset Store'},
+ ];
const card = `${images}/support-card.svg`;
const index = tree.children.findIndex((node, at) => isHeading(node, 2) && tree.children[at + 1]?.type === 'paragraph'
- && tree.children[at + 1].children.some((part) => part.type === 'link' && isStore(part.url))
+ && tree.children[at + 1].children.some((part) => part.type === 'link' && places.some(({test}) => test(part.url)))
&& (!tree.children[at + 2] || tree.children[at + 2].type === 'heading'));
if (index === -1 || !exists(card)) return;
const sentence = tree.children[index + 1].children;
- const store = escape(sentence.find((part) => part.type === 'link' && isStore(part.url)).url);
+ const links = places.flatMap((place) => {
+ const link = sentence.find((part) => part.type === 'link' && place.test(part.url));
+ return link ? [{...place, url: escape(link.url)}] : [];
+ });
const alt = escape(sentence.map(function text(part) { return part.value ?? part.children?.map(text).join('') ?? ''; }).join(''));
- tree.children[index + 1] = html(`${image(card, alt, ' width="100%"')} `);
+ const buttons = links.filter(({button}) => exists(button))
+ .map(({url, button, alt: label}) => `${image(button, label, ' height="48"')} `);
+ tree.children[index + 1] = html(`${image(card, alt, ' width="100%"')} `
+ + (buttons.length ? `\n${buttons.join(' ')}
` : ''));
}
diff --git a/Website/scripts/github-readme.test.mjs b/Website/scripts/github-readme.test.mjs
index 242a95c6..5d8e7c19 100644
--- a/Website/scripts/github-readme.test.mjs
+++ b/Website/scripts/github-readme.test.mjs
@@ -95,14 +95,24 @@ test('the help section becomes the call to action, without the licence line', ()
+ 'Open an issue Star on GitHub
\n');
});
-test('the donation sentence gives way to the card image, the sentence its alt text', () => {
+test('the donation sentence gives way to the card image and a button per place, the sentence the card alt text', () => {
+ const kofi = 'https://ko-fi.com/owner';
const store = 'https://assetstore.unity.com/packages/package/1';
- const section = `## Support\n\nSupport it on the [Asset Store](${store}).\n`;
- assert.equal(layout(section, ['Website/docs/Images/support-card.svg']), '## Support\n\n'
- + `
\n`);
assert.equal(layout(section), section, 'without the card image the section stays as it is');
});
+test('the donation card links the Asset Store without a Ko-fi link, and drops a button without its image', () => {
+ const store = 'https://assetstore.unity.com/packages/package/1';
+ assert.equal(layout(`## Support\n\nSupport it on the [Asset Store](${store}).\n`, ['Website/docs/Images/support-card.svg']), '## Support\n\n'
+ + `\n ';
assert.match(layout(`${banner}\n\n`, ['a-light.png']), /{text.title}
{children}
-
-
+
);
}
diff --git a/Website/src/components/DonatePanel/styles.module.css b/Website/src/components/DonatePanel/styles.module.css
index eee5027a..93cd6e22 100644
--- a/Website/src/components/DonatePanel/styles.module.css
+++ b/Website/src/components/DonatePanel/styles.module.css
@@ -1,7 +1,7 @@
/*
* The donation card closes the introduction, after the support panel. Unlike the quiet panels above it, it carries
* the brand green: a green wash with a glowing gradient frame, a heart that beats every few seconds and a filled
- * button like the support panel's primary action, only larger.
+ * button to Ko-fi like the support panel's primary action, only larger, with an outlined Asset Store button under it.
*/
.donate {
@@ -50,6 +50,7 @@
display: inline-flex;
flex: none;
align-items: center;
+ justify-content: center;
gap: 10px;
padding: 13px 22px;
color: var(--venom-accent-fill-ink);
@@ -68,6 +69,16 @@
filter: brightness(1.06);
box-shadow: 0 12px 26px -10px var(--donate-green);
}
+.actions { display: flex; flex: none; flex-direction: column; gap: 10px; }
+/* The Asset Store button: the same size, outlined instead of filled, so Ko-fi stays the main action. */
+:global(.markdown) a.action.secondary:not(:global(.card)):not(:global(.pagination-nav__link)):not([class*='card_']):not(:global(.table-of-contents__link)) {
+ color: var(--venom-fg-strong);
+ background: transparent;
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--donate-green) 55%, transparent);
+}
+:global(.markdown) a.action.secondary:not(:global(.card)):not(:global(.pagination-nav__link)):not([class*='card_']):not(:global(.table-of-contents__link)):hover {
+ box-shadow: inset 0 0 0 1px var(--donate-green);
+}
.icon { flex: none; width: 17px; height: 17px; fill: currentColor; }
:global(.markdown) a.action:hover .icon { animation: beat 1.2s ease-in-out infinite; }
diff --git a/Website/src/remark/introBanner.js b/Website/src/remark/introBanner.js
index 660f803a..90705caf 100644
--- a/Website/src/remark/introBanner.js
+++ b/Website/src/remark/introBanner.js
@@ -234,19 +234,22 @@ export default function remarkIntroBanner({baseUrl, siteUrl}) {
{type: 'mdxJsxAttribute', name: 'repo', value: repo},
]});
}
- // The donation section — one sentence linking the Asset Store — becomes a card with a button to it; the link in
- // the sentence turns into plain text, since the button carries it.
- const isStore = (url) => /^https:\/\/assetstore\.unity\.com\//.test(url);
+ // The donation section — one sentence linking Ko-fi and the Asset Store — becomes a card with a button to each;
+ // the links in the sentence turn into plain text, since the buttons carry them.
+ const donation = {kofi: (url) => /^https:\/\/ko-fi\.com\//.test(url), store: (url) => /^https:\/\/assetstore\.unity\.com\//.test(url)};
+ const isDonation = (part) => part.type === 'link' && Object.values(donation).some((test) => test(part.url));
const donate = tree.children.findIndex((node, index) => node.type === 'heading' && node.depth === 2
&& tree.children[index + 1]?.type === 'paragraph'
- && tree.children[index + 1].children.some((part) => part.type === 'link' && isStore(part.url))
+ && tree.children[index + 1].children.some(isDonation)
&& (!tree.children[index + 2] || tree.children[index + 2].type === 'heading'));
if (donate !== -1) {
const sentence = tree.children[donate + 1].children;
- const store = sentence.find((part) => part.type === 'link' && isStore(part.url));
tree.children[donate + 1] = {type: 'mdxJsxFlowElement', name: 'DonatePanel',
- attributes: [{type: 'mdxJsxAttribute', name: 'href', value: store.url}],
- children: sentence.flatMap((part) => (part === store ? part.children : [part]))};
+ attributes: Object.entries(donation).flatMap(([name, test]) => {
+ const link = sentence.find((part) => part.type === 'link' && test(part.url));
+ return link ? [{type: 'mdxJsxAttribute', name, value: link.url}] : [];
+ }),
+ children: sentence.flatMap((part) => (isDonation(part) ? part.children : [part]))};
}
// Keep absolute site links on GitHub, and native local links on the site.
function visit(node) {
