Home animation

micrometer-metrics · Dec 19, 2023 · a3a9109 · a3a9109
1 parent 4d92820
commit a3a9109
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 41 deletions.
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-transition-group": "^4.4.5",
+    "react-visibility-sensor": "^5.1.1",
     "sass": "^1.69.5"
   },
   "devDependencies": {

diff --git a/src/components/utils/Visible.tsx b/src/components/utils/Visible.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import { ReactNode } from "react"
+import ReactVisibilitySensor from "react-visibility-sensor"
+
+interface Props {
+  children: ReactNode
+  className?: string
+  once?: boolean
+}
+
+export const Visible = ({ children, className, once }: Props) => {
+  const [visible, setVisible] = React.useState(false)
+  const onChange = (isVisible: boolean) => {
+    if ((once && !visible) || !once) {
+      setVisible(isVisible)
+    }
+  }
+  return (
+    <ReactVisibilitySensor partialVisibility={true} onChange={onChange}>
+      <div
+        className={`${className ? className : ""} ${visible ? "visible" : ""}`}
+      >
+        {children}
+      </div>
+    </ReactVisibilitySensor>
+  )
+}
+
+export default Visible
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import type { HeadFC, PageProps } from "gatsby";
 import "../styles/main.scss";
 import Layout from "../components/layout/Layout";
+import Visible from "../components/utils/Visible";
 
 const IndexPage: React.FC<PageProps> = () => {
   return (
@@ -28,66 +29,83 @@ const IndexPage: React.FC<PageProps> = () => {
       </div>
       <div className="has-background-light py-6">
         <div className="container content markdown py-4">
-          <div className="columns">
-            <article className="column has-text-centered">
+          <Visible className="columns is-multiline features">
+            <article className="feature column has-text-centered is-half-tablet is-one-third-desktop">
               <img className="icon-img" src={`/img/icon-1.png`} alt="" />
               <h1 className="h2-special">Integrated into Frameworks</h1>
               <p>
-                Popular frameworks that integrate with Micrometer include <a
-                href="https://helidon.io/docs/v2/#/se/metrics/02_micrometer">Helidon</a>, <a
-                href="https://micronaut-projects.github.io/micronaut-micrometer/latest/guide/">Micronaut</a>, <a
-                href="https://quarkus.io/guides/telemetry-micrometer">Quarkus</a>, and <a
-                href="https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#actuator.observability">Spring</a>.
-                You can use the idioms and configuration model native to your application framework to get started with
-                Micrometer.
+                Popular frameworks that integrate with Micrometer include{" "}
+                <a href="https://helidon.io/docs/v2/#/se/metrics/02_micrometer">
+                  Helidon
+                </a>
+                ,{" "}
+                <a href="https://micronaut-projects.github.io/micronaut-micrometer/latest/guide/">
+                  Micronaut
+                </a>
+                ,{" "}
+                <a href="https://quarkus.io/guides/telemetry-micrometer">
+                  Quarkus
+                </a>
+                , and{" "}
+                <a href="https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#actuator.observability">
+                  Spring
+                </a>
+                . You can use the idioms and configuration model native to your
+                application framework to get started with Micrometer.
               </p>
             </article>
-            <article className="column has-text-centered">
-              <img className="icon-img" src={`/img/icon-2.png`} alt=""/>
+            <article className="feature column has-text-centered is-half-tablet is-one-third-desktop">
+              <img className="icon-img" src={`/img/icon-2.png`} alt="" />
               <h1 className="h2-special">Instrumentation Provided</h1>
               <p>
-                Out-of-the-box instrumentation is available in micrometer-core and in libraries. You do not need to
-                write your own instrumentation for many common components.
+                Out-of-the-box instrumentation is available in micrometer-core
+                and in libraries. You do not need to write your own
+                instrumentation for many common components.
               </p>
             </article>
-            <article className="column has-text-centered">
-              <img className="icon-img" src={`/img/icon-3.png`} alt=""/>
+            <article className="feature column has-text-centered is-half-tablet is-one-third-desktop">
+              <img className="icon-img" src={`/img/icon-3.png`} alt="" />
               <h1 className="h2-special">Works in your Environment</h1>
               <p>
-                Micrometer can directly publish to most backends for storing your observability data. You can use what
-                you have or switch. Micrometer makes it easy. See below and the documentation for supported backends.
+                Micrometer can directly publish to most backends for storing
+                your observability data. You can use what you have or switch.
+                Micrometer makes it easy. See below and the documentation for
+                supported backends.
               </p>
             </article>
-          </div>
-          <div className="columns">
-            <article className="column has-text-centered">
-              <img className="icon-img" src={`/img/icon-4.png`} alt=""/>
+            <article className="feature column has-text-centered is-half-tablet is-one-third-desktop">
+              <img className="icon-img" src={`/img/icon-4.png`} alt="" />
               <h1 className="h2-special">Dimensional Metrics</h1>
               <p>
-                Vendor-neutral abstractions for timers, gauges, counters, distribution summaries, and long task timers
-                are provided with a dimensional data model. You can publish to a backend that supports dimensional
-                metrics for efficient access to named metrics where you can drill down across its dimensions.
+                Vendor-neutral abstractions for timers, gauges, counters,
+                distribution summaries, and long task timers are provided with a
+                dimensional data model. You can publish to a backend that
+                supports dimensional metrics for efficient access to named
+                metrics where you can drill down across its dimensions.
               </p>
             </article>
-            <article className="column has-text-centered">
-              <img className="icon-img" src={`/img/icon-5.png`} alt=""/>
+            <article className="feature column has-text-centered is-half-tablet is-one-third-desktop">
+              <img className="icon-img" src={`/img/icon-5.png`} alt="" />
               <h1 className="h2-special">Distributed Tracing</h1>
               <p>
-                Micrometer Tracing is a facade over the Brave and OpenTelemetry tracers that gives insight into complex
-                distributed systems at the level of an individual user request. Identify the root cause of issues faster
-                with distributed tracing. Micrometer Tracing is the successor to the Spring Cloud Sleuth project.
+                Micrometer Tracing is a facade over the Brave and OpenTelemetry
+                tracers that gives insight into complex distributed systems at
+                the level of an individual user request. Identify the root cause
+                of issues faster with distributed tracing. Micrometer Tracing is
+                the successor to the Spring Cloud Sleuth project.
               </p>
             </article>
-            <article className="column has-text-centered">
-              <img className="icon-img" src={`/img/icon-6.png`} alt=""/>
+            <article className="feature column has-text-centered is-half-tablet is-one-third-desktop">
+              <img className="icon-img" src={`/img/icon-6.png`} alt="" />
               <h1 className="h2-special">Unified Observability</h1>
               <p>
-                You can instrument with the Micrometer Observation API, a single abstraction that can produce metrics,
-                tracing, logs and more. You can instrument once, get multiple benefits, and keep metadata consistent
-                across your observability data.
+                You can instrument with the Micrometer Observation API, a single
+                abstraction that can produce metrics, tracing, logs and more.
+                You can instrument once, get multiple benefits, and keep
+                metadata consistent across your observability data.
               </p>
             </article>
-          </div>
+          </Visible>
         </div>
       </div>
       <div className="container content markdown py-6">
@@ -96,13 +114,15 @@ const IndexPage: React.FC<PageProps> = () => {
             Support for popular observability systems
           </h2>
           <p>
-            As an instrumentation facade, Micrometer lets you instrument your code with a vendor-neutral interface and
-            decide on the observability system as a last step. Instrumenting a library with Micrometer lets it be used
-            in applications that ship data to different backends or even multiple backends at the same time.
+            As an instrumentation facade, Micrometer lets you instrument your
+            code with a vendor-neutral interface and decide on the observability
+            system as a last step. Instrumenting a library with Micrometer lets
+            it be used in applications that ship data to different backends or
+            even multiple backends at the same time.
           </p>
           <p>
-            Micrometer supports publishing metrics to <strong>AppOptics</strong>,{" "}
-            <strong>Azure Monitor</strong>, Netflix <strong>Atlas</strong>,{" "}
+            Micrometer supports publishing metrics to <strong>AppOptics</strong>
+            , <strong>Azure Monitor</strong>, Netflix <strong>Atlas</strong>,{" "}
             <strong>CloudWatch</strong>, <strong>Datadog</strong>,{" "}
             <strong>Dynatrace</strong>, <strong>Elastic</strong>,{" "}
             <strong>Ganglia</strong>, <strong>Graphite</strong>,{" "}

diff --git a/src/styles/_home.scss b/src/styles/_home.scss
@@ -11,4 +11,14 @@
       line-height: 2rem;
     }
   }
-}
+  .features {
+    .feature {
+      opacity: 0;
+    }
+    &.visible {
+      .feature {
+        animation: riseUp 0.5s forwards ease, fadeIn 0.7s forwards ease;
+      }
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -9858,6 +9858,7 @@ __metadata:
     react-dom: "npm:^18.2.0"
     react-helmet: "npm:^6.1.0"
     react-transition-group: "npm:^4.4.5"
+    react-visibility-sensor: "npm:^5.1.1"
     sass: "npm:^1.69.5"
     typescript: "npm:^5.3.2"
   languageName: unknown
@@ -11824,6 +11825,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-visibility-sensor@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "react-visibility-sensor@npm:5.1.1"
+  dependencies:
+    prop-types: "npm:^15.7.2"
+  peerDependencies:
+    react: ">=16.0.0"
+    react-dom: ">=16.0.0"
+  checksum: e40ed6ba5b02fa526de3f80debd21ee4b852ce668f90041391a95863b9cc1a4b36647cd4169f3473eefe0e26fc5edae383511c98d4b2540c4499fa5f0f5700b5
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.2.0":
   version: 18.2.0
   resolution: "react@npm:18.2.0"