Add logo component and social links

web/components/SocialLinks.tsx

@@ -1,11 +0,0 @@
-import { SocialLink } from '../interfaces/social-link.model';
-
-interface Props {
-  // eslint-disable-next-line react/no-unused-prop-types
-  links: SocialLink[];
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function SocialLinks(props: Props) {
-  return <div>Social links component goes here</div>;
-}

web/components/ui/Content/Content.tsx

@@ -1,5 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { Layout, Button, Tabs } from 'antd';
+import { Layout, Button, Tabs, Typography } from 'antd';
 import {
   chatVisibilityAtom,
   clientConfigStateAtom,
@@ -23,9 +23,13 @@ import ActionButton from '../../action-buttons/ActionButton';
 import Statusbar from '../Statusbar/Statusbar';
 import { ServerStatus } from '../../../interfaces/server-status.model';
 import { Follower } from '../../../interfaces/follower';
+import SocialLinks from '../SocialLinks/SocialLinks';
+import NotifyReminderPopup from '../NotifyReminderPopup/NotifyReminderPopup';
+import ServerLogo from '../Logo/Logo';
 
 const { TabPane } = Tabs;
 const { Content } = Layout;
+const { Title } = Typography;
 
 export default function ContentComponent() {
   const status = useRecoilValue<ServerStatus>(serverStatusState);
@@ -34,7 +38,7 @@ export default function ContentComponent() {
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const chatState = useRecoilValue<ChatState>(chatStateAtom);
 
-  const { extraPageContent, version } = clientConfig;
+  const { extraPageContent, version, socialHandles, name, title, tags } = clientConfig;
   const { online, viewerCount, lastConnectTime, lastDisconnectTime } = status;
 
   const followers: Follower[] = [];
@@ -73,26 +77,31 @@ export default function ContentComponent() {
         <ActionButtonRow>
           {externalActionButtons}
           <Button>Follow</Button>
-          <Button>Notify</Button>
+          <NotifyReminderPopup visible notificationClicked={() => {}} notificationClosed={() => {}}>
+            <Button>Notify</Button>
+          </NotifyReminderPopup>
         </ActionButtonRow>
 
         <div className={`${s.lowerRow}`}>
-          <Tabs defaultActiveKey="1" type="card">
+          <ServerLogo />
+          <Title level={2}>{name}</Title>
+          {online && title !== '' && <Title level={3}>{title}</Title>}
+          <div>{tags.length > 0 && tags.map(tag => <span key={tag}>#{tag}&nbsp;</span>)}</div>
+          <Tabs defaultActiveKey="1">
             <TabPane tab="About" key="1" className={`${s.pageContentSection}`}>
+              <SocialLinks links={socialHandles} />
               <CustomPageContent content={extraPageContent} />
             </TabPane>
             <TabPane tab="Followers" key="2" className={`${s.pageContentSection}`}>
               <FollowerCollection total={total} followers={followers} />
             </TabPane>
           </Tabs>
-
           {chatVisibility && (
             <div className={`${s.mobileChat}`}>
               <ChatContainer messages={messages} state={chatState} />
               <ChatTextField />
             </div>
           )}
-
           <Footer version={version} />
         </div>
       </div>

web/components/ui/Footer/Footer.tsx

@@ -9,5 +9,9 @@ interface Props {
 export default function FooterComponent(props: Props) {
   const { version } = props;
 
-  return <Footer style={{ textAlign: 'center', height: '64px' }}>Owncast {version}</Footer>;
+  return (
+    <Footer style={{ textAlign: 'center', height: '64px' }}>
+      <a href="https://owncast.online">{version}</a>
+    </Footer>
+  );
 }

web/components/ui/Logo/Logo.module.scss

@@ -0,0 +1,9 @@
+.logo {
+  width: 120px;
+  border-radius: 50%;
+  border-width: 3px;
+  border-style: solid;
+  border-color: var(--theme-primary-color);
+  background-color: var(--theme-background-secondary);
+  padding: 3px;
+}

web/components/ui/Logo/Logo.tsx

@@ -0,0 +1,5 @@
+import s from './Logo.module.scss';
+
+export default function SocialLinks() {
+  return <img className={s.logo} src="/logo" alt="logo" />;
+}

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx

@@ -5,7 +5,7 @@ import s from './NotifyReminderPopup.module.scss';
 
 interface Props {
   visible: boolean;
-  children: React.ReactNode[];
+  children: React.ReactNode;
   notificationClicked: () => void;
   notificationClosed: () => void;
 }

web/components/ui/SocialLinks/SocialLinks.module.scss

@@ -0,0 +1,11 @@
+.link {
+  width: 2em;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.links {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

web/components/ui/SocialLinks/SocialLinks.tsx

@@ -0,0 +1,21 @@
+import { SocialLink } from '../../../interfaces/social-link.model';
+import s from './SocialLinks.module.scss';
+
+interface Props {
+  // eslint-disable-next-line react/no-unused-prop-types
+  links: SocialLink[];
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function SocialLinks(props: Props) {
+  const { links } = props;
+  return (
+    <div className={s.links}>
+      {links.map(link => (
+        <a key={link.platform} href={link.url} className={s.link} target="_blank" rel="noreferrer">
+          <img src={link.icon} alt={link.platform} title={link.platform} className={s.link} />
+        </a>
+      ))}
+    </div>
+  );
+}

web/next.config.js

@@ -12,6 +12,10 @@ module.exports = withLess({
         source: '/hls/:path*',
         destination: 'http://localhost:8080/hls/:path*', // Proxy to Backend to work around CORS.
       },
+      {
+        source: '/img/:path*',
+        destination: 'http://localhost:8080/hls/:path*', // Proxy to Backend to work around CORS.
+      },
       {
         source: '/logo',
         destination: 'http://localhost:8080/logo', // Proxy to Backend to work around CORS.

web/public/img/platformlogos/bandcamp.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m0 18.75 7.437-13.5h16.563l-7.438 13.5z" fill="#408294"/></svg>

web/public/img/platformlogos/default.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512.418 512.418" height="512" viewBox="0 0 512.418 512.418" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m437.335 75.082c-100.1-100.102-262.136-100.118-362.252 0-100.103 100.102-100.118 262.136 0 362.253 100.1 100.102 262.136 100.117 362.252 0 100.103-100.102 100.117-262.136 0-362.253zm-10.706 325.739c-11.968-10.702-24.77-20.173-38.264-28.335 8.919-30.809 14.203-64.712 15.452-99.954h75.309c-3.405 47.503-21.657 92.064-52.497 128.289zm-393.338-128.289h75.309c1.249 35.242 6.533 69.145 15.452 99.954-13.494 8.162-26.296 17.633-38.264 28.335-30.84-36.225-49.091-80.786-52.497-128.289zm52.498-160.936c11.968 10.702 24.77 20.173 38.264 28.335-8.919 30.809-14.203 64.712-15.452 99.954h-75.31c3.406-47.502 21.657-92.063 52.498-128.289zm154.097 31.709c-26.622-1.904-52.291-8.461-76.088-19.278 13.84-35.639 39.354-78.384 76.088-88.977zm0 32.708v63.873h-98.625c1.13-29.812 5.354-58.439 12.379-84.632 27.043 11.822 56.127 18.882 86.246 20.759zm0 96.519v63.873c-30.119 1.877-59.203 8.937-86.246 20.759-7.025-26.193-11.249-54.82-12.379-84.632zm0 96.581v108.254c-36.732-10.593-62.246-53.333-76.088-88.976 23.797-10.817 49.466-17.374 76.088-19.278zm32.646 0c26.622 1.904 52.291 8.461 76.088 19.278-13.841 35.64-39.354 78.383-76.088 88.976zm0-32.708v-63.873h98.625c-1.13 29.812-5.354 58.439-12.379 84.632-27.043-11.822-56.127-18.882-86.246-20.759zm0-96.519v-63.873c30.119-1.877 59.203-8.937 86.246-20.759 7.025 26.193 11.249 54.82 12.379 84.632zm0-96.581v-108.254c36.734 10.593 62.248 53.338 76.088 88.977-23.797 10.816-49.466 17.373-76.088 19.277zm73.32-91.957c20.895 9.15 40.389 21.557 57.864 36.951-8.318 7.334-17.095 13.984-26.26 19.931-8.139-20.152-18.536-39.736-31.604-56.882zm-210.891 56.882c-9.165-5.947-17.941-12.597-26.26-19.931 17.475-15.394 36.969-27.801 57.864-36.951-13.068 17.148-23.465 36.732-31.604 56.882zm.001 295.958c8.138 20.151 18.537 39.736 31.604 56.882-20.895-9.15-40.389-21.557-57.864-36.951 8.318-7.334 17.095-13.984 26.26-19.931zm242.494 0c9.165 5.947 17.942 12.597 26.26 19.93-17.475 15.394-36.969 27.801-57.864 36.951 13.067-17.144 23.465-36.729 31.604-56.881zm26.362-164.302c-1.249-35.242-6.533-69.146-15.452-99.954 13.494-8.162 26.295-17.633 38.264-28.335 30.84 36.225 49.091 80.786 52.497 128.289z"/></svg>

web/public/img/platformlogos/discord.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m20.222 0c1.406 0 2.54 1.137 2.607 2.475v21.525l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205h-14.038c-1.402 0-2.54-1.065-2.54-2.476v-16.24c0-1.338 1.14-2.477 2.545-2.477h16.5zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34s-1.27-.6-1.27-1.334c.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34s-1.27-.6-1.27-1.334c0-.74.57-1.338 1.27-1.338z" fill="#7289da"/></svg>

web/public/img/platformlogos/donate.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 501.9 501.9" viewBox="0 0 501.9 501.9" xmlns="http://www.w3.org/2000/svg"><path d="m501.8 270.1c-.6-13.9-14.2-25-40.5-33-20.4-6.1-46.3-9.8-74.3-10.4v-106.7c-.1-1.8-.6-3.5-1.5-5-2.8-12.1-16.3-21.9-40.2-29.1-22.5-6.8-51.9-10.5-82.8-10.5-30.8 0-59.9 3.7-82 10.5-18.1 5.6-39.8 16-39.8 33.9 0 1.1.1 2.2.3 3.3l1.1 45.6c-65-12.4-127.7 30.3-140 95.2-1.4 7.4-2.1 14.8-2.1 22.3 0 66 53.7 119.7 119.7 119.7 27.5 0 54.1-9.4 75.4-26.8 18.7 4.4 40.7 6.8 64 7 5.1 27.7 65.1 40.4 121 40.4 30.8 0 59.9-3.8 82-10.7 18.1-5.6 39.8-16.1 39.8-34v-109.8c0-.6 0-1.3-.1-1.9zm-135.7-94.8c0 1.3-4.8 8.2-26.5 14.8-20.3 6.1-48.4 9.7-77 9.7-24.7 0-48.9-2.6-68.1-7.5-.3-.1-.5-.1-.8-.2-9.5-7.5-20-13.5-31.3-17.7l-.7-28.2c6.9 3.5 14.1 6.3 21.6 8.3 21.7 6.3 49.8 9.7 79.3 9.7 30.8 0 60.3-3.7 82.8-10.5 7.5-2.2 14.8-5.1 21.7-8.7v26.2c-1.1 1.4-1 2.7-1 4.1zm-179.6-70.1c20.2-6.2 47.2-9.7 76-9.7 28.6 0 56.7 3.5 77 9.7 21.7 6.6 26.5 13.4 26.5 14.7 0 1.4-4.9 8.3-26.6 14.8-20.3 6.1-48.3 9.6-76.9 9.6-27.6 0-53.8-3.2-73.7-9-21.5-6.2-27.5-13-28-15.2 0-.2-.1-.2-.1-.2.1-1.9 4.7-8.3 25.8-14.7zm.3 254.8c-40.7 37-103.8 34.1-140.8-6.6s-34.1-103.8 6.6-140.8c18.3-16.7 42.3-25.9 67.1-25.9 10 0 19.9 1.5 29.5 4.4 34.7 10.8 60.8 39.6 68.2 75.1 1.3 6.6 2 13.4 2 20.1.1 28.1-11.8 54.8-32.6 73.7zm25.4 2.2c8.1-9.9 14.6-21 19.2-32.9 8.5.7 17.3 1.2 26.5 1.3v1.8l.6 33.9c-15.5-.2-31-1.6-46.3-4.1zm26.7-87.8c5.8.4 11.9.6 18.1.7l.6 35.4c-7-.1-13.9-.4-20.5-.9 1.5-7.7 2.3-15.6 2.3-23.4 0-3.9-.2-7.8-.5-11.8zm24.6-19.2c-.3 0-.7 0-1 0-9.6 0-18.9-.4-27.5-1-3.8-13.4-9.8-26-17.9-37.2 15 1.9 30.1 2.9 45.3 2.9 30.9 0 60.4-3.7 82.9-10.5 7.5-2.2 14.7-5.1 21.6-8.6v26.2c-42.9 1.2-87 10.2-103.4 28.2zm13.2 15.9c0-.1 0-.2.1-.4.9-2.7 8-9.3 28.7-15.1 19.4-5.5 44.7-8.5 71.3-8.5h1.7c28.6 0 56.6 3.3 77 9.5 21.3 6.4 26.3 13 26.4 14.5v.1c-.1 1.5-5.1 8.4-27.3 15-20.5 6.1-47.5 9.4-76 9.4-27.6 0-53.8-3.2-73.7-8.9-21.5-6.2-27.4-13.1-28-15.2-.2-.4-.2-.4-.2-.4zm179.6 125.7c-20.2 6.3-47.3 9.8-76.1 9.8-28.9 0-55.9-3.4-75.9-9.5-21.1-6.5-25.5-13.2-25.5-14.7 0-.1 0-.1 0-.2l-.5-29c8 3.9 16.3 6.9 24.9 9.1 21 5.5 47.7 8.6 75.1 8.6 30.9 0 60.2-3.7 82.6-10.5 7.3-2.2 14.3-5.1 21-8.5v30h.1c0 1.4-4.6 8.3-25.7 14.9zm25.8-73.6h-.1c0 1-.6 2.2-.6 3.3 0 1.4-4.7 8.2-26.3 14.8-20.5 6.2-47.8 9.6-76.7 9.6-55.4 0-92.7-12.5-100.5-22.2l-.1-8.4-.4-23c7 3.5 14.3 6.3 21.8 8.4 21.7 6.3 49.8 9.7 79.3 9.7 30.4 0 59.4-3.6 81.7-10.2 7.6-2.1 14.9-5 21.9-8.6z"/><path d="m156.1 300.4c-4.6-16.3-19.5-27.5-36.4-27.5-9.8 0-17.8-7.9-17.8-17.7.1-9.9 8-17.8 17.8-17.8s17.8 8 17.8 17.8c0 5.5 4.5 10 10 10s10-4.5 10-10c0-16.9-11.2-31.8-27.5-36.4v-4.5c0-5.5-4.5-10-10-10s-10 4.5-10 10v4.3c-20.1 5.4-32.1 26.1-26.7 46.2 4.4 16.5 19.3 28 36.4 28 9.8 0 17.8 7.9 17.8 17.7s-7.9 17.8-17.7 17.8-17.8-7.9-17.8-17.7c0-5.5-4.5-10-10-10s-10 4.5-10 10c.1 17.1 11.5 32 28 36.5v8.7c0 5.5 4.5 10 10 10s10-4.5 10-10v-8.8c20.1-5.7 31.8-26.5 26.1-46.6z"/></svg>

web/public/img/platformlogos/facebook.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385h-3.047v-3.47h3.047v-2.642c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953h-1.514c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385c5.738-.901 10.126-5.866 10.126-11.855z" fill="#1877f2"/></svg>

web/public/img/platformlogos/follow.svg

@@ -0,0 +1 @@
+<svg height="500" viewBox="0 0 132.292 132.292" width="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="432.851" x2="464.644" y1="49.977" y2="49.977"><stop offset="0" stop-color="#2087e2"/><stop offset="1" stop-color="#b63fff"/></linearGradient><path d="m438.6723 34.080635h20.15068a5.8208333 5.8208333 45 0 1 5.82083 5.820833v20.150671a5.8208333 5.8208333 135 0 1 -5.82083 5.820833h-20.15068a5.8208333 5.8208333 45 0 1 -5.82083-5.820833v-20.150671a5.8208333 5.8208333 135 0 1 5.82083-5.820833z" fill="url(#a)" height="31.792" transform="matrix(4.161118 0 0 4.1611093 -1801.1461 -141.81325)" width="31.792" x="432.851" y="34.081"/><path d="m906.37607 136.92939-1.16908 21.51397-21.18682.9402 23.86651 33.56761h6.78711c12.63935-.00077 22.88508-10.24737 22.88476-22.88672v-17.37304z" fill="#8842da" opacity=".85" transform="matrix(1.0583333 0 0 1.0583314 -859.95885 -71.914618)"/><g stroke="#fff" stroke-linecap="round" stroke-linejoin="round"><circle cx="876.218" cy="118.03" fill="none" r="21.554" stroke-width="8.788" transform="matrix(.90817292 0 0 .91240816 -737.0168 -65.427926)"/><path d="m845.10701 163.99555c0-16.54233 13.41021-29.95253 29.95254-29.95253 7.21351 0 14.1847 2.60326 19.63258 7.3314" fill="none" stroke-width="6.641" transform="matrix(1.1474324 0 0 1.2648307 -944.18797 -103.00395)"/><g fill="#fff" stroke-width="7.559"><path d="m881.64121 159.87402 34.92069.27968" transform="matrix(1.0583333 0 0 1.0583314 -853.60885 -74.031283)"/><path d="m881.64121 159.87402 34.92069.27968" transform="matrix(0 1.0583314 -1.0583333 0 267.28831 -856.231)"/></g></g></svg>

web/public/img/platformlogos/github.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.385-1.335-1.755-1.335-1.755-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57 4.801-1.574 8.236-6.074 8.236-11.369 0-6.627-5.373-12-12-12" fill="#181717"/></svg>

web/public/img/platformlogos/gitlab.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m4.845.904c-.435 0-.82.28-.955.692-1.251 3.853-2.644 8.132-3.82 11.739a1.437 1.437 0 0 0 .522 1.607l11.071 8.045c.2.145.472.144.67-.004l11.073-8.04a1.436 1.436 0 0 0 .522-1.61c-1.285-3.942-2.683-8.256-3.817-11.746a1.004 1.004 0 0 0 -.957-.684.987.987 0 0 0 -.949.69l-2.405 7.408h-7.597l-2.41-7.408a.987.987 0 0 0 -.942-.69h-.006zm-.006 1.42 2.173 6.678h-4.337zm14.326 0 2.168 6.678h-4.341zm-10.593 7.81h6.862c-1.142 3.52-2.288 7.04-3.434 10.559l-3.428-10.558zm-5.514.005h4.321l3.086 9.5zm13.567 0h4.325c-2.467 3.17-4.95 6.328-7.411 9.502 1.028-3.167 2.059-6.334 3.086-9.502zm-14.525.623 6.977 8.947-7.817-5.682a.305.305 0 0 1 -.112-.341zm19.798 0 .952 2.922a.305.305 0 0 1 -.11.341v.002l-7.82 5.68.026-.035z" fill="#fca121"/></svg>

web/public/img/platformlogos/google.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.24 10.285v4.115h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138c-2.09-1.951-4.8-3.137-8.039-3.137-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989z" fill="#4285f4"/></svg>

web/public/img/platformlogos/instagram.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 0c-3.26 0-3.667.015-4.947.072-1.278.06-2.148.261-2.913.558-.789.306-1.459.717-2.126 1.384s-1.079 1.336-1.384 2.126c-.297.765-.499 1.635-.558 2.913-.06 1.28-.072 1.687-.072 4.947s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558 1.28.06 1.687.072 4.947.072s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126-.667-.667-1.335-1.079-2.126-1.384-.765-.297-1.636-.499-2.913-.558-1.28-.06-1.687-.072-4.947-.072zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zm0 10.162c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44s.646-1.439 1.44-1.439c.793-.001 1.44.645 1.44 1.439z" fill="#e4405f"/></svg>

web/public/img/platformlogos/ko-fi.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593h-18.299c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028v-5.681h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z" fill="#f16061"/></svg>

web/public/img/platformlogos/lbry.svg

@@ -0,0 +1 @@
+<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="16" cy="16" fill="#006149" r="16"/><path d="M24.176 17.184l-.797-.199.242-.97 2.485.621-.62 2.485-.971-.242.215-.862-8.872 5.493-9.839-4.916v-3.752l10.224-6.394 9.375 4.573v1.544l-9.759 6.063-7.247-3.593.444-.896 6.749 3.346 8.813-5.476v-.363L16.303 9.59 7.02 15.396v2.58l8.787 4.39z" fill="#fff" fill-rule="nonzero"/></g></svg>

web/public/img/platformlogos/liberapay.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.83012 0 0 .83012 -135.4 -247.7)"><path d="m259.55 385.57c0 5.145-4.169 9.318-9.318 9.318h-77.74c-5.144 0-9.318-4.174-9.318-9.318v-77.74c0-5.145 4.174-9.318 9.318-9.318h77.74c5.149 0 9.318 4.173 9.318 9.318z" fill="#f6c915"/><g fill="#fff"><path d="m202.45 366.03c-3.104 0-5.541-.405-7.311-1.213-1.77-.809-3.039-1.912-3.803-3.313-.766-1.398-1.137-3-1.115-4.818.021-1.814.272-3.748.754-5.803l8.327-34.817 10.164-1.573-9.114 37.768c-.175.786-.273 1.508-.295 2.163-.023.655.098 1.235.36 1.737.262.504.71.908 1.344 1.213.633.307 1.519.504 2.656.591l-1.967 8.06"/><path d="m239.16 344.33c0 3.19-.525 6.108-1.574 8.753-1.049 2.646-2.503 4.929-4.36 6.852-1.858 1.925-4.087 3.421-6.688 4.491s-5.432 1.607-8.49 1.607c-1.487 0-2.973-.132-4.459-.395l-2.951 11.869h-9.704l10.884-45.37c1.748-.524 3.748-.994 5.999-1.41 2.252-.415 4.689-.622 7.312-.622 2.448 0 4.558.371 6.327 1.114 1.771.743 3.224 1.76 4.361 3.049 1.136 1.29 1.977 2.798 2.523 4.524s.82 3.574.82 5.542m-23.802 13.442c.743.175 1.661.262 2.754.262 1.704 0 3.256-.316 4.655-.951 1.398-.633 2.59-1.518 3.574-2.655.982-1.136 1.747-2.501 2.294-4.098.546-1.595.819-3.354.819-5.278 0-1.879-.416-3.475-1.245-4.787-.831-1.311-2.273-1.967-4.327-1.967-1.4 0-2.711.131-3.935.394z"/></g></g></svg>

web/public/img/platformlogos/link.svg

@@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 -20 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m452 0h-392c-33.085938 0-60 26.914062-60 60v332c0 44.113281 35.886719 80 80 80h352c44.113281 0 80-35.886719 80-80 0-11.046875-8.953125-20-20-20s-20 8.953125-20 20c0 22.054688-17.945312 40-40 40h-352c-22.054688 0-40-17.945312-40-40v-271h432v171c0 11.046875 8.953125 20 20 20s20-8.953125 20-20v-232c0-33.085938-26.914062-60-60-60zm-81 40c11.027344 0 20 8.972656 20 20s-8.972656 20-20 20-20-8.972656-20-20 8.972656-20 20-20zm100 20c0 11.027344-8.972656 20-20 20s-20-8.972656-20-20 8.972656-20 20-20 20 8.972656 20 20zm-431 0c0-11.027344 8.972656-20 20-20h254.441406c-2.222656 6.261719-3.441406 12.988281-3.441406 20 0 7.386719 1.347656 14.460938 3.800781 21h-274.800781zm346.402344 246.671875c6.375-7.132813 9.605468-17.382813 9.597656-30.464844 0-2.765625-.15625-5.464843-.457031-8.023437l-.214844-1.804688c-.042969-.367187-.074219-.738281-.097656-1.109375-1.289063-8.125-4.257813-14.828125-8.832031-19.941406-10.566407-11.8125-28.546876-14.3125-41.765626-14.328125h-.375c-13.195312.011719-31.164062 2.507812-41.742187 14.328125-2.769531 3.097656-4.996094 7.027344-6.644531 11.671875h21.128906c11.046875 0 20 8.953125 20 20s-8.953125 20-20 20h-59.894531c-.890625 3.648438-1.757813 6.667969-2.222657 8.222656-.03125.105469-.0625.210938-.097656.316406-3.402344 10.761719-8.613281 20.113282-15.488281 27.800782-16.164063 18.070312-40.902344 27.636718-71.535156 27.660156h-.417969c-30.667969-.035156-55.402344-9.601562-71.554688-27.660156-10.222656-11.425782-16.558593-25.703125-18.832031-42.4375-.085937-.640625-.144531-1.28125-.167969-1.925782l-.054687-.464843c-.484375-4.105469-.730469-8.375-.734375-12.695313-.015625-23.226562 6.644531-42.460937 19.785156-57.152344 16.167969-18.070312 40.90625-27.636718 71.542969-27.660156h.410156c17.265625.019532 32.578125 2.957032 45.535157 8.726563 10.089843 4.496093 14.625 16.320312 10.128906 26.410156s-16.316406 14.625-26.40625 10.128906c-7.816406-3.480469-17.671875-5.253906-29.28125-5.269531h-.371094c-13.195312.011719-31.167969 2.507812-41.742188 14.328125-6.378906 7.132813-9.609374 17.382813-9.601562 30.464844.003906 2.765625.15625 5.464843.460938 8.023437l.210937 1.804688c.042969.367187.078125.738281.101563 1.109375 1.289062 8.125 4.253906 14.828125 8.828124 19.941406 10.566407 11.8125 28.546876 14.3125 41.769532 14.328125h.371094c13.195312-.011719 31.167968-2.507812 41.742187-14.328125 2.363281-2.644531 4.332031-5.890625 5.882813-9.671875h-18.367188c-11.046875 0-20-8.953125-20-20s8.953125-20 20-20h57.417969c1.046875-4.527344 2.152343-8.390625 2.699219-10.222656.03125-.105469.0625-.210938.097656-.3125 3.402344-10.765625 8.613281-20.117188 15.488281-27.804688 16.164063-18.070312 40.902344-27.632812 71.535156-27.660156h.417969c30.667969.035156 55.402344 9.601562 71.554688 27.660156 10.222656 11.429688 16.558593 25.707032 18.832031 42.4375.085937.640625.144531 1.28125.167969 1.925782l.054687.464843c.484375 4.105469.730469 8.375.734375 12.695313.015625 23.230468-6.644531 42.460937-19.785156 57.15625-16.167969 18.070312-40.90625 27.632812-71.542969 27.660156h-.410156c-17.265625-.023438-32.578125-2.960938-45.535157-8.730469-10.089843-4.496093-14.625-16.320312-10.128906-26.410156s16.316406-14.625 26.40625-10.128906c7.816406 3.480469 17.671875 5.253906 29.28125 5.269531h.371094c13.199219-.011719 31.167969-2.507812 41.746094-14.328125zm0 0"/></svg>

web/public/img/platformlogos/linkedin.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667h-3.554v-11.452h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zm-15.11-13.019c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019h-3.564v-11.452h3.564zm15.106-20.452h-20.454c-.979 0-1.771.774-1.771 1.729v20.542c0 .956.792 1.729 1.771 1.729h20.451c.978 0 1.778-.773 1.778-1.729v-20.542c0-.955-.8-1.729-1.778-1.729z" fill="#0077b5"/></svg>

web/public/img/platformlogos/mastodon.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m23.193 7.88c0-5.207-3.411-6.733-3.411-6.733-1.72-.79-4.674-1.122-7.741-1.147h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1 -.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119h-2.497v-6.303c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474l.622 1.043.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z" fill="#3088d4"/></svg>

web/public/img/platformlogos/odysee.svg

@@ -0,0 +1 @@
+<svg height="500pt" preserveAspectRatio="xMidYMid meet" viewBox="0 0 500 500" width="500pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a"><stop offset="0" stop-color="#f02569"/><stop offset="1" stop-color="#fa9129"/></linearGradient><linearGradient id="b" gradientTransform="matrix(.98839084 0 0 .98973848 -147.65791 5.149527)" gradientUnits="userSpaceOnUse" x1="352.752" x2="477.189" xlink:href="#a" y1="4.652" y2="488.413"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="742.935" x2="867.371" xlink:href="#a" y1="8.772" y2="492.534"/><clipPath id="d"><path d="m736.32713 131.74536c-1.9021-11.76355-2.138-28.04814 3.89064-35.320585 6.02862-7.27245 16.74753-19.362037 30.66603-24.254168 13.66103-4.80166 23.616-6.09294 32.88953-4.4102 10.33245 1.87489 18.25724 8.090841 21.32189 14.69891 3.06465 6.60807 13.9896 28.134173 15.54773 43.051263 1.55805 14.91709-13.78928 25.12033-13.78928 25.12033s-32.86627 17.4933-51.08077 17.98933c-18.21457.49603-33.23554-10.86983-36.81461-25.59785-3.57908-14.72802-2.63116-11.27703-2.63116-11.27703z"/></clipPath><ellipse cx="249.822" cy="250.115" fill="url(#b)" rx="246.815" ry="247.151" stroke-width=".742"/><g fill="#fff"><g stroke-width=".742"><ellipse cx="57.414" cy="188.137" rx="4.777" ry="4.784"/><ellipse cx="99.986" cy="108.475" rx="2.744" ry="2.748"/><ellipse cx="325.184" cy="72.97" rx="4.581" ry="4.587"/><ellipse cx="389.874" cy="244.653" rx="5.017" ry="5.023"/></g><ellipse cx="308.753" cy="416.527" rx="3.967" ry="3.972" stroke-width=".587"/><ellipse cx="107.205" cy="334.282" rx="3.37" ry="3.374" stroke-width=".498"/><path d="m411.33807 173.68252-2.07661 11.70339-11.03528 5.47484 11.79783 2.23311 5.16187 10.45577 2.18276-10.70634 11.15992-5.65387-12.33769-2.61731z"/><path d="m147.67183 193.44728s-20.06996-54.17786-17.69084-81.41335c2.37911-27.235496 1.50653-18.841783 3.85544-27.859142 2.34892-9.017357 12.04102-25.480883 22.31643-30.92595 10.27541-5.445066 48.75045-29.667741 74.35574-27.471611 25.6053 2.196128 28.78386 1.195382 42.93088 16.196527 14.14702 15.001144 24.90375 54.617788 27.09868 65.549046 2.19495 10.93123 9.15862 35.96143 14.07139 36.53925 4.91277.57783 28.65358-.26096 33.07213-11.755 4.41855-11.49402 9.6354-13.11527 12.32537-32.487125 2.68997-19.371875 15.44485-45.431297 26.07584-51.914116.82713-.504388 2.70803-1.643677 2.70803-1.643677s11.439 7.625939 24.54009 19.138948c6.79401 5.970454 13.86444 13.288883 20.37947 20.490485 19.07812 21.088645.24937.343464.24937.343464s-1.9413 28.286781-8.24364 46.235201c-6.30234 17.94844-31.05411 50.52397-55.11588 72.49624-24.06176 21.97225-25.29435 24.34667-25.29435 26.85297 0 2.50629-.53444 9.87979 7.76324 14.93585s39.62493 28.0312 50.81122 53.08431c11.1863 25.0531 9.56085 44.98432 22.97648 69.92474 13.41568 24.94043 19.26231 28.53884 16.01337 33.54308-3.24904 5.00424-23.44773 28.43723-42.19597 41.2159s-45.79305-7.55666-47.81423-17.5746c-2.02119-10.01794-3.43327-29.59264-6.30497-44.09203-2.8717-14.49937-13.32877-39.83671-26.89172-47.48134-13.56296-7.64462-28.65714-5.43842-28.65714-5.43842s4.82354 42.50353-5.10622 72.73986c-9.92976 30.23634-21.18794 38.2781-42.18615 47.57746-20.9982 9.29935-43.33913 16.22264-62.26616 16.63201-18.92702.40936-42.21121-4.75624-51.68741-22.688-9.47621-17.93174-8.20485-36.82812 1.71479-46.6577 9.91964-9.82959 29.97243-12.69792 38.47415-11.88376 8.50173.81415 33.02963-5.86589 40.73408-21.4136 7.70445-15.5477-14.09247-45.81371-21.23837-58.01337-7.1459-12.19968-24.80467-41.39481-24.80467-41.39481s-65.622781 27.1758-78.327528 41.95011c-12.704736 14.77431-35.001677 29.49808-48.615743 29.15093-13.614075-.34714-21.013021-6.5659-21.013021-6.5659-3.076268-8.73094-4.036361-13.02078-5.951181-20.35695-2.3747571-9.09828-4.5648533-21.35714-5.4497497-30.17815 0 0 23.3517227-22.91199 33.2253907-29.84172 10.033255-7.04175 36.473135-27.17346 55.541023-33.96863 19.067879-6.79516 52.319819-18.49916 53.622339-21.57743z"/></g><circle clip-path="url(#d)" cx="792.332" cy="251.626" fill="url(#c)" r="249.714" stroke-width=".75" transform="matrix(.98839084 0 0 .98973848 -551.03081 -11.166101)"/><g fill="#fff"><path d="m271.71085 112.81596s-.6733-8.25934-3.06033-10.65972c-2.38704-2.400382-3.4147-3.219373-4.30462-3.261871-.88992-.04246-2.97515.449533-4.32631 2.923971-1.35117 2.47444 1.22946 6.29857 1.22946 6.29857s1.68729 4.73075.16217 9.27633c-1.52512 4.54559 1.01358 7.22143 2.39991 7.52704 1.38634.30561 6.58711.63897 7.18013-3.59674.59301-4.2357.71959-8.50758.71959-8.50758z"/><path d="m253.91215 72.255739s-2.80762-2.800727-6.32755-.612187c-2.47031 1.535934-2.11167 4.630992-.12352 7.218567 1.98816 2.587574 1.82874 4.35173 3.27543 5.877248 1.4467 1.52552 7.23694 1.364769 8.30897-1.361131 1.07204-2.725899-.22598-5.865855-1.49256-7.546134-1.28839-1.709195-3.64077-3.576363-3.64077-3.576363z"/></g></svg>

web/public/img/platformlogos/patreon.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m0 .48v23.04h4.22v-23.04zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623 0-4.77-3.864-8.65-8.615-8.65z" fill="#f96854"/></svg>

web/public/img/platformlogos/paypal.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6.908 24h-3.104c-.664 0-1.086-.529-.936-1.18l.149-.674h2.071c.666 0 1.336-.533 1.482-1.182l1.064-4.592c.15-.648.816-1.18 1.48-1.18h.883c3.789 0 6.734-.779 8.84-2.34s3.16-3.6 3.16-6.135c0-1.125-.195-2.055-.588-2.789 0-.016-.016-.031-.016-.046l.135.075c.75.465 1.32 1.064 1.711 1.814.404.75.598 1.68.598 2.791 0 2.535-1.049 4.574-3.164 6.135-2.1 1.545-5.055 2.324-8.834 2.324h-.9c-.66 0-1.334.525-1.484 1.186l-1.065 4.605c-.149.645-.81 1.17-1.47 1.17zm-2.677-2.695h-3.105c-.663 0-1.084-.529-.936-1.18l4.373-18.943c.151-.653.815-1.182 1.481-1.182h6.465c1.395 0 2.609.098 3.648.289 1.035.189 1.92.519 2.684.99.736.465 1.322 1.072 1.697 1.818.389.748.584 1.68.584 2.797 0 2.535-1.051 4.574-3.164 6.119-2.1 1.561-5.056 2.326-8.836 2.326h-.883c-.66 0-1.328.524-1.478 1.169l-1.061 4.589c-.149.646-.817 1.172-1.485 1.172zm7.446-17.369h-1.014c-.666 0-1.332.529-1.48 1.178l-.93 4.02c-.15.648.27 1.179.93 1.179h.766c1.664 0 2.97-.343 3.9-1.021.929-.686 1.395-1.654 1.395-2.912 0-.83-.301-1.445-.9-1.84-.6-.404-1.5-.605-2.686-.605z" fill="#00457c"/></svg>

web/public/img/platformlogos/snapchat.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.206.793c.99 0 4.347.276 5.93 3.821.529 1.193.403 3.219.299 4.847l-.003.06c-.012.18-.022.345-.03.51.075.045.203.09.401.09.3-.016.659-.12 1.033-.301.165-.088.344-.104.464-.104.182 0 .359.029.509.09.45.149.734.479.734.838.015.449-.39.839-1.213 1.168-.089.029-.209.075-.344.119-.45.135-1.139.36-1.333.81-.09.224-.061.524.12.868l.015.015c.06.136 1.526 3.475 4.791 4.014.255.044.435.27.42.509 0 .075-.015.149-.045.225-.24.569-1.273.988-3.146 1.271-.059.091-.12.375-.164.57-.029.179-.074.36-.134.553-.076.271-.27.405-.555.405h-.03c-.135 0-.313-.031-.538-.074-.36-.075-.765-.135-1.273-.135-.3 0-.599.015-.913.074-.6.104-1.123.464-1.723.884-.853.599-1.826 1.288-3.294 1.288-.06 0-.119-.015-.18-.015h-.149c-1.468 0-2.427-.675-3.279-1.288-.599-.42-1.107-.779-1.707-.884-.314-.045-.629-.074-.928-.074-.54 0-.958.089-1.272.149-.211.043-.391.074-.54.074-.374 0-.523-.224-.583-.42-.061-.192-.09-.389-.135-.567-.046-.181-.105-.494-.166-.57-1.918-.222-2.95-.642-3.189-1.226-.031-.063-.052-.15-.055-.225-.015-.243.165-.465.42-.509 3.264-.54 4.73-3.879 4.791-4.02l.016-.029c.18-.345.224-.645.119-.869-.195-.434-.884-.658-1.332-.809-.121-.029-.24-.074-.346-.119-1.107-.435-1.257-.93-1.197-1.273.09-.479.674-.793 1.168-.793.146 0 .27.029.383.074.42.194.789.3 1.104.3.234 0 .384-.06.465-.105l-.046-.569c-.098-1.626-.225-3.651.307-4.837 1.539-3.527 4.886-3.797 5.874-3.797l.419-.015h.06z" fill="#fffc00"/></svg>

web/public/img/platformlogos/soundcloud.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m1.175 12.225c-.051 0-.094.046-.101.1l-.233 2.154.233 2.105c.007.058.05.098.101.098.05 0 .09-.04.099-.098l.255-2.105-.27-2.154c0-.057-.045-.1-.09-.1m-.899.828c-.06 0-.091.037-.104.094l-.166 1.332.165 1.308c0 .055.045.094.09.094s.089-.045.104-.104l.21-1.319-.21-1.334c0-.061-.044-.09-.09-.09m1.83-1.229c-.061 0-.12.045-.12.104l-.21 2.563.225 2.458c0 .06.045.12.119.12.061 0 .105-.061.121-.12l.254-2.474-.254-2.548c-.016-.06-.061-.12-.121-.12m.945-.089c-.075 0-.135.06-.15.135l-.193 2.64.21 2.544c.016.077.075.138.149.138.075 0 .135-.061.15-.15l.24-2.532-.24-2.623c0-.075-.06-.135-.135-.135zm1.155.36c-.005-.09-.075-.149-.159-.149-.09 0-.158.06-.164.149l-.217 2.43.2 2.563c0 .09.075.157.159.157.074 0 .148-.068.148-.158l.227-2.563-.227-2.444zm.809-1.709c-.101 0-.18.09-.18.181l-.21 3.957.187 2.563c0 .09.08.164.18.164.094 0 .174-.09.18-.18l.209-2.563-.209-3.972c-.008-.104-.088-.18-.18-.18m.959-.914c-.105 0-.195.09-.203.194l-.18 4.872.165 2.548c0 .12.09.209.195.209.104 0 .194-.089.21-.209l.193-2.548-.192-4.856c-.016-.12-.105-.21-.21-.21m.989-.449c-.121 0-.211.089-.225.209l-.165 5.275.165 2.52c.014.119.104.225.225.225.119 0 .225-.105.225-.225l.195-2.52-.196-5.275c0-.12-.105-.225-.225-.225m1.245.045c0-.135-.105-.24-.24-.24-.119 0-.24.105-.24.24l-.149 5.441.149 2.503c.016.135.121.24.256.24s.24-.105.24-.24l.164-2.503-.164-5.456zm.749-.134c-.135 0-.255.119-.255.254l-.15 5.322.15 2.473c0 .15.12.255.255.255s.255-.12.255-.27l.15-2.474-.165-5.307c0-.148-.12-.27-.271-.27m1.005.166c-.164 0-.284.135-.284.285l-.103 5.143.135 2.474c0 .149.119.277.284.277.149 0 .271-.12.284-.285l.121-2.443-.135-5.112c-.012-.164-.135-.285-.285-.285m1.184-.945c-.045-.029-.105-.044-.165-.044s-.119.015-.165.044c-.09.054-.149.15-.149.255v.061l-.104 6.048.115 2.449v.008c.008.06.03.135.074.18.058.061.142.104.234.104.08 0 .158-.044.209-.09.058-.06.091-.135.091-.225l.015-.24.117-2.203-.135-6.086c0-.104-.061-.193-.135-.239zm1.006-.547c-.045-.045-.09-.061-.15-.061-.074 0-.149.016-.209.061-.075.061-.119.15-.119.24v.029l-.137 6.609.076 1.215.061 1.185c0 .164.148.314.328.314.181 0 .33-.15.33-.329l.15-2.414-.15-6.637c0-.12-.074-.221-.165-.277m8.934 3.777c-.405 0-.795.086-1.139.232-.24-2.654-2.46-4.736-5.188-4.736-.659 0-1.305.135-1.889.359-.225.09-.27.18-.285.359v9.368c.016.18.15.33.33.345h8.185c1.619.016 2.938-1.288 2.938-2.922s-1.319-2.952-2.938-2.952" fill="#f30"/></svg>

web/public/img/platformlogos/spotify.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 0c-6.6 0-12 5.4-12 12s5.4 12 12 12 12-5.4 12-12-5.34-12-12-12zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6s.12-1.021.6-1.141c4.38-1.319 9.78-.658 13.5 1.621.361.181.54.78.241 1.2zm.12-3.36c-3.841-2.28-10.261-2.52-13.921-1.379-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z" fill="#1ed760"/></svg>

web/public/img/platformlogos/steam.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 233 233" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" x1="50%" x2="50%" y2="100%"><stop offset="0" stop-color="#111d2e"/><stop offset=".212" stop-color="#051839"/><stop offset=".407" stop-color="#0a1b48"/><stop offset=".581" stop-color="#132e62"/><stop offset=".738" stop-color="#144b7e"/><stop offset=".873" stop-color="#136497"/><stop offset="1" stop-color="#1387b8"/></linearGradient><path d="m4.8911 150.01c14.393 48.01 58.916 82.99 111.61 82.99 64.34 0 116.5-52.16 116.5-116.5 0-64.341-52.16-116.5-116.5-116.5-61.741 0-112.26 48.029-116.25 108.76 7.5391 12.66 10.481 20.49 4.6411 41.25z" fill="url(#a)"/><path d="m110.5 87.322c0 .196 0 .392.01.576l-28.508 41.412c-4.618-.21-9.252.6-13.646 2.41-1.937.79-3.752 1.76-5.455 2.88l-62.599-25.77c.00049 0-1.4485 23.83 4.588 41.59l44.254 18.26c2.222 9.93 9.034 18.64 19.084 22.83 16.443 6.87 35.402-.96 42.242-17.41 1.78-4.3 2.61-8.81 2.49-13.31l40.79-29.15c.33.01.67.02 1 .02 24.41 0 44.25-19.9 44.25-44.338 0-24.44-19.84-44.322-44.25-44.322-24.4 0-44.25 19.882-44.25 44.322zm-6.84 83.918c-5.294 12.71-19.9 18.74-32.596 13.45-5.857-2.44-10.279-6.91-12.83-12.24l14.405 5.97c9.363 3.9 20.105-.54 23.997-9.9 3.904-9.37-.525-20.13-9.883-24.03l-14.891-6.17c5.746-2.18 12.278-2.26 18.381.28 6.153 2.56 10.927 7.38 13.457 13.54s2.52 12.96-.04 19.1m51.09-54.38c-16.25 0-29.48-13.25-29.48-29.538 0-16.275 13.23-29.529 29.48-29.529 16.26 0 29.49 13.254 29.49 29.529 0 16.288-13.23 29.538-29.49 29.538m-22.09-29.583c0-12.253 9.92-22.191 22.14-22.191 12.23 0 22.15 9.938 22.15 22.191 0 12.254-9.92 22.183-22.15 22.183-12.22 0-22.14-9.929-22.14-22.183z" fill="#fff"/></svg>

web/public/img/platformlogos/tiktok.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>

web/public/img/platformlogos/twitch.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.571 4.714h1.715v5.143h-1.716zm4.715 0h1.714v5.143h-1.714zm-10.286-4.714-4.286 4.286v15.428h5.143v4.286l4.286-4.286h3.428l7.715-7.714v-12zm14.571 11.143-3.428 3.428h-3.429l-3 3v-3h-3.857v-12.857h13.714z" fill="#9146ff"/></svg>

web/public/img/platformlogos/twitter.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m23.953 4.57a10 10 0 0 1 -2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0 -8.384 4.482c-4.09-.193-7.713-2.158-10.14-5.126a4.822 4.822 0 0 0 -.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1 -2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1 -2.212.085 4.936 4.936 0 0 0 4.604 3.417 9.867 9.867 0 0 1 -6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63a9.935 9.935 0 0 0 2.46-2.548z" fill="#1da1f2"/></svg>

web/public/img/platformlogos/youtube.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m23.499 6.203a3.008 3.008 0 0 0 -2.089-2.089c-1.87-.501-9.4-.501-9.4-.501s-7.509-.01-9.399.501a3.008 3.008 0 0 0 -2.088 2.09 31.258 31.26 0 0 0 -.523 5.806 31.258 31.26 0 0 0 .523 5.785 3.008 3.008 0 0 0 2.088 2.089c1.869.502 9.4.502 9.4.502s7.508 0 9.399-.502a3.008 3.008 0 0 0 2.089-2.09 31.258 31.26 0 0 0 .5-5.784 31.258 31.26 0 0 0 -.5-5.808zm-13.891 9.4v-7.196l6.266 3.604z" fill="red"/></svg>

web/stories/SocialLinks.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import SocialLinks from '../components/SocialLinks';
+import SocialLinks from '../components/ui/SocialLinks/SocialLinks';
 
 export default {
   title: 'owncast/Social links',
@@ -20,7 +20,11 @@ Populated.args = {
       url: 'https://github.com/owncast/owncast',
       icon: '/img/platformlogos/github.svg',
     },
-    { platform: 'Documentation', url: 'https://owncast.online' },
+    {
+      platform: 'Documentation',
+      url: 'https://owncast.online',
+      icon: '/img/platformlogos/link.svg',
+    },
     {
       platform: 'mastodon',
       url: 'https://fosstodon.org/users/owncast',

web/styles/ant-overrides.scss

@@ -446,20 +446,6 @@ textarea.ant-input {
   border-radius: 0 0 var(--container-border-radius) var(--container-border-radius);
 }
 
-// ANT POPOVER
-.ant-popover-inner {
-  background-color: var(--popover-base-color);
-}
-.ant-popover-message,
-.ant-popover-inner-content {
-  color: var(--default-text-color);
-}
-.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow {
-  border-color: var(--popover-base-color);
-}
-.ant-popover-arrow-content {
-  background-color: var(--popover-base-color);
-}
 
 // ANT TOOLTIP
 .ant-tooltip {