From c0dba00f57df55518e66363a7ff9666f8e095a1c Mon Sep 17 00:00:00 2001
From: Steve Paul <steveebenezer@protonmail.com>
Date: Mon, 11 Dec 2023 01:15:13 +0530
Subject: [PATCH] Refactor one section to parse data dynamically

---
 src/data/tools.json   | 158 ++++++++++++++++++++++++++++++++++++++++++
 src/pages/index.astro |  83 +++-------------------
 2 files changed, 169 insertions(+), 72 deletions(-)
 create mode 100644 src/data/tools.json

diff --git a/src/data/tools.json b/src/data/tools.json
new file mode 100644
index 0000000..393c573
--- /dev/null
+++ b/src/data/tools.json
@@ -0,0 +1,158 @@
+{
+  "tools": [
+    {
+      "title": "&#127899; Audio",
+      "content": [
+        {
+          "title": "Adobe Podcast",
+          "body": "Audio recording & editing.",
+          "tag": "Beta, Free",
+          "url": "https://podcast.adobe.com/?ref=riseofmachine.com"
+        },
+        {
+          "title": "Altered",
+          "body": "Change your voice to AI voices.",
+          "tag": "Freemium",
+          "url": "https://www.altered.ai/?ref=riseofmachine.com"
+        },
+        {
+          "title": "AudioStrip",
+          "body": "Split vocals from backing music.",
+          "tag": "Freemium",
+          "url": "https://www.audiostrip.co.uk/?ref=riseofmachine.com"
+        },
+        {
+          "title": "Beatoven",
+          "body": "Create customisable royalty free music.",
+          "tag": "Freemium",
+          "url": "https://www.beatoven.ai/?ref=riseofmachine.com"
+        },
+        {
+          "title": "BlogAudio",
+          "body": "Convert text to high quality audio speech.",
+          "tag": "Starting at $16/mo",
+          "url": "https://blogaudio.co/?ref=riseofmachine.com"
+        },
+        {
+          "title": "Cleanvoice",
+          "body": "Removes filler sounds, stuttering & mouth sounds.",
+          "tag": "Pay-as-you-go",
+          "url": "https://cleanvoice.ai/?ref=riseofmachine.com"
+        },
+        {
+          "title": "Kits AI",
+          "body": "AI voice generation toolkit.",
+          "tag": "Freemium",
+          "url": "https://app.kits.ai/?ref=riseofmachine.com"
+        },
+        {
+          "title": "Krisp",
+          "body": "Voice clarity & meeting assistant.",
+          "tag": "Freemium",
+          "url": "https://krisp.ai/?ref=riseofmachine.com"
+        },
+        {
+          "title": "Lalal",
+          "body": "Split vocal & instrumental tracks.",
+          "tag": "$18 one-time fee",
+          "url": "https://www.lalal.ai/?ref=riseofmachine.com"
+        },
+        {
+          "title": "Podcastle",
+          "body": "Record, edit, transcribe & export content.",
+          "tag": "Freemium",
+          "url": "https://podcastle.ai/?ref=riseofmachine.com"
+        },
+        {
+          "title": "Stable Audio",
+          "body": "Create music with AI.",
+          "tag": "Freemium",
+          "url": "https://www.stableaudio.com/?ref=riseofmachine.com"
+        },
+        {
+          "title": "Voicemod",
+          "body": "Real-time AI voice changing & custom sound effects.",
+          "tag": "Freemium",
+          "url": "https://www.voicemod.net/?ref=riseofmachine.com"
+        }
+      ]
+    },
+    {
+      "title": "&#127899; Audio",
+      "content": [
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        },
+        {
+          "title": "",
+          "body": "",
+          "tag": "",
+          "url": ""
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a67f6bb..2b0c0c3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,9 @@
 ---
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
+
+import data from "../data/tools.json";
+
 import "@new-ui/colors";
 import "@new-ui/typography";
 import "@new-ui/effects";
@@ -15,78 +18,14 @@ import "@new-ui/spacings";
     <section>
       <h6 class="separator nu-c-h6">&#127899; Audio</h6>
       <ul role="list" class="link-card-grid">
-        <Card
-          href="https://podcast.adobe.com/?ref=riseofmachine.com"
-          title="Adobe Podcast"
-          body="Audio recording & editing."
-          tag="Beta, Free"
-        />
-        <Card
-          href="https://www.altered.ai/?ref=riseofmachine.com"
-          title="Altered"
-          body="Change your voice to AI voices."
-          tag="Freemium"
-        />
-        <Card
-          href="https://www.audiostrip.co.uk/?ref=riseofmachine.com"
-          title="AudioStrip"
-          body="Split vocals from backing music."
-          tag="Freemium"
-        />
-        <Card
-          href="https://www.beatoven.ai/?ref=riseofmachine.com"
-          title="Beatoven"
-          body="Create customisable royalty free music."
-          tag="Freemium"
-        />
-        <Card
-          href="https://blogaudio.co/?ref=riseofmachine.com"
-          title="BlogAudio"
-          body="Convert text to high quality audio speech."
-          tag="Starting at $16/mo"
-        />
-        <Card
-          href="https://cleanvoice.ai/?ref=riseofmachine.com"
-          title="Cleanvoice"
-          body="Removes filler sounds, stuttering & mouth sounds."
-          tag="Pay-as-you-go"
-        />
-        <Card
-          href="https://app.kits.ai/?ref=riseofmachine.com"
-          title="Kits AI"
-          body="AI voice generation toolkit."
-          tag="Freemium"
-        />
-        <Card
-          href="https://krisp.ai/?ref=riseofmachine.com"
-          title="Krisp"
-          body="Voice clarity & meeting assistant."
-          tag="Freemium"
-        />
-        <Card
-          href="https://www.lalal.ai/?ref=riseofmachine.com"
-          title="Lalal"
-          body="Split vocal & instrumental tracks."
-          tag="$18 one-time fee"
-        />
-        <Card
-          href="https://podcastle.ai/?ref=riseofmachine.com"
-          title="Podcastle"
-          body="Record, edit, transcribe & export content."
-          tag="Freemium"
-        />
-        <Card
-          href="https://www.stableaudio.com/?ref=riseofmachine.com"
-          title="Stable Audio"
-          body="Create music with AI."
-          tag="Freemium"
-        />
-        <Card
-          href="https://www.voicemod.net/?ref=riseofmachine.com"
-          title="Voicemod"
-          body="Real-time AI voice changing & custom sound effects."
-          tag="Freemium"
-        />
+				{data.tools[0].content.map(({url, title, body, tag}) => {
+					return <Card
+						href={url}
+						title={title}
+						body={body}
+						tag={tag}
+					/>
+				})}
       </ul>
     </section>