Add license page

8 files changed, 177 insertions, 63 deletions

diff --git a/src/components/landing/sections/Hero.tsx b/src/components/landing/sections/Hero.tsx
index 4974285..2773b9b 100644
--- a/src/components/landing/sections/Hero.tsx
+++ b/src/components/landing/sections/Hero.tsx
@@ -2,6 +2,8 @@
  * SPDX-FileCopyrightText: 2023-2024 Kristóf Marussy
  *
  * 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';
diff --git a/src/components/landing/sections/Publications.module.css b/src/components/landing/sections/Publications.module.css
index c9a39ba..9ef368b 100644
--- a/src/components/landing/sections/Publications.module.css
+++ b/src/components/landing/sections/Publications.module.css
@@ -12,15 +12,6 @@
   white-space: nowrap;
 }
 
-.link--license {
-  --ifm-link-color: var(--ifm-color-secondary-contrast-foreground);
-  --ifm-link-hover-color: var(--ifm-link-color);
-}
-
-[data-theme='dark'] .link--license {
-  --ifm-link-color: var(--ifm-color-emphasis-500);
-}
-
 .link--lower {
   text-transform: lowercase;
 }
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>
   );
 }
 
diff --git a/src/components/landing/sections/Research.tsx b/src/components/landing/sections/Research.tsx
index ea6f076..a295419 100644
--- a/src/components/landing/sections/Research.tsx
+++ b/src/components/landing/sections/Research.tsx
@@ -2,6 +2,8 @@
  * SPDX-FileCopyrightText: 2023 Kristóf Marussy
  *
  * 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 clsx from 'clsx';
diff --git a/src/components/landing/sections/Resume.module.css b/src/components/landing/sections/Resume.module.css
index fb576a1..3293add 100644
--- a/src/components/landing/sections/Resume.module.css
+++ b/src/components/landing/sections/Resume.module.css
@@ -129,6 +129,16 @@
   color: var(--ifm-color-emphasis-500);
 }
 
+.cv__muted-link {
+  white-space: nowrap;
+  --ifm-link-color: var(--ifm-color-secondary-contrast-foreground);
+  --ifm-link-hover-color: var(--ifm-link-color);
+}
+
+[data-theme='dark'] .cv__muted-link {
+  --ifm-link-color: var(--ifm-color-emphasis-500);
+}
+
 .cv__activities {
   margin: 1em 0;
 }
diff --git a/src/components/landing/sections/Resume.tsx b/src/components/landing/sections/Resume.tsx
index 6e2bc69..bac2bde 100644
--- a/src/components/landing/sections/Resume.tsx
+++ b/src/components/landing/sections/Resume.tsx
@@ -2,6 +2,8 @@
  * SPDX-FileCopyrightText: 2023-2024 Kristóf Marussy
  *
  * 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';
@@ -40,13 +42,18 @@ function Education() {
             </Link>
           </p>
           <p className={styles.cv__muted}>
-            <Lock
-              weight="bold"
-              aria-hidden="true"
-              className={styles['thesis-rights__icon']}
-            />
-            Some poritions may be exclusively licensed to their original
-            publishers
+            <Link
+              to="/license#restricted-content"
+              className={styles['cv__muted-link']}
+            >
+              <Lock
+                weight="bold"
+                aria-hidden="true"
+                className={styles['thesis-rights__icon']}
+              />
+              Some poritions may be exclusively licensed to their original
+              publishers
+            </Link>
           </p>
           <div className={styles['thesis-links']}>
             <Link
diff --git a/src/components/licenses.module.css b/src/components/licenses.module.css
new file mode 100644
index 0000000..ac6c4cc
--- /dev/null
+++ b/src/components/licenses.module.css
@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.link {
+  white-space: nowrap;
+  --ifm-link-color: var(--ifm-color-secondary-contrast-foreground);
+  --ifm-link-hover-color: var(--ifm-link-color);
+}
+
+[data-theme='dark'] .link {
+  --ifm-link-color: var(--ifm-color-emphasis-500);
+}
+
+.icon {
+  vertical-align: text-top;
+  width: 1em;
+  height: 1em;
+  margin-right: 0.125rem;
+}
+
+.text {
+  color: var(--ifm-color-secondary-contrast-foreground);
+}
+
+[data-theme='dark'] .text {
+  color: var(--ifm-color-emphasis-500);
+}
diff --git a/src/components/licenses.tsx b/src/components/licenses.tsx
new file mode 100644
index 0000000..85b0cb2
--- /dev/null
+++ b/src/components/licenses.tsx
@@ -0,0 +1,92 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+import Link, { type Props as LinkProps } from '@docusaurus/Link';
+import { Certificate, Lock } from '@phosphor-icons/react';
+
+import { CreativeCommonsIcon } from '@site/src/components/icons';
+
+import styles from './licenses.module.css';
+
+export type LicenseLinkProps = LinkProps & { label?: string };
+
+export function LicenseLink({ children, label, ...props }: LicenseLinkProps) {
+  return (
+    <Link className={styles.link} {...props}>
+      <Certificate weight="bold" aria-hidden="true" className={styles.icon} />
+      <span className="sr-only">{label ?? 'License'}: </span>
+      {children}
+    </Link>
+  );
+}
+
+export function MITLicenseLink() {
+  return <LicenseLink to="https://spdx.org/licenses/MIT.html">MIT</LicenseLink>;
+}
+
+export function CCLicenseLink({ children, label, ...props }: LicenseLinkProps) {
+  return (
+    <Link className={styles.link} {...props}>
+      <CreativeCommonsIcon className={styles.icon} hidden />
+      <span className="sr-only">{label ?? 'Creative Commons license'}: </span>
+      {children}
+    </Link>
+  );
+}
+
+export function CCBYLicenseLink() {
+  return (
+    <CCLicenseLink to="https://creativecommons.org/licenses/by/4.0/">
+      CC-BY-4.0
+    </CCLicenseLink>
+  );
+}
+
+export function ClosedAccessLink({
+  children,
+  label,
+  ...props
+}: LicenseLinkProps) {
+  return (
+    <Link className={styles.link} {...props}>
+      <Lock weight="bold" aria-hidden="true" className={styles.icon} />
+      <span className="sr-only">{label ?? 'Closed access'}: </span>
+      {children}
+    </Link>
+  );
+}
+
+export type SpanProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLSpanElement>,
+  HTMLSpanElement
+>;
+
+export function LicenseText({ children, ...props }: SpanProps) {
+  return (
+    <span className={styles.text} {...props}>
+      <Certificate weight="bold" aria-hidden="true" className={styles.icon} />
+      {children}
+    </span>
+  );
+}
+
+export function CCLicenseText({ children, ...props }: SpanProps) {
+  return (
+    <span className={styles.text} {...props}>
+      <CreativeCommonsIcon className={styles.icon} hidden />
+      {children}
+    </span>
+  );
+}
+
+export function ClosedAccessText({ children, ...props }: SpanProps) {
+  return (
+    <span className={styles.text} {...props}>
+      <Lock weight="bold" aria-hidden="true" className={styles.icon} />
+      {children}
+    </span>
+  );
+}