Dynamically display ignite release versions (#135)

* Add LatestRelease component and update notificationSection styles * Fix key warning in FreshRecipes component * Fix typo in YAML heading * Added comment * Refactor recipe link key in FreshRecipes component * Update LatestVersion component title * Refactor LatestRelease component to use ReleaseRemark component * Refactor releaseString logic in LatestVersion component
infinitered · Feb 28, 2024 · c9be96e · c9be96e
1 parent f5524e7
commit c9be96e
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 25 deletions.
diff --git a/docs/recipes/SampleYAMLCircleCI.md b/docs/recipes/SampleYAMLCircleCI.md
@@ -9,7 +9,7 @@ last_update:
 publish_date: 2022-10-09
 ---
 
-### Sampl YAML File
+### Sample YAML File
 
 ```yaml
 # Javascript Node CircleCI 2.0 configuration file

diff --git a/src/components/LatestVersion/index.tsx b/src/components/LatestVersion/index.tsx
@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from "react";
+import Link from "@docusaurus/Link";
+import moment from "moment";
+
+// Bringing in the styles from the `pages/index.module.css` file to not have to duplicate the styles (nothing is new in this component)
+import styles from "../../pages/index.module.css";
+import * as Arrow from "@site/static/img/arrow.svg";
+
+interface Release {
+  tag_name: string;
+  published_at: string;
+}
+
+interface ReleaseRemarkProps {
+  latestVersion: string;
+  latestReleaseDate: string;
+}
+
+const ReleaseRemark = ({
+  latestVersion,
+  latestReleaseDate,
+}: ReleaseRemarkProps) => {
+  const daysSinceRelease =
+    moment(latestReleaseDate).diff(moment(), "days") * -1;
+  const releaseString =
+    daysSinceRelease !== 0
+      ? "today"
+      : `${moment.duration(daysSinceRelease, "days").humanize()} ago`;
+  return (
+    <>
+      <b>{latestVersion}</b> released <b>{releaseString}</b>
+    </>
+  );
+};
+
+const LatestRelease = () => {
+  const [latestVersion, setLatestVersion] = useState<string>("");
+  const [latestReleaseDate, setLatestReleaseDate] = useState<string>("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("https://api.github.com/repos/infinitered/ignite/releases/latest")
+      .then((response) => response.json())
+      .then((data: Release) => {
+        setLatestReleaseDate(data.published_at);
+        setLatestVersion(data.tag_name);
+        setLoading(false);
+      })
+      .catch((error) => console.error("Error fetching latest release:", error));
+  }, []);
+
+  return (
+    <>
+      <p className={styles.notificationTagText}>Latest Ignite Release</p>
+      {loading ? (
+        <Link
+          className={styles.notificationLink}
+          href={`https://github.com/infinitered/ignite/releases/latest`}
+        >
+          <b className={styles.notificationLinkText}>View on Github</b>
+          <Arrow.default />
+        </Link>
+      ) : (
+        <>
+          <h3 className={styles.notificationTitle}>Ignite</h3>
+          <p className={styles.notificationDate}>
+            <ReleaseRemark
+              latestVersion={latestVersion}
+              latestReleaseDate={latestReleaseDate}
+            />
+          </p>
+          <Link
+            className={styles.notificationLink}
+            href={`https://github.com/infinitered/ignite/releases/tag/${latestVersion}`}
+          >
+            <b className={styles.notificationLinkText}>View on Github</b>
+            <Arrow.default />
+          </Link>
+        </>
+      )}
+    </>
+  );
+};
+
+export default LatestRelease;
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -16,6 +16,8 @@
 
  .notificationSection {
   margin-bottom: 20px;
+  min-width: 220px !important;
+  min-height: 130px !important;
  }
 
  .notificationTag {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -10,6 +10,7 @@ import SVGImage from "../components/SVGImage";
 import { usePluginData } from "@docusaurus/useGlobalData";
 import * as Arrow from "@site/static/img/arrow.svg";
 import type { Snippet } from "../types";
+import LatestRelease from "../components/LatestVersion";
 
 const heroImage = require("@site/static/img/hero-graphic.svg");
 const faceWinking = require("@site/static/img/face-winking.png");
@@ -25,9 +26,6 @@ const NewSection = () => {
       new Date(b.publish_date).getTime() - new Date(a.publish_date).getTime()
   )[0];
 
-  const igniteReleaseVersion = "v9.6.1";
-  const igniteReleaseDate = moment("2024-02-21").diff(moment(), "days") * -1;
-
   return (
     <div className={styles.newSection}>
       {mostRecentRecipe && (
@@ -54,27 +52,7 @@ const NewSection = () => {
         </div>
       )}
       <div className={styles.notificationSection}>
-        <p className={styles.notificationTagText}>Releases</p>
-        <h3 className={styles.notificationTitle}>Ignite Exp[ress]o ☕️</h3>
-        <p className={styles.notificationDate}>
-          {igniteReleaseDate > 0 ? (
-            <>
-              <b>{igniteReleaseVersion}</b> released{" "}
-              <b>{igniteReleaseDate} days ago</b>
-            </>
-          ) : (
-            <>
-              <b>{igniteReleaseVersion}</b> released today!
-            </>
-          )}
-        </p>
-        <Link
-          className={styles.notificationLink}
-          href={`https://github.com/infinitered/ignite/releases/tag/${igniteReleaseVersion}`}
-        >
-          <b className={styles.notificationLinkText}>View on Github</b>
-          <Arrow.default />
-        </Link>
+        <LatestRelease />
       </div>
     </div>
   );
@@ -135,6 +113,7 @@ function FreshRecipes() {
       {mostRecentRecipes.slice(0, 4).map((recipe) => {
         return (
           <Link
+            key={recipe.doc_name}
             to={`/docs/recipes/${recipe.doc_name.split(".")[0]}`}
             className={styles.recipeWrapper}
           >