[Docs] Added 0.5.0 announcement bar

documentation/docusaurus.config.js

@@ -72,6 +72,12 @@ const config = {
     themeConfig:
         /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
         ({
+            announcementBar: {
+                id: 'support_us',
+                content:
+                  'TypeWriter 0.5.0 is out!',
+                isCloseable: true,
+              },
             mermaid: {
                 theme: { light: 'base', dark: 'base' },
                 options: {

documentation/src/theme/AnnouncementBar/CloseButton/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import IconClose from '@theme/Icon/Close';
+import type {Props} from '@theme/AnnouncementBar/CloseButton';
+import styles from './styles.module.css';
+
+export default function AnnouncementBarCloseButton(
+  props: Props,
+): JSX.Element | null {
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.AnnouncementBar.closeButtonAriaLabel',
+        message: 'Close',
+        description: 'The ARIA label for close button of announcement bar',
+      })}
+      {...props}
+      className={clsx('clean-btn close text-white opacity-100 hover:scale-110 transition-transform duration-200 ease-in-out hover:opacity-90', props.className)}>
+      <IconClose width={14} height={14} strokeWidth={3.1} />
+    </button>
+  );
+}

documentation/src/theme/AnnouncementBar/Content/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import type {Props} from '@theme/AnnouncementBar/Content';
+
+export default function AnnouncementBarContent(
+  props: Props,
+): JSX.Element | null {
+  const {announcementBar} = useThemeConfig();
+  const {content} = announcementBar!;
+
+  return (
+    <div
+      {...props}
+      className={clsx('flex items-center justify-center text-center text-xl font-bold', props.className)}
+      dangerouslySetInnerHTML={{__html: content}}
+    />
+  );
+}

documentation/src/theme/AnnouncementBar/Content/styles.module.css

@@ -0,0 +1,15 @@
+.content {
+  font-size: 85%;
+  text-align: center;
+  padding: 5px 0;
+}
+
+.content a {
+  color: var(--ifm-color-primary);
+  text-decoration: underline;
+}
+
+.content a:hover {
+  color: var(--ifm-color-primary-dark);
+  text-decoration: none;
+}

documentation/src/theme/AnnouncementBar/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
+import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
+import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
+
+export default function AnnouncementBar(): JSX.Element | null {
+  const {announcementBar} = useThemeConfig();
+  const {isActive, close} = useAnnouncementBar();
+
+  if (!isActive) {
+    return null;
+  }
+
+  const {isCloseable} = announcementBar!;
+
+  return (
+    <div
+      className={`flex items-center justify-between p-0 bg-[#227c9d] text-white shadow-lg transition-all duration-300 ease-in-out ${
+        isCloseable ? 'relative' : 'border-b'
+      }`}
+      role="banner">
+      {isCloseable && <div className="flex-none w-12" />}
+      <AnnouncementBarContent className="flex-1 text-center text-2xl" />
+      {isCloseable && (
+        <AnnouncementBarCloseButton
+          onClick={close}
+          className="flex-none mr-2 w-12 h-full cursor-pointer"
+        />
+      )}
+    </div>
+  );
+}