Show latest blog announcement on home page

Author: satya164

docusaurus.config.ts

@@ -2,6 +2,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 import type { Config } from '@docusaurus/types';
 
 import disableFullySpecified from './src/plugins/disable-fully-specified.ts';
+import latestAnnouncement from './src/plugins/latest-announcement.ts';
 import llmsTxt from './src/plugins/llms-txt.ts';
 import ogImage from './src/plugins/og-image.ts';
 import reactNavigationVersions from './src/plugins/react-navigation-versions.ts';
@@ -137,6 +138,7 @@ const config: Config = {
     disableFullySpecified,
     reactNavigationVersions,
     [llmsTxt, { latestVersion }],
+    latestAnnouncement,
     ogImage,
     [
       '@docusaurus/plugin-client-redirects',

src/pages/home/Splash/index.tsx

@@ -1,11 +1,29 @@
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import { usePluginData } from '@docusaurus/useGlobalData';
 
+import type { LatestAnnouncement } from '../../../plugins/latest-announcement.ts';
 import SplashLeftIllustration from './SplashLeftIllustration';
 import SplashRightIllustration from './SplashRightIllustration';
 import styles from './styles.module.css';
 
+function isLatestAnnouncement(value: unknown): value is LatestAnnouncement {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'title' in value &&
+    typeof value.title === 'string' &&
+    'permalink' in value &&
+    typeof value.permalink === 'string'
+  );
+}
+
 export default function Splash() {
+  const data = usePluginData('latest-announcement');
+  const announcement = isLatestAnnouncement(data) ? data : null;
+
+  console.log('Announcement:', data);
+
   return (
     <section className={styles.wrapper}>
       <div className={styles.container}>
@@ -36,16 +54,17 @@ export default function Splash() {
         </div>
         <SplashRightIllustration />
       </div>
-      <div className={styles.migrationText}>
-        ✨ React Navigation 8 is coming. Check out the{' '}
-        <Link
-          to={useBaseUrl('/blog/2025/12/19/react-navigation-8.0-alpha')}
-          className={styles.linkText}
-        >
-          announcement
-        </Link>
-        .
-      </div>
+      {announcement && (
+        <div className={styles.migrationText}>
+          ✨{' '}
+          <Link
+            to={useBaseUrl(announcement.permalink)}
+            className={styles.linkText}
+          >
+            {announcement.title}
+          </Link>
+        </div>
+      )}
     </section>
   );
 }

src/pages/home/Splash/styles.module.css

@@ -113,7 +113,7 @@
 
 .linkText {
   color: var(--ifm-home-color-text);
-  font-weight: bold;
+  font-weight: 500;
 }
 
 .linkText:hover {

src/plugins/latest-announcement.ts

@@ -0,0 +1,79 @@
+import type { AllContent, Plugin } from '@docusaurus/types';
+
+export type LatestAnnouncement = {
+  title: string;
+  permalink: string;
+  date: string;
+};
+
+type BlogPost = {
+  metadata: {
+    title: string;
+    permalink: string;
+    date: Date;
+    tags: { label: string }[];
+  };
+};
+
+function isBlogPost(value: unknown): value is BlogPost {
+  if (typeof value !== 'object' || value === null || !('metadata' in value)) {
+    return false;
+  }
+
+  const metadata = value.metadata;
+
+  return (
+    typeof metadata === 'object' &&
+    metadata !== null &&
+    'title' in metadata &&
+    typeof metadata.title === 'string' &&
+    'permalink' in metadata &&
+    typeof metadata.permalink === 'string' &&
+    'date' in metadata &&
+    metadata.date instanceof Date &&
+    'tags' in metadata &&
+    Array.isArray(metadata.tags)
+  );
+}
+
+function findLatestAnnouncement(
+  allContent: AllContent
+): LatestAnnouncement | null {
+  const blogContent = allContent['docusaurus-plugin-content-blog']?.default;
+
+  if (
+    typeof blogContent !== 'object' ||
+    blogContent === null ||
+    !('blogPosts' in blogContent) ||
+    !Array.isArray(blogContent.blogPosts)
+  ) {
+    return null;
+  }
+
+  const latest = blogContent.blogPosts
+    .filter(isBlogPost)
+    .filter((post) =>
+      post.metadata.tags.some((tag) => tag.label === 'announcement')
+    )
+    .sort((a, b) => b.metadata.date.getTime() - a.metadata.date.getTime())[0];
+
+  if (!latest) {
+    return null;
+  }
+
+  return {
+    title: latest.metadata.title,
+    permalink: latest.metadata.permalink,
+    date: latest.metadata.date.toISOString(),
+  };
+}
+
+export default function latestAnnouncementPlugin(): Plugin<void> {
+  return {
+    name: 'latest-announcement',
+
+    async allContentLoaded({ allContent, actions }) {
+      actions.setGlobalData(findLatestAnnouncement(allContent));
+    },
+  };
+}