From fbd41d395916176dde11bb0e417f1210f34eb4ab Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sat, 23 Mar 2024 18:02:45 +0100
Subject: 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.
---
 src/components/ActiveSectionProvider.tsx        |  2 +-
 src/components/Landing.tsx                      | 31 ++++++++
 src/components/landing/sections/Blog.module.css | 28 ++++++++
 src/components/landing/sections/Blog.tsx        | 95 +++++++++++++++++++++++++
 src/components/landing/sections/Hero.module.css | 10 ++-
 5 files changed, 163 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Landing.tsx
 create mode 100644 src/components/landing/sections/Blog.module.css
 create mode 100644 src/components/landing/sections/Blog.tsx

(limited to 'src/components')

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;
-- 
cgit v1.2.3-70-g09d2