Display support link on author component

src/ui/component/Author.ts

@@ -1,6 +1,7 @@
 import type { AuthorFull } from "api.fluff4.me"
 import Component from "ui/Component"
 import Block from "ui/component/core/Block"
+import ExternalLink from "ui/component/core/ExternalLink"
 import Slot from "ui/component/core/Slot"
 
 export default Component.Builder((component, author: AuthorFull) => {
@@ -32,5 +33,11 @@ export default Component.Builder((component, author: AuthorFull) => {
 		}))
 		.appendTo(block.content)
 
+	if (author.support_link && author.support_message)
+		ExternalLink(author.support_link)
+			.style("author-support-link")
+			.text.set(author.support_message)
+			.appendTo(block.content)
+
 	return block
 }) 

src/ui/component/core/ExternalLink.ts

@@ -0,0 +1,18 @@
+import Component from "ui/Component"
+
+interface ExternalLinkExtensions {
+
+}
+
+interface ExternalLink extends Component, ExternalLinkExtensions { }
+
+const ExternalLink = Component.Builder("a", (component, href: string | undefined) => {
+	component.style("link", "link-external")
+
+	if (href !== undefined)
+		component.attributes.set("href", href)
+
+	return component
+})
+
+export default ExternalLink

style/component/author.chiri

@@ -7,3 +7,7 @@
 	&-pronouns:
 
 	&-description:
+
+	&-support-link:
+		%block
+		%margin-top-4

style/component/core/link.chiri

@@ -9,3 +9,11 @@
 		%colour-0
 		text-decoration-color: $colour-0
 		$transition-duration: $transition-focus
+
+	&-external:
+
+		@after:
+			%font-font-awesome
+			%vertical-align-super
+			content: " #{get-icon("up-right-from-square")}"
+			font-size: .5em