Remove complexity of component and make props instead. (#243)

scripts/changelog-release.mjs

@@ -22,28 +22,28 @@ const repos = [
   {
     productTitle: "Portals Web Plugin",
     repo: "ionic-team/ionic-portals",
-    outputFile: "../website/src/components/page/changelog/web.json",
+    outputFile: "../website/docs/for-web/changelog.json",
     pageUrl: "https://ionic.io/docs/portals/for-web/changelog",
     versionFileKey: "version",
   },
   {
     productTitle: "Portals iOS",
     repo: "ionic-team/ionic-portals-ios",
-    outputFile: "../website/src/components/page/changelog/ios.json",
+    outputFile: "../website/docs/for-ios/changelog.json",
     pageUrl: "https://ionic.io/docs/portals/for-ios/changelog",
     versionFileKey: "iosVersion",
   },
   {
     productTitle: "Portals Android",
     repo: "ionic-team/ionic-portals-android",
-    outputFile: "../website/src/components/page/changelog/android.json",
+    outputFile: "../website/docs/for-android/changelog.json",
     pageUrl: "https://ionic.io/docs/portals/for-android/changelog",
     versionFileKey: "androidVersion",
   },
   {
     productTitle: "Portals React Native",
     repo: "ionic-team/ionic-portals-react-native",
-    outputFile: "../website/src/components/page/changelog/react-native.json",
+    outputFile: "../website/docs/for-react-native/changelog.json",
     pageUrl: "https://ionic.io/docs/portals/for-react-native/changelog",
     versionFileKey: "rnVersion",
   },
@@ -121,6 +121,7 @@ function formatReleases(releases, repo, productTitle, pageUrl) {
 /**
  *
  * @param {string} markdown
+ * @returns {string}
  */
 function cleanupMarkdown(markdown) {
   return (
@@ -215,7 +216,7 @@ async function run() {
       async ({ repo, outputFile, versionFileKey, productTitle, pageUrl }) => {
         // Keep a list of the previous release JSON for comparison
         const previousDocReleaseArray = JSON.parse(
-          await fs.readFile(outputFile)
+          await fs.readFile(resolve(__dirname, outputFile))
         );
 
         const githubReleaseArray = await fetchGithubReleases(repo);

website/docs/for-android/changelog.md

@@ -4,5 +4,6 @@ hide_table_of_contents: true
 ---
 
 import ReleaseNotes from '@site/src/components/page/changelog';
+import releases from "./changelog.json";
 
-<ReleaseNotes platform="android"/>
+<ReleaseNotes releases={releases} name="Portals for Android" repo="ionic-team/ionic-portals-android"/>

website/docs/for-ios/changelog.md

@@ -4,5 +4,6 @@ hide_table_of_contents: true
 ---
 
 import ReleaseNotes from '@site/src/components/page/changelog';
+import releases from "./changelog.json";
 
-<ReleaseNotes platform="ios"/>
+<ReleaseNotes releases={releases} name="Portals for iOS" repo="ionic-team/ionic-portals-ios"/>

website/docs/for-react-native/changelog.md

@@ -4,5 +4,6 @@ hide_table_of_contents: true
 ---
 
 import ReleaseNotes from '@site/src/components/page/changelog';
+import releases from "./changelog.json";
 
-<ReleaseNotes platform="react-native"/>
+<ReleaseNotes releases={releases} name="Portals for React Native" repo="ionic-team/ionic-portals-react-native"/>

website/docs/for-web/changelog.md

@@ -4,5 +4,6 @@ hide_table_of_contents: true
 ---
 
 import ReleaseNotes from '@site/src/components/page/changelog';
+import releases from "./changelog.json";
 
-<ReleaseNotes platform="web"/>
+<ReleaseNotes releases={releases} name="Portals Web Plugin" repo="ionic-team/ionic-portals"/>

website/src/components/page/changelog/index.tsx

@@ -1,35 +1,8 @@
 import clsx from "clsx";
 import React from "react";
-import web from "./web.json";
-import ios from "./ios.json";
-import android from "./android.json";
-import reactNative from "./react-native.json";
 
 import styles from "./styles.module.css";
 
-const platforms = {
-  web: {
-    name: "Portals Web Plugin",
-    repo: "ionic-team/ionic-portals",
-    releases: web as Release[],
-  },
-  ios: {
-    name: "Portals for iOS",
-    repo: "ionic-team/ionic-portals-ios",
-    releases: ios,
-  },
-  android: {
-    name: "Portals for Android",
-    repo: "ionic-team/ionic-portals-android",
-    releases: android,
-  },
-  "react-native": {
-    name: "Portals for React Native",
-    repo: "ionic-team/ionic-portals-react-native",
-    releases: reactNative,
-  },
-};
-
 interface Release {
   body: string;
   name: string;
@@ -40,13 +13,11 @@ interface Release {
 }
 
 export default function ReleaseNotes(props: {
-  platform: keyof typeof platforms;
+  repo: string;
+  name: string;
+  releases: any[];
 }) {
-  let repo = platforms[props.platform].repo || "";
-  let name = platforms[props.platform].name || "";
-  let releases = platforms[props.platform].releases || [];
-
-  if (releases.length === 0) {
+  if (props.releases.length === 0) {
     console.warn(`Could not load release notes data. Make sure that you have a valid GITHUB_TOKEN.
 
 Create a personal access token by following the below guide:
@@ -58,7 +29,7 @@ https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating
     return [
       <p>
         Unable to load Releases. Please see all releases{" "}
-        <a href={`https://github.com/${repo}/releases`} target="_blank">
+        <a href={`https://github.com/${props.repo}/releases`} target="_blank">
           on GitHub
         </a>
         .
@@ -69,15 +40,15 @@ https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating
   return (
     <article>
       <p className={styles.intro}>
-        A complete release history for {name} is available{" "}
-        <a href={`https://github.com/${repo}/releases`} target="_blank">
+        A complete release history for {props.name} is available{" "}
+        <a href={`https://github.com/${props.repo}/releases`} target="_blank">
           on GitHub
         </a>
         . Documentation for recent releases can also be found below.
       </p>
 
       <div className={styles["release-notes"]}>
-        {releases.map((release: Release, index) => (
+        {props.releases.map((release: Release, index) => (
           <section
             className={clsx(
               styles["release-note"],
@@ -122,7 +93,7 @@ https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating
       </div>
       <blockquote>
         To see more releases, visit{" "}
-        <a href={`https://github.com/${repo}/releases/`} target="_blank">
+        <a href={`https://github.com/${props.repo}/releases/`} target="_blank">
           GitHub
         </a>
         .