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.

8 files changed, 160 insertions, 31 deletions

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} />
-    </>
-  );
-}