Add blog

Site structure follows SEO tips from
https://johnnyreilly.com/how-we-fixed-my-seo

* The blog pages have as simple of an URL as possible. To this end, the home
  page of the site is actually the first index page of the blog.
* Customize the blog index page BlogListPage component to show the landing page
  as the first index page.
* Rename /archive to /blog to avoid a dated feel.
* Remove the date from post URLs using the slug property.

16 files changed, 335 insertions, 68 deletions

diff --git a/src/components/ActiveSectionProvider.tsx b/src/components/ActiveSectionProvider.tsx
index 022dbad..0d491ac 100644
--- a/src/components/ActiveSectionProvider.tsx
+++ b/src/components/ActiveSectionProvider.tsx
@@ -46,7 +46,7 @@ export default function ActiveSectionProvider({
       if (hash === lastHashRef.current) {
         return;
       }
-      // Passing `undefined` to `hash` will give contraol pack to react-router.
+      // Passing `undefined` to `hash` will give control back to react-router.
       const newURL = `${location.pathname}${location.search}${
         hash ?? location.hash
       }`;
diff --git a/src/components/Landing.tsx b/src/components/Landing.tsx
new file mode 100644
index 0000000..5eac99b
--- /dev/null
+++ b/src/components/Landing.tsx
@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Props } from '@theme/BlogListPage';
+import Layout from '@theme/Layout';
+
+import Blog from './landing/sections/Blog';
+import Contact from './landing/sections/Contact';
+import Hero from './landing/sections/Hero';
+import Publications from './landing/sections/Publications';
+import Research from './landing/sections/Research';
+import Resume from './landing/sections/Resume';
+import TrackActiveSection from './TrackActiveSection';
+
+export default function Home(props: Props) {
+  return (
+    <Layout>
+      <TrackActiveSection>
+        <Hero />
+        <Research />
+        <Blog {...props} />
+        <Publications />
+        <Resume />
+        <Contact />
+      </TrackActiveSection>
+    </Layout>
+  );
+}
diff --git a/src/components/landing/sections/Blog.module.css b/src/components/landing/sections/Blog.module.css
new file mode 100644
index 0000000..6a38a97
--- /dev/null
+++ b/src/components/landing/sections/Blog.module.css
@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+.row {
+  margin-bottom: var(--ifm-paragraph-margin-bottom);
+}
+
+.recent-posts {
+  margin-bottom: 0;
+  font-size: var(--ifm-h3-font-size);
+  font-weight: var(--ifm-font-weight-bold);
+  --casl: 0.5;
+  letter-spacing: var(--marussy-heading-tracking);
+}
+
+.date {
+  font-size: 1rem;
+  font-weight: var(--ifm-font-weight-normal);
+  --casl: 0;
+  letter-spacing: 0;
+}
+
+.prev::after {
+  content: ' »';
+}
diff --git a/src/components/landing/sections/Blog.tsx b/src/components/landing/sections/Blog.tsx
new file mode 100644
index 0000000..3ac87db
--- /dev/null
+++ b/src/components/landing/sections/Blog.tsx
@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com>
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+import Link from '@docusaurus/Link';
+import type { Props } from '@theme/BlogListPage';
+import type { Content } from '@theme/BlogPostPage';
+import Translate from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import clsx from 'clsx';
+
+import Section from '@site/src/components/landing/Section';
+import Subtitle from '@site/src/components/landing/Subtitle';
+
+import styles from './Blog.module.css';
+import React from 'react';
+
+const columnLength = 5;
+
+function Column({
+  items,
+}: {
+  items: { readonly content: Content }[];
+}): React.ReactNode {
+  // Date time format based on
+  // https://github.com/facebook/docusaurus/blob/6f17d5493877ba38d8b4e0b0d468f44401375c30/packages/docusaurus-theme-common/src/utils/IntlUtils.ts
+  const {
+    i18n: { currentLocale, localeConfigs },
+  } = useDocusaurusContext();
+  const calendar = localeConfigs[currentLocale]!.calendar;
+  const dateTimeFormat = new Intl.DateTimeFormat(currentLocale, {
+    calendar,
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    timeZone: 'UTC',
+  });
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="col col-6">
+      <ul className={styles['recent-posts']}>
+        {items.map(({ content }) => (
+          <li key={content.metadata.date}>
+            <Link to={content.metadata.permalink}>
+              {content.metadata.title}
+            </Link>{' '}
+            <span className={styles.date}>
+              on&nbsp;{dateTimeFormat.format(new Date(content.metadata.date))}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default function Blog(props: Props) {
+  const {
+    items,
+    metadata: { nextPage },
+  } = props;
+  const columnLength = Math.max(1, Math.ceil(items.length / 2));
+  return (
+    <Section id="blog" title="Blog">
+      <div className="container">
+        <section>
+          <Subtitle icon="🗓️">Recent posts</Subtitle>
+        </section>
+        <div className={clsx('row', styles.row)}>
+          <Column items={items.slice(0, columnLength)} />
+          <Column items={items.slice(columnLength)} />
+        </div>
+        {nextPage && (
+          <p>
+            <Link to={nextPage} className={styles.prev}>
+              <Translate
+                id="theme.blog.paginator.olderEntries"
+                description="The label used to navigate to the older blog posts page (next page)"
+              >
+                Older Entries
+              </Translate>
+            </Link>
+          </p>
+        )}
+      </div>
+    </Section>
+  );
+}
diff --git a/src/components/landing/sections/Hero.module.css b/src/components/landing/sections/Hero.module.css
index 67e7d54..0d0e16e 100644
--- a/src/components/landing/sections/Hero.module.css
+++ b/src/components/landing/sections/Hero.module.css
@@ -11,7 +11,7 @@
   --ifm-link-hover-color: var(--ifm-link-color);
 }
 
-@media (max-width: 996px) {
+@media (max-width: 576px) {
   .hero {
     padding-top: 2rem;
     padding-bottom: 0;
@@ -65,11 +65,17 @@
   font-family: var(--ifm-heading-font-family);
   font-weight: var(--ifm-heading-font-weight);
   --casl: 1;
-  font-size: 2.5rem;
+  font-size: 3rem;
   letter-spacing: var(--marussy-heading-tracking);
   white-space: pre;
 }
 
+@media (max-width: 576px) {
+  .introduction__name {
+    font-size: 2.5rem;
+  }
+}
+
 .cta {
   display: flex;
   flex-direction: row;
diff --git a/src/css/custom.css b/src/css/custom.css
index c2cda19..bd6e179 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -84,11 +84,13 @@ kbd {
 
 h1,
 h2,
+.markdown > h3,
 .button {
   --casl: 1;
 }
 
-h3 {
+h3,
+.markdown > h4 {
   --casl: 0.5;
 }
 
@@ -107,3 +109,7 @@ h3 {
   --casl: 0;
   --mono: 1;
 }
+
+.hero__subtitle {
+  font-weight: 500;
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
deleted file mode 100644
index 60f86ca..0000000
--- a/src/pages/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 Kristóf Marussy
- *
- * SPDX-License-Identifier: MIT
- */
-
-import Layout from '@theme/Layout';
-
-import Contact from '@site/src/components/landing/sections/Contact';
-import Hero from '@site/src/components/landing/sections/Hero';
-import Publications from '@site/src/components/landing/sections/Publications';
-import Research from '@site/src/components/landing/sections/Research';
-import Resume from '@site/src/components/landing/sections/Resume';
-import TrackActiveSection from '@site/src/components/TrackActiveSection';
-
-export default function Home() {
-  return (
-    <Layout>
-      <TrackActiveSection>
-        <Hero />
-        <Research />
-        <Publications />
-        <Resume />
-        <Contact />
-      </TrackActiveSection>
-    </Layout>
-  );
-}
diff --git a/src/plugins/compressionPlugin.ts b/src/plugins/compressionPlugin.ts
index 7b9feeb..a5bc402 100644
--- a/src/plugins/compressionPlugin.ts
+++ b/src/plugins/compressionPlugin.ts
@@ -20,10 +20,9 @@ const test = /\.(js|css|svg|txt)$/;
 export default function compressionPlugin(): Plugin<void> {
   return {
     name: 'marussy-compression-plugin',
-    configureWebpack: (_config, isServer) =>
-      isServer
-        ? {}
-        : {
+    configureWebpack: ({ mode }) =>
+      mode === 'production'
+        ? {
             plugins: [
               new CompressionPlugin({
                 test,
@@ -39,6 +38,7 @@ export default function compressionPlugin(): Plugin<void> {
                 minRatio,
               }),
             ],
-          },
+          }
+        : {},
   };
 }
diff --git a/src/theme/BlogListPage.tsx b/src/theme/BlogListPage.tsx
new file mode 100644
index 0000000..b8c7e01
--- /dev/null
+++ b/src/theme/BlogListPage.tsx
@@ -0,0 +1,18 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+import type { Props } from '@theme/BlogListPage';
+import BlogListPage from '@theme-original/BlogListPage';
+
+import Landing from '@site/src/components/Landing';
+
+export default function BlogListPageWrapper(props: Props) {
+  if (props.metadata.permalink === '/') {
+    return <Landing {...props} />;
+  }
+  return <BlogListPage {...props} />;
+}
diff --git a/src/theme/BlogSidebar/Desktop.module.css b/src/theme/BlogSidebar/Desktop.module.css
new file mode 100644
index 0000000..4bac5ba
--- /dev/null
+++ b/src/theme/BlogSidebar/Desktop.module.css
@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com>
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This file was derived from
+ * https://github.com/facebook/docusaurus/blob/6f17d5493877ba38d8b4e0b0d468f44401375c30/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/styles.module.css
+ * via the `swizzle` mechanism of Docusaurus.
+ *
+ * It was modified to change the sidebar title styling.
+ */
+
+.sidebar {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 2rem);
+}
+
+.sidebarItemTitle {
+  font-size: 1.5rem;
+  font-weight: var(--ifm-font-weight-bold);
+  --casl: 1;
+  letter-spacing: var(--marussy-heading-tracking);
+}
+
+.sidebarItemList {
+  font-size: 0.9rem;
+}
+
+.sidebarItem {
+  margin-top: 0.7rem;
+}
+
+.sidebarItemLink {
+  color: var(--ifm-font-color-base);
+  display: block;
+}
+
+.sidebarItemLink:hover {
+  text-decoration: none;
+}
+
+.sidebarItemLinkActive {
+  color: var(--ifm-color-primary) !important;
+}
+
+@media (max-width: 996px) {
+  .sidebar {
+    display: none;
+  }
+}
diff --git a/src/theme/BlogSidebar/Desktop.tsx b/src/theme/BlogSidebar/Desktop.tsx
new file mode 100644
index 0000000..d06f239
--- /dev/null
+++ b/src/theme/BlogSidebar/Desktop.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) 2024 Kristóf Marussy <kristof@marussy.com>
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This file was derived from
+ * https://github.com/facebook/docusaurus/blob/6f17d5493877ba38d8b4e0b0d468f44401375c30/packages/docusaurus-theme-classic/src/theme/BlogSidebar/Desktop/index.tsx
+ * via the `swizzle` mechanism of Docusaurus.
+ *
+ * It was modified to change the sidebar title styling.
+ */
+
+import Link from '@docusaurus/Link';
+import { translate } from '@docusaurus/Translate';
+import { useVisibleBlogSidebarItems } from '@docusaurus/theme-common/internal';
+import type { Props } from '@theme/BlogSidebar/Desktop';
+import React from 'react';
+import clsx from 'clsx';
+
+import styles from './Desktop.module.css';
+
+export default function BlogSidebarDesktop({ sidebar }: Props) {
+  const items = useVisibleBlogSidebarItems(sidebar.items);
+  return (
+    <aside className="col col--3">
+      <nav
+        className={clsx(styles.sidebar, 'thin-scrollbar')}
+        aria-label={translate({
+          id: 'theme.blog.sidebar.navAriaLabel',
+          message: 'Blog recent posts navigation',
+          description: 'The ARIA label for recent posts in the blog sidebar',
+        })}
+      >
+        <div className={clsx(styles.sidebarItemTitle, 'margin-bottom--md')}>
+          <span aria-hidden="true">🗓️</span> {sidebar.title}
+        </div>
+        <ul className={clsx(styles.sidebarItemList, 'clean-list')}>
+          {items.map((item) => (
+            <li key={item.permalink} className={styles.sidebarItem}>
+              <Link
+                isNavLink
+                to={item.permalink}
+                className={styles.sidebarItemLink}
+                activeClassName={styles.sidebarItemLinkActive}
+              >
+                {item.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}
diff --git a/src/theme/Footer/Copyright.jsx b/src/theme/Footer/Copyright.tsx
index 648bd42..3125c05 100644
--- a/src/theme/Footer/Copyright.jsx
+++ b/src/theme/Footer/Copyright.tsx
@@ -5,13 +5,14 @@
  * SPDX-License-Identifier: MIT
  *
  * This file was derived from
- * https://github.com/facebook/docusaurus/blob/c745021b01a8b88d34e1d772278d7171ad8acdf5/packages/docusaurus-theme-classic/src/theme/Footer/Copyright/index.tsx
+ * https://github.com/facebook/docusaurus/blob/cc0bceab9c1678303f6237f5526753edc1b12fc3/packages/docusaurus-theme-classic/src/theme/Footer/Copyright/index.tsx
  * via the `swizzle` mechanism of Docusaurus.
  *
  * It was modified to embed JSX content directly in the footer.
  */
 
 import Link from '@docusaurus/Link';
+import type { Props } from '@theme/Footer/Copyright';
 import clsx from 'clsx';
 import React from 'react';
 
@@ -19,7 +20,7 @@ import { CCLicenseLink, LicenseLink } from '@site/src/components/licenses';
 
 import styles from './Copyright.module.css';
 
-export default function FooterCopyright({ copyright }) {
+export default function FooterCopyright({ copyright }: Props) {
   return (
     <div className="footer__copyright">
       Most content on this site is{' '}
diff --git a/src/theme/NavbarItem/NavbarNavLink.jsx b/src/theme/NavbarItem/NavbarNavLink.tsx
index 81de931..a9d7b04 100644
--- a/src/theme/NavbarItem/NavbarNavLink.jsx
+++ b/src/theme/NavbarItem/NavbarNavLink.tsx
@@ -18,6 +18,8 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import { isRegexpStringMatch } from '@docusaurus/theme-common';
 import IconExternalLink from '@theme/Icon/ExternalLink';
+import type { Props } from '@theme/NavbarItem/NavbarNavLink';
+
 import { useActiveSection } from '@site/src/components/ActiveSectionProvider';
 
 export default function NavbarNavLink({
@@ -30,7 +32,7 @@ export default function NavbarNavLink({
   isDropdownLink,
   prependBaseUrlToHref,
   ...props
-}) {
+}: Props) {
   const { hash: activeSectionHash } = useActiveSection();
   // TODO all this seems hacky
   // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
diff --git a/src/theme/PaginatorNavLink.tsx b/src/theme/PaginatorNavLink.tsx
new file mode 100644
index 0000000..d0f03f7
--- /dev/null
+++ b/src/theme/PaginatorNavLink.tsx
@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+import type { Props } from '@theme/PaginatorNavLink';
+import PaginatorNavLink from '@theme-original/PaginatorNavLink';
+
+export default function PaginatorNavLinkWrapper(props: Props) {
+  const modifiedProps = { ...props };
+  if (modifiedProps.permalink === '/') {
+    modifiedProps.permalink = '/#blog';
+  }
+  return <PaginatorNavLink {...modifiedProps} />;
+}
diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
index 9459e9f..32462bb 100644
--- a/src/theme/Root.tsx
+++ b/src/theme/Root.tsx
@@ -4,14 +4,25 @@
  * SPDX-License-Identifier: MIT
  */
 
+import Head from '@docusaurus/Head';
 import type { Props } from '@theme/Root';
 import Root from '@theme-original/Root';
 
 import ActiveSectionProvider from '@site/src/components/ActiveSectionProvider';
+import fontURL from '@site/src/fonts/recursive-latin.woff2?url';
 
 export default function RootWrapper(props: Props) {
   return (
     <ActiveSectionProvider>
+      <Head>
+        <link
+          rel="preload"
+          href={fontURL}
+          as="font"
+          type="font/woff2"
+          crossOrigin="anonymous"
+        />
+      </Head>
       <Root {...props} />
     </ActiveSectionProvider>
   );
diff --git a/src/theme/SiteMetadata.jsx b/src/theme/SiteMetadata.jsx
deleted file mode 100644
index 1639677..0000000
--- a/src/theme/SiteMetadata.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Kristóf Marussy
- *
- * SPDX-License-Identifier: MIT
- */
-
-import Head from '@docusaurus/Head';
-
-import SiteMetadata from '@theme-original/SiteMetadata';
-
-import fontURL from '@site/src/fonts/recursive-latin.woff2?url';
-
-export default function SiteMetadataWrapper(props) {
-  return (
-    <>
-      <Head>
-        <link
-          rel="preload"
-          href={fontURL}
-          as="font"
-          type="font/woff2"
-          crossOrigin="anonymous"
-        />
-      </Head>
-      <SiteMetadata {...props} />
-    </>
-  );
-}