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.

1 files changed, 55 insertions, 0 deletions

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