feat(blog): Use smaller headers + auto split headers on :

Author: jubnzv

src/theme/BlogPostItem/Header/Title/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import Title from '@theme-original/BlogPostItem/Header/Title';
+import type TitleType from '@theme/BlogPostItem/Header/Title';
+import type {WrapperProps} from '@docusaurus/types';
+import Link from '@docusaurus/Link';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import styles from './styles.module.css';
+
+type Props = WrapperProps<typeof TitleType>;
+
+export default function TitleWrapper(props: Props): JSX.Element {
+  const {isBlogPostPage, metadata, frontMatter} = useBlogPost();
+  const splitEnabled =
+    (frontMatter as {splitTitle?: boolean}).splitTitle !== false;
+
+  if (splitEnabled) {
+    const title = metadata.title;
+    const colonIdx = title.indexOf(':');
+    if (colonIdx > 0 && colonIdx < title.length - 1) {
+      const main = title.slice(0, colonIdx).trim();
+      const secondary = title.slice(colonIdx + 1).trim();
+      const TitleHeading = isBlogPostPage ? 'h1' : 'h2';
+      const body = (
+        <>
+          <span className={styles.main}>{main}</span>
+          <span className={styles.secondary}>{secondary}</span>
+        </>
+      );
+      return (
+        <TitleHeading
+          className={clsx(
+            styles.title,
+            isBlogPostPage && styles.titlePost,
+            props.className,
+          )}>
+          {isBlogPostPage ? (
+            body
+          ) : (
+            <Link to={metadata.permalink} className={styles.link}>
+              {body}
+            </Link>
+          )}
+        </TitleHeading>
+      );
+    }
+  }
+
+  return <Title {...props} />;
+}

src/theme/BlogPostItem/Header/Title/styles.module.css

@@ -0,0 +1,63 @@
+.title {
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+  line-height: 1.2;
+}
+
+.link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+
+.link:hover {
+  text-decoration: none;
+}
+
+/* Listing view (h2) */
+.main {
+  display: block;
+  font-size: 2rem;
+  line-height: 1.2;
+  color: var(--ifm-color-primary-darkest);
+}
+
+.link:hover .main {
+  color: var(--ifm-color-primary);
+}
+
+.secondary {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 500;
+  line-height: 1.3;
+  margin-top: 0.25rem;
+  color: var(--ifm-color-emphasis-700);
+}
+
+/* Individual post page (h1) */
+.titlePost .main {
+  font-size: 2.5rem;
+  line-height: 1.15;
+}
+
+.titlePost .secondary {
+  font-size: 1.5rem;
+  line-height: 1.25;
+  margin-top: 0.4rem;
+}
+
+@media (max-width: 576px) {
+  .main {
+    font-size: 1.5rem;
+  }
+  .secondary {
+    font-size: 1rem;
+  }
+  .titlePost .main {
+    font-size: 2rem;
+  }
+  .titlePost .secondary {
+    font-size: 1.25rem;
+  }
+}