GG-173 Automate latest releases on home page (#1253)

* set up script

* save

* update script

* fix

* remove console logs

* clean up

* remove console.log

* update release versions

* fix 404 page for long links

* update logic

components/Home/MainCard.tsx

@@ -120,7 +120,7 @@ const MainCard = () => {
                 </Text>
                 <ul style={{ marginTop: '1rem' }}>
                     {learn.map((point) => (
-                        <li style={{ margin: '0', marginBottom: '0.25rem' }}>
+                        <li key={point} style={{ margin: '0', marginBottom: '0.25rem' }}>
                             <Text variant="sm" className="mono" css={{ color: '$textHighEmp' }}>
                                 {point}
                             </Text>

components/Home/NewReleases.tsx

@@ -25,8 +25,12 @@ const NewReleases = () => (
                 gridColumnGap: '$13',
                 '@sm': { gridColumnGap: '$12' }
             }}>
-            {releases.map((release) => (
-                <ReleaseItem key={release.version} {...release} />
+            {Object.keys(releases).map((release) => (
+                <ReleaseItem
+                    key={releases[release].version}
+                    {...releases[release]}
+                    platform={release}
+                />
             ))}
         </Box>
     </Box>
@@ -41,7 +45,7 @@ const ReleaseItem = ({ platform, version, date }) => (
             <Link href={SdkList[platform].link}>
                 <a>
                     <Text variant="sm" className="mono" css={{ color: '$primaryLight' }}>
-                        {version} / {platform}
+                        {version} / {platform === 'Server-side' ? 'Server' : platform}
                     </Text>
                 </a>
             </Link>
@@ -86,7 +90,7 @@ const SdkList = {
         id: 'reactNative',
         link: '/react-native/v2/changelog/release-notes'
     },
-    Server: {
+    'Server-side': {
         icon: <ServerIcon style={iconStyle} />,
         id: 'server',
         link: '/server-side/v2/changelog/release-notes'

components/Home/PopularGuides.tsx

@@ -12,7 +12,7 @@ const PopularGuides = () => (
             Explore breadth of capabilities with popular guides
         </Text>
         {guides.map((guide) => (
-            <Flex gap="2">
+            <Flex gap="2" key={guide.title}>
                 <FilesIcon style={{ marginTop: '0.15rem' }} />
                 <Box>
                     <Link href={guide.link}>

lib/getNewReleases.js

@@ -0,0 +1,35 @@
+const path = require('path');
+const fs = require('fs');
+const url = require('url');
+const { iterateOverFiles, getLatestVersion, formatDate } = require('./home/helper');
+const { releases } = require('../releases');
+
+function getNewReleases() {
+    const jsonDirectory = path.join(process.cwd());
+    const docsPath = `${jsonDirectory}/docs`;
+    const basePath = `${url.pathToFileURL(jsonDirectory).toString()}/docs`;
+    const data = [];
+
+    iterateOverFiles([docsPath], basePath, data, getLatestVersion);
+
+    try {
+        data.forEach(
+            (item) =>
+                (releases[item.platform] = { version: item.version, date: formatDate(item.date) })
+        );
+    } catch (e) {
+        console.log('Error in updating object', e);
+    }
+
+    try {
+        fs.writeFileSync(
+            'releases.js',
+            `exports.releases = releases = ${JSON.stringify(releases)}`,
+            'utf-8'
+        );
+    } catch (e) {
+        console.log('Error in logging data', e);
+    }
+}
+
+module.exports = { getNewReleases };

lib/home/helper.js

@@ -0,0 +1,60 @@
+const fs = require('fs');
+const path = require('path');
+const url = require('url');
+
+const { getPlatform, getHeadings } = require('../algolia/helper');
+
+exports.iterateOverFiles = function iterateOverFiles(
+    folderPaths,
+    basePath,
+    data,
+    getLatestVersion
+) {
+    folderPaths.map((folderPath) => {
+        const contents = fs.readdirSync(folderPath);
+        const subFolders = contents.filter((content) =>
+            fs.lstatSync(path.resolve(folderPath, content)).isDirectory()
+        );
+        const subFolderPaths = subFolders.map((subFolder) => path.resolve(folderPath, subFolder));
+
+        if (subFolderPaths.length)
+            iterateOverFiles(subFolderPaths, basePath, data, getLatestVersion);
+
+        contents.forEach((content) => {
+            if (content.includes('release-notes')) {
+                const objArray = getLatestVersion(content, folderPath, basePath);
+                data.push(objArray);
+            }
+        });
+    });
+};
+
+exports.formatDate = function formatDate(string) {
+    return new Date(string).toLocaleDateString('en-us', {
+        year: 'numeric',
+        month: 'long',
+        day: '2-digit'
+    });
+};
+
+exports.getLatestVersion = function getLatestVersion(content, folderPath, basePath) {
+    let link = url.pathToFileURL(path.resolve(folderPath, content)).toString().split(basePath)[1];
+    const fileContent = fs.readFileSync(path.resolve(folderPath, content)).toString();
+    const platform = getPlatform(link);
+    const headers = getHeadings(fileContent);
+    return {
+        platform: platform === 'JavaScript' ? 'Web' : platform,
+        version:
+            platform === 'JavaScript'
+                ? headers[1]
+                : platform === 'Server-side'
+                ? headers[0]
+                : headers[0].split('-')[0].split(' ')[0],
+        date:
+            platform === 'JavaScript'
+                ? headers[1]
+                : platform === 'Server-side'
+                ? headers[0]
+                : headers[0].split(' - ')[1]
+    };
+};

package.json

@@ -23,9 +23,10 @@
     ],
     "scripts": {
         "dev": "next dev -p 4000",
-        "build": "next build && yarn searchindex",
+        "build": "yarn updatereleases && next build && yarn searchindex",
         "searchindex": "node searchIndex.js",
         "start": "next start",
+        "updatereleases" : "node updateReleases.js",
         "lint": "eslint  \"{components,lib}/**/*.{js,ts,tsx}\"",
         "format": "prettier --write 'components/**/*.{js,jsxts,tsx,scss,css,json}'",
         "postbuild": "next-sitemap"

pages/404.tsx

@@ -71,7 +71,8 @@ const NotFound = () => {
                             mt: '$8',
                             flexWrap: 'wrap',
                             w: '100%',
-                            maxWidth: '600px'
+                            maxWidth: '600px',
+                            mx: 'auto'
                         }}>
                         {updatedList.map((sdk) => (
                             <Badge key={sdk.id} {...sdk} />

releases.js

@@ -1,40 +1,8 @@
-const PLATFORM_WEB = 'Web';
-const PLATFORM_SERVER = 'Server';
-const PLATFORM_IOS = 'iOS';
-const PLATFORM_ANDROID = 'Android';
-const PLATFORM_REACT_NATIVE = 'React Native';
-const PLATFORM_FLUTTER = 'Flutter';
-
-
-export const releases = [
-    {
-        platform: PLATFORM_ANDROID,
-        version: 'v2.5.7',
-        date: 'January 20, 2023'
-    },
-    {
-        platform: PLATFORM_IOS,
-        version: '0.6.1',
-        date: 'January 19, 2023'
-    },
-    {
-        platform: PLATFORM_REACT_NATIVE,
-        version: '1.1.1',
-        date: 'December 22, 2022'
-    },
-    {
-        platform: PLATFORM_WEB,
-        version: '2023-02-03',
-        date: 'February 02, 2023'
-    },
-    {
-        platform: PLATFORM_FLUTTER,
-        version: '1.3.0',
-        date: 'February 01, 2023'
-    },
-    {
-        platform: PLATFORM_SERVER,
-        version: '2023-01-23',
-        date: 'January 23, 2023'
-    }
-];
+exports.releases = releases = {
+    Android: { version: 'v2.5.7', date: 'January 20, 2023' },
+    iOS: { version: '0.6.3', date: 'February 07, 2023' },
+    'React Native': { version: '1.1.1', date: 'December 22, 2022' },
+    Web: { version: '2023-02-03', date: 'February 02, 2023' },
+    Flutter: { version: '1.3.0', date: 'February 01, 2023' },
+    'Server-side': { version: '2023-01-31', date: 'January 31, 2023' }
+};

updateReleases.js

@@ -0,0 +1,3 @@
+const { getNewReleases } = require('./lib/getNewReleases');
+
+getNewReleases();