Modern look for the website

package.json

@@ -15,10 +15,10 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.2.0",
-    "@docusaurus/plugin-client-redirects": "2.2.0",
-    "@docusaurus/plugin-google-analytics": "2.2.0",
-    "@docusaurus/preset-classic": "2.2.0",
+    "@docusaurus/core": "2.3.1",
+    "@docusaurus/plugin-client-redirects": "2.3.1",
+    "@docusaurus/plugin-google-analytics": "2.3.1",
+    "@docusaurus/preset-classic": "2.3.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@mdx-js/react": "^1.6.22",
@@ -65,10 +65,12 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.2.0",
-    "@docusaurus/types": "2.2.0",
+    "@docusaurus/module-type-aliases": "2.3.1",
+    "@docusaurus/types": "2.3.1",
     "@tsconfig/docusaurus": "^1.0.6",
     "@types/lodash": "^4.14.188",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
     "autoprefixer": "^10.4.0",
     "highlight.js": "^9.7.0",
     "marked": "^0.3.6",

src/components/BlockLinks.js

@@ -1,6 +1,4 @@
 import React from "react";
-import { docUrl } from "../utils/index";
-
 
 const BlockLinks = (props) => {
   return(
@@ -11,4 +9,4 @@ const BlockLinks = (props) => {
     </div>
   )
 }
-export default BlockLinks;
+export default BlockLinks;

src/components/IndexPage/Greeting/BlogPosts/BlogPosts.module.css

@@ -0,0 +1,12 @@
+.BlogPosts {
+  /* font-weight: bold; */
+}
+
+.List {
+  padding: 0;
+}
+
+.ListItem {
+  max-width: 60rem;
+  list-style: none;
+}

src/components/IndexPage/Greeting/BlogPosts/BlogPosts.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import s from "./BlogPosts.module.css";
+import { BlogPostMetadata } from "@docusaurus/plugin-content-blog";
+import Link from "../../../ui/Link/Link";
+
+const recentPosts: {
+  items: BlogPostMetadata[];
+} = require("../../../../../.docusaurus/docusaurus-plugin-content-blog/default/blog-post-list-prop-default.json");
+
+export type BlogPostsProps = {
+  count: number;
+};
+
+const BlogPosts: React.FC<BlogPostsProps> = (props) => {
+  const posts = recentPosts.items.slice(0, props.count);
+
+  if (posts.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className={s.BlogPosts}>
+      <strong>New in blog:</strong>
+      <ul className={s.List}>
+        {posts.map((post, i) => (
+          <li key={i} className={s.ListItem}>
+            <Link href={post.permalink} variant="navigate">
+              {post.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default BlogPosts;

src/components/IndexPage/Greeting/Greeting.module.css

@@ -0,0 +1,105 @@
+.Greeting {
+  overflow: hidden;
+  position: relative;
+  padding: 0 1rem;
+  display: flex;
+  justify-content: center;
+}
+
+.Content {
+  max-width: var(--max-content-width);
+  margin: 0 auto;
+  padding-top: 6rem;
+  padding-bottom: 4rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.Text {
+  width: 66.666666666%;
+  position: relative;
+}
+
+.ActionButtons {
+  margin-right: auto;
+  position: relative;
+  top: 3rem;
+}
+
+.Title {
+  font-size: 4rem;
+  margin-bottom: 2rem;
+  hyphens: none;
+  word-wrap: normal;
+  max-width: 48rem;
+}
+
+.Description {
+  font-size: var(--font-size-big-text);
+  margin-bottom: 2rem;
+}
+
+.Animation {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100vw;
+  transform: translate(0, calc(100% - 8.5rem));
+  z-index: -1;
+  visibility: hidden;
+}
+
+.AnimationReady {
+  visibility: visible;
+  animation: animationFadeIn 1s ease-in-out;
+}
+
+@keyframes animationFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.LatestPostInBlog {
+  margin-top: 2rem;
+}
+
+@media (max-width: 800px) {
+  .Title {
+    font-size: 2.8rem;
+  }
+
+  .Content {
+    padding-bottom: 8rem;
+  }
+
+  .Text {
+    width: unset;
+  }
+
+  .Animation {
+    bottom: 0;
+  }
+
+  .ActionButtons {
+    top: 7rem;
+  }
+}
+
+@media (min-aspect-ratio: 4/3) {
+  .Greeting {
+    min-height: calc(100vh - var(--ifm-navbar-height));
+  }
+
+  .Greeting.GreetingWithAnnouncementBar {
+    min-height: calc(
+      100vh - var(--ifm-navbar-height) -
+        var(--docusaurus-announcement-bar-height)
+    );
+  }
+}

src/components/IndexPage/Greeting/Greeting.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import s from "./Greeting.module.css";
+import SineWavesAnimation from "./SineWaves/SineWavesAnimation";
+import ActionButton from "../../ui/ActionButton/ActionButton";
+import ActionButtonGroup from "../../ui/ActionButton/ActionButtonGroup";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import BlogPosts from "./BlogPosts/BlogPosts";
+
+const Greeting: React.FC = () => {
+  const { siteConfig } = useDocusaurusContext();
+  const [isAnimationReady, setIsAnimationReady] = React.useState(false);
+  const isAnnouncementBarVisible = siteConfig.themeConfig?.announcementBar;
+
+  return (
+    <section className={`${s.Greeting} ${isAnnouncementBarVisible ? s.GreetingWithAnnouncementBar : ''}`}>
+      <div
+        className={s.Content}
+        style={{
+          marginTop: isAnnouncementBarVisible
+            ? "calc(var(--docusaurus-announcement-bar-height) * -1)"
+            : "0",
+        }}
+      >
+        <div className={s.Text}>
+          <h1 className={s.Title}>
+            Cloud-Native, Distributed Messaging and Streaming
+          </h1>
+          <p className={s.Description}>
+            Apache® Pulsar™ is an open-source, distributed messaging and
+            streaming platform built for the cloud.
+          </p>
+
+          <div className={`${s.Animation} ${isAnimationReady ? s.AnimationReady : ''}`}>
+            <SineWavesAnimation onReady={() => setIsAnimationReady(true)}/>
+          </div>
+        </div>
+
+        <div className={s.ActionButtons}>
+          <ActionButtonGroup>
+            <ActionButton
+              title="Learn more"
+              type="primary"
+              link={{
+                href: `${siteConfig.baseUrl}docs/concepts-overview`,
+              }}
+            />
+            <ActionButton
+              title="Quickstart"
+              link={{
+                href: `${siteConfig.baseUrl}docs`,
+              }}
+            />
+          </ActionButtonGroup>
+
+          <div className={s.LatestPostInBlog}>
+            <BlogPosts count={3} />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Greeting;

src/components/IndexPage/Greeting/SineWaves/SineWavesAnimation.module.css

@@ -0,0 +1,19 @@
+.SineWavesAnimation {
+  position: relative;
+  transform: translate(20%, 50%);
+}
+
+.SineWavesAnimation::before {
+  content: '';
+  display: block;
+  position: absolute;
+  height: 4px;
+  right: 100%;
+  top: -2px;
+  width: 100%;
+  background-color: #198fff;
+}
+
+.Canvas {
+  transform: translate(0, -50%);
+}

src/components/IndexPage/Greeting/SineWaves/SineWavesAnimation.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect } from "react";
+import s from "./SineWavesAnimation.module.css";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import { PropaneSharp } from "@mui/icons-material";
+const SineWaves = ExecutionEnvironment.canUseDOM ? require("sine-waves") : null;
+
+export type SineWavesAnimationProps = {
+  onReady?: () => void;
+};
+
+const SineWavesAnimation: React.FC<SineWavesAnimationProps> = (props) => {
+  const ref = React.useRef<HTMLCanvasElement>(null);
+  const [isStarted, setIsStarted] = React.useState(false);
+
+  useEffect(() => {
+    if (!isStarted && ref.current) {
+      startWaves(ref.current);
+      props.onReady?.();
+      setIsStarted(true);
+    }
+  }, []);
+
+  return (
+    <div className={s.SineWavesAnimation}>
+      <canvas ref={ref} className={s.Canvas}></canvas>
+    </div>
+  );
+};
+
+function startWaves(el: HTMLElement) {
+  new SineWaves({
+    el,
+    speed: 2,
+    width: function () {
+      return document.body.clientWidth;
+    },
+    height: function () {
+      return 300;
+    },
+    ease: "SineInOut",
+    wavesWidth: "60%",
+    waves: [
+      {
+        timeModifier: 3,
+        lineWidth: 4,
+        amplitude: -25,
+        wavelength: 25,
+      },
+      {
+        timeModifier: 2,
+        lineWidth: 4,
+        amplitude: -50,
+        wavelength: 50,
+      },
+      {
+        timeModifier: 1,
+        lineWidth: 4,
+        amplitude: -100,
+        wavelength: 100,
+      },
+      {
+        timeModifier: 0.5,
+        lineWidth: 4,
+        amplitude: -125,
+        wavelength: 125,
+      },
+      {
+        timeModifier: 1.25,
+        lineWidth: 4,
+        amplitude: -150,
+        wavelength: 150,
+      },
+    ],
+
+    // Called on window resize
+    resizeEvent: function () {
+      var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
+      gradient.addColorStop(0, "rgba(24, 143, 255, 1)");
+      gradient.addColorStop(0.5, "rgba(70, 78, 86, 1)");
+
+      var index = -1;
+      var length = this.waves.length;
+      while (++index < length) {
+        this.waves[index].strokeStyle = gradient;
+      }
+
+      // Clean Up
+      index = void 0;
+      length = void 0;
+      gradient = void 0;
+    },
+  });
+}
+
+export default SineWaves ? SineWavesAnimation : () => null;