docs: announcement bar (#21511)

docs/docusaurus.config.js

@@ -120,11 +120,10 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
-      // TODO(erick): enable this when 0.2 docs are ready for banner
-      // announcementBar: {
-      //   content: 'LangChain v0.2 is coming soon! Preview the new docs <a href="/v0.2/docs/introduction/">here</a>.',
-      //   isCloseable: true,
-      // },
+      announcementBar: {
+        content: 'LangChain v0.2 is coming soon! Preview the new docs <a href="/v0.2/docs/introduction/">here</a>.',
+        isCloseable: true,
+      },
       docs: {
         sidebar: {
           hideable: true,

docs/src/css/custom.css

@@ -244,16 +244,16 @@ nav, h1, h2, h3, h4 {
     no-repeat;
 }
 
-.announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module {
+div[class^=announcementBar_] {
   height:40px !important;
   font-size: 20px !important;
 }
 
-[data-theme='dark'] .announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module {
+[data-theme='dark'] div[class^=announcementBar_] {
   background-color: #1b1b1b;
   color: #fff;
 }
 
-[data-theme='dark'] .announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module button {
+[data-theme='dark'] div[class^=announcementBar_] button {
   color: #fff;
 }