1 files changed, 27 insertions, 47 deletions

diff --git a/src/components/landing/sections/Publications.tsx b/src/components/landing/sections/Publications.tsx
index 90c058e..068ec49 100644
--- a/src/components/landing/sections/Publications.tsx
+++ b/src/components/landing/sections/Publications.tsx
@@ -1,22 +1,16 @@
 /*
  * SPDX-FileCopyrightText: 2023-2024 Kristóf Marussy
  *
- * SPDX-License-Identifier: MIT
+ * SPDX-License-Identifier: MIT AND CC-BY-4.0
+ *
+ * Code in this file is MIT licensed, while content is CC-BY-4.0 licensed.
  */
 
 import Link from '@docusaurus/Link';
-import {
-  ArrowSquareOut,
-  Certificate,
-  File,
-  Lock,
-  Package,
-  Play,
-} from '@phosphor-icons/react';
+import { ArrowSquareOut, File, Package, Play } from '@phosphor-icons/react';
 import clsx from 'clsx';
 
 import {
-  CreativeCommonsIcon,
   DBLPIcon,
   GoogleScholarIcon,
   MTMTIcon,
@@ -26,6 +20,11 @@ import {
 import Section from '@site/src/components/landing/Section';
 import Subtitle from '@site/src/components/landing/Subtitle';
 import authorizedLinks from '@site/src/components/landing/sections/authorizedLinks';
+import {
+  CCLicenseLink,
+  ClosedAccessLink,
+  LicenseLink,
+} from '@site/src/components/licenses';
 
 import styles from './Publications.module.css';
 
@@ -101,59 +100,40 @@ function ClosedAccess({
   url: string;
   authorizedURL?: string | undefined;
 }) {
-  const label = (
-    <>
-      <Lock weight="bold" aria-hidden="true" className={styles.link__icon} />
-      <span className="sr-only">Closed Access: </span>
-      {publisher}
-    </>
-  );
-  if (authorizedURL !== undefined) {
-    // Must allow referrer for the ACM Author-Izer to work.
-    return (
-      <Link
-        to={authorizedURL}
-        rel="nofollow noopener"
-        referrerPolicy="no-referrer-when-downgrade"
-        className={clsx(styles.link, styles['link--license'])}
-      >
-        {label}
-      </Link>
-    );
-  }
   return (
-    <Link
-      to={url}
+    <ClosedAccessLink
+      to={authorizedURL ?? url}
       rel="nofollow noopener noreferrer"
-      className={clsx(styles.link, styles['link--license'])}
+      {...(authorizedURL === undefined
+        ? {
+            rel: 'nofollow noopener noreferrer',
+          }
+        : {
+            // Must allow referrer for the ACM Author-Izer to work.
+            rel: 'nofollow noopener',
+            referrerPolicy: 'no-referrer-when-downgrade',
+          })}
+      label="Closed Access"
     >
-      {label}
-    </Link>
+      {publisher}
+    </ClosedAccessLink>
   );
 }
 
 function OpenAccess({ license }: { license: string }) {
   const url = `https://creativecommons.org/licenses/${license}/4.0/`;
   return (
-    <Link to={url} className={clsx(styles.link, styles['link--license'])}>
-      <CreativeCommonsIcon className={styles.link__icon} hidden />
-      <span className="sr-only">Open Access: </span>
+    <CCLicenseLink to={url} label="Open Access">
       CC-{license.toUpperCase()}-4.0
-    </Link>
+    </CCLicenseLink>
   );
 }
 
 function ArtifactLicense({ license, url }: { license: string; url: string }) {
   return (
-    <Link to={url} className={clsx(styles.link, styles['link--license'])}>
-      <Certificate
-        weight="bold"
-        aria-hidden="true"
-        className={styles.link__icon}
-      />
-      <span className="sr-only">Artifact license: </span>
+    <LicenseLink to={url} label="Artifact license">
       {license}
-    </Link>
+    </LicenseLink>
   );
 }